make audioplayer landscape layout be halfway usable

gradle/libs.versions.toml

@@ -46,6 +46,7 @@ coil = "2.7.0"
 reorderable = "2.4.0-alpha02"
 media3Session = "1.4.1"
 media3ExoplayerDash = "1.4.1"
+adaptiveAndroid = "1.0.0"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -83,6 +84,7 @@ coil-compose = { group = "io.coil-kt", name = "coil-compose", version.ref = "coi
 reorderable = { group = "sh.calvin.reorderable", name = "reorderable", version.ref = "reorderable" }
 androidx-media3-session = { group = "androidx.media3", name = "media3-session", version.ref = "media3Session" }
 androidx-media3-exoplayer-dash = { group = "androidx.media3", name = "media3-exoplayer-dash", version.ref = "media3ExoplayerDash" }
+androidx-adaptive-android = { group = "androidx.compose.material3.adaptive", name = "adaptive-android", version.ref = "adaptiveAndroid" }
 
 
 

new-player/build.gradle.kts

@@ -70,6 +70,7 @@ dependencies {
     implementation(libs.reorderable)
     implementation(libs.androidx.media3.session)
     implementation(libs.androidx.media3.exoplayer.dash)
+    implementation(libs.androidx.adaptive.android)
 
     ksp(libs.hilt.android.compiler)
     ksp(libs.androidx.hilt.compiler)

new-player/src/main/AndroidManifest.xml

@@ -4,7 +4,8 @@
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
     <uses-permission android:name="android.permission.WAKE_LOCK" />
 
-    <application>
+    <application
+        android:resizeableActivity="true">
         <service
             android:name=".service.NewPlayerService"
             android:foregroundServiceType="mediaPlayback"

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

@@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.adaptive.currentWindowSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -154,7 +155,9 @@ fun NewPlayerUI(
             uiState.uiMode == UIModeState.AUDIO_STREAM_SELECT ||
             uiState.uiMode == UIModeState.AUDIO_CHAPTER_SELECT
         ) {
-            AudioPlayerUI(viewModel = viewModel, uiState = uiState)
+            val windowSize = currentWindowSize()
+            AudioPlayerUI(viewModel = viewModel, uiState = uiState,
+                isLandScape = windowSize.height < windowSize.width)
         } else {
             LoadingPlaceholder(uiState.embeddedUiRatio)
         }

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

@@ -57,19 +57,24 @@ import net.newpipe.newplayer.ui.LoadingPlaceholder
 import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
 
 @androidx.annotation.OptIn(UnstableApi::class)
-@OptIn(UnstableApi::class)
 @Composable
-fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
+fun AudioPlaybackController(
+    modifier: Modifier = Modifier,
+    viewModel: NewPlayerViewModel,
+    uiState: NewPlayerUIState
+) {
     Row(
-        modifier = Modifier.background(MaterialTheme.colorScheme.background),
+        modifier = modifier.background(MaterialTheme.colorScheme.background),
         verticalAlignment = Alignment.CenterVertically
     ) {
         //ShuffleModeButton(viewModel = viewModel, uiState = uiState)
 
-        Box(modifier = Modifier
+        Box(
-            .fillMaxWidth()
+            modifier = Modifier
-            .aspectRatio(1F)
+                .fillMaxWidth()
-            .weight(1F), contentAlignment = Alignment.Center) {
+                .aspectRatio(1F)
+                .weight(1F), contentAlignment = Alignment.Center
+        ) {
             Button(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -87,10 +92,12 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
             }
         }
 
-        Box(modifier = Modifier
+        Box(
-            .fillMaxWidth()
+            modifier = Modifier
-            .aspectRatio(1F)
+                .fillMaxWidth()
-            .weight(1F), contentAlignment = Alignment.Center) {
+                .aspectRatio(1F)
+                .weight(1F), contentAlignment = Alignment.Center
+        ) {
             Button(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -114,11 +121,14 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
             onClick = if (uiState.playing) viewModel::pause else viewModel::play,
             shape = CircleShape
         ) {
-            if(uiState.isLoading) {
+            if (uiState.isLoading) {
                 Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                     CircularProgressIndicator(
-                        modifier = Modifier.fillMaxSize().aspectRatio(1F),
+                        modifier = Modifier
-                        color = MaterialTheme.colorScheme.onSurface)
+                            .fillMaxSize()
+                            .aspectRatio(1F),
+                        color = MaterialTheme.colorScheme.onSurface
+                    )
                 }
 
             } else {
@@ -133,10 +143,12 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
             }
         }
 
-        Box(modifier = Modifier
+        Box(
-            .fillMaxWidth()
+            modifier = Modifier
-            .aspectRatio(1F)
+                .fillMaxWidth()
-            .weight(1F), contentAlignment = Alignment.Center) {
+                .aspectRatio(1F)
+                .weight(1F), contentAlignment = Alignment.Center
+        ) {
             Button(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -155,10 +167,12 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
             }
         }
 
-        Box(modifier = Modifier
+        Box(
-            .fillMaxWidth()
+            modifier = Modifier
-            .aspectRatio(1F)
+                .fillMaxWidth()
-            .weight(1F), contentAlignment = Alignment.Center) {
+                .aspectRatio(1F)
+                .weight(1F), contentAlignment = Alignment.Center
+        ) {
             Button(
                 modifier = Modifier
                     .fillMaxWidth()

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

@@ -21,18 +21,22 @@
 
 package net.newpipe.newplayer.ui.audioplayer
 
+import android.icu.text.CaseMap.Title
 import androidx.annotation.OptIn
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
+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.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
@@ -40,9 +44,12 @@ import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
+import androidx.compose.material3.adaptive.currentWindowSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -76,11 +83,9 @@ fun lightAudioControlButtonColorScheme() = ButtonDefaults.buttonColors().copy(
 
 @OptIn(UnstableApi::class)
 @Composable
-fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
+fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState, isLandScape: Boolean) {
     val insets = getInsets()
 
-    val locale = getLocale()!!
-
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -113,101 +118,18 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
                 topBar = {
 
                 }) { innerPadding ->
-                Box(
+                if (isLandScape) {
-                    modifier = Modifier
+                    LandscapeLayout(
-                        .fillMaxSize()
+                        viewModel = viewModel,
-                        .padding(innerPadding)
+                        uiState = uiState,
-                ) {
+                        innerPadding = innerPadding
-                    Column(
+                    )
-                        modifier = Modifier
+                } else {
-                            .fillMaxSize()
+                    PortraitLayout(
-                    ) {
+                        viewModel = viewModel,
-                        Column(
+                        uiState = uiState,
-                            modifier = Modifier
+                        innerPadding = innerPadding
-                                .fillMaxSize()
+                    )
-                                .padding(20.dp)
-                                .weight(1f),
-                            horizontalAlignment = Alignment.CenterHorizontally,
-                        ) {
-                            Box(
-                                modifier = Modifier
-                                    .fillMaxSize()
-                                    .weight(1f)
-                            )
-                            Box {
-                                Card(
-                                    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
-                                ) {
-                                    Thumbnail(
-                                        modifier = Modifier.fillMaxWidth(),
-                                        thumbnail = uiState.currentlyPlaying?.mediaMetadata?.artworkUri,
-                                        contentDescription = stringResource(
-                                            id = R.string.stream_thumbnail
-                                        ),
-                                    )
-                                }
-                            }
-                            Box(
-                                modifier = Modifier
-                                    .fillMaxSize()
-                                    .weight(1f)
-                            )
-                            Text(
-                                text = uiState.currentlyPlaying?.mediaMetadata?.title.toString(),
-                                overflow = TextOverflow.Ellipsis,
-                                maxLines = 1,
-                                fontSize = 6.em
-                            )
-                            Text(
-                                text = uiState.currentlyPlaying?.mediaMetadata?.artist.toString(),
-                                overflow = TextOverflow.Ellipsis,
-                                maxLines = 1,
-                                fontSize = 4.em
-                            )
-
-                            Box(
-                                modifier = Modifier
-                                    .fillMaxSize()
-                                    .weight(0.2f)
-                            )
-
-                            NewPlayerSeeker(viewModel = viewModel, uiState = uiState)
-
-                            Row() {
-                                Text(
-                                    getTimeStringFromMs(
-                                        uiState.playbackPositionInMs,
-                                        getLocale() ?: locale
-                                    )
-                                )
-                                Box(modifier = Modifier.fillMaxWidth().weight(1f))
-                                Text(
-                                    getTimeStringFromMs(
-                                        uiState.durationInMs,
-                                        getLocale() ?: locale
-                                    )
-                                )
-                            }
-
-                            Box(
-                                modifier = Modifier
-                                    .fillMaxSize()
-                                    .weight(0.2f)
-                            )
-                            AudioPlaybackController(viewModel = viewModel, uiState = uiState)
-                            Box(
-                                modifier = Modifier
-                                    .fillMaxSize()
-                                    .weight(0.2f)
-                            )
-                        }
-                        AudioBottomUI(viewModel, uiState)
-                        Box(
-                            modifier = Modifier
-                                .fillMaxSize()
-                                .weight(0.025f)
-                        )
-                    }
                 }
             }
         }
@@ -215,13 +137,222 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
 }
 
 @OptIn(UnstableApi::class)
-@Preview(device = "id:pixel_6", showSystemUi = true)
 @Composable
-fun AudioPlayerUIPreview() {
+private fun LandscapeLayout(
-    VideoPlayerTheme {
+    modifier: Modifier = Modifier,
-        AudioPlayerUI(
+    viewModel: NewPlayerViewModel,
-            viewModel = NewPlayerViewModelDummy(),
+    uiState: NewPlayerUIState,
-            uiState = NewPlayerUIState.DUMMY.copy(uiMode = UIModeState.FULLSCREEN_AUDIO)
+    innerPadding: PaddingValues
+) {
+    Row(modifier = modifier
+        .fillMaxSize()
+        .padding(20.dp)) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .weight(1f)
+        ) {
+            CoverArt(modifier = Modifier
+                .fillMaxSize()
+                .weight(0.9f), uiState = uiState)
+
+            TitleView(modifier = Modifier
+                .fillMaxSize()
+                .weight(0.1f), uiState = uiState)
+        }
+
+        Box(modifier = Modifier.width(20.dp))
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .weight(1f)
+        ) {
+            Column(
+                verticalArrangement = Arrangement.SpaceAround,
+                modifier = Modifier
+                    .fillMaxSize()
+                    .weight(1f)
+            ) {
+                ProgressUI(
+                    viewModel = viewModel,
+                    uiState = uiState
+                )
+                AudioPlaybackController(
+                    viewModel = viewModel,
+                    uiState = uiState
+                )
+            }
+            AudioBottomUI(viewModel, uiState)
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .weight(0.025f)
+            )
+        }
+    }
+}
+
+@OptIn(UnstableApi::class)
+@Composable
+private fun PortraitLayout(
+    modifier: Modifier = Modifier,
+    viewModel: NewPlayerViewModel,
+    uiState: NewPlayerUIState,
+    innerPadding: PaddingValues
+) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(innerPadding)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(20.dp)
+                    .weight(1f),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .weight(1f)
+                )
+                CoverArt(uiState = uiState)
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .weight(0.3f)
+                )
+
+                TitleView(uiState = uiState)
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .weight(0.6f)
+                )
+
+                ProgressUI(viewModel = viewModel, uiState = uiState)
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .weight(0.2f)
+                )
+                AudioPlaybackController(viewModel = viewModel, uiState = uiState)
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .weight(0.2f)
+                )
+            }
+            AudioBottomUI(viewModel, uiState)
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .weight(0.025f)
+            )
+        }
+    }
+}
+
+@OptIn(UnstableApi::class)
+@Composable
+private fun ProgressUI(
+    modifier: Modifier = Modifier,
+    viewModel: NewPlayerViewModel,
+    uiState: NewPlayerUIState
+) {
+    val locale = getLocale()!!
+
+    Column(modifier = modifier) {
+        NewPlayerSeeker(viewModel = viewModel, uiState = uiState)
+        Row {
+            Text(
+                getTimeStringFromMs(
+                    uiState.playbackPositionInMs,
+                    getLocale() ?: locale
+                )
+            )
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+            )
+            Text(
+                getTimeStringFromMs(
+                    uiState.durationInMs,
+                    getLocale() ?: locale
+                )
+            )
+        }
+    }
+}
+
+@OptIn(UnstableApi::class)
+@Composable
+private fun TitleView(modifier: Modifier = Modifier, uiState: NewPlayerUIState) {
+    Column(modifier = modifier) {
+        Text(
+            text = uiState.currentlyPlaying?.mediaMetadata?.title.toString(),
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            fontSize = 6.em
+        )
+        Text(
+            text = uiState.currentlyPlaying?.mediaMetadata?.artist.toString(),
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            fontSize = 4.em
+        )
+    }
+}
+
+@OptIn(UnstableApi::class)
+@Composable
+private fun CoverArt(modifier: Modifier = Modifier, uiState: NewPlayerUIState) {
+    Box {
+        Card(
+            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
+        ) {
+            Thumbnail(
+                modifier = Modifier.fillMaxWidth(),
+                thumbnail = uiState.currentlyPlaying?.mediaMetadata?.artworkUri,
+                contentDescription = stringResource(
+                    id = R.string.stream_thumbnail
+                ),
+            )
+        }
+    }
+}
+
+@OptIn(UnstableApi::class)
+@Preview(device = "id:pixel_6", showSystemUi = true)
+@Composable
+fun AudioPlayerUIPortraitPreview() {
+    VideoPlayerTheme {
+        AudioPlayerUI(
+            viewModel = NewPlayerViewModelDummy(),
+            uiState = NewPlayerUIState.DUMMY.copy(uiMode = UIModeState.FULLSCREEN_AUDIO),
+            isLandScape = false
+        )
+    }
+}
+
+@OptIn(UnstableApi::class)
+@Preview(device = "spec:parent=pixel_6,orientation=landscape", showSystemUi = true)
+@Composable
+fun AudioPlayerUILandscapePreview() {
+    VideoPlayerTheme {
+        AudioPlayerUI(
+            viewModel = NewPlayerViewModelDummy(),
+            uiState = NewPlayerUIState.DUMMY.copy(uiMode = UIModeState.FULLSCREEN_AUDIO),
+            isLandScape = true
         )
     }
 }

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

@@ -104,7 +104,7 @@ fun VideoPlayerControllerUIPreviewEmbeddedColorPreview() {
 @OptIn(UnstableApi::class)
 @Preview(device = "id:pixel_6")
 @Composable
-fun AudioPlayerUIPreviewEmbeddedColorPreview() {
+fun AudioPlayerUIColorPreview() {
     VideoPlayerTheme {
         PreviewBackgroundSurface {
             AudioPlayerUI(
@@ -119,6 +119,7 @@ fun AudioPlayerUIPreviewEmbeddedColorPreview() {
                     bufferedPercentage = 0.4f,
                     fastSeekSeconds = 10,
                 ),
+                isLandScape = false
             )
         }
     }

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

@@ -33,7 +33,6 @@
         <item>1200000</item>
         <item>1800000</item>
         <item>2400000</item>
-        <item>3600000</item>
     </integer-array>
     <integer name="ccc_6502_length">3116</integer>