diff --git a/nginx/vue/public/css/styles.css b/nginx/vue/public/css/styles.css index b6f0289..557869c 100644 --- a/nginx/vue/public/css/styles.css +++ b/nginx/vue/public/css/styles.css @@ -42,6 +42,7 @@ body { margin: 0 auto; font-family: var(--font-text); + background-color: beige; } p { @@ -61,18 +62,29 @@ img { object-fit: contain; } +video { + width: 100%; + object-fit: contain; +} + /* END OF ELEMENTS */ /* CLASSES */ .bordered-1 { width: 300px; - box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2); + /*box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);*/ /*padding: 15px;*/ border: 30px solid; - border-image: url("/img/borders/border-minimal.png") 30 round; + border-image: url("/img/borders/border3.gif") 30 round; /*border-image: url("/img/borders/border2.png") 30;*/ } +.bordered-2 { + background: white; + border: 2px solid black; + text-align: center; +} + .flex-row { display: flexbox; flex-direction: row; diff --git a/nginx/vue/src/App.vue b/nginx/vue/src/App.vue index 2ba9ee5..1ad54b2 100644 --- a/nginx/vue/src/App.vue +++ b/nginx/vue/src/App.vue @@ -7,16 +7,7 @@ import Footer from "@/components/Footer.vue"; - - diff --git a/nginx/vue/src/components/Radio.vue b/nginx/vue/src/components/Radio.vue index 9a5ffd2..236639f 100644 --- a/nginx/vue/src/components/Radio.vue +++ b/nginx/vue/src/components/Radio.vue @@ -1,7 +1,11 @@ @@ -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); +}); - + diff --git a/nginx/vue/src/components/Spotify.vue b/nginx/vue/src/components/Spotify.vue index 156511f..354542a 100644 --- a/nginx/vue/src/components/Spotify.vue +++ b/nginx/vue/src/components/Spotify.vue @@ -1,10 +1,13 @@ @@ -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; } diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue index e1bfb26..6c127a9 100644 --- a/nginx/vue/src/views/Home.vue +++ b/nginx/vue/src/views/Home.vue @@ -6,30 +6,47 @@ import Radio from "@/components/Radio.vue";