fix loadingcircle and loadingcircle color

new-player/src/main/java/net/newpipe/newplayer/model/VideoPlayerViewModel.kt

@@ -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() {

new-player/src/main/java/net/newpipe/newplayer/ui/VideoPlayerControllerUI.kt

@@ -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,10 +134,26 @@ fun VideoPlayerControllerUI(
             fullscreen = fullscreen
         )
     }
+
     AnimatedVisibility(uiVissible) {
         Surface(
             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(
             modifier = Modifier
                 .fillMaxSize()
@@ -142,10 +164,11 @@ fun VideoPlayerControllerUI(
             fullscreen = fullscreen
         )
 
-            Box {
+        Box(modifier = Modifier.fillMaxSize()) {
             CenterUI(
                 modifier = Modifier.align(Alignment.Center),
                 isPlaying = isPlaying,
+                isLoading = isLoading,
                 play = play,
                 pause = pause,
                 prevStream = prevStream,
@@ -178,13 +201,6 @@ fun VideoPlayerControllerUI(
                 seekingFinished
             )
         }
-
-        }
-    }
-    if (fullscreen) {
-        BackHandler {
-            switchToEmbeddedView()
-        }
     }
 }
 
@@ -370,6 +386,7 @@ private fun MainMenu() {
 private fun CenterUI(
     modifier: Modifier,
     isPlaying: Boolean,
+    isLoading: Boolean,
     play: () -> Unit,
     pause: () -> Unit,
     nextStream: () -> Unit,
@@ -380,6 +397,7 @@ private fun CenterUI(
         horizontalArrangement = Arrangement.SpaceBetween,
         modifier = modifier,
     ) {
+        if (!isLoading) {
             CenterControllButton(
                 buttonModifier = Modifier.size(80.dp),
                 iconModifier = Modifier.size(40.dp),
@@ -408,6 +426,7 @@ private fun CenterUI(
             )
         }
     }
+}
 
 @Composable
 private fun CenterControllButton(
@@ -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 = {},

new-player/src/main/java/net/newpipe/newplayer/ui/VideoPlayerLoadingPlaceholder.kt

@@ -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)))
         }
     }

new-player/src/main/java/net/newpipe/newplayer/ui/VideoPlayerUI.kt

@@ -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,

new-player/src/main/java/net/newpipe/newplayer/ui/theme/Color.kt

@@ -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 = {})
+        }
+    }
+}
+

test-app/src/main/java/net/newpipe/newplayer/testapp/MainActivity.kt

@@ -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