Schabi
/
NewPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/libs.versions.toml
View File

@ -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" }

1
new-player/build.gradle.kts
View File

@ -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)

3
new-player/src/main/AndroidManifest.xml
View File

@ -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"

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

@ -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)
}

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

@ -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
.fillMaxWidth()
.aspectRatio(1F)
.weight(1F), contentAlignment = Alignment.Center) {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1F)
.weight(1F), contentAlignment = Alignment.Center
) {
Button(
modifier = Modifier
.fillMaxWidth()
@ -87,10 +92,12 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
}
}
Box(modifier = Modifier
.fillMaxWidth()
.aspectRatio(1F)
.weight(1F), contentAlignment = Alignment.Center) {
Box(
modifier = Modifier
.fillMaxWidth()
.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),
color = MaterialTheme.colorScheme.onSurface)
modifier = Modifier
.fillMaxSize()
.aspectRatio(1F),
color = MaterialTheme.colorScheme.onSurface
)
}
} else {
@ -133,10 +143,12 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
}
}
Box(modifier = Modifier
.fillMaxWidth()
.aspectRatio(1F)
.weight(1F), contentAlignment = Alignment.Center) {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1F)
.weight(1F), contentAlignment = Alignment.Center
) {
Button(
modifier = Modifier
.fillMaxWidth()
@ -155,10 +167,12 @@ fun AudioPlaybackController(viewModel: NewPlayerViewModel, uiState: NewPlayerUIS
}
}
Box(modifier = Modifier
.fillMaxWidth()
.aspectRatio(1F)
.weight(1F), contentAlignment = Alignment.Center) {
Box(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1F)
.weight(1F), contentAlignment = Alignment.Center
) {
Button(
modifier = Modifier
.fillMaxWidth()

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

@ -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(
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)
)
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)
)
}
if (isLandScape) {
LandscapeLayout(
viewModel = viewModel,
uiState = uiState,
innerPadding = innerPadding
)
} else {
PortraitLayout(
viewModel = viewModel,
uiState = uiState,
innerPadding = innerPadding
)
}
}
}
@ -215,13 +137,222 @@ fun AudioPlayerUI(viewModel: NewPlayerViewModel, uiState: NewPlayerUIState) {
}
@OptIn(UnstableApi::class)
@Preview(device = "id:pixel_6", showSystemUi = true)
@Composable
fun AudioPlayerUIPreview() {
VideoPlayerTheme {
AudioPlayerUI(
viewModel = NewPlayerViewModelDummy(),
uiState = NewPlayerUIState.DUMMY.copy(uiMode = UIModeState.FULLSCREEN_AUDIO)
private fun LandscapeLayout(
modifier: Modifier = Modifier,
viewModel: NewPlayerViewModel,
uiState: NewPlayerUIState,
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
)
}
}

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

@ -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
)
}
}

1
test-app/src/main/res/values/test_streams.xml
View File

@ -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>