spotifyplaylistarchive.com/components/stats/TrackRetention.vue

57 lines
1.3 KiB
Vue
Raw Normal View History

2022-07-06 14:02:23 +02:00
<script setup lang="ts">
import { $fetch } from 'ohmyfetch';
import { Cumulative } from '~~/models/cumulative';
const route = useRoute();
const playlistId = route.params.playlistId as string;
const {
pending,
error,
data: tracks
} = await useLazyAsyncData(
`longest-standing-tracks-${playlistId}`,
async () => {
const { tracks } = await $fetch<Cumulative>(
`https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/cumulative/${playlistId}.json`,
{ parseResponse: JSON.parse }
);
const now = new Date().toISOString();
2022-07-06 14:02:23 +02:00
return tracks
.map((track) => {
track.retention =
Date.parse(track.date_removed || now) - Date.parse(track.date_added);
2022-07-06 14:02:23 +02:00
return track;
})
.sort((a, b) => b.retention - a.retention);
}
);
2022-07-06 14:02:23 +02:00
</script>
<template>
<NuxtLayout name="centered-content">
<ClientOnly>
<p v-if="error">
2022-07-06 14:02:23 +02:00
Something went wrong while fetching the longest standing tracks
</p>
<TrackEntriesTable :loading="pending" :tracks="tracks" page="stats" />
2022-07-06 14:02:23 +02:00
</ClientOnly>
</NuxtLayout>
</template>
<style scoped>
:deep(div.p-datatable) {
width: 100%;
padding: 0 1rem;
}
2022-07-06 14:02:23 +02:00
@media only screen and (min-width: 768px) {
:deep(div.p-datatable) {
padding: 0 8rem;
}
}
</style>