simonandClaude Opus 5
ad999e1c3e
Two frontends sharing one WebSocket-backed state on the server: - Player: fullscreen poster background with a small frame (30% of the screen) that drifts diagonally and reflects off the edges. Two stacked YouTube players hand over with a 5s equal-power crossfade so there is never silence between tracks. - Queue: add by URL, drag to reorder, delete, click to jump. Shows title and length per item, highlights what is playing, and tracks remaining vs. total playtime. No API key is required — titles come from YouTube's oEmbed endpoint and durations from a hidden muted probe player that cues each new video just to read its length. The fade is driven by both requestAnimationFrame and the interval tick: a hidden or throttled tab stops serving frames entirely, which would otherwise strand a handover half-faded with two tracks audible. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
// Thin wrapper around the YouTube IFrame Player API.
|
|
|
|
let apiReady = null;
|
|
|
|
/** Load the IFrame API once; resolves when window.YT is usable. */
|
|
export function loadApi() {
|
|
if (apiReady) return apiReady;
|
|
|
|
apiReady = new Promise((resolve) => {
|
|
if (window.YT?.Player) return resolve(window.YT);
|
|
window.onYouTubeIframeAPIReady = () => resolve(window.YT);
|
|
const script = document.createElement('script');
|
|
script.src = 'https://www.youtube.com/iframe_api';
|
|
document.head.appendChild(script);
|
|
});
|
|
|
|
return apiReady;
|
|
}
|
|
|
|
const PLAYER_VARS = {
|
|
controls: 0,
|
|
disablekb: 1,
|
|
modestbranding: 1,
|
|
rel: 0,
|
|
playsinline: 1,
|
|
iv_load_policy: 3,
|
|
fs: 0,
|
|
cc_load_policy: 0, // no burned-in captions over the visuals
|
|
};
|
|
|
|
/**
|
|
* Create a player in the given element id. Resolves once the player is ready.
|
|
* `onStateChange` receives the raw YT state code.
|
|
*/
|
|
export async function createPlayer(elementId, { onStateChange } = {}) {
|
|
const YT = await loadApi();
|
|
|
|
return new Promise((resolve) => {
|
|
const player = new YT.Player(elementId, {
|
|
width: '100%',
|
|
height: '100%',
|
|
playerVars: { ...PLAYER_VARS, origin: location.origin },
|
|
events: {
|
|
onReady: () => resolve(player),
|
|
onStateChange: (event) => onStateChange?.(event.data, player),
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
export const STATE = {
|
|
UNSTARTED: -1,
|
|
ENDED: 0,
|
|
PLAYING: 1,
|
|
PAUSED: 2,
|
|
BUFFERING: 3,
|
|
CUED: 5,
|
|
};
|