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

View File

@ -23,29 +23,25 @@ package net.newpipe.newplayer.ui
import android.view.MotionEvent import android.view.MotionEvent
import androidx.activity.compose.BackHandler import androidx.activity.compose.BackHandler
import androidx.compose.animation.AnimatedVisibility 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.Arrangement
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.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.defaultMinSize import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.displayCutout import androidx.compose.foundation.layout.displayCutout
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth 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.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.systemGestures import androidx.compose.foundation.layout.systemGestures
import androidx.compose.foundation.layout.union import androidx.compose.foundation.layout.union
import androidx.compose.foundation.layout.waterfall 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.windowInsetsPadding
import androidx.compose.foundation.layout.windowInsetsTopHeight
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.List
import androidx.compose.material.icons.automirrored.filled.MenuBook 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.material.icons.filled.Translate
import androidx.compose.material3.Button import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.DropdownMenuItem
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.material3.Slider import androidx.compose.material3.Slider
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
@ -101,6 +99,7 @@ fun VideoPlayerControllerUI(
fullscreen: Boolean, fullscreen: Boolean,
uiVissible: Boolean, uiVissible: Boolean,
seekPosition: Float, seekPosition: Float,
isLoading: Boolean,
play: () -> Unit, play: () -> Unit,
pause: () -> Unit, pause: () -> Unit,
prevStream: () -> Unit, prevStream: () -> Unit,
@ -113,10 +112,17 @@ fun VideoPlayerControllerUI(
seekingFinished: () -> Unit seekingFinished: () -> Unit
) { ) {
if (fullscreen) {
BackHandler {
switchToEmbeddedView()
}
}
val insets = val insets =
WindowInsets.systemBars WindowInsets.systemBars
.union(WindowInsets.displayCutout) .union(WindowInsets.displayCutout)
.union(WindowInsets.waterfall) .union(WindowInsets.waterfall)
if (!uiVissible) { if (!uiVissible) {
TouchUi( TouchUi(
modifier = Modifier modifier = Modifier
@ -128,10 +134,26 @@ fun VideoPlayerControllerUI(
fullscreen = fullscreen fullscreen = fullscreen
) )
} }
AnimatedVisibility(uiVissible) { AnimatedVisibility(uiVissible) {
Surface( Surface(
modifier = Modifier.fillMaxSize(), color = Color(0x75000000) modifier = Modifier.fillMaxSize(), color = Color(0x75000000)
) { ) {}
}
if (isLoading) {
Box(modifier = Modifier.fillMaxSize()) {
CircularProgressIndicator(
modifier = Modifier
.width(64.dp)
.height(64.dp)
.align(Alignment.Center),
color = MaterialTheme.colorScheme.onSurface
)
}
}
AnimatedVisibility(uiVissible) {
TouchUi( TouchUi(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
@ -142,10 +164,11 @@ fun VideoPlayerControllerUI(
fullscreen = fullscreen fullscreen = fullscreen
) )
Box { Box(modifier = Modifier.fillMaxSize()) {
CenterUI( CenterUI(
modifier = Modifier.align(Alignment.Center), modifier = Modifier.align(Alignment.Center),
isPlaying = isPlaying, isPlaying = isPlaying,
isLoading = isLoading,
play = play, play = play,
pause = pause, pause = pause,
prevStream = prevStream, prevStream = prevStream,
@ -178,13 +201,6 @@ fun VideoPlayerControllerUI(
seekingFinished seekingFinished
) )
} }
}
}
if (fullscreen) {
BackHandler {
switchToEmbeddedView()
}
} }
} }
@ -370,6 +386,7 @@ private fun MainMenu() {
private fun CenterUI( private fun CenterUI(
modifier: Modifier, modifier: Modifier,
isPlaying: Boolean, isPlaying: Boolean,
isLoading: Boolean,
play: () -> Unit, play: () -> Unit,
pause: () -> Unit, pause: () -> Unit,
nextStream: () -> Unit, nextStream: () -> Unit,
@ -380,6 +397,7 @@ private fun CenterUI(
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
modifier = modifier, modifier = modifier,
) { ) {
if (!isLoading) {
CenterControllButton( CenterControllButton(
buttonModifier = Modifier.size(80.dp), buttonModifier = Modifier.size(80.dp),
iconModifier = Modifier.size(40.dp), iconModifier = Modifier.size(40.dp),
@ -408,6 +426,7 @@ private fun CenterUI(
) )
} }
} }
}
@Composable @Composable
private fun CenterControllButton( private fun CenterControllButton(
@ -421,7 +440,7 @@ private fun CenterControllButton(
onClick = onClick, onClick = onClick,
contentPadding = PaddingValues(0.dp), contentPadding = PaddingValues(0.dp),
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent, contentColor = video_player_onSurface containerColor = Color.Transparent,
), ),
modifier = buttonModifier modifier = buttonModifier
) { ) {
@ -502,6 +521,7 @@ fun VideoPlayerControllerUIPreviewEmbeded() {
fullscreen = false, fullscreen = false,
uiVissible = true, uiVissible = true,
seekPosition = 0.3F, seekPosition = 0.3F,
isLoading = false,
play = {}, play = {},
pause = {}, pause = {},
prevStream = {}, prevStream = {},
@ -525,6 +545,7 @@ fun VideoPlayerControllerUIPreviewLandscape() {
fullscreen = true, fullscreen = true,
uiVissible = true, uiVissible = true,
seekPosition = 0.3F, seekPosition = 0.3F,
isLoading = true,
play = {}, play = {},
pause = {}, pause = {},
prevStream = {}, prevStream = {},
@ -549,6 +570,7 @@ fun VideoPlayerControllerUIPreviewPortrait() {
fullscreen = true, fullscreen = true,
uiVissible = true, uiVissible = true,
seekPosition = 0.3F, seekPosition = 0.3F,
isLoading = false,
play = {}, play = {},
pause = {}, pause = {},
prevStream = {}, prevStream = {},

View File

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

View File

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

View File

@ -20,10 +20,20 @@
package net.newpipe.newplayer.ui.theme 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.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_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_primaryContainer = Color(0xFF633F00)
val video_player_onPrimaryContainer = Color(0xFFFFDDB3) val video_player_onPrimaryContainer = Color(0xFFFFDDB3)
val video_player_secondary = Color(0xFFDDC2A1) 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_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)
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_surfaceVariant = Color(0xFF4F4539)
val video_player_onSurfaceVariant = Color(0xFFD3C4B4)
val video_player_outline = Color(0xFF9C8F80) val video_player_outline = Color(0xFF9C8F80)
val video_player_inverseOnSurface = Color(0xFF1F1B16) val video_player_inverseOnSurface = Color(0xFF1F1B16)
val video_player_inverseSurface = Color(0xFFEAE1D9) 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_outlineVariant = Color(0xFF4F4539)
val video_player_scrim = Color(0xFF000000) 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 { startStreamButton.setOnClickListener {
newPlayer.playWhenReady = true newPlayer.playWhenReady = true
newPlayer.setStream(getString(R.string.portrait_video_example)) newPlayer.setStream(getString(R.string.ccc_6502_video))
} }
videoPlayerViewModel.newPlayer = newPlayer videoPlayerViewModel.newPlayer = newPlayer