fix(sample): prevent player disposal on window resize and screen navigation

Hoist rememberVideoPlayerState() above BoxWithConstraints in App to prevent
player state disposal when resizing crosses the 600dp breakpoint between
RailLayout and BarLayout. Also add DisposableEffect to pause playback when
leaving PlayerScreen and allow resuming when returning.

Author: kdroidFilter

sample/composeApp/src/commonMain/kotlin/sample/app/App.kt

@@ -25,6 +25,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
+import io.github.kdroidfilter.composemediaplayer.VideoPlayerState
+import io.github.kdroidfilter.composemediaplayer.rememberVideoPlayerState
 import sample.app.feed.FeedScreen
 import sample.app.gallery.GalleryScreen
 import sample.app.player.PlayerScreen
@@ -40,22 +42,23 @@ private enum class Screen(val label: String, val icon: ImageVector) {
 fun App() {
     AppTheme {
         var currentScreen by remember { mutableStateOf(Screen.Player) }
+        val playerState = rememberVideoPlayerState()
 
         BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
             val useRail = maxWidth >= 600.dp
 
             if (useRail) {
-                RailLayout(currentScreen, onScreenChange = { currentScreen = it })
+                RailLayout(currentScreen, onScreenChange = { currentScreen = it }, playerState = playerState)
             } else {
-                BarLayout(currentScreen, onScreenChange = { currentScreen = it })
+                BarLayout(currentScreen, onScreenChange = { currentScreen = it }, playerState = playerState)
             }
         }
     }
 }
 
 // Compact: bottom NavigationBar
 @Composable
-private fun BarLayout(current: Screen, onScreenChange: (Screen) -> Unit) {
+private fun BarLayout(current: Screen, onScreenChange: (Screen) -> Unit, playerState: VideoPlayerState) {
     Scaffold(
         bottomBar = {
             NavigationBar {
@@ -70,13 +73,13 @@ private fun BarLayout(current: Screen, onScreenChange: (Screen) -> Unit) {
             }
         },
     ) { padding ->
-        ScreenContent(current, Modifier.fillMaxSize().padding(padding))
+        ScreenContent(current, Modifier.fillMaxSize().padding(padding), playerState)
     }
 }
 
 // Medium+: side NavigationRail
 @Composable
-private fun RailLayout(current: Screen, onScreenChange: (Screen) -> Unit) {
+private fun RailLayout(current: Screen, onScreenChange: (Screen) -> Unit, playerState: VideoPlayerState) {
     Row(modifier = Modifier.fillMaxSize()) {
         NavigationRail {
             Spacer(Modifier.weight(1f))
@@ -90,14 +93,14 @@ private fun RailLayout(current: Screen, onScreenChange: (Screen) -> Unit) {
             }
             Spacer(Modifier.weight(1f))
         }
-        ScreenContent(current, Modifier.weight(1f).fillMaxHeight())
+        ScreenContent(current, Modifier.weight(1f).fillMaxHeight(), playerState)
     }
 }
 
 @Composable
-private fun ScreenContent(screen: Screen, modifier: Modifier) {
+private fun ScreenContent(screen: Screen, modifier: Modifier, playerState: VideoPlayerState) {
     when (screen) {
-        Screen.Player -> PlayerScreen(modifier)
+        Screen.Player -> PlayerScreen(modifier, playerState)
         Screen.Gallery -> GalleryScreen(modifier)
         Screen.Feed -> FeedScreen(modifier)
     }

sample/composeApp/src/commonMain/kotlin/sample/app/player/PlayerScreen.kt

@@ -41,6 +41,7 @@ import androidx.compose.material3.Snackbar
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateListOf
@@ -73,8 +74,17 @@ import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun PlayerScreen(modifier: Modifier = Modifier) {
-    val playerState = rememberVideoPlayerState()
+fun PlayerScreen(modifier: Modifier = Modifier, playerState: VideoPlayerState = rememberVideoPlayerState()) {
+    // Pause when leaving the screen, resume when coming back
+    DisposableEffect(playerState) {
+        val wasPlaying = playerState.isPlaying
+        onDispose {
+            if (playerState.isPlaying) {
+                playerState.pause()
+            }
+        }
+    }
+
     val scope = rememberCoroutineScope()
 
     var videoUrl by remember { mutableStateOf(SAMPLE_VIDEOS.first().second) }