From 8e7ccda9b675a1df0f0662b71e868adcc2f08039 Mon Sep 17 00:00:00 2001 From: peng-u-0807 Date: Sat, 9 Dec 2023 21:11:35 +0900 Subject: [PATCH 1/5] fix: enable auto-play and remove buttons --- .../emojihub/views/TransformVideoPage.kt | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 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 index 343ed340..d1927f88 100644 --- a/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt +++ b/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt @@ -29,10 +29,10 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.DisposableEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableIntStateOf -import androidx.compose.runtime.setValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -55,6 +55,7 @@ import kotlinx.coroutines.launch import java.io.File @OptIn(ExperimentalMaterial3Api::class) +@androidx.media3.common.util.UnstableApi @Composable fun TransformVideoPage( emojiViewModel: EmojiViewModel, @@ -69,6 +70,7 @@ fun TransformVideoPage( ExoPlayer.Builder(context).build().apply { setMediaItem(MediaItem.fromUri(emojiViewModel.videoUri)) repeatMode = Player.REPEAT_MODE_ALL + playWhenReady = true prepare() } } @@ -142,18 +144,18 @@ fun TransformVideoPage( ) } ) { it -> - Box( - modifier = Modifier.fillMaxSize() - ) { + Box(Modifier.fillMaxSize()) { AndroidView( factory = { PlayerView(it).apply { + setShowFastForwardButton(false) + setShowRewindButton(false) + setShowNextButton(false) + setShowPreviousButton(false) player = exoPlayer } }, - modifier = Modifier - .padding(it) - .fillMaxSize() + modifier = Modifier.padding(it).fillMaxSize() ) if (createdEmojiList.isNotEmpty()) { @@ -171,15 +173,15 @@ fun TransformVideoPage( 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 + if (currentEmojiIndex > 0) { + IconButton( + onClick = { + currentEmojiIndex = (currentEmojiIndex - 1 + createdEmojiList.size) % createdEmojiList.size }, modifier = Modifier.weight(1f) ) { @@ -209,9 +211,11 @@ fun TransformVideoPage( fontSize = 60.sp ) } - if(currentEmojiIndex < createdEmojiList.size - 1) { - IconButton(onClick = { - currentEmojiIndex = (currentEmojiIndex + 1) % createdEmojiList.size + + if (currentEmojiIndex < createdEmojiList.size - 1) { + IconButton( + onClick = { + currentEmojiIndex = (currentEmojiIndex + 1) % createdEmojiList.size }, modifier = Modifier.weight(1f) ) { @@ -233,7 +237,7 @@ fun TransformVideoPage( fontSize = 15.sp, fontWeight = FontWeight.SemiBold, modifier = Modifier.padding(horizontal = 16.dp), - color = com.goliath.emojihub.ui.theme.Color.White + color = Color.White ) } } From 2024000c8d93c1bc88e3960ba789811415bc36f2 Mon Sep 17 00:00:00 2001 From: peng-u-0807 Date: Sat, 9 Dec 2023 21:31:26 +0900 Subject: [PATCH 2/5] feat: add background to video player --- .../emojihub/views/TransformVideoPage.kt | 148 +++++++++--------- 1 file changed, 75 insertions(+), 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 index d1927f88..fa386541 100644 --- 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,6 +153,7 @@ fun TransformVideoPage( setShowRewindButton(false) setShowNextButton(false) setShowPreviousButton(false) + resizeMode = RESIZE_MODE_FILL player = exoPlayer } }, @@ -159,86 +161,86 @@ fun TransformVideoPage( ) 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 + ) + } } } From d8746f95b0966eb7a17e8351a9c41eeba1422694 Mon Sep 17 00:00:00 2001 From: peng-u-0807 Date: Sat, 9 Dec 2023 21:49:04 +0900 Subject: [PATCH 3/5] fix: suppress lint --- .../main/java/com/goliath/emojihub/views/TransformVideoPage.kt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index fa386541..e38ad86d 100644 --- a/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt +++ b/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt @@ -1,5 +1,6 @@ package com.goliath.emojihub.views +import android.annotation.SuppressLint import android.provider.MediaStore import android.util.Log import androidx.compose.foundation.background @@ -55,8 +56,8 @@ import com.goliath.emojihub.views.components.CustomDialog import kotlinx.coroutines.launch import java.io.File +@SuppressLint("UnsafeOptInUsageError") @OptIn(ExperimentalMaterial3Api::class) -@androidx.media3.common.util.UnstableApi @Composable fun TransformVideoPage( emojiViewModel: EmojiViewModel, From b26447823b71da0421b1563630a8e913a12745c7 Mon Sep 17 00:00:00 2001 From: peng-u-0807 Date: Sat, 9 Dec 2023 21:57:49 +0900 Subject: [PATCH 4/5] fix: change `CustomBottomSheet` button UI --- .../views/components/CustomBottomSheet.kt | 57 ++++--------------- 1 file changed, 10 insertions(+), 47 deletions(-) diff --git a/android/app/src/main/java/com/goliath/emojihub/views/components/CustomBottomSheet.kt b/android/app/src/main/java/com/goliath/emojihub/views/components/CustomBottomSheet.kt index b5938eb8..f6df3576 100644 --- a/android/app/src/main/java/com/goliath/emojihub/views/components/CustomBottomSheet.kt +++ b/android/app/src/main/java/com/goliath/emojihub/views/components/CustomBottomSheet.kt @@ -3,17 +3,11 @@ package com.goliath.emojihub.views.components import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.LazyVerticalGrid -import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.ButtonDefaults -import androidx.compose.material.OutlinedButton -import androidx.compose.material.Text import androidx.compose.material3.Divider import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ModalBottomSheet @@ -26,8 +20,6 @@ import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.paging.compose.collectAsLazyPagingItems @@ -37,7 +29,6 @@ import com.goliath.emojihub.NavigationDestination import com.goliath.emojihub.extensions.toEmoji import com.goliath.emojihub.models.Emoji import com.goliath.emojihub.ui.theme.Color.EmojiHubDividerColor -import com.goliath.emojihub.ui.theme.Color.LightGray import com.goliath.emojihub.ui.theme.Color.White import com.goliath.emojihub.viewmodels.EmojiViewModel import com.goliath.emojihub.viewmodels.PostViewModel @@ -104,7 +95,7 @@ fun CustomBottomSheet ( EmojiClassFilterRow( emojiClass = emojiUnicodeFilters, emojiCounts = emojiCounts, - onEmojiClassSelected = { selectedEmojiClass = it} + onEmojiClassSelected = { selectedEmojiClass = it } ) { items(emojiUnicodeFilters.size) { unicode -> EmojiClassFilterButton( @@ -125,54 +116,27 @@ fun CustomBottomSheet ( Column(Modifier.padding(horizontal = 16.dp)) { Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.SpaceBetween, + horizontalArrangement = Arrangement.Start, verticalAlignment = Alignment.CenterVertically ) { - OutlinedButton( - onClick = { - displayMyCreatedEmojis = true - }, - modifier = Modifier - .weight(1f) - .padding(end = 8.dp), - shape = RoundedCornerShape(50.dp), - colors = ButtonDefaults.buttonColors( - backgroundColor = if (displayMyCreatedEmojis) LightGray else White, - contentColor = Color.Black - ) + EmojiClassFilterButton( + text = "내가 만든 이모지", + isSelected = displayMyCreatedEmojis ) { - Text( - text = "내가 만든 이모지", - fontWeight = FontWeight.Bold - ) + displayMyCreatedEmojis = true } - OutlinedButton( - onClick = { - displayMyCreatedEmojis = false - }, - modifier = Modifier - .weight(1f) - .padding(start = 8.dp), - shape = RoundedCornerShape(50.dp), - colors = ButtonDefaults.buttonColors( - backgroundColor = if (!displayMyCreatedEmojis) LightGray else White, - contentColor = Color.Black - ) + EmojiClassFilterButton( + text = "저장된 이모지", + isSelected = !displayMyCreatedEmojis ) { - Text( - text = "저장된 이모지", - fontWeight = FontWeight.Bold - ) + displayMyCreatedEmojis = false } } } } } - Divider(color = EmojiHubDividerColor, thickness = 0.5.dp) - Spacer(modifier = Modifier.height(16.dp)) - Column(Modifier.padding(horizontal = 16.dp)) { LazyVerticalGrid( columns = GridCells.Fixed(2), @@ -182,7 +146,6 @@ fun CustomBottomSheet ( ) { when (bottomSheetContent) { BottomSheetContent.EMPTY -> {} - BottomSheetContent.VIEW_REACTION -> { items(reactionList.itemCount) { index -> reactionList[index]?.let { From b6ac27e5667ef4b714355386defaeaa6698808c7 Mon Sep 17 00:00:00 2001 From: peng-u-0807 Date: Sat, 9 Dec 2023 22:05:46 +0900 Subject: [PATCH 5/5] feat: apply VideoPlayer UI change to `PlayEmojiView` --- .../java/com/goliath/emojihub/views/TransformVideoPage.kt | 4 ++-- .../com/goliath/emojihub/views/components/PlayEmojiView.kt | 7 ++++++- 2 files changed, 8 insertions(+), 3 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 index e38ad86d..c2355be6 100644 --- a/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt +++ b/android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt @@ -46,7 +46,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.AspectRatioFrameLayout.RESIZE_MODE_ZOOM import androidx.media3.ui.PlayerView import com.goliath.emojihub.LocalNavController import com.goliath.emojihub.extensions.toEmoji @@ -154,7 +154,7 @@ fun TransformVideoPage( setShowRewindButton(false) setShowNextButton(false) setShowPreviousButton(false) - resizeMode = RESIZE_MODE_FILL + resizeMode = RESIZE_MODE_ZOOM player = exoPlayer } }, diff --git a/android/app/src/main/java/com/goliath/emojihub/views/components/PlayEmojiView.kt b/android/app/src/main/java/com/goliath/emojihub/views/components/PlayEmojiView.kt index 0503acd9..80d0513c 100644 --- a/android/app/src/main/java/com/goliath/emojihub/views/components/PlayEmojiView.kt +++ b/android/app/src/main/java/com/goliath/emojihub/views/components/PlayEmojiView.kt @@ -79,6 +79,7 @@ fun PlayEmojiView( ExoPlayer.Builder(context).build().apply { setMediaItem(MediaItem.fromUri(currentEmoji.videoLink)) repeatMode = Player.REPEAT_MODE_ALL + playWhenReady = true prepare() } } @@ -104,7 +105,11 @@ fun PlayEmojiView( modifier = Modifier.fillMaxSize(), factory = { PlayerView(it).apply { - this.resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FILL + setShowFastForwardButton(false) + setShowRewindButton(false) + setShowNextButton(false) + setShowPreviousButton(false) + resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM player = exoPlayer } }