Add search to the playlist discovery
This commit is contained in:
parent
d1a4fd0cb4
commit
86657c5a4f
53
src/app.css
53
src/app.css
@ -58,3 +58,56 @@ p a:hover {
|
||||
@utility neon-text {
|
||||
@apply text-transparent bg-clip-text bg-gradient-to-r from-neon via-accent to-neon-fuchsia;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
appearance: none;
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
border-radius: 0.35rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
background-color: rgba(15, 23, 42, 0.85);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='checkbox']::after {
|
||||
content: '';
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
clip-path: polygon(14% 44%, 0 60%, 43% 100%, 100% 16%, 86% 0, 40% 64%);
|
||||
background-color: transparent;
|
||||
transform: scale(0.4) rotate(6deg);
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
|
||||
}
|
||||
|
||||
input[type='checkbox']:hover {
|
||||
border-color: rgba(94, 234, 212, 0.4);
|
||||
}
|
||||
|
||||
input[type='checkbox']:focus-visible {
|
||||
outline: none;
|
||||
border-color: rgba(94, 234, 212, 0.6);
|
||||
box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked {
|
||||
border-color: rgba(34, 211, 238, 0.8);
|
||||
background-color: rgba(34, 211, 238, 0.18);
|
||||
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked::after {
|
||||
background-color: var(--color-neon);
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
|
||||
input[type='checkbox']:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
box-shadow: none;
|
||||
border-color: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
import { createBeatSaverAPI, type PlaylistFull, type PlaylistSearchResponse } from '$lib/server/beatsaver';
|
||||
import {
|
||||
createBeatSaverAPI,
|
||||
type PlaylistFull,
|
||||
type PlaylistSearchParams,
|
||||
type PlaylistSearchResponse
|
||||
} from '$lib/server/beatsaver';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
function parsePositiveInt(value: string | null, fallback: number): number {
|
||||
@ -8,6 +13,17 @@ function parsePositiveInt(value: string | null, fallback: number): number {
|
||||
return parsed;
|
||||
}
|
||||
|
||||
const SORT_ORDER_VALUES = ['Latest', 'Relevance', 'Curated'] as const;
|
||||
type SortOrderOption = (typeof SORT_ORDER_VALUES)[number];
|
||||
const SORT_ORDER_SET = new Set<string>(SORT_ORDER_VALUES);
|
||||
const DEFAULT_SORT_ORDER: SortOrderOption = 'Latest';
|
||||
|
||||
function parseSortOrder(value: string | null): SortOrderOption {
|
||||
if (!value) return DEFAULT_SORT_ORDER;
|
||||
const normalized = value.trim();
|
||||
return SORT_ORDER_SET.has(normalized) ? (normalized as SortOrderOption) : DEFAULT_SORT_ORDER;
|
||||
}
|
||||
|
||||
type SearchInfoShape = {
|
||||
page?: number;
|
||||
pages?: number;
|
||||
@ -23,13 +39,41 @@ export const load: PageServerLoad = async ({ url, fetch, parent }) => {
|
||||
|
||||
const api = createBeatSaverAPI(fetch);
|
||||
const MIN_MAPS = 3;
|
||||
const hasSubmitted = url.searchParams.has('submitted');
|
||||
const rawQuery = url.searchParams.get('q') ?? '';
|
||||
const query = rawQuery.trim();
|
||||
const rawSortOrder = url.searchParams.get('order') ?? url.searchParams.get('sortOrder');
|
||||
const sortOrder = parseSortOrder(rawSortOrder);
|
||||
const curated = url.searchParams.has('curated');
|
||||
const verified = url.searchParams.has('verified') ? true : hasSubmitted ? false : true;
|
||||
|
||||
const searchState = {
|
||||
submitted: hasSubmitted,
|
||||
query,
|
||||
sortOrder,
|
||||
curated,
|
||||
verified
|
||||
};
|
||||
|
||||
const searchParams: PlaylistSearchParams = {
|
||||
page: pageIndex,
|
||||
sortOrder,
|
||||
includeEmpty: false
|
||||
};
|
||||
|
||||
if (query) {
|
||||
searchParams.query = query;
|
||||
}
|
||||
if (curated) {
|
||||
searchParams.curated = true;
|
||||
}
|
||||
if (verified) {
|
||||
searchParams.verified = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = (await api.searchPlaylists({
|
||||
page: pageIndex,
|
||||
sortOrder: 'Latest',
|
||||
verified: true,
|
||||
includeEmpty: false
|
||||
...searchParams
|
||||
})) as PlaylistSearchResponse<PlaylistFull>;
|
||||
const docsRaw = Array.isArray(response?.docs) ? response.docs : [];
|
||||
const docs = docsRaw.filter((playlist) => {
|
||||
@ -56,7 +100,8 @@ export const load: PageServerLoad = async ({ url, fetch, parent }) => {
|
||||
totalPages,
|
||||
total,
|
||||
pageSize,
|
||||
error: null
|
||||
error: null,
|
||||
search: searchState
|
||||
};
|
||||
} catch (err) {
|
||||
console.error('Failed to load BeatSaver playlists', err);
|
||||
@ -68,7 +113,8 @@ export const load: PageServerLoad = async ({ url, fetch, parent }) => {
|
||||
totalPages: null,
|
||||
total: null,
|
||||
pageSize: 0,
|
||||
error: err instanceof Error ? err.message : 'Failed to load playlists'
|
||||
error: err instanceof Error ? err.message : 'Failed to load playlists',
|
||||
search: searchState
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
import HasToolAccess from '$lib/components/HasToolAccess.svelte';
|
||||
import MapCard from '$lib/components/MapCard.svelte';
|
||||
import ScoreBar from '$lib/components/ScoreBar.svelte';
|
||||
@ -6,6 +7,16 @@
|
||||
import type { BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
|
||||
import { TOOL_REQUIREMENTS } from '$lib/utils/plebsaber-utils';
|
||||
|
||||
const SORT_OPTIONS = ['Latest', 'Relevance', 'Curated'] as const;
|
||||
type SortOrderOption = (typeof SORT_OPTIONS)[number];
|
||||
type SearchState = {
|
||||
submitted: boolean;
|
||||
query: string;
|
||||
sortOrder: SortOrderOption;
|
||||
curated: boolean;
|
||||
verified: boolean;
|
||||
};
|
||||
|
||||
type PlaylistWithStats = PlaylistFull & { stats?: PlaylistFull['stats'] };
|
||||
|
||||
type PlaylistSongCard = {
|
||||
@ -42,6 +53,7 @@
|
||||
player: BeatLeaderPlayerProfile | null;
|
||||
adminRank: number | null;
|
||||
adminPlayer: BeatLeaderPlayerProfile | null;
|
||||
search: SearchState;
|
||||
};
|
||||
|
||||
const requirement = TOOL_REQUIREMENTS['playlist-discovery'];
|
||||
@ -49,6 +61,35 @@
|
||||
const playlistBaseUrl = 'https://beatsaver.com/playlists/';
|
||||
const profileBaseUrl = 'https://beatsaver.com/profile/';
|
||||
|
||||
let searchForm: HTMLFormElement | null = null;
|
||||
let appliedSearch: SearchState = {
|
||||
submitted: false,
|
||||
query: '',
|
||||
sortOrder: 'Latest',
|
||||
curated: false,
|
||||
verified: true
|
||||
};
|
||||
let searchQuery = appliedSearch.query;
|
||||
let sortOrder: SortOrderOption = appliedSearch.sortOrder;
|
||||
let curated = appliedSearch.curated;
|
||||
let verified = appliedSearch.verified;
|
||||
let lastSearchKey = '';
|
||||
|
||||
$: appliedSearch = {
|
||||
submitted: data?.search?.submitted ?? false,
|
||||
query: data?.search?.query ?? '',
|
||||
sortOrder: (data?.search?.sortOrder ?? 'Latest') as SortOrderOption,
|
||||
curated: Boolean(data?.search?.curated),
|
||||
verified: data?.search?.verified ?? true
|
||||
};
|
||||
|
||||
$: if (data) {
|
||||
searchQuery = appliedSearch.query;
|
||||
sortOrder = appliedSearch.sortOrder;
|
||||
curated = appliedSearch.curated;
|
||||
verified = appliedSearch.verified;
|
||||
}
|
||||
|
||||
$: playlists = data?.playlists ?? [];
|
||||
$: page = data?.page ?? 1;
|
||||
$: totalPages = data?.totalPages ?? null;
|
||||
@ -57,11 +98,70 @@
|
||||
|
||||
$: hasPrev = page > 1;
|
||||
$: hasNext = totalPages != null ? page < totalPages : playlists.length > 0 && playlists.length === pageSize;
|
||||
$: prevHref = hasPrev ? `?page=${page - 1}` : null;
|
||||
$: nextHref = hasNext ? `?page=${page + 1}` : null;
|
||||
$: prevHref = hasPrev ? buildPageHref(page - 1) : null;
|
||||
$: nextHref = hasNext ? buildPageHref(page + 1) : null;
|
||||
|
||||
let expanded: Record<number, boolean> = {};
|
||||
let playlistState: Record<number, PlaylistState> = {};
|
||||
|
||||
$: {
|
||||
const currentKey = JSON.stringify({
|
||||
page,
|
||||
query: appliedSearch.query,
|
||||
sortOrder: appliedSearch.sortOrder,
|
||||
curated: appliedSearch.curated,
|
||||
verified: appliedSearch.verified
|
||||
});
|
||||
if (currentKey !== lastSearchKey) {
|
||||
lastSearchKey = currentKey;
|
||||
expanded = {};
|
||||
playlistState = {};
|
||||
}
|
||||
}
|
||||
|
||||
type PresetKey = 'default' | 'picks' | 'packs';
|
||||
|
||||
function buildPageHref(targetPage: number): string {
|
||||
const params = new URLSearchParams();
|
||||
params.set('page', String(targetPage));
|
||||
params.set('submitted', '1');
|
||||
if (appliedSearch.query) params.set('q', appliedSearch.query);
|
||||
if (appliedSearch.sortOrder) params.set('order', appliedSearch.sortOrder);
|
||||
if (appliedSearch.curated) params.set('curated', 'on');
|
||||
if (appliedSearch.verified) params.set('verified', 'on');
|
||||
return `?${params.toString()}`;
|
||||
}
|
||||
|
||||
async function submitSearch() {
|
||||
await tick();
|
||||
searchForm?.requestSubmit();
|
||||
}
|
||||
|
||||
async function applyPreset(preset: PresetKey) {
|
||||
switch (preset) {
|
||||
case 'default':
|
||||
searchQuery = '';
|
||||
sortOrder = 'Latest';
|
||||
curated = false;
|
||||
verified = true;
|
||||
break;
|
||||
case 'picks':
|
||||
searchQuery = 'picks';
|
||||
sortOrder = 'Latest';
|
||||
curated = false;
|
||||
verified = false;
|
||||
break;
|
||||
case 'packs':
|
||||
searchQuery = 'pack';
|
||||
sortOrder = 'Latest';
|
||||
curated = false;
|
||||
verified = true;
|
||||
break;
|
||||
}
|
||||
|
||||
await submitSearch();
|
||||
}
|
||||
|
||||
function togglePlaylist(id: number) {
|
||||
const currentlyExpanded = Boolean(expanded[id]);
|
||||
const nextExpanded: Record<number, boolean> = {};
|
||||
@ -195,11 +295,55 @@ function togglePlaylist(id: number) {
|
||||
<section class="py-8">
|
||||
<h1 class="font-display text-3xl sm:text-4xl">Playlist Discovery</h1>
|
||||
<p class="mt-2 text-muted max-w-2xl">
|
||||
See <strong><a href="https://bsaber.com/playlists" target="_blank" rel="noreferrer">Featured Packs</a> on Beast Saber</strong> for curated map packs. You can also view most packs by searching BeatSaver for <a href="https://beatsaver.com/playlists?q=picks&order=Latest" target="_blank" rel="noreferrer">picks</a> or <a href="https://beatsaver.com/playlists?q=pack&verified=true&order=Latest" target="_blank" rel="noreferrer">packs</a>.
|
||||
Otherwise this page is a UI/UX experiment that shows playlists by verified mappers, and provides a reactive interface for previewing map ratings and listening to song previews.
|
||||
This page is a UI/UX experiment that shows playlists with a reactive interface for previewing map ratings and listening to song previews.
|
||||
See <strong><a href="https://bsaber.com/playlists" target="_blank" rel="noreferrer">Featured Packs</a> on Beast Saber</strong> for curated map packs.
|
||||
</p>
|
||||
|
||||
<HasToolAccess player={data?.player ?? null} requirement={requirement} adminRank={data?.adminRank ?? null} adminPlayer={data?.adminPlayer ?? null}>
|
||||
<form class="search-form card-surface" method="GET" bind:this={searchForm}>
|
||||
<input type="hidden" name="submitted" value="1" />
|
||||
<input type="hidden" name="page" value="1" />
|
||||
|
||||
<div class="search-grid">
|
||||
<label class="form-field search-query">
|
||||
<span class="form-label">Search</span>
|
||||
<input type="search" name="q" placeholder="Search playlists" bind:value={searchQuery} />
|
||||
</label>
|
||||
<label class="form-field sort-field">
|
||||
<span class="form-label">Sort order</span>
|
||||
<select name="order" bind:value={sortOrder} on:change={submitSearch}>
|
||||
{#each SORT_OPTIONS as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="search-filters">
|
||||
<label class="filter-checkbox">
|
||||
<input type="checkbox" name="curated" value="on" bind:checked={curated} on:change={submitSearch} />
|
||||
<span>Curated playlists</span>
|
||||
</label>
|
||||
<label class="filter-checkbox">
|
||||
<input type="checkbox" name="verified" value="on" bind:checked={verified} on:change={submitSearch} />
|
||||
<span>Playlists from verified mappers</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="search-actions">
|
||||
<button class="form-btn primary" type="submit">Search</button>
|
||||
<div class="preset-group">
|
||||
<span class="preset-label">Presets:</span>
|
||||
<button class="form-btn secondary" type="button" on:click={() => applyPreset('packs')}>
|
||||
Map Packs
|
||||
</button>
|
||||
<button class="form-btn secondary" type="button" on:click={() => applyPreset('picks')}>
|
||||
Picks
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{#if data?.error}
|
||||
<div class="mt-6 rounded-md border border-danger/40 bg-danger/10 px-4 py-3 text-danger text-sm">
|
||||
{data.error}
|
||||
@ -363,6 +507,202 @@ function togglePlaylist(id: number) {
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.search-form {
|
||||
margin-top: 1.75rem;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.search-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(148, 163, 184, 0.75);
|
||||
}
|
||||
|
||||
.search-query {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sort-field {
|
||||
max-width: 10em;
|
||||
}
|
||||
|
||||
.form-field input,
|
||||
.form-field select {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
color: #e2e8f0;
|
||||
font-size: 0.95rem;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.form-field input::placeholder {
|
||||
color: rgba(148, 163, 184, 0.6);
|
||||
}
|
||||
|
||||
.form-field input:focus,
|
||||
.form-field select:focus {
|
||||
outline: none;
|
||||
border-color: rgba(94, 234, 212, 0.5);
|
||||
box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2);
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-checkbox {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
line-height: 1.45;
|
||||
padding: 0.55rem 0.9rem 0.55rem 2.35rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-checkbox:hover {
|
||||
border-color: rgba(94, 234, 212, 0.35);
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
}
|
||||
|
||||
.filter-checkbox:focus-within {
|
||||
border-color: rgba(94, 234, 212, 0.5);
|
||||
box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2);
|
||||
}
|
||||
|
||||
.filter-checkbox input {
|
||||
position: absolute;
|
||||
left: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filter-checkbox span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25);
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-btn:hover {
|
||||
border-color: rgba(94, 234, 212, 0.5);
|
||||
box-shadow: 0 0 12px rgba(94, 234, 212, 0.2);
|
||||
}
|
||||
|
||||
.form-btn.primary {
|
||||
background: rgba(94, 234, 212, 0.85);
|
||||
border-color: rgba(94, 234, 212, 0.85);
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-btn.primary:hover {
|
||||
box-shadow: 0 8px 20px rgba(94, 234, 212, 0.25);
|
||||
}
|
||||
|
||||
.form-btn.secondary {
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
}
|
||||
|
||||
.form-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
border-color: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
.preset-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preset-label {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(148, 163, 184, 0.75);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.search-form {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.search-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.sort-field {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.search-filters {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.preset-group {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.playlists-grid {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user