spotifyplaylistarchive.com/pages/index.vue

115 lines
3.1 KiB
Vue
Raw Normal View History

2022-07-02 15:19:41 +02:00
<script setup lang="ts">
import { useLocalStorage } from '@vueuse/core';
2022-07-19 22:21:13 +02:00
import { $fetch } from 'ohmyfetch';
import AutoComplete from 'primevue/autocomplete';
import { SearchResult } from '~~/models/search-result';
2022-07-02 15:19:41 +02:00
const router = useRouter();
2022-07-19 22:21:13 +02:00
const searchHistory = useLocalStorage('searchHistory', []);
const searchName = ref('');
2022-07-19 22:21:13 +02:00
const suggestions = ref([]);
// For some odd reason, if you don't do JSON.parse(JSON.stringify),
// suggestions ref won't get populated.
const displaySearchHistory = () =>
(suggestions.value = JSON.parse(JSON.stringify(searchHistory.value)));
2022-07-19 22:21:13 +02:00
const findPlaylists = async () => {
if (searchName.value.length === 0) return displaySearchHistory();
2022-07-19 22:21:13 +02:00
try {
const urlObject = new URL(searchName.value);
2022-07-19 22:21:13 +02:00
const [collectionName, playlistId] = urlObject.pathname
.split('/')
.filter(Boolean);
if (
urlObject.hostname === 'open.spotify.com' &&
collectionName === 'playlist' &&
playlistId
) {
const searchResults = await $fetch(
`https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/playlists/pretty/${playlistId}.json`,
{
parseResponse: (body) =>
body === '404: Not Found'
? []
: [
{
id: playlistId,
name: JSON.parse(body).original_name
2022-07-19 22:21:13 +02:00
}
]
}
).catch((e) => e.data);
return (suggestions.value = searchResults);
2022-07-19 22:21:13 +02:00
} else {
throw new Error('This is not a valid playlist link');
}
} catch (error) {
if (error.message === 'This is not a valid playlist link') return [];
const searchResults = await $fetch<SearchResult[]>(
`/api/playlists/search?name=${searchName.value}`
2022-07-19 22:21:13 +02:00
);
return (suggestions.value = searchResults);
2022-07-02 15:19:41 +02:00
}
};
2022-07-19 22:21:13 +02:00
const openSnapshotsCalendar = async ({
value: entry
}: {
value: SearchResult;
}) => {
const existingHistoryEntry = searchHistory.value.find(
(e) => e.id === entry.id
);
if (searchHistory.value.length === 0 || !existingHistoryEntry) {
searchHistory.value.unshift(entry);
searchHistory.value = searchHistory.value.slice(0, 10);
}
2022-07-19 22:21:13 +02:00
await router.push(`/playlists/${entry.id}/snapshots`);
};
2022-07-02 15:19:41 +02:00
</script>
2022-06-29 09:51:44 +02:00
<template>
<NuxtLayout name="centered-content">
<h1 class="m-0 md:text-5xl text-3xl">Spotify Playlist Archive</h1>
2022-07-21 11:13:23 +02:00
<div class="md:p-0 p-2 flex flex-column justify-content-center text-center">
<p class="md:mt-3 mt-2 text-lg text-gray-300">
2022-07-02 15:19:41 +02:00
Browse past versions of thousands of playlists saved over time
</p>
<div class="w-full md:px-0 px-3">
2022-07-19 22:21:13 +02:00
<AutoComplete
v-model="searchName"
2022-07-19 22:21:13 +02:00
:suggestions="suggestions"
class="w-full"
placeholder="Start typing, or paste a playlist link"
field="name"
2022-07-19 22:21:13 +02:00
:min-length="3"
complete-on-focus
2022-07-19 22:21:13 +02:00
@complete="findPlaylists"
@item-select="openSnapshotsCalendar"
2022-07-02 15:19:41 +02:00
/>
2022-07-19 22:21:13 +02:00
</div>
2022-07-02 15:19:41 +02:00
</div>
2022-06-29 09:51:44 +02:00
</NuxtLayout>
</template>
2022-07-19 22:21:13 +02:00
<style scoped>
:deep(.p-autocomplete-input) {
width: 100%;
text-align: center;
}
:deep(.p-autocomplete-input::placeholder) {
text-align: center;
}
</style>