new style

nginx/vue/src/components/Radio.vue

@@ -1,7 +1,11 @@
 <template>
-    <div>
-        <audio v-if="streamLive" controls :src="streamUrl" ref="audio"></audio>
-        <p v-else>Stream is currently offline.</p>
+    <div v-if="streamLive" class="stream-live">
+        <img src="/img/tmpen31z3pe.PNG" />
+        <audio controls :src="streamUrl" ref="audio"></audio>
+    </div>
+    <div v-else class="stream-not-live">
+        <img src="/img/tmpen31z3pe.PNG" />
+        <p>Stream is currently offline.</p>
         <button @click="checkStream()">Check Stream</button>
     </div>
 </template>
@@ -18,9 +22,8 @@ async function checkStream() {
     try {
         const res = await fetch("/radio/status-json.xsl"); // Icecast JSON status
         const data = await res.json();
-        // Replace 'mounts' and '/stream' with your Icecast mountpoint
-        streamMount.value = data.icestats.source.listenurl.split("/").pop();
 
+        streamMount.value = data.icestats.source.listenurl.split("/").pop();
         if (streamMount.value) {
             streamLive.value = true;
             streamUrl.value = "/radio/" + streamMount.value;
@@ -31,6 +34,22 @@ async function checkStream() {
         streamLive.value = false;
     }
 }
+
+onMounted(() => {
+    checkStream();
+    setInterval(checkStream, 30000);
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+.stream-live {
+    background: white;
+    border: 2px solid black;
+    text-align: center;
+}
+.stream-not-live {
+    background: white;
+    border: 2px solid black;
+    text-align: center;
+}
+</style>

nginx/vue/src/components/Spotify.vue

@@ -1,10 +1,13 @@
 <template>
-    <div class="spotify-now-playing">
-        <img :src="playing ? albumImage : '/img/Untitled.png'" />
-        <p><strong v-if="playing">Song:</strong> {{ songName }}</p>
-        <p><strong v-if="playing">Artist:</strong> {{ artistName }}</p>
-        <p v-if="playing">Status: Playing</p>
-        <p v-else>Status: Not playing</p>
+    <div v-if="playing" class="spotify-now-playing">
+        <img :src="albumImage" />
+        <p><strong>Song:</strong> {{ songName }}</p>
+        <p><strong>Artist:</strong> {{ artistName }}</p>
+        <p>Is what im currently listening to rnrnrn ^_^</p>
+    </div>
+    <div v-else class="spotify-not-playing">
+        <img src="/img/Untitled.png" />
+        <p>I ain't listenin to nofin</p>
     </div>
 </template>
 
@@ -20,20 +23,25 @@ export default {
         const songUrl = ref("");
         const playing = ref(false);
 
-        const fetchSpotify = async () => {
+        async function fetchSpotify() {
             try {
                 const res = await fetch("/api/spotify");
                 if (!res.ok) throw new Error("Failed to fetch Spotify data");
                 const data = await res.json();
-                albumImage.value = data.album_image;
-                artistName.value = data.artist_name;
-                songUrl.value = data.song_url;
-                songName.value = data.song_name;
-                playing.value = data.playing;
+                if (playing.value == false) {
+                    return;
+                } else {
+                    albumImage.value = data.album_image;
+                    artistName.value = data.artist_name;
+                    songUrl.value = data.song_url;
+                    songName.value = data.song_name;
+                    playing.value = data.playing;
+                    return;
+                }
             } catch (err) {
                 console.error(err);
             }
-        };
+        }
 
         onMounted(() => {
             fetchSpotify();
@@ -60,11 +68,10 @@ export default {
     box-shadow: 3px;
 }
 
-.spotify-now-playing img {
-    width: 200px;
-    height: 200px;
-    object-fit: cover;
-    box-shadow: 3px;
-    margin-bottom: 10px;
+.spotify-not-playing {
+    border: 2px solid black;
+    align-items: center;
+    text-align: center;
+    background: white;
 }
 </style>