mirror of
https://github.com/maciejpedzich/spotifyplaylistarchive.com.git
synced 2024-09-19 18:16:19 +02:00
Implement playlist search typeahead
This commit is contained in:
parent
2a8207868a
commit
8faaf6bed1
4
models/search-result.ts
Normal file
4
models/search-result.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export interface SearchResult {
|
||||
id: string;
|
||||
title: string;
|
||||
}
|
@ -1,24 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Button from 'primevue/button';
|
||||
import { $fetch } from 'ohmyfetch';
|
||||
import AutoComplete from 'primevue/autocomplete';
|
||||
|
||||
import { SearchResult } from '~~/models/search-result';
|
||||
|
||||
const router = useRouter();
|
||||
const playlistLink = ref('');
|
||||
|
||||
const openSnapshotCalendar = async () => {
|
||||
const urlObject = new URL(playlistLink.value);
|
||||
const params = urlObject.pathname.split('/').filter((p) => p);
|
||||
const [collectionName, itemId] = params;
|
||||
const searchText = ref('');
|
||||
const suggestions = ref([]);
|
||||
|
||||
const findPlaylists = async () => {
|
||||
try {
|
||||
const urlObject = new URL(searchText.value);
|
||||
const [collectionName, playlistId] = urlObject.pathname
|
||||
.split('/')
|
||||
.filter(Boolean);
|
||||
|
||||
if (
|
||||
urlObject.hostname === 'open.spotify.com' &&
|
||||
collectionName === 'playlist' &&
|
||||
itemId
|
||||
playlistId
|
||||
) {
|
||||
await router.push(`/playlists/${itemId}/snapshots`);
|
||||
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,
|
||||
title: JSON.parse(body).original_name
|
||||
}
|
||||
]
|
||||
}
|
||||
).catch((e) => e.data);
|
||||
|
||||
suggestions.value = searchResults;
|
||||
} 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?title=${searchText.value}`
|
||||
);
|
||||
|
||||
suggestions.value = searchResults;
|
||||
}
|
||||
};
|
||||
|
||||
const openSnapshotsCalendar = async ({
|
||||
value: entry
|
||||
}: {
|
||||
value: SearchResult;
|
||||
}) => {
|
||||
await router.push(`/playlists/${entry.id}/snapshots`);
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -29,23 +67,29 @@ const openSnapshotCalendar = async () => {
|
||||
<p class="text-xl text-gray-300">
|
||||
Browse past versions of thousands of playlists saved over time
|
||||
</p>
|
||||
<form
|
||||
<div class="w-full">
|
||||
<AutoComplete
|
||||
v-model="searchText"
|
||||
:suggestions="suggestions"
|
||||
class="w-full"
|
||||
@submit.prevent="openSnapshotCalendar"
|
||||
@keypress.enter="openSnapshotCalendar"
|
||||
>
|
||||
<InputText
|
||||
v-model="playlistLink"
|
||||
type="url"
|
||||
class="w-full text-center mt-1 mb-3"
|
||||
placeholder="Enter a playlist link"
|
||||
placeholder="Type in at least 3 characters, or paste a playlist link"
|
||||
field="title"
|
||||
:min-length="3"
|
||||
@complete="findPlaylists"
|
||||
@item-select="openSnapshotsCalendar"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
label="Browse snapshots"
|
||||
:disabled="playlistLink.length === 0"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.p-autocomplete-input) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.p-autocomplete-input::placeholder) {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
24
server/api/playlists/search.ts
Normal file
24
server/api/playlists/search.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { $fetch } from 'ohmyfetch';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const query = useQuery(event);
|
||||
|
||||
const readmeFileContent = await $fetch<string>(
|
||||
'https://raw.githubusercontent.com/mackorone/spotify-playlist-archive/main/README.md'
|
||||
);
|
||||
const [, playlistLinksMdList] = readmeFileContent.split('## Playlists\n\n');
|
||||
const archiveEntries = playlistLinksMdList
|
||||
.replaceAll('- [', '')
|
||||
.replaceAll('\\', '')
|
||||
.replaceAll('](', ' ')
|
||||
.replaceAll('.md)', '')
|
||||
.split('\n')
|
||||
.map((textEntry) => {
|
||||
const [title, id] = textEntry.split(' /playlists/pretty/');
|
||||
|
||||
return { title, id };
|
||||
})
|
||||
.filter((entry) => entry.title.includes(query.title as string));
|
||||
|
||||
return archiveEntries;
|
||||
});
|
Loading…
Reference in New Issue
Block a user