Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor UI changes for TransformVideoPage #128

Merged
merged 5 commits into from
Dec 9, 2023
Merged

Minor UI changes for TransformVideoPage #128

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e7ccda
fix: enable auto-play and remove buttons
peng-u-0807 Dec 9, 2023
2024000
feat: add background to video player
peng-u-0807 Dec 9, 2023
d8746f9
fix: suppress lint
peng-u-0807 Dec 9, 2023
b264478
fix: change `CustomBottomSheet` button UI
peng-u-0807 Dec 9, 2023
b6ac27e
feat: apply VideoPlayer UI change to `PlayEmojiView`
peng-u-0807 Dec 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 84 additions & 77 deletions android/app/src/main/java/com/goliath/emojihub/views/TransformVideoPage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -29,10 +30,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
Expand All @@ -45,6 +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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@peng-u-0807 혹시
import androidx.media3.ui.AspectRatioFrameLayout.RESIZE_MODE_FILL
resize mode fill과 resize mode fit중에 어떤 게 나을까요? 정방형 영상을 보니 너무 위아래로 늘어난 게 아닌가 싶어서 여쭙습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thisisWooyeol 안그래도 영상이 좀 이상하게 보이는 것 같아 확인해보니 원하는 결과를 얻으려면AspectRatioFramLayout.RESIZE_MODE_ZOOM을 사용해야할 것 같아 ZOOM으로 수정했습니다!

import androidx.media3.ui.PlayerView
import com.goliath.emojihub.LocalNavController
import com.goliath.emojihub.extensions.toEmoji
Expand All @@ -54,6 +56,7 @@ import com.goliath.emojihub.views.components.CustomDialog
import kotlinx.coroutines.launch
import java.io.File

@SuppressLint("UnsafeOptInUsageError")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TransformVideoPage(
Expand All @@ -69,6 +72,7 @@ fun TransformVideoPage(
ExoPlayer.Builder(context).build().apply {
setMediaItem(MediaItem.fromUri(emojiViewModel.videoUri))
repeatMode = Player.REPEAT_MODE_ALL
playWhenReady = true
prepare()
}
}
Expand Down Expand Up @@ -142,99 +146,102 @@ fun TransformVideoPage(
)
}
) { it ->
Box(
modifier = Modifier.fillMaxSize()
) {
Box(Modifier.fillMaxSize()) {
AndroidView(
factory = {
PlayerView(it).apply {
setShowFastForwardButton(false)
setShowRewindButton(false)
setShowNextButton(false)
setShowPreviousButton(false)
resizeMode = RESIZE_MODE_FILL
player = exoPlayer
}
},
modifier = Modifier
.padding(it)
.fillMaxSize()
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))
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))
}

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)
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.NavigateBefore,
contentDescription = "Previous emoji",
tint = Color.White,
modifier = Modifier.size(48.dp)
Text(
text = createdEmojiList[currentEmojiIndex].emojiUnicode.toEmoji(),
fontSize = 60.sp
)
}
} 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)
) {
Icon(
imageVector = Icons.Default.NavigateNext,
contentDescription = "Next emoji",
tint = Color.White,
modifier = Modifier.size(48.dp)
)
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))
}
} 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 = com.goliath.emojihub.ui.theme.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
)
}
}
}

Expand Down
Loading