From 34295e697f45c6db66c4e6b7396b8aceebf4bca5 Mon Sep 17 00:00:00 2001
From: L-Nafaryus <l.nafaryus@gmail.com>
Date: Tue, 1 Oct 2024 23:30:47 +0500
Subject: [PATCH] add station animation, fix song info update

---
 crates/frontend/src/components/Station.vue |  3 ++-
 crates/frontend/src/store.ts               | 23 +++++++++++++++++++++-
 crates/frontend/tailwind.config.js         | 11 ++++++++++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/crates/frontend/src/components/Station.vue b/crates/frontend/src/components/Station.vue
index f75cea1..9a0d761 100644
--- a/crates/frontend/src/components/Station.vue
+++ b/crates/frontend/src/components/Station.vue
@@ -40,7 +40,8 @@ onMounted(() => {
     <div class="flex rounded-xl m-2 bg-ctp-base">
         <div class="flex items-center justify-center">
             <div class="h-20 sm:h-36 flex rounded-l-xl aspect-square items-center justify-center bg-ctp-peach/50">
-                <VinylIcon class="p-1" />
+                <VinylIcon class="p-1"
+                    :class="{ 'animate-spin-slow': player.station?.id === stationInfo.id && player.playing }" />
             </div>
         </div>
         <div class="w-full flex flex-col justify-center px-4 space-y-2">
diff --git a/crates/frontend/src/store.ts b/crates/frontend/src/store.ts
index d6dbc74..069a7a5 100644
--- a/crates/frontend/src/store.ts
+++ b/crates/frontend/src/store.ts
@@ -6,6 +6,12 @@ import { api } from "@";
 
 type TimerId = number;
 
+const setAsyncTimeout = (ms: number) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms * 1000);
+  });
+};
+
 export const usePlayer = defineStore("player", () => {
     const stations: Ref<api.StationInfo[]> = ref(null);
     const station: Ref<api.StationInfo> = ref(null);
@@ -33,9 +39,24 @@ export const usePlayer = defineStore("player", () => {
     };
 
     const update = async () => {
+        if (station.value.status !== api.StationStatus.Receive) {
+            songInfo.value = null;
+            return;
+        }
+
         await refreshSongInfo();
+
         clearTimeout(updateTimer.value);
-        updateTimer.value = setTimeout(update, (songInfo.value.duration - songInfo.value.elapsed) * 1000);
+
+        if (songInfo.value.duration) {
+            updateTimer.value = await setAsyncTimeout(songInfo.value.duration - songInfo.value.elapsed);
+        } else {
+            updateTimer.value = await setAsyncTimeout(5);
+        }
+        
+        if (playing.value) {
+            await update();
+        }
     };
 
     const play = (_station: api.StationInfo | null = null) => {
diff --git a/crates/frontend/tailwind.config.js b/crates/frontend/tailwind.config.js
index b56e0f7..517b83c 100644
--- a/crates/frontend/tailwind.config.js
+++ b/crates/frontend/tailwind.config.js
@@ -13,11 +13,20 @@ export default {
                     "100%": {
                         "background-position": "200% 0",
                     }
+                },
+                "spin": {
+                    "from": {
+                        "transform": "rotate(0deg)",
+                    },
+                    "to": {
+                        "transform": "rotate(360deg)",
+                    }
                 }
             },
             animation: {
                 "border-spin": "border-spin 7s linear infinite",
-                "border-roll": "border-roll 5s linear infinite"
+                "border-roll": "border-roll 5s linear infinite",
+                "spin-slow": "spin 2s linear infinite",
             }
         },
     },