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

Show file tree
Hide file tree
Changes from all 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_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_ZOOM
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
57 changes: 10 additions & 47 deletions android/app/src/main/java/com/goliath/emojihub/views/components/CustomBottomSheet.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -104,7 +95,7 @@ fun CustomBottomSheet (
EmojiClassFilterRow(
emojiClass = emojiUnicodeFilters,
emojiCounts = emojiCounts,
onEmojiClassSelected = { selectedEmojiClass = it}
onEmojiClassSelected = { selectedEmojiClass = it }
) {
items(emojiUnicodeFilters.size) { unicode ->
EmojiClassFilterButton(
Expand All @@ -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),
Expand All @@ -182,7 +146,6 @@ fun CustomBottomSheet (
) {
when (bottomSheetContent) {
BottomSheetContent.EMPTY -> {}

BottomSheetContent.VIEW_REACTION -> {
items(reactionList.itemCount) { index ->
reactionList[index]?.let {
Expand Down
7 changes: 6 additions & 1 deletion android/app/src/main/java/com/goliath/emojihub/views/components/PlayEmojiView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ fun PlayEmojiView(
ExoPlayer.Builder(context).build().apply {
setMediaItem(MediaItem.fromUri(currentEmoji.videoLink))
repeatMode = Player.REPEAT_MODE_ALL
playWhenReady = true
prepare()
}
}
Expand All @@ -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
}
}
Expand Down