playing, miniplayer: Use new text-wrap TailwindCSS properties

busybox11 · Feb 2, 2024 · b6b8f75 · b6b8f75
1 parent afdcc9f
commit b6b8f75
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/miniplayer.php b/miniplayer.php
@@ -87,8 +87,7 @@ class="absolute bottom-[10%] right-[10%] z-30 p-3 bg-black/20 border-2 border-wh
             <div class="flex flex-col my-auto mx-6">
                 <h1
                   x-text="$store.player.playbackObj.item?.name ?? translations.defaultTitleSong"
-                  style="text-wrap: balance"
-                  class="text-3xl font-bold"
+                  class="text-3xl font-bold text-pretty"
                   :class="{
                     'line-clamp-1': showAlbum,
                     'line-clamp-2': !showAlbum || !$store.player.playbackObj.item?.name,
@@ -97,16 +96,15 @@ class="text-3xl font-bold"
 
                 <h2
                     x-text="$store.player.playbackObj.item?.artists?.map(artist => artist.name).join(', ') ?? translations.defaultArtistSong"
-                    style="text-wrap: balance"
-                    class="text-xl font-semibold line-clamp-1"
+                    class="text-xl font-semibold line-clamp-1 text-pretty"
                     :class="{
                         'opacity-80': !showAlbum,
                     }"
                 ></h2>
 
                 <h3
                     x-show="showAlbum"
-                    x-text="$store.player.playbackObj?.item?.album?.name" class="text-xl font-semibold opacity-80 line-clamp-1" style="text-wrap: balance"
+                    x-text="$store.player.playbackObj?.item?.album?.name" class="text-xl font-semibold opacity-80 line-clamp-1 text-pretty"
                 ></h3>
             </div>
 

diff --git a/playing.php b/playing.php
@@ -151,14 +151,31 @@ class="absolute bottom-6 left-6 z-30 flex flex-row bg-black/20 border-2 border-w
             </div>
 
             <div class="flex flex-col lg:gap-1 xl:gap-2 w-full text-white">
-                <h1 x-text="$store.player.playbackObj.item?.name ?? translations.defaultTitleSong" class="text-4xl lg:text-7xl font-bold" style="text-wrap: balance"></h1>
-                <h2 x-text="$store.player.playbackObj.item?.artists?.map(artist => artist.name).join(', ') ?? translations.defaultArtistSong" class="text-2xl lg:text-5xl font-bold" style="text-wrap: balance"></h2>
-                <h3 x-text="$store.player.playbackObj?.item?.album?.name" class="text-xl lg:text-4xl font-semibold opacity-80" style="text-wrap: balance"></h3>
+                <h1
+                    x-text="$store.player.playbackObj.item?.name ?? translations.defaultTitleSong"
+                    class="text-4xl lg:text-7xl font-bold text-pretty">
+                </h1>
+                <h2
+                    x-text="$store.player.playbackObj.item?.artists?.map(artist => artist.name).join(', ') ?? translations.defaultArtistSong"
+                    class="text-2xl lg:text-5xl font-bold text-pretty">
+                </h2>
+                <h3
+                    x-text="$store.player.playbackObj?.item?.album?.name"
+                    class="text-xl lg:text-4xl font-semibold opacity-80 text-pretty">
+                </h3>
 
                 <div class="flex flex-col gap-2 lg:gap-3 mt-4 lg:mt-8 w-full">
                     <div class="text-xl flex flex-row justify-between w-full font-semibold">
-                        <span x-text="msToTime($store.player.playbackObj?.progress_ms)" x-show="$store.player.playbackObj?.progress_ms" x-cloak></span>
-                        <span x-text="msToTime($store.player.playbackObj?.item?.duration_ms)" x-show="$store.player.playbackObj?.item?.duration_ms" x-cloak></span>
+                        <span
+                            x-show="$store.player.playbackObj?.progress_ms"
+                            x-text="msToTime($store.player.playbackObj?.progress_ms)"
+                            x-cloak
+                        ></span>
+                        <span
+                            x-show="$store.player.playbackObj?.item?.duration_ms"
+                            x-text="msToTime($store.player.playbackObj?.item?.duration_ms)"
+                            x-cloak
+                        ></span>
                     </div>
 
                     <div class="h-3 w-full rounded-full overflow-hidden bg-white/30">