show buffered percentage and fix progressbar colors

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

@@ -34,6 +34,7 @@ data class VideoPlayerUIState(
     val embeddedUiRatio: Float,
     val contentFitMode: ContentScale,
     val seekerPosition: Float,
+    val bufferedPercentage: Float,
     val isLoading: Boolean,
     val durationInMs: Long,
     val playbackPositionInMs: Long
@@ -44,10 +45,11 @@ data class VideoPlayerUIState(
             fullscreen = false,
             uiVissible = false,
             uiVisible = false,
-            contentRatio = 16 / 9F,
+            contentRatio = 16 / 9f,
-            embeddedUiRatio = 16F / 9F,
+            embeddedUiRatio = 16f / 9f,
             contentFitMode = ContentScale.FIT_INSIDE,
-            seekerPosition = 0F,
+            seekerPosition = 0f,
+            bufferedPercentage = 0f,
             isLoading = true,
             durationInMs = 0,
             playbackPositionInMs = 0

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

@@ -34,7 +34,6 @@ import kotlinx.coroutines.Job
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
 import javax.inject.Inject
-import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
@@ -230,12 +229,15 @@ class VideoPlayerViewModelImpl @Inject constructor(
     private fun updateProgressOnce() {
         val progress = player?.currentPosition ?: 0
         val duration = player?.duration ?: 1
+        val bufferedPercentage = (player?.bufferedPercentage?.toFloat() ?: 0f) / 100f
         val progressPercentage = progress.toFloat() / duration.toFloat()
+
         mutableUiState.update {
             it.copy(
                 seekerPosition = progressPercentage,
                 durationInMs = duration,
-                playbackPositionInMs = progress
+                playbackPositionInMs = progress,
+                bufferedPercentage = bufferedPercentage
             )
         }
     }

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

@@ -61,6 +61,7 @@ fun VideoPlayerControllerUI(
     isLoading: Boolean,
     durationInMs: Long,
     playbackPositionInMs: Long,
+    bufferedPercentage: Float,
     play: () -> Unit,
     pause: () -> Unit,
     prevStream: () -> Unit,
@@ -158,6 +159,7 @@ fun VideoPlayerControllerUI(
                 durationInMs = durationInMs,
                 playbackPositionInMs = playbackPositionInMs,
                 seekPosition = seekPosition,
+                bufferedPercentage = bufferedPercentage,
                 switchToFullscreen = switchToFullscreen,
                 switchToEmbeddedView = switchToEmbeddedView,
                 seekPositionChanged = seekPositionChanged,
@@ -203,6 +205,7 @@ fun VideoPlayerControllerUIPreviewEmbedded() {
                 isLoading = false,
                 durationInMs = 9*60*1000,
                 playbackPositionInMs = 6*60*1000,
+                bufferedPercentage = 0.4f,
                 play = {},
                 pause = {},
                 prevStream = {},
@@ -229,6 +232,7 @@ fun VideoPlayerControllerUIPreviewLandscape() {
                 isLoading = true,
                 durationInMs = 9*60*1000,
                 playbackPositionInMs = 6*60*1000,
+                bufferedPercentage = 0.4f,
                 play = {},
                 pause = {},
                 prevStream = {},
@@ -256,6 +260,7 @@ fun VideoPlayerControllerUIPreviewPortrait() {
                 isLoading = false,
                 durationInMs = 9*60*1000,
                 playbackPositionInMs = 6*60*1000,
+                bufferedPercentage = 0.4f,
                 play = {},
                 pause = {},
                 prevStream = {},

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

@@ -28,7 +28,6 @@ import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@@ -152,6 +151,7 @@ fun VideoPlayerUI(
                 isLoading = uiState.isLoading,
                 durationInMs = uiState.durationInMs,
                 playbackPositionInMs = uiState.playbackPositionInMs,
+                bufferedPercentage = uiState.bufferedPercentage,
                 play = viewModel::play,
                 pause = viewModel::pause,
                 prevStream = viewModel::prevStream,

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

@@ -21,6 +21,7 @@
  */
 package net.newpipe.newplayer.ui.seeker
 
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.Stable
@@ -49,16 +50,16 @@ object SeekerDefaults {
      */
     @Composable
     fun seekerColors(
-        progressColor: Color = VideoPlayerColorScheme.primary,
+        progressColor: Color = MaterialTheme.colorScheme.primary,
         trackColor: Color = TrackColor,
-        disabledProgressColor: Color = VideoPlayerColorScheme.onSurface.copy(alpha = DisabledProgressAlpha),
+        disabledProgressColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = DisabledProgressAlpha),
         disabledTrackColor: Color = disabledProgressColor
             .copy(alpha = DisabledTrackAlpha)
-            .compositeOver(VideoPlayerColorScheme.onSurface),
+            .compositeOver(MaterialTheme.colorScheme.onSurface),
-        thumbColor: Color = VideoPlayerColorScheme.primary,
+        thumbColor: Color = MaterialTheme.colorScheme.primary,
-        disabledThumbColor: Color = VideoPlayerColorScheme.onSurface
+        disabledThumbColor: Color = MaterialTheme.colorScheme.onSurface
             .copy(alpha = 0.0F)
-            .compositeOver(VideoPlayerColorScheme.surface),
+            .compositeOver(MaterialTheme.colorScheme.surface),
         readAheadColor: Color = ReadAheadColor
     ): SeekerColors = DefaultSeekerColor(
         progressColor = progressColor,

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

@@ -58,7 +58,9 @@ val video_player_onSurface = Color(0xFFF8F8F8)
 // The color of the menu Icons
 val video_player_onSurfaceVariant = Color(0xFFF8F8F8)
 
+// The background color of the seekbar
 val video_player_surfaceVariant = Color(0xFF4F4539)
+
 val video_player_outline = Color(0xFF9C8F80)
 val video_player_inverseOnSurface = Color(0xFF1F1B16)
 val video_player_inverseSurface = Color(0xFFEAE1D9)
@@ -80,6 +82,7 @@ fun VideoPlayerControllerUIPreviewEmbeddedColorPreview() {
                 isLoading = false,
                 durationInMs = 9*60*1000,
                 playbackPositionInMs = 6*60*1000,
+                bufferedPercentage = 0.4f,
                 play = {},
                 pause = {},
                 prevStream = {},

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

@@ -29,6 +29,7 @@ import androidx.compose.material.icons.filled.Fullscreen
 import androidx.compose.material.icons.filled.FullscreenExit
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -41,7 +42,10 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.core.os.ConfigurationCompat
 import net.newpipe.newplayer.R
+import net.newpipe.newplayer.ui.seeker.DefaultSeekerColor
 import net.newpipe.newplayer.ui.seeker.Seeker
+import net.newpipe.newplayer.ui.seeker.SeekerColors
+import net.newpipe.newplayer.ui.seeker.SeekerDefaults
 import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
 import java.util.Locale
 import kotlin.math.min
@@ -53,6 +57,7 @@ fun BottomUI(
     seekPosition: Float,
     durationInMs: Long,
     playbackPositionInMs: Long,
+    bufferedPercentage: Float,
     switchToFullscreen: () -> Unit,
     switchToEmbeddedView: () -> Unit,
     seekPositionChanged: (Float) -> Unit,
@@ -68,7 +73,9 @@ fun BottomUI(
             Modifier.weight(1F),
             value = seekPosition,
             onValueChange = seekPositionChanged,
-            onValueChangeFinished = seekingFinished
+            onValueChangeFinished = seekingFinished,
+            readAheadValue = bufferedPercentage,
+            colors = customizedSeekerColors()
         )
 
         //Slider(value = 0.4F, onValueChange = {}, modifier = Modifier.weight(1F))
@@ -85,6 +92,20 @@ fun BottomUI(
     }
 }
 
+@Composable
+private fun customizedSeekerColors() : SeekerColors {
+    val colors = DefaultSeekerColor(
+        progressColor = MaterialTheme.colorScheme.primary,
+        thumbColor = MaterialTheme.colorScheme.primary,
+        trackColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.7f),
+        readAheadColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.5f),
+        disabledProgressColor = MaterialTheme.colorScheme.primary,
+        disabledThumbColor = MaterialTheme.colorScheme.primary,
+        disabledTrackColor = MaterialTheme.colorScheme.primary
+    )
+    return colors
+}
+
 @Composable
 @ReadOnlyComposable
 fun getLocale(): Locale? {
@@ -136,6 +157,7 @@ fun VideoPlayerControllerBottomUIPreview() {
                 seekPosition = 0.4F,
                 durationInMs = 90 * 60 * 1000,
                 playbackPositionInMs = 3 * 60 * 1000,
+                bufferedPercentage = 0.4f,
                 switchToFullscreen = { },
                 switchToEmbeddedView = { },
                 seekPositionChanged = {}

test-app/src/main/res/values/test_streams.xml

@@ -22,6 +22,5 @@
 <resources>
     <string name="ccc_6502_video" translatable="false">https://ftp.fau.de/cdn.media.ccc.de/congress/2010/mp4-h264-HQ/27c3-4159-en-reverse_engineering_mos_6502.mp4</string>
     <string name="ccc_6502_audio" translatable="false">https://ftp.fau.de/cdn.media.ccc.de/congress/2010/ogg-audio-only/27c3-4159-en-reverse_engineering_mos_6502.ogg</string>
-    <string name="ccc_chromebooks_video" translatable="false">https://ftp.fau.de/cdn.media.ccc.de/congress/2023/h264-hd/37c3-11929-eng-deu-swe-Turning_Chromebooks_into_regular_laptops_hd.mp4</string>
     <string name="portrait_video_example" translatable="false">https://videos.pexels.com/video-files/5512609/5512609-hd_1080_1920_25fps.mp4</string>
 </resources>