refresh spotify api token; auto reload currentlyPlaying

master
adb-sh 2 years ago
parent a86bd04da2
commit e4de1997a3

@ -10,8 +10,10 @@ defineProps({
<div class="currentlyPlaying card">
<div class="card-header">
<b>{{ currentlyPlaying.item.name }}</b>
<div>
{{ currentlyPlaying.item.artists.map(artist => artist.name).join(', ') }}
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md">
@ -36,7 +38,7 @@ defineProps({
rel="noopener norefferrer"
class="btn btn-outline-dark m-1"
>
view playlist on Spotify
view {{ currentlyPlaying.context.type }} on Spotify
</a>
</p>
</div>

@ -24,7 +24,7 @@
</template>
<script setup lang="ts">
import { ref, defineProps } from "vue";
import { ref, defineProps, watch } from "vue";
import ThrobberLoading from "@/components/ThrobberLoading.vue";
const props = defineProps({
@ -37,6 +37,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
throbber: {
type: Boolean,
default: true,
}
});
const loading = ref(true);
@ -46,9 +50,9 @@ const data = ref(null);
const update = async (promise: Promise | unknown) => {
loading.value = true;
setTimeout(() => {
if (props.throbber) setTimeout(() => {
if (loading.value) showThrobber.value = true;
}, 100);
}, 250);
try {
data.value = await (promise.isPromiseList
? Promise.all(promise.promises)
@ -57,9 +61,14 @@ const update = async (promise: Promise | unknown) => {
error.value = e;
} finally {
loading.value = false;
showThrobber.value = false;
}
};
update(props.promise);
watch(() => props.promise, (to) => {
update(to);
});
</script>
<style scoped lang="scss">

@ -2,14 +2,27 @@
import PromiseResolver from "@/components/PromiseResolver.vue";
import CurrentlyPlaying from "@/components/CurrentlyPlaying.vue";
import { useRoute } from "vue-router";
import { onBeforeUnmount, ref } from "vue";
import { useApi } from "@/Api";
const route = useRoute();
const api = useApi();
const userInfo = ref(api?.getUserInfo(route.params.id as string));
let refreshUserInfo = setInterval(() => {
userInfo.value = api?.getUserInfo(route.params.id as string);
}, 20000);
onBeforeUnmount(() => {
clearInterval(refreshUserInfo);
});
</script>
<template>
<h1>User</h1>
<PromiseResolver
:promise="$api.getUserInfo($route.params.id)"
:promise="userInfo"
v-slot="{ data: { user, currentlyPlaying } }"
class="row"
>

Loading…
Cancel
Save