diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/music-player.js')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/music-player.js | 296 |
1 files changed, 283 insertions, 13 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-player.js b/packages/meshbay-hub/src/meshbay_hub/static/music-player.js index e8124fa..4587990 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/music-player.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/music-player.js @@ -6,6 +6,8 @@ import { t } from './i18n.js'; import { Icon } from './icon.js'; import { useStickyBand } from './sticky.js'; import { CHUNK_SIZE, pipelinedDownload } from './file-utils.js'; +import { playback, cast as castBridge } from './platform.js'; +import { castSession, useCastDevice, loadFile, CastButton } from './cast-session.js'; /** * The Music app's persistent player bar (docs/MESHBAY_DESIGN.md §9.8). @@ -29,6 +31,14 @@ import { CHUNK_SIZE, pipelinedDownload } from './file-utils.js'; * through `transport.requestAudioTranscode` first — a node-side, * cached-after-once AAC/M4A conversion — before the same download/blob path * runs. + * + * With a television chosen (cast-session.js), the same decrypted track is + * handed to the cast relay instead of the <audio> element, with its cover, + * and the bar becomes the receiver's remote: its play, pause, seek, previous + * and next drive the television, its clock is the television's, and the end + * of a track there moves the queue on as `ended` does here (docs/MESHBAY_DESIGN.md + * §11.4). The element keeps the track's source for its duration, and never + * plays while casting. */ const MIME_BY_EXT = { @@ -217,6 +227,13 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue // one of them being off is a property of that group rather than of each of // its tracks in turn — see advancePastFailure below (docs/playlists.md §11.3). const downGroupsRef = useRef(new Set()); + // When the page last came back from hidden. A phone with its screen off + // drops every connection at once, so a track that fails for lack of one + // while the page sleeps, or just after it wakes, says nothing about its + // group: it is retried rather than skipped (see the load effect below). + const wokeAtRef = useRef(0); + const [retryNonce, setRetryNonce] = useState(0); + const WAKE_GRACE_MS = 30000; const currentTrack = tracks[order[pos]] || null; @@ -272,6 +289,23 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue for (const { url } of blobCacheRef.current.values()) URL.revokeObjectURL(url); }, []); + // Held for as long as a track plays or loads: without it a phone freezes the + // page a minute after the screen goes off, and the next track never loads. + // Let go a few seconds late, because skipping a track that failed passes + // through "not playing", and Android refuses to take the hold back from the + // background: a playlist would stop at its first bad file. + const keepAliveRef = useRef({ held: false, timer: null }); + const active = playing || loading; + useEffect(() => { + const k = keepAliveRef.current; + if (!active) return; + clearTimeout(k.timer); + if (!k.held) { k.held = true; playback.keepAlive(true); } + return () => { + k.timer = setTimeout(() => { k.held = false; playback.keepAlive(false); }, 5000); + }; + }, [active]); + // Screen Wake Lock, opt-in only (Settings → music_keep_screen_on) and only // while a track is actually playing — off by default because the ordinary // expectation, matching Spotify/Deezer, is that the phone locks on its own @@ -326,6 +360,64 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue } }, []); + // ── Casting ────────────────────────────────────────────────────────────── + const castDevice = useCastDevice(); + const remote = Boolean(castDevice) && castSession.canSendFiles; + const remoteRef = useRef(remote); + // Which track the television was last given, where it was when last + // polled, and which track's end has already moved the queue on: the + // receiver keeps reporting FINISHED until it is given something else. + const remoteTrackRef = useRef(null); + const remotePosRef = useRef(null); + const finishedRef = useRef(null); + // True while a track is on its way to the television: the receiver's + // status still describes the previous one until it lands. + const sendingRef = useRef(false); + + // The track's cover, for the television to show beside it — found as the + // album card finds it (music-app.js): this track's own, else another queued + // track of the same album that carries one, else the cover the node found + // for the album. The node answers that last question from its cache, and + // asks MusicBrainz only where the group has it on and the track is tagged. + // A cover that cannot be had is no reason not to play the track. + const fetchCover = useCallback(async (entry) => { + try { + const { transport, gek } = await getConnection(entry.groupId); + if (!transport || !transport.connected) return null; + const sibling = entry.album && tracks.find((tr) => tr.thumb_hash + && tr.groupId === entry.groupId && tr.album === entry.album && tr.artist === entry.artist); + let hash = entry.thumb_hash || (sibling && sibling.thumb_hash) || null; + if (!hash && transport.fetchMusicMeta) { + const meta = await transport.fetchMusicMeta(entry.id).catch(() => null); + hash = (meta && meta.cover_thumb_hash) || null; + } + if (!hash) return null; + const chunks = await pipelinedDownload(transport, gek, hash, 1); + return { bytes: new Uint8Array(await new Blob(chunks).arrayBuffer()), type: 'image/jpeg' }; + } catch { + return null; + } + }, [getConnection, tracks]); + + const sendToTv = useCallback(async (entry, startAt = 0) => { + const cached = blobCacheRef.current.get(entry.id); + if (!cached) throw new Error(t('music.err_playback')); + sendingRef.current = true; + try { + const cover = await fetchCover(entry); + remoteTrackRef.current = entry.id; + remotePosRef.current = startAt; + finishedRef.current = null; + await loadFile({ + owner: 'music', startAt, + bytes: new Uint8Array(await cached.blob.arrayBuffer()), type: cached.mime, cover, + title: entry.display_title || entry.name, artist: entry.artist || '', album: entry.album || '', + }); + } finally { + sendingRef.current = false; + } + }, [fetchCover]); + const fetchTrackBlob = useCallback(async (entry) => { const cached = blobCacheRef.current.get(entry.id); if (cached) return cached.url; @@ -345,7 +437,11 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue } if (!transport) throw groupDown(); if (!transport.connected) await transport.waitForReconnect(); - if (!transport.connected) throw groupDown(); + if (!transport.connected) { + const e = groupDown(); + e.transport = transport; + throw e; + } let downloadId = entry.id; let downloadSize = entry.size; @@ -366,7 +462,8 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue const chunks = await pipelinedDownload(transport, gek, downloadId, totalChunks); const blob = new Blob(chunks, { type: mime }); const url = URL.createObjectURL(blob); - blobCacheRef.current.set(entry.id, { url, order: blobInsertRef.current++ }); + // The blob itself too: a cast hands its bytes to the relay. + blobCacheRef.current.set(entry.id, { url, blob, mime, order: blobInsertRef.current++ }); evictOldBlobs(); return url; }, [getConnection, evictOldBlobs]); @@ -441,8 +538,46 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue // effect above (pos/order/tracks all just changed together) and also // after skipNext/skipPrev/onEnded update `pos` alone. useEffect(() => { + const onVisibility = () => { + if (document.visibilityState === 'visible') wokeAtRef.current = Date.now(); + }; + document.addEventListener('visibilitychange', onVisibility); + return () => document.removeEventListener('visibilitychange', onVisibility); + }, []); + + const asleepOrJustWoke = () => document.visibilityState === 'hidden' + || Date.now() - wokeAtRef.current < WAKE_GRACE_MS; + + // Retries the current track once the page is back and a connection may be: + // the screen coming on, the network coming back, or the track's own + // transport finishing its reconnect, whichever comes first. A visible page + // also retries on a timer, so a failure that outlives the grace window + // ends on the ordinary error path instead of a spinner nobody can clear. + const retryWhenAwake = (myToken, transport) => { + let stop = () => {}; + let timer = null; + const fire = () => { + stop(); + if (loadTokenRef.current === myToken) setRetryNonce((n) => n + 1); + }; + const onVisibility = () => { if (document.visibilityState === 'visible') fire(); }; + document.addEventListener('visibilitychange', onVisibility); + window.addEventListener('online', fire); + const unsubscribe = transport ? transport.addReconnectListener(fire) : () => {}; + if (document.visibilityState === 'visible') timer = setTimeout(fire, 10000); + stop = () => { + clearTimeout(timer); + document.removeEventListener('visibilitychange', onVisibility); + window.removeEventListener('online', fire); + unsubscribe(); + }; + if (transport && transport.connected) fire(); + }; + + useEffect(() => { if (!currentTrack) return; const myToken = ++loadTokenRef.current; + let waiting = false; setLoading(true); setError(''); (async () => { @@ -453,23 +588,53 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue if (!audio) return; audio.src = url; audio.currentTime = 0; + if (remoteRef.current) { + // To the television; the element keeps the source for its duration. + audio.pause(); + setCurrentTime(0); + try { + await sendToTv(currentTrack, 0); + } catch (castErr) { + castErr.isCast = true; + throw castErr; + } + if (loadTokenRef.current !== myToken) return; + consecutiveFailuresRef.current = 0; + setPlaying(true); + prefetchNext(pos); + return; + } await audio.play(); consecutiveFailuresRef.current = 0; setPlaying(true); prefetchNext(pos); } catch (err) { if (loadTokenRef.current !== myToken) return; + // Autoplay refused (no recent tap): the track is loaded and fine, it + // waits for the play button. Not an error, and no reason to skip it. + if (err && err.name === 'NotAllowedError') { setPlaying(false); prefetchNext(pos); return; } + // The television did not take it: that says nothing about the track, + // so the queue stays where it is, with the reason on screen. + if (err && err.isCast) { setError(err.message || String(err)); setPlaying(false); return; } + if (err && err.isGroupDown && asleepOrJustWoke()) { + // Our own connection is what went, not the group: keep the spinner + // and this track, and try it again once we are back. + waiting = true; + setPlaying(false); + retryWhenAwake(myToken, err.transport); + return; + } setError(err.message || String(err)); setPlaying(false); // `fetchTrackBlob` throws `err_transport` when no node answered for // this track's group; anything else is about the file itself. advancePastFailure(err.isGroupDown ? currentTrack.groupId : null); } finally { - if (loadTokenRef.current === myToken) setLoading(false); + if (loadTokenRef.current === myToken && !waiting) setLoading(false); } })(); // eslint-disable-next-line - }, [currentTrack && currentTrack.id]); + }, [currentTrack && currentTrack.id, retryNonce]); // Belt and suspenders alongside the catch block above: `.play()` rejecting // is the common path for a source the browser can't decode at all, but a @@ -479,6 +644,9 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue // stream). Both paths converge on the same bounded advance, so whichever // fires first, the queue moves on exactly once. const handleMediaError = useCallback(() => { + // Casting, the element only holds the source for its duration: whether it + // could decode it says nothing about what the television is playing. + if (remoteRef.current) return; const audio = audioRef.current; const mediaError = audio && audio.error; setError((mediaError && mediaError.message) || t('music.err_playback')); @@ -505,27 +673,111 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue if (order.length === 0) return; // A few seconds in: restart the current track, the way most players do, // rather than always jumping to the previous one. + if (remoteRef.current && castSession.owner === 'music' && (remotePosRef.current || 0) > 3) { + castBridge.chromecastSeek(0).catch(() => {}); + remotePosRef.current = 0; + setCurrentTime(0); + return; + } const audio = audioRef.current; - if (audio && audio.currentTime > 3) { audio.currentTime = 0; return; } + if (!remoteRef.current && audio && audio.currentTime > 3) { audio.currentTime = 0; return; } if (pos > 0) { skipTo(pos - 1); return; } if (repeat === 'all') { skipTo(order.length - 1); } }, [pos, order.length, repeat, skipTo]); const onEnded = useCallback(() => { if (repeat === 'one') { + if (remoteRef.current && currentTrack) { + sendToTv(currentTrack, 0).catch((e) => { setError(e.message || String(e)); setPlaying(false); }); + return; + } const audio = audioRef.current; if (audio) { audio.currentTime = 0; audio.play().catch(() => {}); } return; } skipNext(); - }, [repeat, skipNext]); + }, [repeat, skipNext, currentTrack, sendToTv]); + const onEndedRef = useRef(onEnded); + onEndedRef.current = onEnded; const togglePlaying = useCallback(() => { + if (remoteRef.current && currentTrack) { + // A film or a photo has the television: playing again gives it back + // the track, from where it was. + if (castSession.owner !== 'music') { + sendToTv(currentTrack, remotePosRef.current || 0) + .then(() => { setError(''); setPlaying(true); }) + .catch((e) => { setError(e.message || String(e)); setPlaying(false); }); + return; + } + (playing ? castBridge.chromecastPause() : castBridge.chromecastPlay()) + .then(() => setPlaying(!playing)).catch(() => {}); + return; + } const audio = audioRef.current; if (!audio) return; if (playing) { audio.pause(); setPlaying(false); } - else { audio.play().then(() => setPlaying(true)).catch(() => {}); } - }, [playing]); + else { audio.play().then(() => { setError(''); setPlaying(true); }).catch(() => {}); } + }, [playing, currentTrack, sendToTv]); + + // A television chosen, or let go, in the middle of a track: the track goes + // on from where it was, on the other side. + useEffect(() => { + const was = remoteRef.current; + remoteRef.current = remote; + if (was === remote || !currentTrack) return; + const audio = audioRef.current; + if (remote) { + const at = audio ? audio.currentTime : 0; + const wasPlaying = playing; + if (audio) audio.pause(); + // Still loading: the load effect sends it once it has it. + if (!blobCacheRef.current.has(currentTrack.id)) return; + sendToTv(currentTrack, at) + .then(async () => { + if (!wasPlaying) await castBridge.chromecastPause().catch(() => {}); + setPlaying(wasPlaying); + }) + .catch((e) => { setError(e.message || String(e)); setPlaying(false); }); + } else { + const at = remotePosRef.current; + remoteTrackRef.current = null; + if (audio && at != null && isFinite(at)) audio.currentTime = at; + if (playing && audio) audio.play().catch(() => setPlaying(false)); + } + // eslint-disable-next-line + }, [remote]); + + // The television's clock and state, once a second, for as long as the + // track there is ours. + useEffect(() => { + if (!remote) return undefined; + let stopped = false; + const tick = async () => { + if (sendingRef.current || castSession.owner !== 'music' || !remoteTrackRef.current) return; + const s = await castBridge.status().catch(() => null); + const c = s && s.chromecast; + if (stopped || sendingRef.current || castSession.owner !== 'music' || !c) return; + if (!c.connected) { setPlaying(false); return; } + if (c.position != null) { remotePosRef.current = c.position; setCurrentTime(c.position); } + const state = c.playerState; + if (state === 'PLAYING' || state === 'BUFFERING') setPlaying(true); + else if (state === 'PAUSED') setPlaying(false); + else if (state === 'IDLE' && String(c.idleReason || '').toLowerCase() === 'finished' + && finishedRef.current !== remoteTrackRef.current) { + finishedRef.current = remoteTrackRef.current; + onEndedRef.current(); + } + }; + const id = setInterval(tick, 1000); + tick(); + // A film or a photo took the television: the track there has stopped. + // Not when casting stops altogether — the track then carries on here. + const unsubscribe = castSession.subscribe(() => { + if (castSession.device && castSession.owner !== 'music') setPlaying(false); + }); + return () => { stopped = true; clearInterval(id); unsubscribe(); }; + }, [remote]); // Reshuffling keeps the currently playing track in place — turning shuffle // on mid-album must not interrupt what's already playing. Which track that @@ -546,19 +798,36 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue }, []); const seek = useCallback((e) => { + const to = parseFloat(e.target.value); + if (remoteRef.current) { + if (castSession.owner !== 'music') return; + castBridge.chromecastSeek(to).catch(() => {}); + remotePosRef.current = to; + setCurrentTime(to); + return; + } const audio = audioRef.current; - if (audio && isFinite(audio.duration)) audio.currentTime = parseFloat(e.target.value); + if (audio && isFinite(audio.duration)) audio.currentTime = to; }, []); const handleClose = useCallback(() => { const audio = audioRef.current; if (audio) audio.pause(); + // The television stops with the bar; it stays chosen for what comes next. + if (remoteRef.current && castSession.owner === 'music') { + castSession.claim(null); + castBridge.chromecastDisconnect().catch(() => {}); + castBridge.stop().catch(() => {}); + } if (onClose) onClose(); }, [onClose]); if (!currentTrack) return null; const title = currentTrack.display_title || currentTrack.name; + // The element's, once it has read the file; the index's until then — and + // while casting, a file this device cannot decode still has a length. + const shownDuration = (isFinite(duration) && duration > 0) ? duration : (currentTrack.duration || 0); const repeatLabel = repeat === 'off' ? t('music.player_repeat_off') : repeat === 'all' ? t('music.player_repeat_all') : t('music.player_repeat_one'); @@ -600,17 +869,18 @@ function MusicPlayerBar({ getConnection, queue, onClose, userPrefs, onSaveQueue </div> <div class="music-player-seek"> <span class="music-player-time">${formatTime(currentTime)}</span> - <input type="range" min="0" max=${duration || 0} step="1" value=${currentTime} - disabled=${!duration} onInput=${seek} /> - <span class="music-player-time">${formatTime(duration)}</span> + <input type="range" min="0" max=${shownDuration} step="1" value=${currentTime} + disabled=${!shownDuration} onInput=${seek} /> + <span class="music-player-time">${formatTime(shownDuration)}</span> </div> <div class="music-player-volume"> <${Icon} name="volume" /> <input type="range" min="0" max="1" step="0.05" value=${volume} - title=${t('music.player_volume')} + title=${t('music.player_volume')} disabled=${remote} onInput=${(e) => setVolume(parseFloat(e.target.value))} /> </div> <div class="music-player-extra"> + <${CastButton} cls="music-player-btn" up /> <button class="music-player-btn" title=${t('music.player_queue')} onClick=${() => setShowQueue(true)}> <${Icon} name="menu" /> </button> |