// Persistent bottom-of-viewport playback bar.
//
// Mounted once in the app shell (app.jsx) and rendered on top of every
// route. Pulls all of its state from `useAudio()` so it stays in sync
// with whatever played the current track — could be the home discover
// list, a profile track row, a review-queue mini-player.
//
// Hides itself entirely when nothing is loaded so a fresh session
// doesn't have a dead bar floating at the bottom of an empty screen.
//
// Layout (top to bottom):
// 1. Full-width sunset scrub bar — clickable to seek
// 2. mm:ss / mm:ss timestamps (mono, tabular)
// 3. Cover + title/artist • transport (shuffle/prev/play/next/repeat)
// • like + volume slider
//
// The transport / shuffle / repeat buttons are present visually but
// not yet wired (muted styling). The play button works; prev/next
// would need a queue concept we don't have yet — left as TODO.
function NowPlayingBar() {
const audio = useAudio();
const likes = useLikes();
const track = audio.currentTrack;
// Expanded "big player" mode — when toggled, the panel grows
// upward from the bottom edge and shows the waveform + scrolling
// lyrics on top of the standard transport row. Collapsing returns
// to the compact strip without restarting playback.
const [expanded, setExpanded] = React.useState(false);
// Auto-collapse when the player closes entirely (track cleared),
// so re-opening a different track later doesn't reuse stale state.
React.useEffect(() => { if (!track) setExpanded(false); }, [track]);
// Expose a global setter so the share-link boot path in app.jsx
// can pop the big player open after fetching + playing the shared
// track. Cleared on unmount in case the bar ever stops mounting.
React.useEffect(() => {
window.expandBigPlayer = () => setExpanded(true);
return () => { delete window.expandBigPlayer; };
}, []);
if (!track) return null;
const duration = audio.duration || track.duration || 0;
const pct = duration ? Math.max(0, Math.min(1, audio.pos / duration)) * 100 : 0;
return (
// Container is centred + capped so the player doesn't stretch
// edge-to-edge on big monitors. `max-width: 80vw` keeps the bar
// hugging the centre of attention while still scaling on narrow
// screens via the 1200px cap; the larger of the two caps wins on
// ultrawide displays so we never exceed 80% of the viewport.
{/* Big-player panel — only mounted when expanded. Sits visually
above the compact bar via a -8px negative margin on the
Glass below so the two cards read as one connected surface
when expanded. */}
{expanded && }
{/* Progress row — mm:ss · [================O============] · mm:ss
Timestamps live INSIDE the row now (one on each side) so
the player only takes two visual rows instead of three.
Slider expands to fill the remaining space. */}
{/* Like + add-to-playlist + volume + expand toggle (right).
Heart + plus both write to ingame-synced tables — a
heart here shows up in the phone next time the player
reconnects, same for playlist adds. */}
{/* Share — copies a /#/track/ deep-link to clipboard.
Whoever opens the link gets the track auto-played and
the big player popped open via the boot handler in
app.jsx. */}
);
}
// Process-lifetime cache of lyrics responses, keyed by trackId.
// Re-opening the big player on the same track is then instant — no
// network round-trip. Cleared from the AdminMenu regenerate-lyrics
// path (`window.invalidateLyrics(id)`) so admins forcing a fresh
// transcription don't see stale results.
const lyricsCache = new Map();
window.invalidateLyrics = (id) => { lyricsCache.delete(id); };
// Expanded "big player" panel that pops up above the compact strip.
// Three-column layout: cover + meta on the left, lyrics in the
// middle (scrollable, auto-syncing to the current playback time),
// waveform on the right. ~360px tall, the compact strip below
// brings it to ~440px total which fits comfortably without
// dominating the page.
function BigPlayerPanel({ track, audio, duration }) {
// Lyrics fetch — uses the per-trackId cache to avoid re-fetching
// when the user collapses + re-opens the panel on the same track.
// `lyricsCache.get()` returns undefined for an unfetched track,
// null for "fetched and got nothing" (still in transcription
// queue), or the row object for a real result — both undefined
// and a missing-from-cache check below trigger a fresh fetch.
const [lyrics, setLyrics] = React.useState(() =>
track?.id && lyricsCache.has(track.id) ? lyricsCache.get(track.id) : null
);
React.useEffect(() => {
if (!track?.id) return;
// Cache hit: render straight from the Map, skip the network.
if (lyricsCache.has(track.id)) {
setLyrics(lyricsCache.get(track.id));
return;
}
let cancelled = false;
(async () => {
const out = await Api.lyrics(track.id);
if (cancelled) return;
lyricsCache.set(track.id, out);
setLyrics(out);
})();
return () => { cancelled = true; };
}, [track?.id]);
return (
{/* Cover + meta column */}
Jetzt läuft
{track.title}
{track.artist}
{/* Tag chips — clickable, jumps to the home library
pre-filtered by that tag. Useful for "find more like
this" discovery without leaving playback. Only top 4
tags render to keep the column tidy. */}
{(track.tags || []).length > 0 && (
);
}
// Lyrics list. Each line has `t` (timestamp seconds) and `line`
// (text). Auto-scrolls the active line into view; clicking a line
// seeks playback there. Falls back to a placeholder when lyrics
// are missing or still being transcribed.
function LyricsView({ lyrics, pos, onSeek }) {
const containerRef = React.useRef(null);
const lines = lyrics?.lines || [];
// Find the currently-active line — the one with the largest `t`
// that's still ≤ current position. Binary search would be tidier
// for very long songs but linear over <500 lines runs in
// microseconds.
const activeIdx = React.useMemo(() => {
let idx = -1;
for (let i = 0; i < lines.length; i++) {
if (lines[i].t <= pos) idx = i;
else break;
}
return idx;
}, [lines, pos]);
// Auto-scroll the active line into view. We use scrollTop math
// instead of scrollIntoView so the container itself scrolls (not
// the page) and we get smooth behaviour via CSS scroll-behavior.
React.useEffect(() => {
if (activeIdx < 0 || !containerRef.current) return;
const el = containerRef.current.querySelector(`[data-line="${activeIdx}"]`);
if (!el) return;
const c = containerRef.current;
// Target: keep the active line ~40% from the top so the user
// sees what's coming next as well as what just played.
const target = el.offsetTop - c.clientHeight * 0.4;
c.scrollTo({ top: target, behavior: 'smooth' });
}, [activeIdx]);
if (!lyrics) {
return (
);
}
if (lyrics.status === 'pending' || lyrics.status === 'in_progress') {
return (
);
}
if (!lines.length) {
return (
);
}
return (
{lines.map((l, i) => {
const isActive = i === activeIdx;
const isPast = i < activeIdx;
return (
);
})}
);
}
function PlaceholderLyrics({ text }) {
return (
{text}
);
}
// Waveform — vertical bars rendered from the `peaks` array (120
// ints 0-100 extracted by ffmpeg at upload time). Bars left of the
// current play position are coloured by the sunset gradient (via
// per-bar background); bars right of it sit muted. Click anywhere
// on the waveform to seek to that position.
function WaveformView({ peaks, pos, duration, onSeek }) {
if (!peaks || peaks.length === 0) {
// No waveform data — happens for tracks uploaded before the
// peak-extraction pipeline existed, or if ffmpeg failed silently
// at submit time. Show a calm idle pattern so the column doesn't
// look broken.
return (
Keine Waveform verfügbar.
);
}
// Position-as-fraction → how many peaks should render in the
// "played" colour. Round down so a peak only flips colour once
// the playhead has truly passed it.
const playedCount = duration > 0
? Math.floor((pos / duration) * peaks.length)
: 0;
return (
{
if (!duration) return;
const rect = e.currentTarget.getBoundingClientRect();
const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
onSeek?.(ratio * duration);
}}
style={{
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2,
cursor: 'pointer', height: '100%',
}}
>
{peaks.map((p, i) => {
const isPlayed = i < playedCount;
// Bars are at least 4 % tall so silent / very-quiet samples
// still show as a hairline. The 0.65 scale factor caps a
// peak=100 bar at 65 % of the column so even the loudest
// moment doesn't span the entire height — looks more like a
// waveform readout, less like a barcode.
const h = Math.max(4, p * 0.65);
return (
);
})}
);
}
// Add-to-playlist button. Click → popover with the user's playlists
// + "Neue Playlist" option at the bottom. Pick one → track gets
// appended via the existing API. Portalled to body so it doesn't
// clip against the player's overflow:hidden Glass wrapper.
function AddToPlaylistButton({ trackId }) {
const playlists = useMyPlaylists();
const [open, setOpen] = React.useState(false);
const [rect, setRect] = React.useState(null);
const btnRef = React.useRef(null);
const popRef = React.useRef(null);
React.useEffect(() => {
if (!open) return;
if (btnRef.current) setRect(btnRef.current.getBoundingClientRect());
const onClick = (e) => {
if (btnRef.current?.contains(e.target)) return;
if (popRef.current?.contains(e.target)) return;
setOpen(false);
};
setTimeout(() => document.addEventListener('click', onClick), 0);
return () => document.removeEventListener('click', onClick);
}, [open]);
const onPick = async (id) => {
setOpen(false);
try {
await MyPlaylists.addTrack(id, trackId);
toast.success('Zur Playlist hinzugefügt.');
} catch (e) {
toast.error('Hinzufügen fehlgeschlagen: ' + e.message);
}
};
const onCreate = async () => {
setOpen(false);
const name = prompt('Neue Playlist · wie soll sie heißen?');
if (!name || !name.trim()) return;
try {
const fresh = await MyPlaylists.create(name.trim());
const created = (fresh || []).find(p => p.name === name.trim());
if (created) {
await MyPlaylists.addTrack(created.id, trackId);
toast.success(`Playlist „${name.trim()}" angelegt mit Track.`);
}
} catch (e) {
toast.error('Anlegen fehlgeschlagen: ' + e.message);
}
};
const POP_WIDTH = 240;
const popover = open && rect ? (
) : null;
return (
<>
{popover && ReactDOM.createPortal(popover, document.body)}
);
}
// Helper for items inside the AddToPlaylist popover. Same shape as
// AdminMenu items but a notch more compact — lives in the player
// chrome so it needs to fit a smaller surface.
function PopoverItem({ icon, color, onClick, children }) {
const [hover, setHover] = React.useState(false);
return (
);
}
// Small transport button used for shuffle/repeat/prev/next. `muted`
// dims the colour so the disabled ones don't compete with the active
// play/pause button in the middle.
function TransportBtn({ icon, onClick, muted, title }) {
return (
);
}
window.NowPlayingBar = NowPlayingBar;