添加短视频

.idea/deploymentTargetSelector.xml

@@ -4,10 +4,10 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-06-21T20:13:00.862985Z">
+        <DropdownSelection timestamp="2024-07-11T19:09:15.409616Z">
           <Target type="DEFAULT_BOOT">
             <handle>
-              <DeviceId pluginId="PhysicalDevice" identifier="serial=R5CX21KR1NR" />
+              <DeviceId pluginId="LocalEmulator" identifier="path=/Users/kevinlinpr/.android/avd/Pixel_8_Pro_API_34.avd" />
             </handle>
           </Target>
         </DropdownSelection>

app/build.gradle.kts

@@ -67,7 +67,8 @@ dependencies {
     implementation(libs.androidx.media3.exoplayer) // 核心播放器
     implementation(libs.androidx.media3.ui)      // UI组件（可选）
     implementation(libs.androidx.media3.session)
-    implementation(libs.androidx.activity.ktx)   // 用于媒体会话（可选）
+    implementation(libs.androidx.activity.ktx)
+    implementation(libs.androidx.lifecycle.common.jvm)   // 用于媒体会话（可选）
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/com/aiosman/riderpro/MainActivity.kt

@@ -189,8 +189,11 @@ fun Navigation(){
 
 @Composable
 fun Home(){
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
     Column (
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
     ){
@@ -201,8 +204,11 @@ fun Home(){
 
 @Composable
 fun Street(){
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
     Column (
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
@@ -212,9 +218,12 @@ fun Street(){
 
 @Composable
 fun Add(){
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
     Column (
         modifier = Modifier
-            .fillMaxSize()
+            .fillMaxSize().padding(bottom = (56.dp + navigationBarHeight))
             .background(Color.Black),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
@@ -225,8 +234,11 @@ fun Add(){
 
 @Composable
 fun Video(){
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
     Column (
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Top,
         horizontalAlignment = Alignment.CenterHorizontally,
     ){
@@ -236,8 +248,11 @@ fun Video(){
 
 @Composable
 fun Message(){
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
     Column (
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Top,
         horizontalAlignment = Alignment.CenterHorizontally,
     ){
@@ -247,8 +262,11 @@ fun Message(){
 
 @Composable
 fun Profile(){
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
     Column (
-        modifier = Modifier.fillMaxSize(),
+        modifier = Modifier.fillMaxSize().padding(bottom = (56.dp + navigationBarHeight)),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
         ){

app/src/main/java/com/aiosman/riderpro/NavigationItem.kt

@@ -17,7 +17,7 @@ sealed class NavigationItem(val route:String, val icon: @Composable () -> ImageV
     data object Add : NavigationItem("Add",
         { ImageVector.vectorResource(R.drawable.rider_pro_moment_add) })
     data object Message : NavigationItem("Message",
-        { ImageVector.vectorResource(R.drawable.rider_pro_message) })
+        { ImageVector.vectorResource(R.drawable.rider_pro_video) })
     data object Profile : NavigationItem("Profile",
         { ImageVector.vectorResource(R.drawable.rider_pro_profile) })
 }

app/src/main/java/com/aiosman/riderpro/ShortVideo.kt

@@ -8,9 +8,10 @@ import com.aiosman.riderpro.ShortViewCompose
 import com.aiosman.riderpro.ui.theme.RiderProTheme
 
 val videoUrls = listOf(
-    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+    "https://api.aiosman.com/video/1.mp4",
-    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+    "https://api.aiosman.com/video/2.mp4",
-    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4"
+    "https://api.aiosman.com/video/3.mp4",
+    "https://api.aiosman.com/video/4.mp4"
 )
 
 @Composable

app/src/main/java/com/aiosman/riderpro/ShortViewCompose.kt

@@ -2,23 +2,45 @@ package com.aiosman.riderpro
 
 import android.app.Activity
 import android.net.Uri
+import android.view.Gravity
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import androidx.annotation.DrawableRes
 import androidx.annotation.OptIn
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.media3.common.C
 import androidx.media3.common.MediaItem
@@ -111,7 +133,7 @@ fun VideoPlayer(
     val scope= rememberCoroutineScope()
 
     val exoPlayer = remember {
-        SimpleExoPlayer.Builder(context)
+        ExoPlayer.Builder(context)
             .build()
             .apply {
                 val dataSourceFactory: DataSource.Factory = DefaultDataSourceFactory(
@@ -130,42 +152,123 @@ fun VideoPlayer(
     } else {
         exoPlayer.pause()
     }
-    exoPlayer.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING
+    exoPlayer.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT
     exoPlayer.repeatMode = Player.REPEAT_MODE_ONE
-    DisposableEffect(
+    Box(modifier = Modifier.fillMaxSize(),
-        Box(modifier = Modifier.fillMaxSize()){
+        contentAlignment = Alignment.TopCenter) {
-            AndroidView(factory = {
+        var playerView by remember { mutableStateOf<PlayerView?>(null) } // Store reference to PlayerView
-                PlayerView(context).apply {
-                    hideController()
-                    useController = false
-                    resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
 
-                    player = exoPlayer
+        AndroidView(
-                    layoutParams = FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+            factory = { context ->
+                // 创建一个 FrameLayout 作为容器
+                FrameLayout(context).apply {
+                    // 设置背景颜色为黑色，用于显示黑边
+                    setBackgroundColor(Color.Black.toArgb())
+
+                    // 创建 PlayerView 并添加到 FrameLayout 中
+                    val view = PlayerView(context).apply {
+                        hideController()
+                        useController = false
+                        player = exoPlayer
+                        resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FILL // 或 RESIZE_MODE_ZOOM
+                        layoutParams = FrameLayout.LayoutParams(
+                            ViewGroup.LayoutParams.MATCH_PARENT,
+                            ViewGroup.LayoutParams.MATCH_PARENT,
+                            Gravity.CENTER
+                        )
+                    }
+                    addView(view)
                 }
-            },modifier = Modifier.noRippleClickable {
+            },
-                pauseIconVisibleState.value=true
+            modifier = Modifier.noRippleClickable {
+                pauseIconVisibleState.value = true
                 exoPlayer.pause()
                 scope.launch {
-                    delay(500)
+                    delay(100)
                     if (exoPlayer.isPlaying) {
                         exoPlayer.pause()
                     } else {
-                        pauseIconVisibleState.value=false
+                        pauseIconVisibleState.value = false
                         exoPlayer.play()
                     }
                 }
-            })
+            }
-            if (pauseIconVisibleState.value)
+        )
-                Icon(imageVector = Icons.Default.PlayArrow, contentDescription = null,
+
-                    modifier = Modifier
+        if (pauseIconVisibleState.value) {
-                        .align(Alignment.Center)
+            Icon(
-                        .size(80.dp))
+                imageVector = Icons.Default.PlayArrow,
+                contentDescription = null,
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(80.dp)
+            )
         }
-    ) {
+
-        onDispose {
+        // Release ExoPlayer when the videoUrl changes or the composable leaves composition
-            exoPlayer.release()
+        DisposableEffect(videoUrl) {
+            onDispose {
+                exoPlayer.release()
+                playerView?.player = null
+                playerView = null // Release the reference to the PlayerView
+            }
         }
+
+
+    }
+    Box(modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.BottomEnd){
+        Column (modifier = Modifier.padding(bottom = 72.dp, end = 12.dp),
+            horizontalAlignment = Alignment.CenterHorizontally){
+            UserAvatar()
+            VideoBtn(icon = R.drawable.rider_pro_video_like, text = "975.9k")
+            VideoBtn(icon = R.drawable.rider_pro_video_comment, text = "1896")
+            VideoBtn(icon = R.drawable.rider_pro_video_favor, text = "234")
+            VideoBtn(icon = R.drawable.rider_pro_video_share, text = "677k")
+        }
+    }
+
+    Box(modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.BottomStart){
+        Column (modifier = Modifier.padding(start = 16.dp, bottom = 16.dp)){
+            Row (modifier = Modifier.padding(bottom = 8.dp).background(color = Color.Gray),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.Start,
+                ){
+                Image(modifier = Modifier.size(20.dp).padding(start = 4.dp, end = 6.dp), painter = painterResource(id = R.drawable.rider_pro_video_location), contentDescription = "")
+                Text(modifier = Modifier.padding(end = 4.dp),text = "USA",fontSize = 12.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold))
+            }
+            Text(text = "@Kevinlinpr",fontSize = 16.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold))
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 4.dp), // 确保Text占用可用宽度
+                text = "Pedro Acosta to join KTM in 2025 on a multi-year deal! \uD83D\uDFE0",
+                fontSize = 16.sp,
+                color = Color.White,
+                style = TextStyle(fontWeight = FontWeight.Bold),
+                overflow = TextOverflow.Ellipsis,  // 超出范围时显示省略号
+                maxLines = 2 // 最多显示两行
+            )
+        }
+    }
+}
+
+@Composable
+fun UserAvatar(){
+    Image(modifier = Modifier.padding(bottom = 16.dp).size(40.dp).border(width = 3.dp, color = Color.White, shape = RoundedCornerShape(40.dp)).clip(
+        RoundedCornerShape(40.dp)
+    ), painter = painterResource(id = R.drawable.default_avatar), contentDescription = "")
+}
+
+@Composable
+fun VideoBtn(@DrawableRes icon: Int, text: String){
+    Column (
+        modifier = Modifier.padding(bottom = 16.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ){
+        Image(modifier = Modifier.size(36.dp), painter = painterResource(id = icon), contentDescription = "")
+        Text(text = text,fontSize = 11.sp, color = Color.White, style = TextStyle(fontWeight = FontWeight.Bold))
     }
 }
 
@@ -177,4 +280,3 @@ fun VideoPlayer(
 
 
 
-

app/src/main/res/drawable/rider_pro_video.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M18.6,3.055C19.007,2.945 19.443,3 19.808,3.208C20.174,3.416 20.439,3.759 20.544,4.16L21.372,7.181C21.43,7.378 21.401,7.591 21.292,7.767C21.19,7.949 21.017,8.083 20.813,8.139L9.715,11.052L21.202,11.052C21.643,11.052 22,11.402 22,11.834L22,20.436C22,21.3 21.286,22 20.405,22L4.45,22C3.569,22 2.855,21.3 2.855,20.436L2.855,11.941L2.057,9.018C1.944,8.618 2,8.19 2.212,7.83C2.424,7.47 2.774,7.208 3.184,7.102ZM11.536,13C11.391,13 11.265,13.057 11.159,13.17C11.053,13.283 11,13.44 11,13.642L11,18.357C11,18.558 11.053,18.716 11.159,18.829C11.265,18.943 11.391,19 11.536,19C11.606,19 11.676,18.988 11.746,18.963C11.815,18.938 11.893,18.898 11.98,18.844L15.574,16.606C15.713,16.518 15.819,16.428 15.891,16.336C15.964,16.243 16,16.131 16,15.998C16,15.867 15.964,15.755 15.891,15.662C15.819,15.569 15.713,15.48 15.574,15.394L11.98,13.154C11.893,13.1 11.815,13.061 11.746,13.036C11.676,13.012 11.606,13 11.536,13ZM13.614,5.978L6.684,7.797L9.605,9.458L16.546,7.64L13.614,5.978Z"
+      android:strokeWidth="1"
+      android:fillColor="#FFFFFF"
+      android:fillType="nonZero"
+      android:strokeColor="#00000000"/>
+</vector>

app/src/main/res/drawable/rider_pro_video_comment.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="33dp"
+    android:viewportWidth="32"
+    android:viewportHeight="33">
+  <path
+      android:pathData="M24.464,7.536C28.736,11.809 29.161,18.592 25.456,23.365C21.815,28.053 15.306,29.36 10.15,26.483L9.875,26.325L5.725,27.5C5.379,27.601 5.005,27.506 4.75,27.25C4.494,26.995 4.399,26.621 4.5,26.275L5.675,22.125C2.594,16.928 3.863,10.25 8.635,6.544C13.408,2.839 20.191,3.264 24.464,7.536ZM11.333,13.333C10.229,13.333 9.333,14.229 9.333,15.333C9.333,16.438 10.229,17.333 11.333,17.333C12.438,17.333 13.333,16.438 13.333,15.333C13.333,14.229 12.438,13.333 11.333,13.333ZM20.667,13.333C19.562,13.333 18.667,14.229 18.667,15.333C18.667,16.438 19.562,17.333 20.667,17.333C21.771,17.333 22.667,16.438 22.667,15.333C22.667,14.229 21.771,13.333 20.667,13.333Z"
+      android:strokeAlpha="0.90000004"
+      android:strokeWidth="1"
+      android:fillColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"
+      android:fillAlpha="0.90000004"/>
+</vector>

app/src/main/res/drawable/rider_pro_video_favor.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="36dp"
+    android:height="36dp"
+    android:viewportWidth="36"
+    android:viewportHeight="36">
+  <path
+      android:pathData="M18.55,25.837L24.85,29.837C25.663,30.35 26.663,29.587 26.425,28.65L24.6,21.475C24.499,21.069 24.64,20.641 24.962,20.375L30.612,15.663C31.35,15.05 30.975,13.813 30.013,13.75L22.638,13.275C22.226,13.251 21.868,12.986 21.725,12.6L18.975,5.675C18.826,5.265 18.436,4.992 18,4.992C17.564,4.992 17.174,5.265 17.025,5.675L14.275,12.6C14.132,12.986 13.774,13.251 13.363,13.275L5.988,13.75C5.025,13.813 4.65,15.05 5.387,15.663L11.038,20.375C11.36,20.641 11.501,21.069 11.4,21.475L9.712,28.125C9.425,29.25 10.625,30.163 11.587,29.55L17.45,25.837C17.786,25.624 18.214,25.624 18.55,25.837Z"
+      android:strokeAlpha="0.90000004"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#FFFFFF"
+      android:strokeColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.90000004"
+      android:strokeLineCap="round"/>
+</vector>

app/src/main/res/drawable/rider_pro_video_like.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="36dp"
+    android:height="33dp"
+    android:viewportWidth="36"
+    android:viewportHeight="33">
+  <path
+      android:pathData="M18,27C18,27 5.5,20 5.5,11.5C5.5,8.402 7.687,5.734 10.725,5.126C13.764,4.519 16.808,6.14 18,9L18,9C19.192,6.14 22.236,4.519 25.275,5.126C28.313,5.734 30.5,8.402 30.5,11.5C30.5,20 18,27 18,27Z"
+      android:strokeAlpha="0.90000004"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#FFFFFF"
+      android:strokeColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.90000004"
+      android:strokeLineCap="round"/>
+</vector>

app/src/main/res/drawable/rider_pro_video_location.xml

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M0,0h20v20h-20z"
+      android:strokeWidth="1"
+      android:fillColor="#3F88C5"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M10,2.5C13.222,2.5 15.833,5.247 15.833,8.636C15.833,12.005 12.927,15.035 11.217,16.525L10.944,16.759C10.379,17.234 10,17.5 10,17.5C10,17.5 4.167,13.409 4.167,8.636C4.167,5.247 6.778,2.5 10,2.5ZM10,5.833C8.619,5.833 7.5,6.953 7.5,8.333C7.5,9.714 8.619,10.833 10,10.833C11.381,10.833 12.5,9.714 12.5,8.333C12.5,6.953 11.381,5.833 10,5.833Z"
+      android:strokeWidth="1"
+      android:fillColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>

app/src/main/res/drawable/rider_pro_video_share.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="34dp"
+    android:height="35dp"
+    android:viewportWidth="34"
+    android:viewportHeight="35">
+  <path
+      android:pathData="M29.433,4.567C29.933,5.068 30.121,5.801 29.925,6.471L23.702,28.565C23.485,29.357 22.796,29.928 21.978,29.994C21.159,30.059 20.388,29.605 20.055,28.872L15.26,18.739L5.142,13.952C4.453,13.638 4.012,12.957 4,12.21L4.006,12.022C4.072,11.204 4.643,10.515 5.427,10.3L27.52,4.078C28.199,3.879 28.932,4.067 29.433,4.567ZM22.128,11.872C21.738,11.481 21.104,11.481 20.714,11.872L15.626,16.96C15.236,17.35 15.236,17.983 15.626,18.374C16.017,18.764 16.65,18.764 17.04,18.374L22.128,13.286C22.519,12.896 22.519,12.262 22.128,11.872Z"
+      android:strokeAlpha="0.90000004"
+      android:strokeWidth="1"
+      android:fillColor="#FFFFFF"
+      android:fillType="nonZero"
+      android:strokeColor="#00000000"
+      android:fillAlpha="0.90000004"/>
+</vector>

gradle/libs.versions.toml

@@ -15,6 +15,7 @@ media3Exoplayer = "1.3.1"
 navigationCompose = "2.7.7"
 pagingRuntime = "3.3.0"
 activityKtx = "1.9.0"
+lifecycleCommonJvm = "2.8.2"
 
 [libraries]
 accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanistSystemuicontroller" }
@@ -41,6 +42,7 @@ androidx-material3 = { group = "androidx.compose.material3", name = "material3"
 androidx-material3-android = { group = "androidx.compose.material3", name = "material3-android", version.ref = "material3Android" }
 maps-compose = { module = "com.google.maps.android:maps-compose", version.ref = "mapsCompose" }
 androidx-activity-ktx = { group = "androidx.activity", name = "activity-ktx", version.ref = "activityKtx" }
+androidx-lifecycle-common-jvm = { group = "androidx.lifecycle", name = "lifecycle-common-jvm", version.ref = "lifecycleCommonJvm" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }