Tweak and better skip track

Author: stronk-dev

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stronk-tech/react-librespot-controller",
   "description": "`go-librespot` squeezebox-alike web frontend for small touchscreens",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [

src/components/Info/Header.css

@@ -77,22 +77,32 @@
 
 .spotify-player-connected-icon {
   font-size: 2rem;
-  color: var(--blue);
+  color: var(--lightest);
 }
 
 .spotify-player-connected-icon.spotify-player-disconnected {
   color: var(--red);
 }
 
 .spotify-player-connected-icon.spotify-player-rotating {
-  animation: spin 2s linear infinite;
+  animation: rotate 2s linear infinite;
+  color: var(--blue);
 }
 
-@keyframes spin {
+@keyframes rotate {
   0% {
     transform: rotate(0deg);
   }
+  25% {
+    transform: rotate(20deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  75% {
+    transform: rotate(-20deg);
+  }
   100% {
-    transform: rotate(360deg);
+    transform: rotate(-0deg);
   }
 }

src/components/Info/TextInfo.js

@@ -13,18 +13,26 @@ const TextInfo = ({ track, isStopped, isConnected, error }) => {
     )
   }
 
-  // Tries to format the release date to YYYY-MM-DD
+  // Tries to format the release date to YYYY-MM-DD or partial formats if data is incomplete
   const formatReleaseDate = (releaseDate) => {
-    if (!releaseDate || !releaseDate.length){
+    if (!releaseDate || !releaseDate.length) {
       return "Unknown";
     }
+
     // Match the format with optional spaces: "year:YYYY month:MM day:DD"
-    const match = releaseDate.match(/year:\s*(\d+)\s*month:\s*(\d+)\s*day:\s*(\d+)/);
+    const match = releaseDate.match(/year:\s*(\d+)?\s*month:\s*(\d+)?\s*day:\s*(\d+)?/);
+
     if (match) {
-      const year = match[1];
-      const month = match[2].padStart(2, "0"); // Ensure two-digit month
-      const day = match[3].padStart(2, "0");   // Ensure two-digit day
-      return `${year}-${month}-${day}`;
+      const year = match[1] || "";
+      const month = match[2] ? match[2].padStart(2, "0") : "";
+      const day = match[3] ? match[3].padStart(2, "0") : "";
+
+      // Construct the result based on available parts
+      let result = year;
+      if (month) result += `-${month}`;
+      if (day) result += `-${day}`;
+
+      return result || "Unknown"; // Fallback to "Unknown" if no valid parts
     }
     return releaseDate; // Return as-is for invalid formats
   };

src/hooks/useLibrespot.js

@@ -8,6 +8,7 @@ import {
   seek,
   play,
   previousTrack,
+  nextTrack,
   setVolume,
   toggleShuffleContext,
   getPlaylists
@@ -117,11 +118,7 @@ const useLibrespot = (websocketUrl, apiBaseUrl) => {
       console.error("Unable to skip track, as the player is inactive.");
       return;
     }
-    if (!isPlaying) {
-      resume(apiBaseUrl);
-    }
-    seek(apiBaseUrl, trackInfo.duration - 5);
-    setRemotePosition(trackInfo.duration - 5);
+    nextTrack(apiBaseUrl);
   };
 
   // 

src/util/api.js

@@ -53,11 +53,11 @@ export const pause = async (baseUrl) =>
 export const togglePlayPause = async (baseUrl) =>
   await callApi(`${baseUrl}/player/playpause`, { method: "POST" });
 
-export const nextTrack = async (baseUrl, uri) =>
+export const nextTrack = async (baseUrl) =>
   await callApi(`${baseUrl}/player/next`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ uri }),
+    body: JSON.stringify({}),
   });
 
 export const previousTrack = async (baseUrl) =>