fix theme preview

This commit is contained in:
Christian Schabesberger 2024-09-22 13:31:38 +02:00
parent 5046122732
commit 522eb3ee4e
5 changed files with 140 additions and 62 deletions

View File

@ -22,6 +22,7 @@
package net.newpipe.newplayer.ui.audioplayer package net.newpipe.newplayer.ui.audioplayer
import androidx.annotation.OptIn import androidx.annotation.OptIn
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@ -36,6 +37,7 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
@ -52,7 +54,7 @@ import net.newpipe.newplayer.utils.getInsets
@Composable @Composable
fun lightAudioControlButtonColorScheme() = ButtonDefaults.buttonColors().copy( fun lightAudioControlButtonColorScheme() = ButtonDefaults.buttonColors().copy(
containerColor = MaterialTheme.colorScheme.surface, containerColor = Color.Transparent,
contentColor = MaterialTheme.colorScheme.onSurface contentColor = MaterialTheme.colorScheme.onSurface
) )
@ -60,10 +62,16 @@ fun lightAudioControlButtonColorScheme() = ButtonDefaults.buttonColors().copy(
@Composable @Composable
fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) { fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
val insets = getInsets() val insets = getInsets()
Box(modifier = Modifier.fillMaxSize().background(color = Color.Green)) {
Scaffold(modifier = Modifier Scaffold(modifier = Modifier
.fillMaxSize() .fillMaxSize()
.windowInsetsPadding(insets), .windowInsetsPadding(insets),
topBar = { AudioPlayerTopBar(viewModel = viewModel, uiState = uiState) }) { innerPadding -> topBar = {
AudioPlayerTopBar(
viewModel = viewModel,
uiState = uiState
)
}) { innerPadding ->
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
@ -80,9 +88,11 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
.weight(1f), .weight(1f),
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
Box(modifier = Modifier Box(
modifier = Modifier
.fillMaxSize() .fillMaxSize()
.weight(1f)) .weight(1f)
)
Box { Box {
Card( Card(
elevation = CardDefaults.cardElevation(defaultElevation = 4.dp), elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
@ -95,9 +105,11 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
) )
} }
} }
Box(modifier = Modifier Box(
modifier = Modifier
.fillMaxSize() .fillMaxSize()
.weight(1f)) .weight(1f)
)
Text( Text(
text = uiState.currentlyPlaying?.mediaMetadata?.title.toString(), text = uiState.currentlyPlaying?.mediaMetadata?.title.toString(),
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
@ -111,26 +123,34 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
fontSize = 4.em fontSize = 4.em
) )
Box(modifier = Modifier Box(
modifier = Modifier
.fillMaxSize() .fillMaxSize()
.weight(0.2f)) .weight(0.2f)
)
NewPlayerSeeker(viewModel = viewModel, uiState = uiState) NewPlayerSeeker(viewModel = viewModel, uiState = uiState)
Box(modifier = Modifier Box(
modifier = Modifier
.fillMaxSize() .fillMaxSize()
.weight(0.2f)) .weight(0.2f)
)
AudioPlaybackController(viewModel = viewModel, uiState = uiState) AudioPlaybackController(viewModel = viewModel, uiState = uiState)
Box(modifier = Modifier Box(
modifier = Modifier
.fillMaxSize() .fillMaxSize()
.weight(0.2f)) .weight(0.2f)
)
} }
AudioBottomUI(viewModel, uiState) AudioBottomUI(viewModel, uiState)
Box(modifier = Modifier.fillMaxSize().weight(0.025f))
}
} }
} }
} }
} }
@OptIn(UnstableApi::class) @OptIn(UnstableApi::class)
@Preview(device = "id:pixel_6") @Preview(device = "id:pixel_6", showSystemUi = true)
@Composable @Composable
fun AudioPlayerUIPreview() { fun AudioPlayerUIPreview() {
// VideoPlayerTheme { // VideoPlayerTheme {

View File

@ -28,9 +28,13 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.List
import androidx.compose.material.icons.automirrored.filled.MenuBook
import androidx.compose.material.icons.automirrored.filled.Notes import androidx.compose.material.icons.automirrored.filled.Notes
import androidx.compose.material.icons.filled.ArtTrack
import androidx.compose.material.icons.filled.Language import androidx.compose.material.icons.filled.Language
import androidx.compose.material.icons.filled.LiveTv import androidx.compose.material.icons.filled.LiveTv
import androidx.compose.material.icons.filled.MenuBook
import androidx.compose.material.icons.filled.MoreVert import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.PictureInPicture import androidx.compose.material.icons.filled.PictureInPicture
import androidx.compose.material.icons.filled.Share import androidx.compose.material.icons.filled.Share
@ -74,7 +78,7 @@ fun AudioBottomUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
colors = lightAudioControlButtonColorScheme() colors = lightAudioControlButtonColorScheme()
) { ) {
Icon( Icon(
imageVector = Icons.AutoMirrored.Filled.Notes, imageVector = Icons.Filled.ArtTrack,
contentDescription = stringResource( contentDescription = stringResource(
id = R.string.details_view_button_description id = R.string.details_view_button_description
) )
@ -90,9 +94,17 @@ fun AudioBottomUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
} }
Button(onClick = { /*TODO*/ }, colors = lightAudioControlButtonColorScheme()) { Button(onClick = { /*TODO*/ }, colors = lightAudioControlButtonColorScheme()) {
Icon( Icon(
imageVector = Icons.Filled.PictureInPicture, imageVector = Icons.AutoMirrored.Filled.MenuBook,
contentDescription = stringResource( contentDescription = stringResource(
id = R.string.pip_button_description id = R.string.chapter
)
)
}
Button(onClick = { /*TODO*/ }, colors = lightAudioControlButtonColorScheme()) {
Icon(
imageVector = Icons.AutoMirrored.Filled.List,
contentDescription = stringResource(
id = R.string.widget_descriptoin_playlist_item_selection
) )
) )
} }
@ -147,6 +159,14 @@ private fun Menu() {
) )
}, },
onClick = { /*TODO*/ showMenu = false }) onClick = { /*TODO*/ showMenu = false })
DropdownMenuItem(text = { Text(stringResource(R.string.pip_button_description)) }, onClick = { /*TODO*/ }, leadingIcon = {
Icon(
imageVector = Icons.Filled.PictureInPicture,
contentDescription = stringResource(
id = R.string.pip_button_description
)
)
})
} }
} }
} }

View File

@ -20,12 +20,15 @@
package net.newpipe.newplayer.ui.theme package net.newpipe.newplayer.ui.theme
import androidx.annotation.OptIn
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.media3.common.util.UnstableApi
import net.newpipe.newplayer.model.UIModeState import net.newpipe.newplayer.model.UIModeState
import net.newpipe.newplayer.model.NewPlayerUIState import net.newpipe.newplayer.model.NewPlayerUIState
import net.newpipe.newplayer.model.NewPlayerViewModelDummy import net.newpipe.newplayer.model.NewPlayerViewModelDummy
import net.newpipe.newplayer.ui.audioplayer.AudioPlayerUI
import net.newpipe.newplayer.ui.videoplayer.PreviewBackgroundSurface import net.newpipe.newplayer.ui.videoplayer.PreviewBackgroundSurface
import net.newpipe.newplayer.ui.videoplayer.VideoPlayerControllerUI import net.newpipe.newplayer.ui.videoplayer.VideoPlayerControllerUI
@ -70,6 +73,7 @@ val video_player_surfaceTint = Color(0xFFFFB951)
val video_player_outlineVariant = Color(0xFF4F4539) val video_player_outlineVariant = Color(0xFF4F4539)
val video_player_scrim = Color(0xFF000000) val video_player_scrim = Color(0xFF000000)
@OptIn(UnstableApi::class)
@Preview(device = "spec:width=1080px,height=600px,dpi=440,orientation=landscape") @Preview(device = "spec:width=1080px,height=600px,dpi=440,orientation=landscape")
@Composable @Composable
fun VideoPlayerControllerUIPreviewEmbeddedColorPreview() { fun VideoPlayerControllerUIPreviewEmbeddedColorPreview() {
@ -77,7 +81,31 @@ fun VideoPlayerControllerUIPreviewEmbeddedColorPreview() {
PreviewBackgroundSurface { PreviewBackgroundSurface {
VideoPlayerControllerUI( VideoPlayerControllerUI(
viewModel = NewPlayerViewModelDummy(), viewModel = NewPlayerViewModelDummy(),
uiState = NewPlayerUIState.DEFAULT.copy( uiState = NewPlayerUIState.DUMMY.copy(
uiMode = UIModeState.EMBEDDED_VIDEO_CONTROLLER_UI,
playing = true,
seekerPosition = 0.3f,
isLoading = false,
durationInMs = 9 * 60 * 1000,
playbackPositionInMs = 6 * 60 * 1000,
bufferedPercentage = 0.4f,
fastSeekSeconds = 10,
),
)
}
}
}
@OptIn(UnstableApi::class)
@Preview(device = "id:pixel_6")
@Composable
fun AudioPlayerUIPreviewEmbeddedColorPreview() {
VideoPlayerTheme {
PreviewBackgroundSurface {
AudioPlayerUI(
viewModel = NewPlayerViewModelDummy(),
uiState = NewPlayerUIState.DUMMY.copy(
uiMode = UIModeState.EMBEDDED_VIDEO_CONTROLLER_UI, uiMode = UIModeState.EMBEDDED_VIDEO_CONTROLLER_UI,
playing = true, playing = true,
seekerPosition = 0.3f, seekerPosition = 0.3f,

View File

@ -50,6 +50,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import androidx.media3.common.util.UnstableApi import androidx.media3.common.util.UnstableApi
import net.newpipe.newplayer.R import net.newpipe.newplayer.R
import net.newpipe.newplayer.model.EmbeddedUiConfig
import net.newpipe.newplayer.model.NewPlayerUIState import net.newpipe.newplayer.model.NewPlayerUIState
import net.newpipe.newplayer.model.NewPlayerViewModel import net.newpipe.newplayer.model.NewPlayerViewModel
import net.newpipe.newplayer.model.NewPlayerViewModelDummy import net.newpipe.newplayer.model.NewPlayerViewModelDummy
@ -63,7 +64,12 @@ import net.newpipe.newplayer.utils.getEmbeddedUiConfig
fun TopUI( fun TopUI(
modifier: Modifier, viewModel: NewPlayerViewModel, uiState: NewPlayerUIState modifier: Modifier, viewModel: NewPlayerViewModel, uiState: NewPlayerUIState
) { ) {
val embeddedUiConfig = getEmbeddedUiConfig(activity = LocalContext.current as Activity) val embeddedUiConfig =
if (LocalContext.current is Activity)
getEmbeddedUiConfig(activity = LocalContext.current as Activity)
else
EmbeddedUiConfig.DUMMY
Row( Row(
modifier = modifier, modifier = modifier,
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,

View File

@ -40,6 +40,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.media3.common.util.UnstableApi import androidx.media3.common.util.UnstableApi
import net.newpipe.newplayer.model.EmbeddedUiConfig
import net.newpipe.newplayer.model.NewPlayerUIState import net.newpipe.newplayer.model.NewPlayerUIState
import net.newpipe.newplayer.model.NewPlayerViewModel import net.newpipe.newplayer.model.NewPlayerViewModel
import net.newpipe.newplayer.model.NewPlayerViewModelDummy import net.newpipe.newplayer.model.NewPlayerViewModelDummy
@ -59,7 +60,10 @@ fun EmbeddedGestureUI(
mutableStateOf(false) mutableStateOf(false)
} }
val embeddedUiConfig = getEmbeddedUiConfig(LocalContext.current as Activity) val embeddedUiConfig = if (LocalContext.current is Activity)
getEmbeddedUiConfig(LocalContext.current as Activity)
else
EmbeddedUiConfig.DUMMY
val handleMovement = { movement: TouchedPosition -> val handleMovement = { movement: TouchedPosition ->
Log.d(TAG, "${movement.x}:${movement.y}") Log.d(TAG, "${movement.x}:${movement.y}")