adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

update spotify component

Browse Source
This commit is contained in:
Adam French
2025-11-25 22:51:00 +00:00
parent d448eeff90
commit a49cd3cbe3
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nginx/vue/src/components/CurrentlyListening.vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<div class="spotify-now-playing"> <div class="spotify-now-playing">
<img :src="albumImage" alt="Album cover" v-if="albumImage" /> <img :src="playing ? albumImage : '/img/Untitled.png'" />
<p v-if="songName"><strong>Song:</strong> {{ songName }}</p> <p><strong v-if="playing">Song:</strong> {{ songName }}</p>
<p v-if="artistName"><strong>Artist:</strong> {{ artistName }}</p> <p><strong v-if="playing">Artist:</strong> {{ artistName }}</p>
<a v-if="playing" :href="songUrl">preview</a>
<p v-if="playing">Status: Playing</p> <p v-if="playing">Status: Playing</p>
<p v-else>Status: Not playing</p> <p v-else>Status: Not playing</p>
</div> </div>
@@ -17,6 +18,7 @@ export default {
const albumImage = ref(""); const albumImage = ref("");
const artistName = ref(""); const artistName = ref("");
const songName = ref(""); const songName = ref("");
const songUrl = ref("");
const playing = ref(false); const playing = ref(false);
const fetchSpotify = async () => { const fetchSpotify = async () => {
@@ -26,6 +28,7 @@ export default {
const data = await res.json(); const data = await res.json();
albumImage.value = data.album_image; albumImage.value = data.album_image;
artistName.value = data.artist_name; artistName.value = data.artist_name;
songUrl.value = data.song_url;
songName.value = data.song_name; songName.value = data.song_name;
playing.value = data.playing; playing.value = data.playing;
} catch (err) { } catch (err) {
@@ -35,8 +38,7 @@ export default {
onMounted(() => { onMounted(() => {
fetchSpotify(); fetchSpotify();
// Optional: refresh every 30 seconds setInterval(fetchSpotify, 120000);
// setInterval(fetchSpotify, 30000);
}); });
return { return {
@@ -51,17 +53,19 @@ export default {
<style scoped> <style scoped>
.spotify-now-playing { .spotify-now-playing {
display: flex; width: fit-content;
height: fit-content;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
box-shadow: 3px;
} }
.spotify-now-playing img { .spotify-now-playing img {
width: 200px; width: 200px;
height: 200px; height: 200px;
object-fit: cover; object-fit: cover;
border-radius: 8px; box-shadow: 3px;
margin-bottom: 10px; margin-bottom: 10px;
} }
</style> </style>