fix theme and look of the audio player

This commit is contained in:
Christian Schabesberger 2024-09-22 13:55:07 +02:00
parent 522eb3ee4e
commit ea0f20a578
5 changed files with 45 additions and 19 deletions

View File

@ -0,0 +1,4 @@
kotlin version: 2.0.20-Beta2
error message: The daemon has terminated unexpectedly on startup attempt #1 with error code: 0. The daemon process output:
1. Kotlin compile daemon is ready

View File

@ -24,6 +24,7 @@ import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut import androidx.compose.animation.fadeOut
import androidx.compose.foundation.Image import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.aspectRatio
@ -38,6 +39,7 @@ import androidx.compose.material.icons.filled.SkipPrevious
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
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
@ -51,12 +53,14 @@ import net.newpipe.newplayer.model.NewPlayerViewModel
import net.newpipe.newplayer.model.NewPlayerViewModelDummy import net.newpipe.newplayer.model.NewPlayerViewModelDummy
import net.newpipe.newplayer.ui.common.RepeatModeButton import net.newpipe.newplayer.ui.common.RepeatModeButton
import net.newpipe.newplayer.ui.common.ShuffleModeButton import net.newpipe.newplayer.ui.common.ShuffleModeButton
import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
@androidx.annotation.OptIn(UnstableApi::class) @androidx.annotation.OptIn(UnstableApi::class)
@OptIn(UnstableApi::class) @OptIn(UnstableApi::class)
@Composable @Composable
fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) { fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
Row(verticalAlignment = Alignment.CenterVertically) { Row(modifier = Modifier.background(MaterialTheme.colorScheme.background),
verticalAlignment = Alignment.CenterVertically) {
ShuffleModeButton(viewModel = viewModel, uiState = uiState) ShuffleModeButton(viewModel = viewModel, uiState = uiState)
Box(modifier = Modifier.size(80.dp), contentAlignment = Alignment.Center) { Box(modifier = Modifier.size(80.dp), contentAlignment = Alignment.Center) {
@ -73,7 +77,7 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
onClick = {}, onClick = {},
colors = lightAudioControlButtonColorScheme() colors = lightAudioControlButtonColorScheme()
) { ) {
Image( Icon(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
imageVector = Icons.Filled.SkipPrevious, imageVector = Icons.Filled.SkipPrevious,
contentDescription = stringResource(R.string.widget_description_previous_stream) contentDescription = stringResource(R.string.widget_description_previous_stream)
@ -109,7 +113,7 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
onClick = {}, onClick = {},
colors = lightAudioControlButtonColorScheme() colors = lightAudioControlButtonColorScheme()
) { ) {
Image( Icon(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
imageVector = Icons.Filled.SkipNext, imageVector = Icons.Filled.SkipNext,
contentDescription = stringResource(R.string.widget_description_next_stream) contentDescription = stringResource(R.string.widget_description_next_stream)
@ -127,7 +131,10 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
@Preview(device = "id:pixel_6") @Preview(device = "id:pixel_6")
@Composable @Composable
fun AudioPlayerControllerPreview() { fun AudioPlayerControllerPreview() {
// VideoPlayerTheme { VideoPlayerTheme {
AudioPlaybackController(viewModel = NewPlayerViewModelDummy(), uiState = NewPlayerUIState.DUMMY) AudioPlaybackController(
// } viewModel = NewPlayerViewModelDummy(),
uiState = NewPlayerUIState.DUMMY
)
}
} }

View File

@ -26,6 +26,7 @@ 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
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ButtonDefaults
@ -49,12 +50,13 @@ 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
import net.newpipe.newplayer.ui.common.NewPlayerSeeker import net.newpipe.newplayer.ui.common.NewPlayerSeeker
import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
import net.newpipe.newplayer.utils.Thumbnail import net.newpipe.newplayer.utils.Thumbnail
import net.newpipe.newplayer.utils.getInsets import net.newpipe.newplayer.utils.getInsets
@Composable @Composable
fun lightAudioControlButtonColorScheme() = ButtonDefaults.buttonColors().copy( fun lightAudioControlButtonColorScheme() = ButtonDefaults.buttonColors().copy(
containerColor = Color.Transparent, containerColor = MaterialTheme.colorScheme.background,
contentColor = MaterialTheme.colorScheme.onSurface contentColor = MaterialTheme.colorScheme.onSurface
) )
@ -62,15 +64,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)) { Box(
modifier = Modifier
.fillMaxSize()
.background(color = MaterialTheme.colorScheme.background)
) {
Scaffold(modifier = Modifier Scaffold(modifier = Modifier
.fillMaxSize() .fillMaxSize()
.windowInsetsPadding(insets), .windowInsetsPadding(insets),
topBar = { topBar = {
AudioPlayerTopBar(
viewModel = viewModel,
uiState = uiState
)
}) { innerPadding -> }) { innerPadding ->
Box( Box(
modifier = Modifier modifier = Modifier
@ -98,6 +101,7 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
elevation = CardDefaults.cardElevation(defaultElevation = 4.dp), elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
) { ) {
Thumbnail( Thumbnail(
modifier = Modifier.fillMaxWidth(),
thumbnail = uiState.currentlyPlaying?.mediaMetadata?.artworkUri, thumbnail = uiState.currentlyPlaying?.mediaMetadata?.artworkUri,
contentDescription = stringResource( contentDescription = stringResource(
id = R.string.stream_thumbnail id = R.string.stream_thumbnail
@ -142,7 +146,11 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
) )
} }
AudioBottomUI(viewModel, uiState) AudioBottomUI(viewModel, uiState)
Box(modifier = Modifier.fillMaxSize().weight(0.025f)) Box(
modifier = Modifier
.fillMaxSize()
.weight(0.025f)
)
} }
} }
} }
@ -153,7 +161,7 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
@Preview(device = "id:pixel_6", showSystemUi = true) @Preview(device = "id:pixel_6", showSystemUi = true)
@Composable @Composable
fun AudioPlayerUIPreview() { fun AudioPlayerUIPreview() {
// VideoPlayerTheme { VideoPlayerTheme {
AudioPlayerUI(viewModel = NewPlayerViewModelDummy(), uiState = NewPlayerUIState.DUMMY) AudioPlayerUI(viewModel = NewPlayerViewModelDummy(), uiState = NewPlayerUIState.DUMMY)
// } }
} }

View File

@ -62,6 +62,7 @@ import net.newpipe.newplayer.R
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
import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
@OptIn(UnstableApi::class) @OptIn(UnstableApi::class)
@Composable @Composable
@ -175,7 +176,9 @@ private fun Menu() {
@Preview(device = "id:pixel_6") @Preview(device = "id:pixel_6")
@Composable @Composable
fun AudioBottomUIPreview() { fun AudioBottomUIPreview() {
VideoPlayerTheme {
Box(modifier = Modifier.fillMaxWidth()) { Box(modifier = Modifier.fillMaxWidth()) {
AudioBottomUI(viewModel = NewPlayerViewModelDummy(), uiState = NewPlayerUIState.DUMMY) AudioBottomUI(viewModel = NewPlayerViewModelDummy(), uiState = NewPlayerUIState.DUMMY)
} }
} }
}

View File

@ -37,7 +37,7 @@ val video_player_primary = Color(0xFFE53935)
// The color of buttons, and the LoadingCircle // The color of buttons, and the LoadingCircle
val video_player_onPrimary = Color(0xFFF8F8F8) val video_player_onPrimary = Color(0xFFF8F8F8)
val video_player_primaryContainer = Color(0xFF633F00) val video_player_primaryContainer = Color(0xFFFFFF00)
val video_player_onPrimaryContainer = Color(0xFFFFDDB3) val video_player_onPrimaryContainer = Color(0xFFFFDDB3)
val video_player_secondary = Color(0xFFDDC2A1) val video_player_secondary = Color(0xFFDDC2A1)
val video_player_onSecondary = Color(0xFF3E2D16) val video_player_onSecondary = Color(0xFF3E2D16)
@ -47,11 +47,15 @@ val video_player_tertiary = Color(0xFFB8CEA1)
val video_player_onTertiary = Color(0xFF243515) val video_player_onTertiary = Color(0xFF243515)
val video_player_tertiaryContainer = Color(0xFF3A4C2A) val video_player_tertiaryContainer = Color(0xFF3A4C2A)
val video_player_onTertiaryContainer = Color(0xFFD4EABB) val video_player_onTertiaryContainer = Color(0xFFD4EABB)
val video_player_error = Color(0xFFFFB4AB) val video_player_error = Color(0xFFFFB4AB)
val video_player_errorContainer = Color(0xFF93000A) val video_player_errorContainer = Color(0xFF93000A)
val video_player_onError = Color(0xFF690005) val video_player_onError = Color(0xFF690005)
val video_player_onErrorContainer = Color(0xFFFFDAD6) val video_player_onErrorContainer = Color(0xFFFFDAD6)
// background color
val video_player_background = Color(0xFF1F1B16) val video_player_background = Color(0xFF1F1B16)
val video_player_onBackground = Color(0xFFEAE1D9) val video_player_onBackground = Color(0xFFEAE1D9)
val video_player_surface = Color(0xFF000000) val video_player_surface = Color(0xFF000000)