fix loadingcircle and loadingcircle color

This commit is contained in:
Christian Schabesberger 2024-07-29 13:56:08 +02:00
parent abdb48ec46
commit e5294a198d
6 changed files with 159 additions and 87 deletions

View File

@ -57,7 +57,8 @@ data class VideoPlayerUIState(
val contentRatio: Float,
val embeddedUiRatio: Float,
val contentFitMode: ContentScale,
val seekerPosition: Float
val seekerPosition: Float,
val isLoading: Boolean
) : Parcelable {
companion object {
val DEFAULT = VideoPlayerUIState(
@ -68,7 +69,8 @@ data class VideoPlayerUIState(
contentRatio = 16 / 9F,
embeddedUiRatio = 16F / 9F,
contentFitMode = ContentScale.FIT_INSIDE,
seekerPosition = 0F
seekerPosition = 0F,
isLoading = true
)
}
}
@ -179,6 +181,14 @@ class VideoPlayerViewModelImpl @Inject constructor(
super.onVideoSizeChanged(videoSize)
updateContentRatio(VideoSize.fromMedia3VideoSize(videoSize))
}
override fun onIsLoadingChanged(isLoading: Boolean) {
super.onIsLoadingChanged(isLoading)
mutableUiState.update {
it.copy(isLoading = isLoading)
}
Log.i(TAG, if (isLoading) "Player started loading" else "Player finished loading")
}
})
}
}
@ -276,7 +286,6 @@ class VideoPlayerViewModelImpl @Inject constructor(
mutableUiState.update {
it.copy(seekerPosition = progressPercentage)
}
Log.i(TAG, "Progress: $progress, Duration: $duration")
}
override fun hideUi() {

View File

@ -23,29 +23,25 @@ package net.newpipe.newplayer.ui
import android.view.MotionEvent
import androidx.activity.compose.BackHandler
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.displayCutout
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.ime
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemGestures
import androidx.compose.foundation.layout.union
import androidx.compose.foundation.layout.waterfall
import androidx.compose.foundation.layout.windowInsetsBottomHeight
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.layout.windowInsetsTopHeight
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.List
import androidx.compose.material.icons.automirrored.filled.MenuBook
@ -64,10 +60,12 @@ import androidx.compose.material.icons.filled.Subtitles
import androidx.compose.material.icons.filled.Translate
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
@ -101,6 +99,7 @@ fun VideoPlayerControllerUI(
fullscreen: Boolean,
uiVissible: Boolean,
seekPosition: Float,
isLoading: Boolean,
play: () -> Unit,
pause: () -> Unit,
prevStream: () -> Unit,
@ -113,10 +112,17 @@ fun VideoPlayerControllerUI(
seekingFinished: () -> Unit
) {
if (fullscreen) {
BackHandler {
switchToEmbeddedView()
}
}
val insets =
WindowInsets.systemBars
.union(WindowInsets.displayCutout)
.union(WindowInsets.waterfall)
if (!uiVissible) {
TouchUi(
modifier = Modifier
@ -128,62 +134,72 @@ fun VideoPlayerControllerUI(
fullscreen = fullscreen
)
}
AnimatedVisibility(uiVissible) {
Surface(
modifier = Modifier.fillMaxSize(), color = Color(0x75000000)
) {
TouchUi(
) {}
}
if (isLoading) {
Box(modifier = Modifier.fillMaxSize()) {
CircularProgressIndicator(
modifier = Modifier
.fillMaxSize()
.windowInsetsPadding(WindowInsets.systemGestures),
hideUi = hideUi,
showUi = showUi,
uiVissible = uiVissible,
fullscreen = fullscreen
.width(64.dp)
.height(64.dp)
.align(Alignment.Center),
color = MaterialTheme.colorScheme.onSurface
)
Box {
CenterUI(
modifier = Modifier.align(Alignment.Center),
isPlaying = isPlaying,
play = play,
pause = pause,
prevStream = prevStream,
nextStream = nextStream
)
}
Box(
modifier = if (fullscreen) Modifier.windowInsetsPadding(insets) else Modifier
) {
TopUI(
modifier = Modifier
.align(Alignment.TopStart)
.fillMaxWidth()
.defaultMinSize(minHeight = 45.dp)
.padding(top = 4.dp, start = 16.dp, end = 16.dp)
)
BottomUI(
modifier = Modifier
.align(Alignment.BottomStart)
.padding(start = 16.dp, end = 16.dp)
.defaultMinSize(minHeight = 40.dp)
.fillMaxWidth(),
isFullscreen = fullscreen,
seekPosition,
switchToFullscreen,
switchToEmbeddedView,
seekPositionChanged,
seekingFinished
)
}
}
}
if (fullscreen) {
BackHandler {
switchToEmbeddedView()
AnimatedVisibility(uiVissible) {
TouchUi(
modifier = Modifier
.fillMaxSize()
.windowInsetsPadding(WindowInsets.systemGestures),
hideUi = hideUi,
showUi = showUi,
uiVissible = uiVissible,
fullscreen = fullscreen
)
Box(modifier = Modifier.fillMaxSize()) {
CenterUI(
modifier = Modifier.align(Alignment.Center),
isPlaying = isPlaying,
isLoading = isLoading,
play = play,
pause = pause,
prevStream = prevStream,
nextStream = nextStream
)
}
Box(
modifier = if (fullscreen) Modifier.windowInsetsPadding(insets) else Modifier
) {
TopUI(
modifier = Modifier
.align(Alignment.TopStart)
.fillMaxWidth()
.defaultMinSize(minHeight = 45.dp)
.padding(top = 4.dp, start = 16.dp, end = 16.dp)
)
BottomUI(
modifier = Modifier
.align(Alignment.BottomStart)
.padding(start = 16.dp, end = 16.dp)
.defaultMinSize(minHeight = 40.dp)
.fillMaxWidth(),
isFullscreen = fullscreen,
seekPosition,
switchToFullscreen,
switchToEmbeddedView,
seekPositionChanged,
seekingFinished
)
}
}
}
@ -370,6 +386,7 @@ private fun MainMenu() {
private fun CenterUI(
modifier: Modifier,
isPlaying: Boolean,
isLoading: Boolean,
play: () -> Unit,
pause: () -> Unit,
nextStream: () -> Unit,
@ -380,32 +397,34 @@ private fun CenterUI(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = modifier,
) {
CenterControllButton(
buttonModifier = Modifier.size(80.dp),
iconModifier = Modifier.size(40.dp),
icon = Icons.Filled.SkipPrevious,
contentDescriptoion = stringResource(R.string.widget_description_previous_stream),
onClick = prevStream
)
if (!isLoading) {
CenterControllButton(
buttonModifier = Modifier.size(80.dp),
iconModifier = Modifier.size(40.dp),
icon = Icons.Filled.SkipPrevious,
contentDescriptoion = stringResource(R.string.widget_description_previous_stream),
onClick = prevStream
)
CenterControllButton(
buttonModifier = Modifier.size(80.dp),
iconModifier = Modifier.size(60.dp),
icon = if (isPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow,
contentDescriptoion = stringResource(
if (isPlaying) R.string.widget_description_pause
else R.string.widget_description_play
),
onClick = if (isPlaying) pause else play
)
CenterControllButton(
buttonModifier = Modifier.size(80.dp),
iconModifier = Modifier.size(60.dp),
icon = if (isPlaying) Icons.Filled.Pause else Icons.Filled.PlayArrow,
contentDescriptoion = stringResource(
if (isPlaying) R.string.widget_description_pause
else R.string.widget_description_play
),
onClick = if (isPlaying) pause else play
)
CenterControllButton(
buttonModifier = Modifier.size(80.dp),
iconModifier = Modifier.size(40.dp),
icon = Icons.Filled.SkipNext,
contentDescriptoion = stringResource(R.string.widget_description_next_stream),
onClick = nextStream
)
CenterControllButton(
buttonModifier = Modifier.size(80.dp),
iconModifier = Modifier.size(40.dp),
icon = Icons.Filled.SkipNext,
contentDescriptoion = stringResource(R.string.widget_description_next_stream),
onClick = nextStream
)
}
}
}
@ -421,7 +440,7 @@ private fun CenterControllButton(
onClick = onClick,
contentPadding = PaddingValues(0.dp),
colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent, contentColor = video_player_onSurface
containerColor = Color.Transparent,
),
modifier = buttonModifier
) {
@ -502,6 +521,7 @@ fun VideoPlayerControllerUIPreviewEmbeded() {
fullscreen = false,
uiVissible = true,
seekPosition = 0.3F,
isLoading = false,
play = {},
pause = {},
prevStream = {},
@ -525,6 +545,7 @@ fun VideoPlayerControllerUIPreviewLandscape() {
fullscreen = true,
uiVissible = true,
seekPosition = 0.3F,
isLoading = true,
play = {},
pause = {},
prevStream = {},
@ -549,6 +570,7 @@ fun VideoPlayerControllerUIPreviewPortrait() {
fullscreen = true,
uiVissible = true,
seekPosition = 0.3F,
isLoading = false,
play = {},
pause = {},
prevStream = {},

View File

@ -27,6 +27,7 @@ fun VideoPlayerLoadingPlaceholder(aspectRatio: Float = 3F / 1F) {
Box(contentAlignment = Alignment.Center) {
CircularProgressIndicator(modifier = Modifier
.width(64.dp)
.height(64.dp)
.align((Alignment.Center)))
}
}

View File

@ -119,6 +119,7 @@ fun VideoPlayerUI(
fullscreen = uiState.fullscreen,
uiVissible = uiState.uiVissible,
seekPosition = uiState.seekerPosition,
isLoading = uiState.isLoading,
play = viewModel::play,
pause = viewModel::pause,
prevStream = viewModel::prevStream,

View File

@ -20,10 +20,20 @@
package net.newpipe.newplayer.ui.theme
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import net.newpipe.newplayer.ui.PreviewBackgroundSurface
import net.newpipe.newplayer.ui.VideoPlayerControllerUI
val video_player_primary = Color(0xFFE53935)
val video_player_onPrimary = Color(0xFF452B00)
// The color of buttons, and the LoadingCircle
val video_player_onPrimary = Color(0xFFF8F8F8)
val video_player_primaryContainer = Color(0xFF633F00)
val video_player_onPrimaryContainer = Color(0xFFFFDDB3)
val video_player_secondary = Color(0xFFDDC2A1)
@ -41,9 +51,14 @@ val video_player_onErrorContainer = Color(0xFFFFDAD6)
val video_player_background = Color(0xFF1F1B16)
val video_player_onBackground = Color(0xFFEAE1D9)
val video_player_surface = Color(0xFF000000)
val video_player_onSurface = Color(0xFFEAE1D9)
// The color of the Text and icons
val video_player_onSurface = Color(0xFFF8F8F8)
// The color of the menu Icons
val video_player_onSurfaceVariant = Color(0xFFF8F8F8)
val video_player_surfaceVariant = Color(0xFF4F4539)
val video_player_onSurfaceVariant = Color(0xFFD3C4B4)
val video_player_outline = Color(0xFF9C8F80)
val video_player_inverseOnSurface = Color(0xFF1F1B16)
val video_player_inverseSurface = Color(0xFFEAE1D9)
@ -53,3 +68,27 @@ val video_player_surfaceTint = Color(0xFFFFB951)
val video_player_outlineVariant = Color(0xFF4F4539)
val video_player_scrim = Color(0xFF000000)
@Preview(device = "spec:width=1080px,height=600px,dpi=440,orientation=landscape")
@Composable
fun VideoPlayerControllerUIPreviewEmbeddedColorpreview() {
VideoPlayerTheme {
PreviewBackgroundSurface {
VideoPlayerControllerUI(isPlaying = false,
fullscreen = false,
uiVissible = true,
seekPosition = 0.3F,
isLoading = false,
play = {},
pause = {},
prevStream = {},
nextStream = {},
switchToFullscreen = {},
switchToEmbeddedView = {},
showUi = {},
hideUi = {},
seekPositionChanged = {},
seekingFinished = {})
}
}
}

View File

@ -59,7 +59,7 @@ class MainActivity : AppCompatActivity() {
startStreamButton.setOnClickListener {
newPlayer.playWhenReady = true
newPlayer.setStream(getString(R.string.portrait_video_example))
newPlayer.setStream(getString(R.string.ccc_6502_video))
}
videoPlayerViewModel.newPlayer = newPlayer