-
{p.current.title}
-
{p.current.artist}
+
+
+
toggleStar(p.current.id).catch(() => {})}
- aria-label="Favorite"
+ aria-label={starred ? 'Unfavorite' : 'Favorite'}
+ aria-pressed={!!starred}
>
-
+
setMenu(true)} aria-label="More">
+
{p.missing ? (
-
{missingLong(p.current)}
+
{missingLong(p.current)}
) : (
-
-
p.seek(Number(e.target.value))}
- style={{ background: `linear-gradient(to right, var(--accent) ${pct}%, var(--surface-2) ${pct}%)` }}
- />
-
- {formatTime(p.progress)}
- {formatTime(p.duration)}
-
-
+
)}
-
- {p.longForm ? (
-
p.skip(-15)} aria-label="Back 15 seconds">
- ) : (
-
+
+ {p.longForm && (
+
p.skip(-15)} aria-label="Back 15 seconds">
)}
-
- {p.isPlaying ?
+
- {p.longForm ? (
- p.skip(30)} aria-label="Forward 30 seconds">
- ) : (
- p.skip(30)} aria-label="Forward 30 seconds">
)}
- {p.longForm ? (
-
- {p.speed}×
+
+ setLyricsOn((s) => !s)} aria-label="Lyrics" aria-pressed={lyricsOn}>
+
- ) : (
-
- {loopLabel}
- {p.loopMode === 'one' && 1 }
+
+
+
+
+ {menu && (
+ setMenu(false)} label="Track options">
+ {(closeMenu) => (
+ <>
+
+
closeMenu(() => openAddToPlaylist(live || p.current))}>
+ Add to playlist
+ {p.source?.playlistId != null && (
+
closeMenu(() => close(() => goToPlaylist(p.source.playlistId)))}>
+ Go to {p.source.name}
+ )}
+ {/* Speed: no label, the values say what it is. Persists and applies to every track. */}
+
+
+ {SPEEDS.map((v) => (
+ p.pickSpeed(v)}
+ >
+ {v}
+
+ ))}
+
+
+
+ closeMenu()}>Cancel
+
+
+ )}
+
)}
+ ,
+ document.body,
+ )
+}
+
+// YouTube art is 16:9: fit it whole over a blurred, zoomed copy of itself.
+function ytChain(url) {
+ const id = ytThumbId(url)
+ if (!id) return url ? [url] : []
+ const base = `https://i.ytimg.com/vi/${id}`
+ return [`${base}/maxresdefault.jpg`, `${base}/mqdefault.jpg`, `${base}/hqdefault.jpg`]
+}
+
+function useChain(url) {
+ const chain = ytChain(url)
+ const [step, setStep] = useState(0)
+ useEffect(() => setStep(0), [url])
+ return {
+ src: chain[step],
+ onError: () => setStep((n) => n + 1),
+ // A missing maxres answers with a 120px grey placeholder, not an error.
+ onLoad: (e) => { if (chain[step]?.includes('maxresdefault') && e.currentTarget.naturalWidth <= 120) setStep((n) => n + 1) },
+ }
+}
+
+function Cover({ track, tile, paused }) {
+ const img = useChain(track.thumbnailUrl)
+ const cls = `cover ${paused ? 'cover--paused' : ''}`
+ if (img.src) {
+ return (
+
+
+
+
+ )
+ }
+ if (tile) {
+ return (
+
+
{tile.num}
+
{tile.label}
+
+ )
+ }
+ return
+}
+
+function Backdrop({ track, tile }) {
+ const img = useChain(track.thumbnailUrl)
+ let h = tile?.hue
+ if (h == null) {
+ let x = 0
+ for (const c of track.id || '') x = (x * 31 + c.charCodeAt(0)) % 360
+ h = 16 + (x % 30)
+ }
+ return (
+
+ {img.src ?
:
}
+
+ )
+}
+
+// One line; a title too long for it scrolls once in a while instead of
+// losing its end to an ellipsis.
+function Title({ text }) {
+ const box = useRef(null)
+ const inner = useRef(null)
+ const [over, setOver] = useState(0)
+ useLayoutEffect(() => {
+ const measure = () => setOver(Math.max(0, inner.current.scrollWidth - box.current.clientWidth))
+ measure()
+ document.fonts?.ready.then(measure)
+ }, [text])
+ const reduce = motionMs(1000) < 1000
+ const cls = over > 0 ? (reduce ? 'np-title np-title--clip' : 'np-title np-title--marquee np-title--clip') : 'np-title'
+ return (
+
+ {text}
+
+ )
+}
+
+// Custom scrubber: no thumb; it thickens while held and seeks on release.
+function Scrubber({ progress, duration, onSeek }) {
+ const track = useRef(null)
+ const [drag, setDrag] = useState(null) // seconds while dragging
+ const ratioAt = (x) => {
+ const r = track.current.getBoundingClientRect()
+ return Math.min(1, Math.max(0, (x - r.left) / r.width))
+ }
+ const t = drag ?? progress
+ const pct = duration ? Math.min(1, t / duration) : 0
+
+ const down = (e) => {
+ if (!duration) return
+ e.currentTarget.setPointerCapture(e.pointerId)
+ setDrag(ratioAt(e.clientX) * duration)
+ }
+ const move = (e) => { if (drag != null) setDrag(ratioAt(e.clientX) * duration) }
+ const up = () => {
+ if (drag == null) return
+ onSeek(drag)
+ setDrag(null)
+ }
+ const key = (e) => {
+ const step = { ArrowLeft: -5, ArrowRight: 5 }[e.key]
+ if (step && duration) {
+ e.preventDefault()
+ onSeek(Math.min(duration, Math.max(0, progress + step)))
+ }
+ }
+
+ return (
+
setDrag(null)}
+ onKeyDown={key}
+ >
+
+
+ {formatTime(t)}
+ -{formatTime(Math.max(0, (duration || 0) - t))}
+
)
}
function LyricsView({ lyrics, progress, onSeek, onResearch }) {
+ const box = useRef(null)
const activeRef = useRef(null)
+ const touchedAt = useRef(0)
const [researching, setResearching] = useState(false)
const synced = lyrics?.synced
const idx = activeLine(synced, progress)
- // Keep the active line centered as the song plays.
+ // Keep the active line centered, unless the reader scrolled in the last few
+ // seconds. Scrolls only this box (scrollIntoView would also move the sheet).
useEffect(() => {
- activeRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+ const el = activeRef.current
+ const sc = box.current
+ if (!el || !sc || Date.now() - touchedAt.current < 3000) return
+ sc.scrollTo({ top: el.offsetTop - sc.clientHeight / 2 + el.offsetHeight / 2, behavior: motionMs(1) > 1 ? 'smooth' : 'auto' })
}, [idx])
+ const touched = () => { touchedAt.current = Date.now() }
const research = async () => {
setResearching(true)
@@ -168,14 +439,14 @@ function LyricsView({ lyrics, progress, onSeek, onResearch }) {
// "Wrong song?" footer so a bad match is one tap to fix.
const footer = lyrics !== undefined && (
- {researching ? 'Searching…' : 'Wrong lyrics? Re-search'}
+ {researching ? 'Searching…' : 'Wrong lyrics? Search again'}
)
if (lyrics === undefined) return
Loading lyrics…
if (synced && synced.length) {
return (
-
+
{synced.map((line, i) => (
{lyrics.plain}{footer}
+ return
{lyrics.plain}{footer}
}
return (
@@ -203,32 +474,10 @@ function LyricsView({ lyrics, progress, onSeek, onResearch }) {
// An episode that fails to load is usually just offline, not missing bytes.
function missingShort(item) {
- return item.kind === 'episode' ? "Can't stream right now" : 'Audio unavailable — re-import'
+ return item.kind === 'episode' ? "Can't stream right now" : 'Audio missing. Import it again'
}
function missingLong(item) {
return item.kind === 'episode'
? "Can't stream this episode right now. Download it while you have a connection to play it offline."
- : 'Audio unavailable — the file for this track is missing. Re-import it to play.'
-}
-
-/* icons */
-const s = { fill: 'currentColor' }
-function LyricsIcon() { return
}
-function PlayIcon({ big }) { const n = big ? 30 : 20; return
}
-function PauseIcon({ big }) { const n = big ? 30 : 20; return
}
-function NextIcon() { return
}
-function PrevIcon() { return
}
-function RepeatIcon() { return
}
-function ChevronDown() { return
}
-function StarIcon({ filled }) { return
}
-function SkipIcon({ back, n }) {
- return (
-
-
-
- {n}
-
- )
+ : 'The audio file for this track is missing. Import it again from Files to play it.'
}
diff --git a/src/components/PlaylistActionsSheet.jsx b/src/components/PlaylistActionsSheet.jsx
index 08d8e36..aa36c38 100644
--- a/src/components/PlaylistActionsSheet.jsx
+++ b/src/components/PlaylistActionsSheet.jsx
@@ -1,34 +1,32 @@
-import { useDialog } from '../lib/useDialog'
+import Sheet from './Sheet'
+import Icon from './Icon'
-// Bottom sheet for a single playlist — opened by long-pressing a playlist card
-// or tapping ⋯ inside a playlist. Offers Rename and Delete.
-export default function PlaylistActionsSheet({ playlist, onRename, onDelete, onClose }) {
- const dialog = useDialog(onClose)
+// Sheet for a single playlist, opened by holding a playlist row or tapping ⋯
+// inside a playlist. Offers Rename and Delete.
+export default function PlaylistActionsSheet({ playlist, count, onRename, onDelete, onClose }) {
return (
-
-
e.stopPropagation()}
- >
-
-
{playlist.name}
-
-
- Rename
-
-
- Delete playlist
-
-
-
Cancel
-
-
+
+ {(close) => (
+ <>
+
+
+
+ {playlist.name}
+ {count} {count === 1 ? 'song' : 'songs'}
+
+
+
{ onRename(); close() }}>
+ Rename
+
{ onDelete(); close() }}>
+ Delete playlist
+
+ close()}>Cancel
+
+
+ )}
+
)
}
diff --git a/src/components/PlaylistsView.jsx b/src/components/PlaylistsView.jsx
index affb850..ebc6a55 100644
--- a/src/components/PlaylistsView.jsx
+++ b/src/components/PlaylistsView.jsx
@@ -1,121 +1,79 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { usePlaylists, useTracks } from '../state/useLibrary'
-import { createPlaylist, renamePlaylist, deletePlaylist, exportBackup, importBackup } from '../lib/db'
+import { createPlaylist, renamePlaylist, deletePlaylist } from '../lib/db'
import { usePlayer } from '../state/PlayerProvider'
import { useUI } from '../state/UIProvider'
import { useLongPress } from '../lib/useLongPress'
-import { summarize, formatTime } from '../lib/format'
+import { formatTotalDuration, formatTime } from '../lib/format'
+import { displayTitle } from '../lib/series'
import { shuffle } from '../lib/shuffle'
import Artwork from './Artwork'
import TrackRow from './TrackRow'
+import Icon from './Icon'
import PromptModal from './PromptModal'
import ConfirmModal from './ConfirmModal'
import PlaylistActionsSheet from './PlaylistActionsSheet'
-export default function PlaylistsView() {
+export default function PlaylistsView({ scrollRef }) {
const playlists = usePlaylists()
- const allTracks = useTracks() // resolves each card's mosaic + duration meta
- const { showToast } = useUI()
- const [openId, setOpenId] = useState(null)
+ const allTracks = useTracks() // resolves each row's cover + duration meta
+ const { playlistId: openId, setPlaylistId: setOpenId } = useUI()
const [creating, setCreating] = useState(false)
const [actionsFor, setActionsFor] = useState(null) // playlist in the ⋯ sheet
const [renaming, setRenaming] = useState(null)
const [deleting, setDeleting] = useState(null)
- const restoreRef = useRef(null)
const open = playlists?.find((p) => p.id === openId)
-
- const onExport = async () => {
- try {
- const data = await exportBackup()
- const name = `melody-backup-${new Date().toISOString().slice(0, 10)}.json`
- const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
- // On iPhone the share sheet is the reliable way out ("Save to Files");
- // a home-screen app can't follow a download link.
- const file = new File([blob], name, { type: 'application/json' })
- if (navigator.canShare?.({ files: [file] })) {
- try {
- await navigator.share({ files: [file] })
- } catch (err) {
- if (err?.name !== 'AbortError') throw err
- }
- return
- }
- const url = URL.createObjectURL(blob)
- const a = document.createElement('a')
- a.href = url
- a.download = name
- a.click()
- // Revoke once the download has had a moment to start — leaked object
- // URLs pin their Blobs in memory for the app's whole lifetime.
- setTimeout(() => URL.revokeObjectURL(url), 5000)
- } catch {
- showToast("Couldn't export the backup.")
- }
- }
-
- const onRestore = async (e) => {
- const file = e.target.files[0]
- e.target.value = '' // reset so the same file can be re-picked later
- if (!file) return
- try {
- // Parse here, outside importBackup's Dexie transaction — awaiting
- // file.text() inside the transaction zone would kill it.
- const parsed = JSON.parse(await file.text())
- const { tracks, playlists: pls, podcasts } = await importBackup(parsed)
- showToast(`${tracks} songs · ${pls} playlists${podcasts ? ` · ${podcasts} shows` : ''} restored`)
- } catch {
- showToast("Couldn't read that backup file.")
- }
- }
-
- // Resolve ids the same way PlaylistDetail does, dropping dangling ids —
+ // Resolve ids the same way PlaylistDetail does, dropping dangling ids:
// deleted or restored-but-not-reimported tracks must not inflate the counts.
const byId = allTracks && new Map(allTracks.map((t) => [t.id, t]))
+ const resolve = (p) => p.trackIds.map((id) => byId.get(id)).filter(Boolean)
+
+ // A new view starts at the top.
+ useEffect(() => {
+ if (scrollRef?.current) scrollRef.current.scrollTop = 0
+ }, [openId, scrollRef])
+
+ if (playlists === undefined || allTracks === undefined) return
return (
- {playlists === undefined || allTracks === undefined ? (
- Loading…
- ) : open ? (
- setOpenId(null)} onActions={() => setActionsFor(open)} />
+ {open ? (
+ setOpenId(null)}
+ onActions={() => setActionsFor(open)}
+ />
) : (
<>
- {/* Same header shape the detail view uses, so nothing shifts. */}
-
- Playlists
- setCreating(true)}>+ New
-
+
+ setCreating(true)} aria-label="New playlist">
+
+
{playlists.length === 0 ? (
- No playlists yet. Create one, then add tracks with the ⋯ menu. Hold a playlist to rename or delete it.
+
+
+
No playlists yet
+
Make one, then press and hold any song to add it.
+
setCreating(true)}>New playlist
+
{playlists.map((p) => (
-
byId.get(id)).filter(Boolean)}
+ tracks={resolve(p)}
onOpen={() => setOpenId(p.id)}
onLongPress={() => setActionsFor(p)}
/>
))}
- Export backup
- restoreRef.current?.click()}>Restore
-
- setActionsFor(null)}
- onRename={() => { setRenaming(actionsFor); setActionsFor(null) }}
- onDelete={() => { setDeleting(actionsFor); setActionsFor(null) }}
+ onRename={() => setRenaming(actionsFor)}
+ onDelete={() => setDeleting(actionsFor)}
/>
)}
@@ -154,7 +113,7 @@ export default function PlaylistsView() {
{deleting && (
setDeleting(null)}
onConfirm={async () => {
@@ -168,71 +127,107 @@ export default function PlaylistsView() {
)
}
-function PlaylistCard({ playlist, tracks, onOpen, onLongPress }) {
- const lp = useLongPress(onLongPress)
+/** "12 songs, 48 min" with the numbers in the numeric voice. */
+function Meta({ tracks }) {
+ const n = tracks.length
+ const dur = formatTotalDuration(tracks.reduce((s, t) => s + (t.duration || 0), 0))
return (
- { if (!lp.suppressClick()) onOpen() }}
- >
- {/* Spans only inside the card button — nested interactive elements broke
- iOS taps before (ad39cc8). Artwork renders a deterministic gradient
- for undefined tracks, which is the intended look for 0–3-song lists. */}
-
- {n} {n === 1 ? 'song' : 'songs'}{dur && <>, {dur}}
+
+ )
+}
+
+// 2×2 of the first four covers when there are four; otherwise the first one.
+function Mosaic({ tracks, size = 56 }) {
+ if (tracks.length >= 4) {
+ return (
+
+ {tracks.slice(0, 4).map((t) =>
-
- {playlist.name}
- {summarize(tracks)}
+ )
+ }
+ return (
+
+
+ )
+}
+
+function PlaylistRow({ playlist, tracks, onOpen, onLongPress }) {
+ const lp = useLongPress(onLongPress)
+ return (
+ { if (!lp.suppressClick()) onOpen() }}>
+
+ {playlist.name}
+
+
)
}
-function PlaylistDetail({ playlist, onBack, onActions }) {
- const allTracks = useTracks()
- const { playQueue } = usePlayer()
- if (allTracks === undefined) return Loading…
+function PlaylistDetail({ playlist, tracks, scrollRef, onBack, onActions }) {
+ const { playQueue, current, isPlaying } = usePlayer()
+ const [scrolled, setScrolled] = useState(false)
+ const bar = useRef(null)
+ const title = useRef(null)
+
+ // The compact bar shows the name only once the big title is mostly under
+ // it, so a short playlist never shows the name twice.
+ useEffect(() => {
+ const el = scrollRef?.current
+ if (!el) return
+ const on = () => {
+ if (!bar.current || !title.current) return
+ const t = title.current.getBoundingClientRect()
+ setScrolled(t.top + t.height / 2 <= bar.current.getBoundingClientRect().bottom)
+ }
+ on()
+ el.addEventListener('scroll', on, { passive: true })
+ return () => el.removeEventListener('scroll', on)
+ }, [scrollRef])
- // Resolve ids → track objects in saved order, dropping any since-deleted ids.
- const byId = new Map(allTracks.map((t) => [t.id, t]))
- const tracks = playlist.trackIds.map((id) => byId.get(id)).filter(Boolean)
- const shuffled = () => shuffle(tracks)
+ const source = { name: playlist.name, playlistId: playlist.id }
// Shuffle doesn't bookmark: the next Resume should follow playlist order.
- const inOrder = { playlistId: playlist.id }
+ const inOrder = { playlistId: playlist.id, source }
const resumeIdx = playlist.resume ? tracks.findIndex((t) => t.id === playlist.resume.trackId) : -1
const resumeTrack = resumeIdx >= 0 ? tracks[resumeIdx] : null
+ // No point offering to resume what is already playing.
+ const showResume = resumeTrack && !(isPlaying && current?.id === resumeTrack.id)
return (
<>
-
+
+ {playlist.name}
+
+
+
+
+
{playlist.name}
+ {tracks.length > 0 &&
}
+
{summarize(tracks)}
-
-
playQueue(tracks, 0, inOrder)}>
-
playQueue(shuffled(), 0)}>
+
+ playQueue(tracks, 0, inOrder)}>
+ playQueue(shuffle(tracks), 0, { source })}>
- {resumeTrack && (
+ {showResume && (
playQueue(tracks, resumeIdx, { ...inOrder, startAt: playlist.resume.position })}
>
-
- Resume
- {resumeTrack.title}
+
+ Continue
+ {displayTitle(resumeTrack)}
- {formatTime(playlist.resume.position)}
+ {formatTime(playlist.resume.position)}
)}
@@ -242,13 +237,8 @@ function PlaylistDetail({ playlist, onBack, onActions }) {
) : (
-
Empty playlist. Add tracks from Library or Search using the ⋯ menu.
+
Empty for now. Press and hold any song in Library or Search to add it here.
)}
)
}
-
-function PlayGlyph() { return
}
-function ShuffleGlyph() { return
}
-function ChevronLeft() { return
}
-function Dots() { return
}
diff --git a/src/components/PromptModal.jsx b/src/components/PromptModal.jsx
index 56b8df7..de871f0 100644
--- a/src/components/PromptModal.jsx
+++ b/src/components/PromptModal.jsx
@@ -1,4 +1,5 @@
import { useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
import { useDialog } from '../lib/useDialog'
// A small centered text-entry modal — replaces window.prompt() so naming a
@@ -31,7 +32,8 @@ export default function PromptModal({
if (v) onSubmit(v)
}
- return (
+ // Portaled so it never inherits the page's Now Playing recede transform.
+ return createPortal(
-
,
+ document.body,
)
}
diff --git a/src/components/SearchView.jsx b/src/components/SearchView.jsx
index 7a59ffc..7e37657 100644
--- a/src/components/SearchView.jsx
+++ b/src/components/SearchView.jsx
@@ -3,18 +3,17 @@ import { useTracks, useSearch } from '../state/useLibrary'
import { parseYouTube, buildYtDlpCommand } from '../lib/youtube'
import TrackRow from './TrackRow'
import YouTubeLinkCard from './YouTubeLinkCard'
+import Icon from './Icon'
-export default function SearchView() {
- const [query, setQuery] = useState('')
+export default function SearchView({ query, setQuery }) {
const [autoCopied, setAutoCopied] = useState(false)
const tracks = useTracks()
// Defer the query fed to the (synchronous) fuzzy search so fast typing over a
- // large library doesn't drop input frames — React can skip intermediate list
- // renders and catch up when idle.
+ // large library doesn't drop input frames.
const deferredQuery = useDeferredValue(query)
const results = useSearch(tracks, deferredQuery)
- const q = query.trim() // immediate — drives the clear button
- const dq = deferredQuery.trim() // matches `results`, so the list/hint stay consistent
+ const q = query.trim() // immediate: drives the clear button
+ const dq = deferredQuery.trim() // matches `results`, so the list stays consistent
const yt = parseYouTube(query) // non-null when a YouTube link is pasted
// One tap: read the link from the clipboard AND copy the a-Shell command back,
@@ -25,7 +24,7 @@ export default function SearchView() {
try {
text = await navigator.clipboard.readText()
} catch {
- return // clipboard read blocked — user can type instead
+ return // clipboard read blocked: the user can type instead
}
if (!text) return
setQuery(text)
@@ -47,61 +46,51 @@ export default function SearchView() {
return (
-
-
-
-
+
+
- {q ? (
-
{ setQuery(''); setAutoCopied(false) }} aria-label="Clear">×
- ) : (
-
+ {q && (
+
{ setQuery(''); setAutoCopied(false) }} aria-label="Clear">
)}
{yt ? (
- ) : tracks === undefined ? (
-
Loading…
- ) : dq && results.length > 0 ? (
+ ) : tracks === undefined ? null : dq && results.length > 0 ? (
{results.map((t) => (
-
+ ) : dq ? (
+
+
+
No results
+
Check the spelling, or paste a YouTube link.
+
) : (
-
- {dq ? `Nothing matches “${dq}”.` : 'Tap the paste icon to drop in a YouTube link, or type to search your library.'}
-
+ <>
+
+
+ Paste a YouTube link
+
+
Or type to find a song in your library.
+
)}
)
}
-
-function SearchIcon() {
- return (
-
-
- )
-}
-function PasteIcon() {
- return (
-
-
- )
-}
diff --git a/src/components/Sheet.jsx b/src/components/Sheet.jsx
new file mode 100644
index 0000000..463ab78
--- /dev/null
+++ b/src/components/Sheet.jsx
@@ -0,0 +1,74 @@
+import { useCallback, useLayoutEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useDialog } from '../lib/useDialog'
+import { useDragDismiss } from '../lib/useDragDismiss'
+import { motionMs, EASE_SHEET } from '../lib/motion'
+
+// Bottom action sheet: slides up, drags down to dismiss, and animates out on
+// every close path. Children may be a function receiving close(), so an
+// action can dismiss with the same animation.
+export default function Sheet({ onClose, label, children }) {
+ const panel = useRef(null)
+ const overlay = useRef(null)
+ const closed = useRef(false)
+ const onCloseRef = useRef(onClose)
+ onCloseRef.current = onClose
+ const dur = motionMs(380)
+ // Taps in the first moments belong to the gesture that opened the sheet
+ // (e.g. the finger lifting after a long-press), not to the sheet.
+ const openedAt = useRef(Date.now())
+ const tooSoon = () => Date.now() - openedAt.current < 350
+ const swallowEarly = (e) => {
+ if (tooSoon()) { e.preventDefault(); e.stopPropagation() }
+ }
+
+ const slide = (to, ms = dur) => {
+ const el = panel.current
+ if (!el) return
+ el.style.transition = ms ? `transform ${ms}ms ${EASE_SHEET}` : 'none'
+ el.style.transform = to
+ }
+
+ useLayoutEffect(() => {
+ slide('translateY(calc(100% + 16px))', 0)
+ panel.current.getBoundingClientRect() // commit the start position
+ slide('')
+ }, [])
+
+ const close = useCallback((then) => {
+ if (closed.current) return
+ closed.current = true
+ slide('translateY(calc(100% + 16px))', motionMs(280))
+ overlay.current?.classList.add('is-closing')
+ setTimeout(() => {
+ onCloseRef.current?.()
+ if (typeof then === 'function') then()
+ }, motionMs(260))
+ }, [])
+
+ useDragDismiss(panel, {
+ onDrag: (d) => slide(`translateY(${d}px)`, 0),
+ onEnd: (d, v) => (d > 110 || v > 0.5 ? close() : slide('')),
+ })
+
+ const dialog = useDialog(() => close(), { autoFocus: true })
+
+ return createPortal(
+ <>
+
{ if (!tooSoon()) close() }} />
+
{ panel.current = el; dialog.ref.current = el }}
+ onKeyDown={dialog.onKeyDown}
+ onClickCapture={swallowEarly}
+ role="dialog"
+ aria-modal="true"
+ aria-label={label}
+ tabIndex={-1}
+ >
+ {typeof children === 'function' ? children(close) : children}
+
+ ,
+ document.body,
+ )
+}
diff --git a/src/components/TrackRow.jsx b/src/components/TrackRow.jsx
index b2fc90e..26a12b2 100644
--- a/src/components/TrackRow.jsx
+++ b/src/components/TrackRow.jsx
@@ -1,65 +1,52 @@
import Artwork from './Artwork'
-import { formatTime, timeLeft } from '../lib/format'
-import { isLongForm } from '../lib/podcasts'
-import { toggleStar } from '../lib/db'
+import Icon from './Icon'
+import { formatTime } from '../lib/format'
+import { displayTitle } from '../lib/series'
+import { useLongPress } from '../lib/useLongPress'
import { usePlayer } from '../state/PlayerProvider'
import { useUI } from '../state/UIProvider'
-// A single tappable track. Tap the row → play (within `list` as the queue).
-// Star button toggles favorite; the ⋯ button opens the add-to-playlist sheet.
-export default function TrackRow({ track, list, playOpts, playlist }) {
+// A single track: tap plays it (within `list` as the queue), press and hold
+// opens the track sheet (playlists, favorite, delete). Title only; the
+// trailing edge carries a favorite star and the duration, or the eq bars on
+// the playing row.
+export default function TrackRow({ track, list, playOpts, playlist, sub }) {
const { current, isPlaying, playTrack } = usePlayer()
const { openAddToPlaylist } = useUI()
+ const lp = useLongPress(() => openAddToPlaylist(track, playlist))
const isCurrent = current?.id === track.id
return (
-
-
playTrack(track, list, playOpts)}>
-
- {track.title}
- {track.artist}
-
- {isCurrent && isPlaying &&
-
-
- {isLongForm(track) && track.position > 0 ? timeLeft(track.duration, track.position) : formatTime(track.duration)}
+ {
+ if (!lp.suppressClick()) playTrack(track, list, playOpts)
+ }}
+ >
+
+ {displayTitle(track)}
+ {sub && {sub} }
-
- toggleStar(track.id).catch(() => {})}
- aria-label={track.starred ? 'Unfavorite' : 'Favorite'}
- >
-
-
- openAddToPlaylist(track, playlist)} aria-label="Add to playlist">
-
-
+
+ {isCurrent ? (
+ {formatTime(track.duration)}
+
+ )}
+
+
)
}
-function EqBars() {
+export function EqBars({ paused }) {
return (
-
-
+
)
}
-function StarIcon({ filled }) {
- return (
-
-
- )
-}
-function DotsIcon() {
- return (
-
-
- )
-}
diff --git a/src/components/YouTubeLinkCard.jsx b/src/components/YouTubeLinkCard.jsx
index 023e4dc..ff7905b 100644
--- a/src/components/YouTubeLinkCard.jsx
+++ b/src/components/YouTubeLinkCard.jsx
@@ -1,9 +1,10 @@
import { useState, useEffect } from 'react'
import { buildYtDlpCommand, fetchYouTubePreview } from '../lib/youtube'
+import Icon from './Icon'
// The thumbnail URL comes from a third-party (noembed) response, so validate it
// before using it as an
- {preview ? (
-
- {safeThumb(preview.thumbnail) &&
}
-
-
{preview.title}
-
{preview.author}
-
-
- ) : (
-
Video {yt.id}
- )}
+
+ {thumb ?
:
}
+
{preview === undefined ? '' : preview?.title || `Video ${yt.id}`}
+
-
- {command}
- {done ? '✓ Copied — paste in a-Shell' : 'Tap to copy'}
+
+
+ {command}
- Then come back and tap Import in Library.
+ Then come back, tap ⋯ in Library and choose Import from Files .
inputRef.current?.click()}
- disabled={busy}
- >
- {busy ?
-
-
- )
-}
-function Spinner() {
- return ".
const playQueue = useCallback((tracks, startIndex = 0, opts = {}) => {
if (!tracks.length) return
sourceRef.current = opts.playlistId ?? null
+ setSource(opts.source ?? null)
startAtRef.current = opts.startAt ?? null
setQueue(tracks)
setIndex(startIndex)
@@ -263,8 +269,8 @@ export function PlayerProvider({ children }) {
a.currentTime = Math.max(0, a.duration ? Math.min(a.duration, t) : t)
}, [])
- const cycleSpeed = useCallback(() => {
- setSpeed((v) => SPEEDS[(SPEEDS.indexOf(v) + 1) % SPEEDS.length])
+ const pickSpeed = useCallback((v) => {
+ if (SPEEDS.includes(v)) setSpeed(v)
}, [])
// Write the listening position for long-form items. Skipped in the last
@@ -356,19 +362,25 @@ export function PlayerProvider({ children }) {
return
}
+ // The lock screen crops to a square too, so skip the letterboxed
+ // hqdefault; a numbered track without art gets its number tile drawn.
+ const yt = ytThumbId(current.thumbnailUrl)
+ const tile = seriesTile(current)
+ const artwork = yt
+ ? [
+ { src: `https://i.ytimg.com/vi/${yt}/maxresdefault.jpg`, sizes: '1280x720', type: 'image/jpeg' },
+ { src: `https://i.ytimg.com/vi/${yt}/mqdefault.jpg`, sizes: '320x180', type: 'image/jpeg' },
+ ]
+ : current.thumbnailUrl
+ ? [{ src: current.thumbnailUrl, sizes: 'any', type: 'image/jpeg' }]
+ : tile
+ ? [{ src: tileArtwork(tile), sizes: '512x512', type: 'image/png' }]
+ : []
ms.metadata = new window.MediaMetadata({
- title: current.title || 'Unknown',
- artist: current.artist || '',
- // The lock screen crops to a square too, so skip the letterboxed hqdefault.
- artwork: current.thumbnailUrl
- ? [{
- src: ytThumbId(current.thumbnailUrl)
- ? `https://i.ytimg.com/vi/${ytThumbId(current.thumbnailUrl)}/mqdefault.jpg`
- : current.thumbnailUrl,
- sizes: 'any',
- type: 'image/jpeg',
- }]
- : [],
+ title: displayTitle(current) || 'Unknown',
+ artist: '',
+ album: source?.name || '',
+ artwork,
})
const set = (action, handler) => {
@@ -393,7 +405,7 @@ export function PlayerProvider({ children }) {
// Clear handlers when the track changes or the provider unmounts, so no
// remote press ever fires a closure bound to the previous track.
return clearAll
- }, [current, longForm, play, pause, prev, next, seek, skip])
+ }, [current, source, longForm, play, pause, prev, next, seek, skip])
// Single source of truth for playbackState: 'none' when nothing is loaded,
// else mirror isPlaying. iOS uses this to decide whether a remote press maps
@@ -406,8 +418,8 @@ export function PlayerProvider({ children }) {
}, [isPlaying, current])
const value = {
- current, queue, index, isPlaying, loopMode, progress, duration, missing, longForm, speed,
- playTrack, playQueue, playNext, addToQueue, toggle, next, prev, seek, cycleLoop, skip, cycleSpeed,
+ current, queue, index, isPlaying, loopMode, progress, duration, missing, longForm, speed, source,
+ playTrack, playQueue, playNext, addToQueue, toggle, next, prev, seek, cycleLoop, skip, pickSpeed,
}
return (
diff --git a/src/state/UIProvider.jsx b/src/state/UIProvider.jsx
index c22a121..c17fc97 100644
--- a/src/state/UIProvider.jsx
+++ b/src/state/UIProvider.jsx
@@ -1,15 +1,17 @@
import { createContext, useContext, useState, useCallback } from 'react'
-// Tiny global UI state so any TrackRow can open the "Add to playlist" sheet
-// without prop-drilling. The sheet itself is rendered once at the app root.
-// The toast follows the same pattern: any component can announce a result and
-// App renders the single toast host inside the dock.
+// Tiny global UI state so any row can open the track sheet without
+// prop-drilling. The sheet itself is rendered once at the app root. The toast
+// follows the same pattern, and navigation lives here so Now Playing's
+// "Go to " can switch tabs and open a playlist.
const UIContext = createContext(null)
export const useUI = () => useContext(UIContext)
export function UIProvider({ children }) {
- const [addTarget, setAddTarget] = useState(null) // track being added, or null
+ const [addTarget, setAddTarget] = useState(null) // track in the sheet, or null
const [toast, setToast] = useState(null) // { id, message } or null
+ const [tab, setTab] = useState('library')
+ const [playlistId, setPlaylistId] = useState(null) // open playlist detail
// fromPlaylist: the playlist the row belongs to, so the sheet can offer removal.
const [fromPlaylist, setFromPlaylist] = useState(null)
@@ -19,13 +21,23 @@ export function UIProvider({ children }) {
}, [])
const closeAddToPlaylist = useCallback(() => setAddTarget(null), [])
- // id changes per call so App can key the Toast — remounting restarts the
+ // id changes per call so App can key the Toast: remounting restarts the
// auto-dismiss timer even when the same message fires twice in a row.
const showToast = useCallback((message) => setToast({ id: Date.now(), message }), [])
const clearToast = useCallback(() => setToast(null), [])
+ const goToPlaylist = useCallback((id) => {
+ setTab('playlists')
+ setPlaylistId(id)
+ }, [])
+
return (
-
+
{children}
)
diff --git a/src/state/useLibrary.js b/src/state/useLibrary.js
index e76b14c..d52abbd 100644
--- a/src/state/useLibrary.js
+++ b/src/state/useLibrary.js
@@ -27,8 +27,9 @@ export function useTrack(trackId) {
}
/**
- * Fuzzy, as-you-type search over a track list. Returns the full list (newest
- * first) when the query is empty, else Fuse-ranked matches on title + artist.
+ * As-you-type search over a track list. Returns the full list (newest first)
+ * when the query is empty. Plain substring hits on the title come first, then
+ * Fuse's typo-tolerant matches on title + artist fill in behind them.
*/
export function useSearch(tracks, query) {
const fuse = useMemo(
@@ -38,7 +39,8 @@ export function useSearch(tracks, query) {
{ name: 'title', weight: 0.7 },
{ name: 'artist', weight: 0.3 },
],
- threshold: 0.4, // 0 = exact, 1 = match anything; 0.4 is forgiving but sane
+ threshold: 0.3, // 0 = exact, 1 = match anything
+ minMatchCharLength: 2,
ignoreLocation: true,
}),
[tracks],
@@ -47,7 +49,10 @@ export function useSearch(tracks, query) {
return useMemo(() => {
const q = query.trim()
if (!q) return tracks || []
- return fuse.search(q).map((r) => r.item)
+ const needle = q.toLowerCase()
+ const exact = (tracks || []).filter((t) => (t.title || '').toLowerCase().includes(needle))
+ const seen = new Set(exact.map((t) => t.id))
+ return [...exact, ...fuse.search(q).map((r) => r.item).filter((t) => !seen.has(t.id))]
}, [fuse, query, tracks])
}
diff --git a/vite.config.js b/vite.config.js
index 523150e..bcefb51 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -99,8 +99,8 @@ export default defineConfig(({ command }) => ({
name: 'Melody',
short_name: 'Melody',
description: 'Personal local audio player',
- theme_color: '#110f0c',
- background_color: '#110f0c',
+ theme_color: '#15120e',
+ background_color: '#15120e',
display: 'standalone',
orientation: 'portrait',
// Relative scope/start so it works under the /melody/ subpath.