diff --git a/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue b/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue index a84d7b9..91fdd1b 100644 --- a/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue +++ b/pages/playlists/[playlistId]/snapshots/show/[commitSha].vue @@ -2,25 +2,43 @@ import { decode as decodeHtmlEntities } from 'html-entities'; import formatDuration from 'format-duration'; +import Button from 'primevue/button'; +import { useToast } from 'primevue/usetoast'; + import { Snapshot } from '~~/models/snapshot'; const route = useRoute(); +const toast = useToast(); + +const { copy } = useClipboard(); +const { canCopyToClipboard } = useCanCopyToClipboard(); + const playlistId = route.params.playlistId as string; const commitSha = route.params.commitSha as string; +const snapshotDataUrl = `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/${commitSha}/playlists/pretty/${playlistId}.json`; const { pending, error, data: snapshot -} = useFetch( - () => - `https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/${commitSha}/playlists/pretty/${playlistId}.json`, - { - key: `snapshot-${commitSha}`, - parseResponse: JSON.parse - } +} = useFetch(snapshotDataUrl, { + key: `snapshot-${commitSha}`, + parseResponse: JSON.parse +}); + +const snapshotJsonFileName = computed( + () => `${snapshot.value?.unique_name}.json` ); +const snapshotJsonDownloadUrl = computed(() => { + if (!snapshot.value) return; + + const blob = new Blob([JSON.stringify(snapshot.value, null, 2)]); + const url = URL.createObjectURL(blob); + + return url; +}); + const totalTrackDuration = computed(() => (snapshot.value?.tracks || []).reduce( (total, track) => (total += track.duration_ms), @@ -29,8 +47,20 @@ const totalTrackDuration = computed(() => ); const numberFormatter = new Intl.NumberFormat('en-US'); - const humanizeNumber = (num: number) => numberFormatter.format(num); + +const copyTrackUrls = async () => { + const trackUrls = snapshot.value.tracks.map(({ url }) => url).join('\n'); + + await copy(trackUrls); + + toast.add({ + severity: 'success', + summary: 'Success', + detail: 'URLs have been copied to clipboard', + life: 5000 + }); +};