feat: add background to video player

snuhcs-course · Dec 9, 2023 · 2024000 · 2024000
1 parent 8e7ccda
commit 2024000
Showing 1 changed file with 75 additions and 73 deletions.
diff --git a/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt b/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt
@@ -45,6 +45,7 @@ import androidx.compose.ui.viewinterop.AndroidView
 import androidx.media3.common.MediaItem
 import androidx.media3.common.Player
 import androidx.media3.exoplayer.ExoPlayer
+import androidx.media3.ui.AspectRatioFrameLayout.RESIZE_MODE_FILL
 import androidx.media3.ui.PlayerView
 import com.goliath.emojihub.LocalNavController
 import com.goliath.emojihub.extensions.toEmoji
@@ -152,93 +153,94 @@ fun TransformVideoPage(
                         setShowRewindButton(false)
                         setShowNextButton(false)
                         setShowPreviousButton(false)
+                        resizeMode = RESIZE_MODE_FILL
                         player = exoPlayer
                     }
                 },
                 modifier = Modifier.padding(it).fillMaxSize()
             )
 
             if (createdEmojiList.isNotEmpty()) {
-                Column(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .padding(horizontal = 16.dp),
-                    verticalArrangement = Arrangement.Center,
-                    horizontalAlignment = Alignment.CenterHorizontally
-                ) {
-                    Text(
-                        text = "영상과 가장 잘 어울리는\n이모지를 골라주세요",
-                        color = com.goliath.emojihub.ui.theme.Color.White,
-                        fontSize = 14.sp,
-                        textAlign = TextAlign.Center
-                    )
-                    Spacer(modifier = Modifier.height(40.dp))
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically,
-                        horizontalArrangement = Arrangement.SpaceBetween,
-                        modifier = Modifier.fillMaxWidth()
-                    ){
-                        if (currentEmojiIndex > 0) {
-                            IconButton(
-                                onClick = {
-                                    currentEmojiIndex = (currentEmojiIndex - 1 + createdEmojiList.size) % createdEmojiList.size
-                                },
-                                modifier = Modifier.weight(1f)
-                            ) {
-                                Icon(
-                                    imageVector = Icons.Default.NavigateBefore,
-                                    contentDescription = "Previous emoji",
-                                    tint = Color.White,
-                                    modifier = Modifier.size(48.dp)
-                                )
+                Box(Modifier.background(Color.Black.copy(alpha = 0.5f))) {
+                    Column(
+                        modifier = Modifier.fillMaxSize()
+                            .padding(horizontal = 16.dp)
+                            .padding(bottom = 48.dp),
+                        verticalArrangement = Arrangement.Center,
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Text(
+                            text = "영상과 가장 잘 어울리는\n이모지를 골라주세요",
+                            color = com.goliath.emojihub.ui.theme.Color.White,
+                            fontSize = 14.sp,
+                            textAlign = TextAlign.Center
+                        )
+                        Spacer(modifier = Modifier.height(40.dp))
+                        Row(
+                            verticalAlignment = Alignment.CenterVertically,
+                            horizontalArrangement = Arrangement.SpaceBetween,
+                            modifier = Modifier.fillMaxWidth()
+                        ){
+                            if (currentEmojiIndex > 0) {
+                                IconButton(
+                                    onClick = {
+                                        currentEmojiIndex = (currentEmojiIndex - 1 + createdEmojiList.size) % createdEmojiList.size
+                                    },
+                                    modifier = Modifier.weight(1f)
+                                ) {
+                                    Icon(
+                                        imageVector = Icons.Default.NavigateBefore,
+                                        contentDescription = "Previous emoji",
+                                        tint = Color.White,
+                                        modifier = Modifier.size(48.dp)
+                                    )
+                                }
+                            } else {
+                                Spacer(modifier = Modifier.weight(1f))
                             }
-                        } else {
-                            Spacer(modifier = Modifier.weight(1f))
-                        }
-
-                        Box(
-                            contentAlignment = Alignment.Center,
-                            modifier = Modifier
-                                .weight(1f)
-                                .size(120.dp)
-                                .background(
-                                    color = Color.White.copy(alpha = 0.5f),
-                                    shape = RoundedCornerShape(12.dp)
-                                )
-                        ) {
-                            Text(
-                                text = createdEmojiList[currentEmojiIndex].emojiUnicode.toEmoji(),
-                                fontSize = 60.sp
-                            )
-                        }
 
-                        if (currentEmojiIndex < createdEmojiList.size - 1) {
-                            IconButton(
-                                onClick = {
-                                    currentEmojiIndex = (currentEmojiIndex + 1) % createdEmojiList.size
-                                },
-                                modifier = Modifier.weight(1f)
+                            Box(
+                                contentAlignment = Alignment.Center,
+                                modifier = Modifier.weight(1f).size(120.dp)
+                                    .background(
+                                        color = Color.White.copy(alpha = 0.5f),
+                                        shape = RoundedCornerShape(12.dp)
+                                    )
                             ) {
-                                Icon(
-                                    imageVector = Icons.Default.NavigateNext,
-                                    contentDescription = "Next emoji",
-                                    tint = Color.White,
-                                    modifier = Modifier.size(48.dp)
+                                Text(
+                                    text = createdEmojiList[currentEmojiIndex].emojiUnicode.toEmoji(),
+                                    fontSize = 60.sp
                                 )
                             }
-                        } else {
-                            Spacer(modifier = Modifier.weight(1f))
+
+                            if (currentEmojiIndex < createdEmojiList.size - 1) {
+                                IconButton(
+                                    onClick = {
+                                        currentEmojiIndex = (currentEmojiIndex + 1) % createdEmojiList.size
+                                    },
+                                    modifier = Modifier.weight(1f)
+                                ) {
+                                    Icon(
+                                        imageVector = Icons.Default.NavigateNext,
+                                        contentDescription = "Next emoji",
+                                        tint = Color.White,
+                                        modifier = Modifier.size(48.dp)
+                                    )
+                                }
+                            } else {
+                                Spacer(modifier = Modifier.weight(1f))
+                            }
                         }
-                    }
 
-                    Spacer(modifier = Modifier.height(15.dp))
-                    Text(
-                        text = createdEmojiList[currentEmojiIndex].emojiClassName,
-                        fontSize = 15.sp,
-                        fontWeight = FontWeight.SemiBold,
-                        modifier = Modifier.padding(horizontal = 16.dp),
-                        color = Color.White
-                    )
+                        Spacer(modifier = Modifier.height(15.dp))
+                        Text(
+                            text = createdEmojiList[currentEmojiIndex].emojiClassName,
+                            fontSize = 15.sp,
+                            fontWeight = FontWeight.SemiBold,
+                            modifier = Modifier.padding(horizontal = 16.dp),
+                            color = Color.White
+                        )
+                    }
                 }
             }