Redesign sample app with modern Material3 adaptive UI

Complete rewrite of the sample app with:
- Immersive video player: fullscreen with overlay controls, gradient scrims, auto-hide
- Adaptive navigation: NavigationBar (mobile <600dp) + NavigationRail (tablet ≥600dp)
- Netflix-style gallery: hero card + responsive grid (2-5 columns by width)
- Social media feed: posts with engagement metrics, adaptive columns (1-3)
- Modern Material3 theme: custom violet/teal palette, proper light/dark variants
- Responsive layouts: player adjusts for portrait/landscape with proper constraints
- Working video URLs: replaced dead googleapis links with w3.org, w3schools, archive.org
- Clean architecture: feature-based package structure (player/, gallery/, feed/, theme/)
- Bottom sheets for all secondary controls: source selection, settings, subtitles

All features (volume, speed, loop, PiP, subtitles, metadata) showcase in the UI.

Author: kdroidFilter

gradle/libs.versions.toml

@@ -13,6 +13,7 @@ androidx-core = "1.18.0"
 media3Exoplayer = "1.10.0"
 detekt = "1.23.8"
 ktlint = "14.2.0"
+androidx-lifecycle-runtime-ktx = "2.10.0"
 
 # minSdk = 21 failed to compile because the project indirectly depends on the library [androidx.navigationevent:navigationevent-android:1.0.1] which requires minSdk = 23
 android-minSdk="23"
@@ -40,7 +41,7 @@ compose-ui = { module = "org.jetbrains.compose.ui:ui", version.ref = "compose" }
 compose-ui-tooling = { module = "org.jetbrains.compose.ui:ui-tooling", version.ref = "compose" }
 compose-ui-tooling-preview = { module = "org.jetbrains.compose.components:components-ui-tooling-preview", version.ref = "compose" }
 compose-material-icons-extended = { module = "org.jetbrains.compose.material:material-icons-extended", version = "1.7.3" }
-androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "kotlin" }
+androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "androidx-lifecycle-runtime-ktx" }
 
 [plugins]
 

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

@@ -1,61 +1,104 @@
 package sample.app
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.Article
 import androidx.compose.material.icons.automirrored.filled.List
-import androidx.compose.material.icons.filled.Home
-import androidx.compose.material.icons.filled.Subtitles
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
+import androidx.compose.material.icons.filled.PlayCircle
+import androidx.compose.material3.Icon
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationRail
+import androidx.compose.material3.NavigationRailItem
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.foundation.isSystemInDarkTheme
-import sample.app.singleplayer.SinglePlayerScreen
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+import sample.app.feed.FeedScreen
+import sample.app.gallery.GalleryScreen
+import sample.app.player.PlayerScreen
+import sample.app.theme.AppTheme
+
+private enum class Screen(val label: String, val icon: ImageVector) {
+    Player("Player", Icons.Default.PlayCircle),
+    Gallery("Gallery", Icons.AutoMirrored.Filled.List),
+    Feed("Feed", Icons.AutoMirrored.Filled.Article),
+}
 
 @Composable
 fun App() {
-    MaterialTheme(colorScheme = if(isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()) {
-        // Navigation state
-        var currentScreen by remember { mutableStateOf(Screen.SinglePlayer) }
+    AppTheme {
+        var currentScreen by remember { mutableStateOf(Screen.Player) }
 
-        Scaffold(
-            bottomBar = {
-                NavigationBar {
-                    NavigationBarItem(
-                        icon = { Icon(Icons.Default.Home, contentDescription = "Single Player") },
-                        label = { Text("Single Player") },
-                        selected = currentScreen == Screen.SinglePlayer,
-                        onClick = { currentScreen = Screen.SinglePlayer }
-                    )
-                    NavigationBarItem(
-                        icon = { Icon(Icons.AutoMirrored.Filled.List, contentDescription = "Multi Player") },
-                        label = { Text("Multi Player") },
-                        selected = currentScreen == Screen.MultiPlayer,
-                        onClick = { currentScreen = Screen.MultiPlayer }
-                    )
+        BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+            val useRail = maxWidth >= 600.dp
+
+            if (useRail) {
+                RailLayout(currentScreen, onScreenChange = { currentScreen = it })
+            } else {
+                BarLayout(currentScreen, onScreenChange = { currentScreen = it })
+            }
+        }
+    }
+}
+
+// Compact: bottom NavigationBar
+@Composable
+private fun BarLayout(current: Screen, onScreenChange: (Screen) -> Unit) {
+    Scaffold(
+        bottomBar = {
+            NavigationBar {
+                Screen.entries.forEach { screen ->
                     NavigationBarItem(
-                        icon = { Icon(Icons.Default.Subtitles, contentDescription = "Video Attachment") },
-                        label = { Text("Video Attachment") },
-                        selected = currentScreen == Screen.VideoAttachmentPlayer,
-                        onClick = { currentScreen = Screen.VideoAttachmentPlayer }
+                        icon = { Icon(screen.icon, contentDescription = screen.label) },
+                        label = { Text(screen.label) },
+                        selected = current == screen,
+                        onClick = { onScreenChange(screen) },
                     )
                 }
             }
-        ) { paddingValues ->
-            Box(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(paddingValues)
-                    .background(MaterialTheme.colorScheme.background)
-            ) {
-                when (currentScreen) {
-                    Screen.SinglePlayer -> SinglePlayerScreen()
-                    Screen.MultiPlayer -> MultiPlayerScreen()
-                    Screen.VideoAttachmentPlayer -> VideoAttachmentPlayerScreen()
-                }
+        },
+    ) { padding ->
+        ScreenContent(current, Modifier.fillMaxSize().padding(padding))
+    }
+}
+
+// Medium+: side NavigationRail
+@Composable
+private fun RailLayout(current: Screen, onScreenChange: (Screen) -> Unit) {
+    Row(modifier = Modifier.fillMaxSize()) {
+        NavigationRail {
+            Spacer(Modifier.weight(1f))
+            Screen.entries.forEach { screen ->
+                NavigationRailItem(
+                    icon = { Icon(screen.icon, contentDescription = screen.label) },
+                    label = { Text(screen.label) },
+                    selected = current == screen,
+                    onClick = { onScreenChange(screen) },
+                )
             }
+            Spacer(Modifier.weight(1f))
         }
+        ScreenContent(current, Modifier.weight(1f).fillMaxHeight())
+    }
+}
+
+@Composable
+private fun ScreenContent(screen: Screen, modifier: Modifier) {
+    when (screen) {
+        Screen.Player -> PlayerScreen(modifier)
+        Screen.Gallery -> GalleryScreen(modifier)
+        Screen.Feed -> FeedScreen(modifier)
     }
 }