Various fixes to VideoPlayer

Now using sanghun's compose video player to handle the logic Fixes [BUG] Videos are stretched or cropped #425 Fixes [BUG] Videos are stretched #420 Signed-off-by: IacobIonut01 <[email protected]>
IacobIonut01 · Jul 13, 2024 · 4856020 · 4856020
1 parent 4dc487c
commit 4856020
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 96 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -20,7 +20,7 @@ android {
         applicationId = "com.dot.gallery"
         minSdk = 30
         targetSdk = 34
-        versionCode = 30006
+        versionCode = 30011
         versionName = "3.0.0"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
@@ -179,6 +179,10 @@ dependencies {
     // Exo Player
     implementation(libs.androidx.media3.exoplayer)
     implementation(libs.androidx.media3.ui)
+    implementation(libs.androidx.media3.session)
+    implementation(libs.androidx.media3.exoplayer.dash)
+    implementation(libs.androidx.media3.exoplayer.hls)
+    implementation(libs.compose.video)
 
     // Exif Interface
     implementation(libs.androidx.exifinterface)

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -60,6 +60,7 @@
         <activity
             android:name=".feature_node.presentation.main.MainActivity"
             android:exported="true"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode"
             android:theme="@style/Theme.Gallery.Splash">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
@@ -72,6 +73,7 @@
             android:name=".feature_node.presentation.standalone.StandaloneActivity"
             android:exported="true"
             android:launchMode="singleTask"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode"
             android:theme="@style/Theme.Gallery">
             <intent-filter android:label="@string/app_name">
                 <action android:name="android.intent.action.VIEW" />
@@ -117,6 +119,7 @@
             android:name=".feature_node.presentation.picker.PickerActivity"
             android:exported="true"
             android:launchMode="singleTask"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode"
             android:theme="@style/Theme.Gallery">
             <intent-filter android:label="@string/app_name">
                 <action android:name="android.intent.action.PICK"/>
@@ -135,6 +138,7 @@
         <activity
             android:name=".feature_node.presentation.wallpaper.SetWallpaperActivity"
             android:exported="true"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode"
             android:launchMode="singleInstance">
             <intent-filter android:label="@string/set_wallpaper">
                 <action android:name="android.intent.action.ATTACH_DATA"/>
@@ -145,6 +149,7 @@
 
         <activity
             android:name=".feature_node.presentation.edit.EditActivity"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize|uiMode"
             android:exported="true">
             <intent-filter android:label="@string/app_name">
                 <action android:name="android.intent.action.EDIT"/>

diff --git a/app/src/main/kotlin/com/dot/gallery/feature_node/presentation/mediaview/MediaViewScreen.kt b/app/src/main/kotlin/com/dot/gallery/feature_node/presentation/mediaview/MediaViewScreen.kt
@@ -64,7 +64,6 @@ import com.dot.gallery.feature_node.presentation.util.rememberWindowInsetsContro
 import com.dot.gallery.feature_node.presentation.util.toggleSystemBars
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -161,9 +160,9 @@ fun MediaViewScreen(
             pageSpacing = 16.dp,
         ) { index ->
             var playWhenReady by rememberSaveable { mutableStateOf(false) }
-            LaunchedEffect(Unit) {
+            LaunchedEffect(pagerState) {
                 snapshotFlow { pagerState.currentPage }
-                    .collectLatest { currentPage ->
+                    .collect { currentPage ->
                         playWhenReady = currentPage == index
                     }
             }

diff --git a/...dot/gallery/feature_node/presentation/mediaview/components/media/MediaPreviewComponent.kt b/...dot/gallery/feature_node/presentation/mediaview/components/media/MediaPreviewComponent.kt
@@ -8,6 +8,7 @@ package com.dot.gallery.feature_node.presentation.mediaview.components.media
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableLongState
 import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
 import androidx.media3.exoplayer.ExoPlayer
@@ -20,7 +21,7 @@ fun MediaPreviewComponent(
     uiEnabled: Boolean,
     playWhenReady: Boolean,
     onItemClick: () -> Unit,
-    videoController: @Composable (ExoPlayer, MutableState<Boolean>, MutableState<Long>, Long, Int, Float) -> Unit,
+    videoController: @Composable (ExoPlayer, MutableState<Boolean>, MutableLongState, Long, Int, Float) -> Unit,
 ) {
     Box(
         modifier = Modifier

diff --git a/...otlin/com/dot/gallery/feature_node/presentation/mediaview/components/video/VideoPlayer.kt b/...otlin/com/dot/gallery/feature_node/presentation/mediaview/components/video/VideoPlayer.kt
@@ -5,17 +5,17 @@
 
 package com.dot.gallery.feature_node.presentation.mediaview.components.video
 
-import android.annotation.SuppressLint
 import android.media.MediaMetadataRetriever
-import android.view.ViewGroup.LayoutParams.MATCH_PARENT
-import android.widget.FrameLayout
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableLongState
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
@@ -24,32 +24,31 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalLifecycleOwner
-import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
-import androidx.media3.common.C
-import androidx.media3.common.MediaItem
+import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.media3.common.Player
 import androidx.media3.common.util.UnstableApi
 import androidx.media3.exoplayer.ExoPlayer
-import androidx.media3.ui.AspectRatioFrameLayout
-import androidx.media3.ui.PlayerView
+import com.dot.gallery.core.Constants.Animation.enterAnimation
+import com.dot.gallery.core.Constants.Animation.exitAnimation
 import com.dot.gallery.feature_node.domain.model.Media
+import io.sanghun.compose.video.RepeatMode
+import io.sanghun.compose.video.uri.VideoPlayerMediaItem
 import kotlinx.coroutines.delay
 import kotlin.time.Duration.Companion.seconds
+import io.sanghun.compose.video.VideoPlayer as SanghunComposeVideoVideoPlayer
 
-@SuppressLint("OpaqueUnitKey")
 @OptIn(ExperimentalFoundationApi::class)
 @androidx.annotation.OptIn(UnstableApi::class)
 @Composable
 fun VideoPlayer(
     media: Media,
     playWhenReady: Boolean,
-    videoController: @Composable (ExoPlayer, MutableState<Boolean>, MutableState<Long>, Long, Int, Float) -> Unit,
+    videoController: @Composable (ExoPlayer, MutableState<Boolean>, MutableLongState, Long, Int, Float) -> Unit,
     onItemClick: () -> Unit
 ) {
     var totalDuration by rememberSaveable { mutableLongStateOf(0L) }
@@ -70,94 +69,98 @@ fun VideoPlayer(
         )?.toFloat() ?: 60f
     }
 
-    val exoPlayer = remember(context) {
-        ExoPlayer.Builder(context)
-            .build().apply {
-                videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT
-                repeatMode = Player.REPEAT_MODE_ONE
-                setMediaItem(MediaItem.fromUri(media.uri))
-                prepare()
-            }
+    var exoPlayer by remember {
+        mutableStateOf<ExoPlayer?>(null)
     }
 
-    DisposableEffect(
-        Box {
-            AndroidView(
+    Box {
+        var showPlayer by remember {
+            mutableStateOf(false)
+        }
+        val lifecycleOwner = LocalLifecycleOwner.current
+        DisposableEffect(lifecycleOwner) {
+            val observer = LifecycleEventObserver { _, event ->
+                if (event == Lifecycle.Event.ON_RESUME) {
+                    showPlayer = true
+                }
+                if (event == Lifecycle.Event.ON_PAUSE) {
+                    showPlayer = false
+                }
+            }
+            lifecycleOwner.lifecycle.addObserver(observer)
+            onDispose {
+                lifecycleOwner.lifecycle.removeObserver(observer)
+            }
+        }
+        LaunchedEffect(showPlayer) {
+            if (showPlayer) {
+                delay(100)
+                exoPlayer?.playWhenReady = true
+                exoPlayer?.seekTo(currentTime.longValue)
+            }
+        }
+
+        if (showPlayer) {
+            SanghunComposeVideoVideoPlayer(
+                mediaItems = listOf(
+                    VideoPlayerMediaItem.StorageMediaItem(
+                        storageUri = media.uri,
+                        mimeType = media.mimeType
+                    )
+                ),
+                handleLifecycle = true,
+                autoPlay = true,
+                usePlayerController = false,
+                enablePip = false,
+                handleAudioFocus = true,
+                repeatMode = RepeatMode.ONE,
+                playerInstance = {
+                    exoPlayer = this
+                    addListener(
+                        object : Player.Listener {
+                            override fun onEvents(player: Player, events: Player.Events) {
+                                totalDuration = duration.coerceAtLeast(0L)
+                                lastPlayingState = isPlaying.value
+                                isPlaying.value = player.isPlaying
+                            }
+                        }
+                    )
+                },
                 modifier = Modifier
+                    .fillMaxSize()
+                    .align(Alignment.Center)
                     .combinedClickable(
                         interactionSource = remember { MutableInteractionSource() },
                         indication = null,
                         onClick = onItemClick,
                     ),
-                factory = {
-                    PlayerView(context).apply {
-                        useController = false
-                        resizeMode = AspectRatioFrameLayout.RESIZE_MODE_FIT
-
-                        player = exoPlayer
-                        layoutParams = FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT)
-
-                        keepScreenOn = true
+            )
+        }
+        AnimatedVisibility(
+            visible = exoPlayer != null,
+            enter = enterAnimation,
+            exit = exitAnimation
+        ) {
+            LaunchedEffect(isPlaying.value) {
+                exoPlayer!!.playWhenReady = isPlaying.value
+            }
+            if (isPlaying.value) {
+                LaunchedEffect(Unit) {
+                    while (true) {
+                        bufferedPercentage = exoPlayer!!.bufferedPercentage
+                        currentTime.longValue = exoPlayer!!.currentPosition
+                        delay(1.seconds / 30)
                     }
                 }
-            )
+            }
             videoController(
-                exoPlayer,
+                exoPlayer!!,
                 isPlaying,
                 currentTime,
                 totalDuration,
                 bufferedPercentage,
                 frameRate
             )
         }
-    ) {
-        exoPlayer.addListener(
-            object : Player.Listener {
-                override fun onEvents(player: Player, events: Player.Events) {
-                    totalDuration = exoPlayer.duration.coerceAtLeast(0L)
-                    lastPlayingState = isPlaying.value
-                    isPlaying.value = player.isPlaying
-                }
-            }
-        )
-        onDispose {
-            exoPlayer.release()
-        }
     }
-
-    val lifecycleOwner = LocalLifecycleOwner.current
-    DisposableEffect(lifecycleOwner) {
-        val observer = LifecycleEventObserver { _, event ->
-            if (event == Lifecycle.Event.ON_RESUME && isPlaying.value) {
-                exoPlayer.play()
-            } else if (event == Lifecycle.Event.ON_STOP || event == Lifecycle.Event.ON_PAUSE) {
-                exoPlayer.pause()
-            }
-        }
-        lifecycleOwner.lifecycle.addObserver(observer)
-        onDispose {
-            lifecycleOwner.lifecycle.removeObserver(observer)
-        }
-    }
-
-    LaunchedEffect(LocalConfiguration.current, isPlaying.value) {
-        if (exoPlayer.currentPosition != currentTime.longValue) {
-            exoPlayer.seekTo(currentTime.longValue)
-        }
-
-        delay(50)
-
-        exoPlayer.playWhenReady = isPlaying.value
-    }
-
-    if (isPlaying.value) {
-        LaunchedEffect(Unit) {
-            while (true) {
-                currentTime.longValue = exoPlayer.currentPosition.coerceAtLeast(0L)
-                bufferedPercentage = exoPlayer.bufferedPercentage
-                delay(1.seconds / 30)
-            }
-        }
-    }
-
 }
diff --git a/...dot/gallery/feature_node/presentation/mediaview/components/video/VideoPlayerController.kt b/...dot/gallery/feature_node/presentation/mediaview/components/video/VideoPlayerController.kt
@@ -35,6 +35,7 @@ import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableLongState
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
@@ -65,7 +66,7 @@ fun VideoPlayerController(
     paddingValues: PaddingValues,
     player: ExoPlayer,
     isPlaying: MutableState<Boolean>,
-    currentTime: MutableState<Long>,
+    currentTime: MutableLongState,
     totalTime: Long,
     buffer: Int,
     toggleRotate: () -> Unit,
@@ -209,13 +210,14 @@ fun VideoPlayerController(
                     )
                     Slider(
                         modifier = Modifier.fillMaxWidth(),
-                        value = currentTime.value.toFloat(),
+                        value = currentTime.longValue.toFloat(),
                         onValueChange = {
                             scope.launch {
-                                currentTime.value = it.toLong()
-                                player.seekTo(it.toLong())
-                                delay(50)
-                                player.play()
+                                if (player.currentPosition != it.toLong()) {
+                                    player.seekTo(it.toLong())
+                                    delay(50)
+                                    player.play()
+                                }
                             }
                         },
                         valueRange = 0f..totalTime.toFloat(),