make audioplayer landscape layout be halfway usable

This commit is contained in:
Christian Schabesberger 2024-09-23 20:16:05 +02:00
parent f750fa8b4b
commit 698e9776af
8 changed files with 278 additions and 126 deletions

View File

@ -46,6 +46,7 @@ coil = "2.7.0"
reorderable = "2.4.0-alpha02" reorderable = "2.4.0-alpha02"
media3Session = "1.4.1" media3Session = "1.4.1"
media3ExoplayerDash = "1.4.1" media3ExoplayerDash = "1.4.1"
adaptiveAndroid = "1.0.0"
[libraries] [libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" } 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" } reorderable = { group = "sh.calvin.reorderable", name = "reorderable", version.ref = "reorderable" }
androidx-media3-session = { group = "androidx.media3", name = "media3-session", version.ref = "media3Session" } 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-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" }

View File

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

View File

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

View File

@ -31,6 +31,7 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.adaptive.currentWindowSize
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState import androidx.compose.runtime.collectAsState
@ -154,7 +155,9 @@ fun NewPlayerUI(
uiState.uiMode == UIModeState.AUDIO_STREAM_SELECT || uiState.uiMode == UIModeState.AUDIO_STREAM_SELECT ||
uiState.uiMode == UIModeState.AUDIO_CHAPTER_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 { } else {
LoadingPlaceholder(uiState.embeddedUiRatio) LoadingPlaceholder(uiState.embeddedUiRatio)
} }

View File

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

View File

@ -21,18 +21,22 @@
package net.newpipe.newplayer.ui.audioplayer package net.newpipe.newplayer.ui.audioplayer
import android.icu.text.CaseMap.Title
import androidx.annotation.OptIn import androidx.annotation.OptIn
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.core.tween import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut import androidx.compose.animation.fadeOut
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card import androidx.compose.material3.Card
@ -40,9 +44,12 @@ import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text 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.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
@ -76,11 +83,9 @@ fun lightAudioControlButtonColorScheme() = ButtonDefaults.buttonColors().copy(
@OptIn(UnstableApi::class) @OptIn(UnstableApi::class)
@Composable @Composable
fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) { fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState, isLandScape: Boolean) {
val insets = getInsets() val insets = getInsets()
val locale = getLocale()!!
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxSize() .fillMaxSize()
@ -113,101 +118,18 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
topBar = { topBar = {
}) { innerPadding -> }) { 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) @OptIn(UnstableApi::class)
@Preview(device = "id:pixel_6", showSystemUi = true)
@Composable @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
) )
} }
} }

View File

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

View File

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