readme: v2.1

generate_miniplayer: Use 550x130
miniplayer: Show 2-line no music msg

generate_miniplayer.php

@@ -110,7 +110,7 @@ class="text-white/50 hover:text-white transition h-6 w-6"
       </div>
     </div>
 
-    <div style="width: 600px;" class="bg-white/10 p-2 rounded-lg mt-8">
+    <div style="width: 550px;" class="bg-white/10 p-2 rounded-lg mt-8">
       <iframe
         :src="makeUrl()"
         class="w-full"
@@ -119,7 +119,7 @@ class="w-full"
       ></iframe>
     </div>
 
-    <div style="width: 600px;" class="flex flex-row items-center mt-3">
+    <div style="width: 550px;" class="flex flex-row items-center mt-3">
       <div class="bg-white/10 rounded-l-lg w-full">
         <input type="text" class="w-full border-0 focus:ring-[#15883D] focus:ring-2 focus:ring-inset rounded-l-lg py-2 px-3 bg-transparent outline-none" :value="makeUrl()" readonly>
       </div>
@@ -131,6 +131,8 @@ class="bg-[#15883D] py-2 px-3 rounded-r-lg"
       </button>
     </div>
 
+    <span class="mt-4 text-white/70 hover:text-white transition">550 x 130</span>
+
     <!-- Config player -->
     <div class="flex flex-row gap-4 flex-wrap mt-4">
       <div class="flex flex-row gap-3 items-center">

miniplayer.php

@@ -64,7 +64,7 @@ class="h-screen w-screen"
             <img
                 src="assets/images/no_song.png"
                 :src="$store.player.targetImg ?? 'assets/images/no_song.png'"
-                class="h-full w-auto flex-shrink-0"
+                class="h-full w-auto flex-shrink-0 aspect-square object-cover"
                 x-show="showArtwork"
                 x-cloak
             >
@@ -88,7 +88,7 @@ class="absolute bottom-[10%] right-[10%] z-30 p-3 bg-black/20 border-2 border-wh
                   class="text-3xl font-bold"
                   :class="{
                     'line-clamp-1': showAlbum,
-                    'line-clamp-2': !showAlbum,
+                    'line-clamp-2': !showAlbum || !$store.player.playbackObj.item?.name,
                   }"
                 ></h1>
 

readme.md

@@ -12,6 +12,9 @@ Available at [nowplayi.ng](https://nowplayi.ng)
 
 ![Website screenshot](screenshots/regular.png)
 
+![Mini player generator screenshot](screenshots/miniplayer.png)
+*Mini player generator*
+
 [Status page](https://uptime.busybox.colabois.fr/status/nowplaying)
 
 ###### Dedicated Discord server: [nowplayi.ng/discord](https://nowplayi.ng/discord) - tip to me: [paypal.me/busybox11](https://paypal.me/busybox11) (thank you!)
@@ -25,6 +28,7 @@ v2.0.X
 - Fix blur edges
 - Fix Safari hardware acceleration
 - No full page reload for reauthentication
+- Mini player usage and generation
 
 <details>
   <summary>v1.6.X</summary>
@@ -83,7 +87,7 @@ HTML, TailwindCSS, JS / AlpineJS, PHP
 ## **Upcoming changes**
 
 - [X] ~~Rewrite (see [discussion #76](https://github.com/busybox11/NowPlaying-for-Spotify/discussions/76) about the possible use of web frameworks)~~
-- [ ] OBS source (In progress!)
+- [X] ~~OBS source (Done since [v2.1](https://github.com/busybox11/NowPlaying-for-Spotify/commit/994c52e06881f78f52b4a151fec11376db3edf12))~~
 - [ ] Local players support (coming with [localmusic-api](https://github.com/busybox11/localmusic-api/projects) - [Sunamu by @NyaomiDEV](https://github.com/NyaomiDEV/Sunamu))
 - [X] ~~Better config handling (e.g. automatic deployment, **HELP WANTED!**)~~
 - [ ] Themes