Update screenshots, fix fonts and artist image quality

README.md

@@ -1,4 +1,9 @@
-[日本語のREADMEへ](readme/README-ja.md)
+<p>
+    <a href="readme/README-ja.md">日本語のREADMEへ</a>
+    <a href="https://discord.gg/B4uY4FkkJ3"><img src="https://img.shields.io/discord/1133321339495788625?style=for-the-badge&logo=discord&label=Discord&color=4f58d6" align="right"></a>
+</p>
+
+<br>
 
 ###
 <img align="left" width="140" src="androidApp/src/main/ic_launcher-playstore.png">
@@ -10,8 +15,7 @@
 # SpMp
 A YouTube Music client with a focus on language and metadata customisation, built for Android using Jetpack Compose and Kotlin.
 
-<a href="https://discord.gg/B4uY4FkkJ3"><img src="https://img.shields.io/discord/1133321339495788625?style=for-the-badge&logo=discord&label=Discord&color=4f58d6"></a>
-
+<br>
 <br>
 
 ## Development status
@@ -21,7 +25,7 @@ Support for Compose Multiplatform on desktop is [planned](https://github.com/toa
 
 <br>
 
-<img align="right" width="20%" src="metadata/en-US/images/phoneScreenshots/1.png">
+<img align="right" width="20%" src="metadata/en-US/images/phoneScreenshots/0.png">
 
 # Features
 - Edit song, artist, and playlist titles
@@ -40,23 +44,23 @@ Support for Compose Multiplatform on desktop is [planned](https://github.com/toa
 <details open>
     <summary><h2>Screenshots</h2></summary>
     <p align="center">
-        <img src="metadata/en-US/images/phoneScreenshots/5.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="metadata/en-US/images/phoneScreenshots/2.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="metadata/en-US/images/phoneScreenshots/4.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/7.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/8.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/1.png" style="max-height:70vh;object-fit:contain;" width="25%">
     </p>
 </details>
 
 <details closed>
     <summary><h2>More Screenshots</h2></summary>
     <p align="center">
-        <img src="metadata/en-US/images/phoneScreenshots/6.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="metadata/en-US/images/phoneScreenshots/10.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="metadata/en-US/images/phoneScreenshots/8.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/9.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/2.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/4.png" style="max-height:70vh;object-fit:contain;" width="25%">
     </p>
     <p align="center">
-        <img src="metadata/en-US/images/phoneScreenshots/7.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="metadata/en-US/images/phoneScreenshots/9.png" style="max-height:70vh;object-fit:contain;" width="25%">
         <img src="metadata/en-US/images/phoneScreenshots/3.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/5.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="metadata/en-US/images/phoneScreenshots/6.png" style="max-height:70vh;object-fit:contain;" width="25%">
     </p>
 </details>
 

readme/README-ja.md

@@ -1,4 +1,9 @@
-[To the English README](../README.md)
+<p>
+    <a href="../README.md">To the English README</a>
+    <a href="https://discord.gg/B4uY4FkkJ3"><img src="https://img.shields.io/discord/1133321339495788625?style=for-the-badge&logo=discord&label=Discord&color=4f58d6" align="right"></a>
+</p>
+
+<br>
 
 ###
 <img align="left" width="140" src="../androidApp/src/main/ic_launcher-playstore.png">
@@ -10,8 +15,7 @@
 # SpMp
 言語とメタデータのカスタマイズに特化した YouTube Music のアプリ。Jetpack ComposeとKotlinを使って主にAndroid向けに開発されています。
 
-<a href="https://discord.gg/B4uY4FkkJ3"><img src="https://img.shields.io/discord/1133321339495788625?style=for-the-badge&logo=discord&label=Discord&color=4f58d6"></a>
-
+<br>
 <br>
 
 ## 開発状態
@@ -21,7 +25,7 @@ Compose Multiplatformでのデスクトップ上サポートは[計画](https://
 
 <br>
 
-<img align="right" width="20%" src="screenshot_1.png">
+<img align="right" width="20%" src="../metadata/en-US/images/phoneScreenshots/0.png">
 
 ## 機能
 - 曲、アーティスト、またはプレイリストのタイトルを編集
@@ -40,23 +44,23 @@ Compose Multiplatformでのデスクトップ上サポートは[計画](https://
 <details open>
     <summary><h2>スクリーンショット</h2></summary>
     <p align="center">
-        <img src="../metadata/en-US/images/phoneScreenshots/5.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="../metadata/en-US/images/phoneScreenshots/2.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="../metadata/en-US/images/phoneScreenshots/4.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/7.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/8.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/1.png" style="max-height:70vh;object-fit:contain;" width="25%">
     </p>
 </details>
 
 <details closed>
     <summary><h2>他のスクリーンショット</h2></summary>
     <p align="center">
-        <img src="../metadata/en-US/images/phoneScreenshots/7.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="../metadata/en-US/images/phoneScreenshots/10.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="../metadata/en-US/images/phoneScreenshots/8.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/9.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/2.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/4.png" style="max-height:70vh;object-fit:contain;" width="25%">
     </p>
     <p align="center">
-        <img src="../metadata/en-US/images/phoneScreenshots/6.png" style="max-height:70vh;object-fit:contain;" width="25%">
-        <img src="../metadata/en-US/images/phoneScreenshots/9.png" style="max-height:70vh;object-fit:contain;" width="25%">
         <img src="../metadata/en-US/images/phoneScreenshots/3.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/5.png" style="max-height:70vh;object-fit:contain;" width="25%">
+        <img src="../metadata/en-US/images/phoneScreenshots/6.png" style="max-height:70vh;object-fit:contain;" width="25%">
     </p>
 </details>
 

shared/src/commonMain/kotlin/com/toasterofbread/spmp/model/mediaitem/loader/MediaItemThumbnailLoader.kt

@@ -137,6 +137,9 @@ internal object MediaItemThumbnailLoader: ListenerLoader<MediaItemThumbnailLoade
     interface ItemState {
         val loaded_images: Map<MediaItemThumbnailProvider.Quality, WeakReference<ImageBitmap>>
         val loading_images: List<MediaItemThumbnailProvider.Quality>
+
+        fun getHighestQuality(): ImageBitmap? =
+            loaded_images.maxByOrNull { it.key.ordinal }?.value?.get()
     }
 
     @Composable

shared/src/commonMain/kotlin/com/toasterofbread/spmp/platform/Composables.kt

@@ -22,6 +22,7 @@ import androidx.compose.ui.unit.dp
 import com.toasterofbread.spmp.platform.composable.BackHandler
 import com.toasterofbread.spmp.platform.composable.PlatformDialog
 import com.toasterofbread.utils.common.thenIf
+import com.toasterofbread.utils.composable.WidthShrinkText
 
 @Composable
 fun LargeDropdownMenu(
@@ -65,7 +66,7 @@ fun LargeDropdownMenu(
                                 }
                                 .padding(8.dp)
                         ) {
-                            Text(
+                            WidthShrinkText(
                                 text = getItem(index),
                                 style = MaterialTheme.typography.titleSmall
                             )

shared/src/commonMain/kotlin/com/toasterofbread/spmp/resources/uilocalisation/localised/YoutubeHomeFeed.kt

@@ -35,7 +35,7 @@ fun getYoutubeHomeFeedLocalisations(languages: UILanguages): YoutubeUILocalisati
                 es to "Favoritos olvidados"
             )
             add(
-                en to "TODO",
+                en to "From your library",
                 ja to "ライブラリから"
             )
             add(

shared/src/commonMain/kotlin/com/toasterofbread/spmp/service/playercontroller/PersistentQueueHandler.kt

@@ -175,6 +175,7 @@ internal class PersistentQueueHandler(val player: PlayerServicePlayer, val conte
                         addMultipleToQueue(songs, 0)
                         player.seekToSong(metadata.song_index)
                         player.seekTo(metadata.position_ms)
+                        player.pause()
                     }
                 }
             }

shared/src/commonMain/kotlin/com/toasterofbread/spmp/ui/component/mediaitempreview/MediaItemPreview.kt

@@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
@@ -26,7 +28,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -278,7 +279,7 @@ fun MediaItemPreviewLong(
 private fun InfoText(text: String, contentColour: (() -> Color)?) {
     Text(
         text,
-        Modifier.alpha(0.5f),
+        Modifier.alpha(0.5f).requiredHeight(20.dp),
         fontSize = 12.sp,
         color = contentColour?.invoke() ?: Color.Unspecified,
         maxLines = 1,

shared/src/commonMain/kotlin/com/toasterofbread/spmp/ui/layout/artistpage/ArtistLayout.kt

@@ -96,7 +96,7 @@ fun ArtistLayout(
     val density = LocalDensity.current
 
     val thumbnail_provider: MediaItemThumbnailProvider? by artist.ThumbnailProvider.observe(player.database)
-    val thumbnail_load_state = MediaItemThumbnailLoader.rememberItemState(artist)
+    val thumbnail_load_state: MediaItemThumbnailLoader.ItemState = MediaItemThumbnailLoader.rememberItemState(artist)
 
     LaunchedEffect(thumbnail_provider) {
         thumbnail_provider?.also { provider ->
@@ -176,8 +176,10 @@ fun ArtistLayout(
                 TopBar()
             }
 
+            val th = thumbnail_load_state.getHighestQuality()
+
             // Thumbnail
-            Crossfade(thumbnail_load_state.loaded_images.values.firstOrNull()?.get()) { thumbnail ->
+            Crossfade(th) { thumbnail ->
                 if (thumbnail != null) {
                     if (accent_colour == null) {
                         accent_colour = player.theme.makeVibrant(thumbnail.getThemeColour() ?: player.theme.accent)

shared/src/commonMain/kotlin/com/toasterofbread/spmp/ui/layout/nowplaying/maintab/SeekBar.kt

@@ -6,14 +6,12 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.IntrinsicSize
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -28,13 +26,11 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.compose.ui.zIndex
 import com.github.krottv.compose.sliders.DefaultThumb
 import com.github.krottv.compose.sliders.SliderValueHorizontal
 import com.toasterofbread.spmp.ui.layout.nowplaying.POSITION_UPDATE_INTERVAL_MS
@@ -69,13 +65,15 @@ fun SeekBar(seek: (Float) -> Unit) {
         state
 
         Column(verticalArrangement = Arrangement.spacedBy(5.dp)) {
-            Row(
-                Modifier.fillMaxWidth().padding(horizontal = 7.dp).zIndex(1f).requiredHeight(12.dp),
-                horizontalArrangement = Arrangement.SpaceBetween,
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                SeekBarTimeText(player.status.getPositionMillis(), player.getNPOnBackground())
-                SeekBarTimeText(player.status.m_duration_ms, player.getNPOnBackground())
+            Box(Modifier.fillMaxWidth().padding(horizontal = 7.dp).requiredHeight(12.dp), contentAlignment = Alignment.BottomCenter) {
+                Row(
+                    Modifier.fillMaxWidth().requiredHeight(30.dp),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    SeekBarTimeText(player.status.getPositionMillis(), player.getNPOnBackground())
+                    SeekBarTimeText(player.status.m_duration_ms, player.getNPOnBackground())
+                }
             }
 
             SliderValueHorizontal(
@@ -110,7 +108,8 @@ private fun SeekBarTimeText(time: Long, colour: Color, modifier: Modifier = Modi
             fontSize = 12.sp,
             fontWeight = FontWeight.Light,
             color = colour,
-            modifier = modifier
+            modifier = modifier,
+            softWrap = false
         )
     }
 }

shared/src/commonMain/kotlin/com/toasterofbread/utils/common/FuriganaText.kt

@@ -233,7 +233,7 @@ private fun getLyricsInlineTextContent(
         placeholder = Placeholder(
             width = (text.length.toDouble() + ((text.length - 1) * 0.05)).em * (
                 if (text.any { it.isFullWidth() }) 1f
-                else 0.55f
+                else 0.6f
             ),
             height = (font_size.value + (reading_font_size.value * 2)).sp,
             placeholderVerticalAlign = PlaceholderVerticalAlign.Bottom