|
|
|
@ -1,22 +1,26 @@
|
|
|
|
|
<template>
|
|
|
|
|
<a
|
|
|
|
|
class="btn currentlyListening"
|
|
|
|
|
href=" https://spot2gether.cybre.town/user/op3q884heqao7laioz05ebaoz"
|
|
|
|
|
target="_blank"
|
|
|
|
|
ref="noopener noreferrer"
|
|
|
|
|
>
|
|
|
|
|
<div v-if="currentlyPlaying?.item" 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>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</a>
|
|
|
|
|
</transition>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let updateMusicInfo = null;
|
|
|
|
|
const noob = () => null;
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "CurrentlyListening",
|
|
|
|
@ -31,10 +35,10 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async created() {
|
|
|
|
|
this.currentlyPlaying = (await this.fetchMusicInfo())?.currentlyPlaying;
|
|
|
|
|
this.currentlyPlaying = (await this.fetchMusicInfo().catch(noob))?.currentlyPlaying;
|
|
|
|
|
updateMusicInfo = setInterval(async () => {
|
|
|
|
|
this.currentlyPlaying = (await this.fetchMusicInfo())?.currentlyPlaying;
|
|
|
|
|
}, 20000);
|
|
|
|
|
this.currentlyPlaying = (await this.fetchMusicInfo().catch(noob))?.currentlyPlaying;
|
|
|
|
|
}, 10000);
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
clearInterval(updateMusicInfo);
|
|
|
|
|