refactor: lyrics layout setting

.phrasey/schema.toml

@@ -594,3 +594,12 @@ name = "ConsiderContributing"
 
 [[keys]]
 name = "Lyrics"
+
+[[keys]]
+name = "LyricsLayout"
+
+[[keys]]
+name = "ReplaceArtwork"
+
+[[keys]]
+name = "SeparatePage"

app/src/main/java/io/github/zyrouge/symphony/services/Settings.kt

@@ -17,6 +17,7 @@ import io.github.zyrouge.symphony.ui.theme.ThemeMode
 import io.github.zyrouge.symphony.ui.view.HomePageBottomBarLabelVisibility
 import io.github.zyrouge.symphony.ui.view.HomePages
 import io.github.zyrouge.symphony.ui.view.NowPlayingControlsLayout
+import io.github.zyrouge.symphony.ui.view.NowPlayingLyricsLayout
 import io.github.zyrouge.symphony.ui.view.home.ForYou
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -77,6 +78,7 @@ object SettingsKeys {
     const val showUpdateToast = "show_update_toast"
     const val fontScale = "font_scale"
     const val contentScale = "content_scale"
+    const val nowPlayingLyricsLayout = "now_playing_lyrics_layout"
 }
 
 object SettingsDefaults {
@@ -128,6 +130,7 @@ object SettingsDefaults {
     const val showUpdateToast = true
     const val fontScale = 1.0f
     const val contentScale = 1.0f
+    val nowPlayingLyricsLayout = NowPlayingLyricsLayout.ReplaceArtwork
 }
 
 class SettingsManager(private val symphony: Symphony) {
@@ -238,6 +241,8 @@ class SettingsManager(private val symphony: Symphony) {
     val fontScale = _fontScale.asStateFlow()
     private val _contentScale = MutableStateFlow(getContentScale())
     val contentScale = _contentScale.asStateFlow()
+    private val _nowPlayingLyricsLayout = MutableStateFlow(getNowPlayingLyricsLayout())
+    val nowPlayingLyricsLayout = _nowPlayingLyricsLayout.asStateFlow()
 
     fun getThemeMode() = getSharedPreferences().getString(SettingsKeys.themeMode, null)
         ?.let { ThemeMode.valueOf(it) }
@@ -831,6 +836,17 @@ class SettingsManager(private val symphony: Symphony) {
         _contentScale.updateUsingValue(getContentScale())
     }
 
+    fun getNowPlayingLyricsLayout() = getSharedPreferences()
+        .getEnum(SettingsKeys.nowPlayingLyricsLayout, null)
+        ?: SettingsDefaults.nowPlayingLyricsLayout
+
+    fun setNowPlayingLyricsLayout(value: NowPlayingLyricsLayout) {
+        getSharedPreferences().edit {
+            putEnum(SettingsKeys.nowPlayingLyricsLayout, value)
+        }
+        _nowPlayingLyricsLayout.updateUsingValue(getNowPlayingLyricsLayout())
+    }
+
     private fun getSharedPreferences() = symphony.applicationContext.getSharedPreferences(
         SettingsKeys.identifier,
         Context.MODE_PRIVATE,
@@ -839,7 +855,7 @@ class SettingsManager(private val symphony: Symphony) {
 
 private inline fun <reified T : Enum<T>> SharedPreferences.getEnum(
     key: String,
-    defaultValue: T?
+    defaultValue: T?,
 ): T? {
     var result = defaultValue
     getString(key, null)?.let { value ->
@@ -850,7 +866,7 @@ private inline fun <reified T : Enum<T>> SharedPreferences.getEnum(
 
 private inline fun <reified T : Enum<T>> SharedPreferences.Editor.putEnum(
     key: String,
-    value: T?
+    value: T?,
 ) = putString(key, value?.name)
 
 private inline fun <reified T : Enum<T>> parseEnumValue(value: String): T? =

app/src/main/java/io/github/zyrouge/symphony/ui/components/TimedContentText.kt

@@ -37,6 +37,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.lerp
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.github.zyrouge.symphony.ui.helpers.TransitionDurations
 import io.github.zyrouge.symphony.utils.TimedContent
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.launch
@@ -177,7 +178,7 @@ private fun animateTextStyleAsState(targetValue: TextStyle): State<TextStyle> {
         previousTextStyle = textStyleState.value
         nextTextStyle = targetValue
         animation.snapTo(0f)
-        animation.animateTo(1f)
+        animation.animateTo(1f, TransitionDurations.Fast.asTween())
     }
 
     return textStyleState

app/src/main/java/io/github/zyrouge/symphony/ui/helpers/Transitions.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.IntSize
 
 sealed class TransitionDurations(val milliseconds: Int) {
+    data object Fast : TransitionDurations(150)
     data object Normal : TransitionDurations(300)
     data object Slow : TransitionDurations(500)
 

app/src/main/java/io/github/zyrouge/symphony/ui/view/Lyrics.kt

@@ -19,8 +19,10 @@ import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import io.github.zyrouge.symphony.ui.components.IconButtonPlaceholder
@@ -69,6 +71,9 @@ fun LyricsView(context: ViewContext) {
                     actions = {
                         IconButtonPlaceholder()
                     },
+                    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                        containerColor = Color.Transparent
+                    ),
                 )
             },
         ) { contentPadding ->
@@ -83,7 +88,9 @@ fun LyricsView(context: ViewContext) {
                             LyricsText(
                                 context,
                                 style = TimedContentTextStyle(
-                                    highlighted = MaterialTheme.typography.titleMedium,
+                                    highlighted = MaterialTheme.typography.titleMedium.copy(
+                                        color = LocalContentColor.current,
+                                    ),
                                     active = MaterialTheme.typography.titleLarge.copy(
                                         fontWeight = FontWeight.Bold,
                                         color = MaterialTheme.colorScheme.primary,

app/src/main/java/io/github/zyrouge/symphony/ui/view/NowPlaying.kt

@@ -33,6 +33,7 @@ data class NowPlayingData(
     val seekBackDuration: Int,
     val seekForwardDuration: Int,
     val controlsLayout: NowPlayingControlsLayout,
+    val lyricsLayout: NowPlayingLyricsLayout,
 )
 
 data class NowPlayingStates(
@@ -48,6 +49,11 @@ enum class NowPlayingControlsLayout {
     Traditional,
 }
 
+enum class NowPlayingLyricsLayout {
+    ReplaceArtwork,
+    SeparatePage,
+}
+
 @Composable
 fun NowPlayingView(context: ViewContext) {
 
@@ -89,6 +95,7 @@ fun NowPlayingWithData(
     val seekBackDuration by context.symphony.settings.seekBackDuration.collectAsState()
     val seekForwardDuration by context.symphony.settings.seekForwardDuration.collectAsState()
     val controlsLayout by context.symphony.settings.nowPlayingControlsLayout.collectAsState()
+    val lyricsLayout by context.symphony.settings.nowPlayingLyricsLayout.collectAsState()
     val isViable by remember(song) {
         derivedStateOf { song != null }
     }
@@ -112,6 +119,7 @@ fun NowPlayingWithData(
             seekBackDuration = seekBackDuration,
             seekForwardDuration = seekForwardDuration,
             controlsLayout = controlsLayout,
+            lyricsLayout = lyricsLayout,
         )
 
         else -> null

app/src/main/java/io/github/zyrouge/symphony/ui/view/Settings.kt

@@ -17,6 +17,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.automirrored.filled.Label
 import androidx.compose.material.icons.automirrored.filled.Wysiwyg
+import androidx.compose.material.icons.automirrored.outlined.Article
 import androidx.compose.material.icons.filled.BugReport
 import androidx.compose.material.icons.filled.CenterFocusWeak
 import androidx.compose.material.icons.filled.Code
@@ -127,6 +128,7 @@ fun SettingsView(context: ViewContext) {
     val nowPlayingControlsLayout by context.symphony.settings.nowPlayingControlsLayout.collectAsState()
     val nowPlayingAdditionalInfo by context.symphony.settings.nowPlayingAdditionalInfo.collectAsState()
     val nowPlayingSeekControls by context.symphony.settings.nowPlayingSeekControls.collectAsState()
+    val nowPlayingLyricsLayout by context.symphony.settings.nowPlayingLyricsLayout.collectAsState()
     val songsFilterPattern by context.symphony.settings.songsFilterPattern.collectAsState()
     val blacklistFolders by context.symphony.settings.blacklistFolders.collectAsState()
     val whitelistFolders by context.symphony.settings.whitelistFolders.collectAsState()
@@ -590,6 +592,20 @@ fun SettingsView(context: ViewContext) {
                             context.symphony.settings.setNowPlayingControlsLayout(value)
                         }
                     )
+                    SettingsOptionTile(
+                        icon = {
+                            Icon(Icons.AutoMirrored.Outlined.Article, null)
+                        },
+                        title = {
+                            Text(context.symphony.t.LyricsLayout)
+                        },
+                        value = nowPlayingLyricsLayout,
+                        values = NowPlayingLyricsLayout.entries
+                            .associateWith { it.label(context) },
+                        onChange = { value ->
+                            context.symphony.settings.setNowPlayingLyricsLayout(value)
+                        }
+                    )
                     SettingsSwitchTile(
                         icon = {
                             Icon(Icons.AutoMirrored.Filled.Wysiwyg, null)
@@ -825,3 +841,10 @@ fun NowPlayingControlsLayout.label(context: ViewContext): String {
         NowPlayingControlsLayout.Traditional -> context.symphony.t.Traditional
     }
 }
+
+fun NowPlayingLyricsLayout.label(context: ViewContext): String {
+    return when (this) {
+        NowPlayingLyricsLayout.ReplaceArtwork -> context.symphony.t.ReplaceArtwork
+        NowPlayingLyricsLayout.SeparatePage -> context.symphony.t.SeparatePage
+    }
+}

app/src/main/java/io/github/zyrouge/symphony/ui/view/nowPlaying/Body.kt

@@ -19,6 +19,7 @@ import io.github.zyrouge.symphony.ui.helpers.ScreenOrientation
 import io.github.zyrouge.symphony.ui.helpers.ViewContext
 import io.github.zyrouge.symphony.ui.view.NowPlayingData
 import io.github.zyrouge.symphony.ui.view.NowPlayingDefaults
+import io.github.zyrouge.symphony.ui.view.NowPlayingLyricsLayout
 import io.github.zyrouge.symphony.ui.view.NowPlayingStates
 import kotlinx.coroutines.flow.MutableStateFlow
 
@@ -28,7 +29,9 @@ internal val defaultHorizontalPadding = 20.dp
 fun NowPlayingBody(context: ViewContext, data: NowPlayingData) {
     val states = remember {
         NowPlayingStates(
-            showLyrics = MutableStateFlow(NowPlayingDefaults.showLyrics),
+            showLyrics = MutableStateFlow(
+                data.lyricsLayout == NowPlayingLyricsLayout.ReplaceArtwork && NowPlayingDefaults.showLyrics
+            ),
         )
     }
 

app/src/main/java/io/github/zyrouge/symphony/ui/view/nowPlaying/BottomBar.kt

@@ -49,6 +49,7 @@ import io.github.zyrouge.symphony.ui.helpers.ViewContext
 import io.github.zyrouge.symphony.ui.helpers.navigate
 import io.github.zyrouge.symphony.ui.view.NowPlayingData
 import io.github.zyrouge.symphony.ui.view.NowPlayingDefaults
+import io.github.zyrouge.symphony.ui.view.NowPlayingLyricsLayout
 import io.github.zyrouge.symphony.ui.view.NowPlayingStates
 import io.github.zyrouge.symphony.utils.Logger
 import kotlinx.coroutines.launch
@@ -107,10 +108,17 @@ fun NowPlayingBodyBottomBar(
 
                 IconButton(
                     onClick = {
-                        val nShowLyrics = !showLyricsState.value
-                        showLyricsState.value = nShowLyrics
-                        NowPlayingDefaults.showLyrics = nShowLyrics
-                        context.navController.navigate(Routes.Lyrics)
+                        when (lyricsLayout) {
+                            NowPlayingLyricsLayout.ReplaceArtwork -> {
+                                val nShowLyrics = !showLyricsState.value
+                                showLyricsState.value = nShowLyrics
+                                NowPlayingDefaults.showLyrics = nShowLyrics
+                            }
+
+                            NowPlayingLyricsLayout.SeparatePage -> {
+                                context.navController.navigate(Routes.Lyrics)
+                            }
+                        }
                     }
                 ) {
                     Icon(

i18n/en.toml

@@ -200,4 +200,6 @@ Equalizer = "Equalizer"
 LaunchingEqualizerFailedX = "Launching equalizer failed (Error: {x})"
 ConsiderContributing = "Consider contributing!"
 Lyrics = "Lyrics"
-
+LyricsLayout = "Lyrics layout"
+ReplaceArtwork = "Replace artwork"
+SeparatePage = "Separate page"