You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<transition name="fade">
|
|
<a
|
|
class="btn currentlyListening"
|
|
href=" https://spot2gether.cybre.town/user/op3q884heqao7laioz05ebaoz"
|
|
target="_blank"
|
|
ref="noopener noreferrer"
|
|
v-if="currentlyPlaying?.item"
|
|
>
|
|
<div class="row align-items-center">
|
|
<i class="bi-music-note col-auto icon" />
|
|
<div class="col-auto d-flex flex-column text">
|
|
<b>{{ currentlyPlaying?.item?.name }}</b>
|
|
<div>{{ currentlyPlaying?.item?.artists.map(artist => artist.name).join(', ') }}</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
let updateMusicInfo = null;
|
|
const noob = () => null;
|
|
|
|
export default {
|
|
name: "CurrentlyListening",
|
|
data: () => ({
|
|
currentlyPlaying: null,
|
|
}),
|
|
methods: {
|
|
async fetchMusicInfo() {
|
|
return await fetch(
|
|
'https://spot2gether.cybre.town/api/public/users/op3q884heqao7laioz05ebaoz/info'
|
|
).then(data => data.json());
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.currentlyPlaying = (await this.fetchMusicInfo().catch(noob))?.currentlyPlaying;
|
|
updateMusicInfo = setInterval(async () => {
|
|
this.currentlyPlaying = (await this.fetchMusicInfo().catch(noob))?.currentlyPlaying;
|
|
}, 10000);
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(updateMusicInfo);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.currentlyListening {
|
|
position: relative;
|
|
.icon {
|
|
font-size: 1.2rem;
|
|
}
|
|
.text {
|
|
font-size: .8rem;
|
|
text-align: left !important;
|
|
}
|
|
}
|
|
</style>
|