Align search results with track rows
This commit is contained in:
lucast committed
1 parent
6b49c7c4d5
commit
1d2bec7317
2 files changed
+243
-32
No files matched your search
@@ -2,20 +2,26 @@
|
||||
import type { DropdownMenuItem } from "~/ui/DropdownMenu.vue"
|
||||
|
||||
interface TrackRowProps {
|
||||
track: Track
|
||||
track?: Track
|
||||
entity?: {
|
||||
type: "album" | "artist"
|
||||
_id: string
|
||||
name: string
|
||||
file?: string
|
||||
cover?: string
|
||||
artists?: Artist[]
|
||||
}
|
||||
index: number
|
||||
extendedInfo?: boolean
|
||||
showImage?: boolean
|
||||
queueMode?: boolean
|
||||
}
|
||||
|
||||
const { track, index, extendedInfo, showImage, queueMode } =
|
||||
defineProps<TrackRowProps>()
|
||||
const props = defineProps<TrackRowProps>()
|
||||
const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
|
||||
|
||||
const hovering = ref(false)
|
||||
const { playAlbum, addToFrontOfQueue, addToQueue } = usePlayer()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const dropdownMenuItems: DropdownMenuItem[][] = [
|
||||
@@ -24,14 +30,15 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
|
||||
label: "Play only this",
|
||||
icon: "lucide:play",
|
||||
onSelect() {
|
||||
playAlbum([track])
|
||||
if (props.track) playAlbum([props.track])
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Play next",
|
||||
icon: "lucide:list-start",
|
||||
onSelect() {
|
||||
addToFrontOfQueue(track)
|
||||
if (!props.track) return
|
||||
addToFrontOfQueue(props.track)
|
||||
toast.show("Playing next")
|
||||
},
|
||||
},
|
||||
@@ -39,41 +46,56 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
|
||||
label: "Add to queue",
|
||||
icon: "lucide:list-end",
|
||||
onSelect() {
|
||||
addToQueue(track)
|
||||
if (!props.track) return
|
||||
addToQueue(props.track)
|
||||
toast.show("Added to queue")
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
const durationFormatted = computed(() =>
|
||||
new Date(track.durationInSeconds * 1000).toISOString().slice(14, 19),
|
||||
)
|
||||
const durationFormatted = computed(() => {
|
||||
if (!props.track) return ""
|
||||
return new Date(props.track.durationInSeconds * 1000)
|
||||
.toISOString()
|
||||
.slice(14, 19)
|
||||
})
|
||||
|
||||
const artworkSrc = computed(() => GET_FILE(track.album.file))
|
||||
const artworkSrc = computed(() => {
|
||||
if (props.track) return GET_FILE(props.track.album.file)
|
||||
const file = props.entity?.file ?? props.entity?.cover
|
||||
return file ? GET_FILE(file) : undefined
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
class="track"
|
||||
:class="{
|
||||
extended: extendedInfo,
|
||||
odd: index % 2 == 1,
|
||||
image: showImage,
|
||||
queue: queueMode,
|
||||
extended: props.extendedInfo,
|
||||
odd: props.index % 2 == 1,
|
||||
image: props.showImage,
|
||||
queue: props.queueMode,
|
||||
}"
|
||||
@mouseenter="hovering = true"
|
||||
@mouseleave="hovering = false"
|
||||
>
|
||||
<div class="index" :class="{ hovering }">
|
||||
<template v-if="showImage">
|
||||
<template v-if="props.showImage">
|
||||
<Icon
|
||||
v-if="props.track"
|
||||
name="lucide:play"
|
||||
class="play-icon"
|
||||
@click="emit('playAlbumAtIndex')"
|
||||
/>
|
||||
<!-- Confirm before changing forced image dimensions. -->
|
||||
<NuxtImg :src="artworkSrc" width="40" height="40" placeholder />
|
||||
<!-- Keep the existing TrackRow artwork dimensions unchanged. -->
|
||||
<NuxtImg
|
||||
v-if="artworkSrc"
|
||||
:src="artworkSrc"
|
||||
width="40"
|
||||
height="40"
|
||||
placeholder
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Icon
|
||||
@@ -82,28 +104,43 @@ const artworkSrc = computed(() => GET_FILE(track.album.file))
|
||||
class="play-icon inline"
|
||||
@click="emit('playAlbumAtIndex')"
|
||||
/>
|
||||
<p v-else>{{ index + 1 }}</p>
|
||||
<p v-else>{{ props.index + 1 }}</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<p>{{ track.name }}</p>
|
||||
<p v-if="props.track">{{ props.track.name }}</p>
|
||||
<NuxtLink
|
||||
v-else-if="props.entity"
|
||||
:to="`/${props.entity.type}/${props.entity._id}`"
|
||||
>
|
||||
{{ props.entity.name }}
|
||||
</NuxtLink>
|
||||
|
||||
<template v-if="extendedInfo">
|
||||
<ArtistName :artists="track.artists" class="artists" />
|
||||
<NuxtLink :to="`/album/${track.album._id}`">
|
||||
<p>{{ track.album.name }}</p>
|
||||
<template v-if="props.track && props.extendedInfo">
|
||||
<ArtistName :artists="props.track.artists" class="artists" />
|
||||
<NuxtLink :to="`/album/${props.track.album._id}`">
|
||||
<p>{{ props.track.album.name }}</p>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else-if="props.entity">
|
||||
<ArtistName
|
||||
v-if="props.entity.type === 'album' && props.entity.artists?.length"
|
||||
:artists="props.entity.artists"
|
||||
class="artists"
|
||||
/>
|
||||
<span v-else />
|
||||
<p>{{ props.entity.type }}</p>
|
||||
</template>
|
||||
|
||||
<p>{{ durationFormatted }}</p>
|
||||
<p v-if="props.track">{{ durationFormatted }}</p>
|
||||
|
||||
<Icon
|
||||
v-if="queueMode"
|
||||
v-if="props.queueMode"
|
||||
name="lucide:grip-vertical"
|
||||
class="queue-handle"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<DropdownMenu v-else :items="dropdownMenuItems">
|
||||
<DropdownMenu v-else-if="props.track" :items="dropdownMenuItems">
|
||||
<Icon name="lucide:ellipsis" class="dropdown-icon" />
|
||||
</DropdownMenu>
|
||||
</article>
|
||||
@@ -149,11 +186,17 @@ const artworkSrc = computed(() => GET_FILE(track.album.file))
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
p {
|
||||
p,
|
||||
> a {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.index {
|
||||
@@ -162,7 +205,6 @@ const artworkSrc = computed(() => GET_FILE(track.album.file))
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
height: 20px;
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
+172
-3
@@ -1,7 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
import type { Track } from "@/utils/types"
|
||||
|
||||
watchEffect(() => console.log(route.query.q))
|
||||
interface SearchResult {
|
||||
type: "track" | "album" | "artist"
|
||||
_id: string
|
||||
name: string
|
||||
file?: string
|
||||
cover?: string
|
||||
album?: { _id?: string; name?: string; file?: string; cover?: string }
|
||||
artists?: Artist[]
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const { currentSong, playAlbum } = usePlayer()
|
||||
const query = computed(() => {
|
||||
const value = route.query.q
|
||||
return (Array.isArray(value) ? value[0] : value ?? "").trim()
|
||||
})
|
||||
const debouncedQuery = ref(query.value)
|
||||
let debounceTimeout: ReturnType<typeof setTimeout> | undefined
|
||||
|
||||
watch(query, (value) => {
|
||||
clearTimeout(debounceTimeout)
|
||||
debounceTimeout = setTimeout(() => {
|
||||
debouncedQuery.value = value
|
||||
}, 300)
|
||||
})
|
||||
|
||||
const { data, status, error } = await useApiFetch<SearchResult[]>("/search", {
|
||||
query: { q: debouncedQuery, limit: 9 },
|
||||
watch: [debouncedQuery],
|
||||
})
|
||||
|
||||
const results = computed<SearchResult[]>(() => {
|
||||
const payload: any = data.value
|
||||
if (Array.isArray(payload)) return payload
|
||||
if (Array.isArray(payload?.results)) return payload.results
|
||||
if (Array.isArray(payload?.data)) return payload.data
|
||||
if (!payload || typeof payload !== "object") return []
|
||||
|
||||
return (["tracks", "albums", "artists"] as const).flatMap((kind) =>
|
||||
Array.isArray(payload[kind])
|
||||
? payload[kind].map((result: SearchResult) => ({
|
||||
...result,
|
||||
type: kind.slice(0, -1) as SearchResult["type"],
|
||||
}))
|
||||
: [],
|
||||
)
|
||||
})
|
||||
|
||||
const recentTracks = ref<Track[]>([])
|
||||
const recentStorageKey = "music-v2-recently-played"
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
recentTracks.value = JSON.parse(
|
||||
window.localStorage.getItem(recentStorageKey) ?? "[]",
|
||||
) as Track[]
|
||||
} catch {
|
||||
recentTracks.value = []
|
||||
}
|
||||
})
|
||||
|
||||
watch(currentSong, (track) => {
|
||||
if (!track || !import.meta.client) return
|
||||
const updated = [
|
||||
track,
|
||||
...recentTracks.value.filter((item) => item._id !== track._id),
|
||||
].slice(0, 9)
|
||||
recentTracks.value = updated
|
||||
window.localStorage.setItem(recentStorageKey, JSON.stringify(updated))
|
||||
})
|
||||
|
||||
const playResult = (result: SearchResult | Track) => {
|
||||
if ("album" in result && result.album) playAlbum([result as Track])
|
||||
}
|
||||
</script>
|
||||
|
||||
<template></template>
|
||||
<template>
|
||||
<main class="search-page">
|
||||
<h1>Search</h1>
|
||||
|
||||
<p v-if="query && status === 'pending'" class="message" role="status">
|
||||
Searching…
|
||||
</p>
|
||||
<p v-else-if="query && error" class="message" role="alert">
|
||||
Search could not be loaded. Please try again.
|
||||
</p>
|
||||
<p
|
||||
v-else-if="query && status === 'success' && results.length === 0"
|
||||
class="message"
|
||||
>
|
||||
No results for “{{ query }}”.
|
||||
</p>
|
||||
|
||||
<template v-if="!query || (status === 'success' && results.length === 0)">
|
||||
<h2>Recently Played</h2>
|
||||
<p v-if="recentTracks.length === 0" class="message">
|
||||
Your recently played tracks will appear here.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<section
|
||||
v-if="query && results.length"
|
||||
class="results"
|
||||
aria-label="Search results"
|
||||
>
|
||||
<template
|
||||
v-for="(result, index) in results"
|
||||
:key="`${result.type}-${result._id}`"
|
||||
>
|
||||
<TrackRow
|
||||
v-if="result.type === 'track'"
|
||||
:track="result as unknown as Track"
|
||||
:index="index"
|
||||
show-image
|
||||
@play-album-at-index="playResult(result)"
|
||||
/>
|
||||
<TrackRow
|
||||
v-else
|
||||
:entity="result"
|
||||
:index="index"
|
||||
show-image
|
||||
/>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<section
|
||||
v-else-if="recentTracks.length && (!query || status === 'success')"
|
||||
class="results"
|
||||
aria-label="Recently played tracks"
|
||||
>
|
||||
<TrackRow
|
||||
v-for="(track, index) in recentTracks"
|
||||
:key="track._id"
|
||||
:track="track"
|
||||
:index="index"
|
||||
show-image
|
||||
@play-album-at-index="playResult(track)"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/util" as *;
|
||||
|
||||
.search-page {
|
||||
padding-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
@include fontSize(32px);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fontSize(20px);
|
||||
font-weight: 600;
|
||||
margin: 1.5rem 0 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
@include fontSize(14px);
|
||||
opacity: 0.65;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user