feat(P5A.T4): WatchTogetherModal — YouTube IFrame + drift reconcile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
byGalax
@@ -0,0 +1,260 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { useWatchSession } from '../hooks/useWatchSession';
|
||||
import { XIcon } from './icons';
|
||||
|
||||
interface YTPlayer {
|
||||
playVideo: () => void;
|
||||
pauseVideo: () => void;
|
||||
seekTo: (seconds: number, allowSeekAhead: boolean) => void;
|
||||
getCurrentTime: () => number;
|
||||
getPlayerState: () => number;
|
||||
destroy: () => void;
|
||||
}
|
||||
|
||||
interface YTPlayerOptions {
|
||||
width: string | number;
|
||||
height: string | number;
|
||||
videoId: string;
|
||||
playerVars?: { autoplay?: 0 | 1; controls?: 0 | 1; modestbranding?: 0 | 1 };
|
||||
events?: {
|
||||
onReady?: (ev: { target: YTPlayer }) => void;
|
||||
onStateChange?: (ev: { data: number; target: YTPlayer }) => void;
|
||||
};
|
||||
}
|
||||
|
||||
interface YTNamespace {
|
||||
Player: new (elementId: string | HTMLElement, opts: YTPlayerOptions) => YTPlayer;
|
||||
PlayerState: { UNSTARTED: -1; ENDED: 0; PLAYING: 1; PAUSED: 2; BUFFERING: 3; CUED: 5 };
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
YT?: YTNamespace;
|
||||
onYouTubeIframeAPIReady?: () => void;
|
||||
}
|
||||
}
|
||||
|
||||
const IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
|
||||
let apiPromise: Promise<YTNamespace> | null = null;
|
||||
|
||||
function loadIframeApi(): Promise<YTNamespace> {
|
||||
if (apiPromise) return apiPromise;
|
||||
apiPromise = new Promise((resolve, reject) => {
|
||||
if (typeof window === 'undefined') {
|
||||
reject(new Error('no window'));
|
||||
return;
|
||||
}
|
||||
if (window.YT?.Player) {
|
||||
resolve(window.YT);
|
||||
return;
|
||||
}
|
||||
const prev = window.onYouTubeIframeAPIReady;
|
||||
window.onYouTubeIframeAPIReady = () => {
|
||||
try {
|
||||
prev?.();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
if (window.YT?.Player) resolve(window.YT);
|
||||
else reject(new Error('YT namespace missing after ready'));
|
||||
};
|
||||
const existing = document.querySelector(
|
||||
'script[src="' + IFRAME_API_URL + '"]',
|
||||
);
|
||||
if (existing) return;
|
||||
const tag = document.createElement('script');
|
||||
tag.src = IFRAME_API_URL;
|
||||
tag.async = true;
|
||||
document.head.appendChild(tag);
|
||||
});
|
||||
return apiPromise;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
sessionId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const DRIFT_THRESHOLD_SECONDS = 2;
|
||||
|
||||
export function WatchTogetherModal({ sessionId, onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { session, pushState, endSession, error, loading } = useWatchSession(sessionId);
|
||||
const { session: auth } = useAuth();
|
||||
const mountRef = useRef<HTMLDivElement | null>(null);
|
||||
const playerRef = useRef<YTPlayer | null>(null);
|
||||
const [playerReady, setPlayerReady] = useState(false);
|
||||
const ownerId = session?.ownerUserId ?? null;
|
||||
const isOwner = !!auth?.user.id && auth.user.id === ownerId;
|
||||
const ended = !!session?.endedAt;
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!session?.videoId || !mountRef.current) return;
|
||||
if (playerRef.current) return;
|
||||
let disposed = false;
|
||||
void loadIframeApi().then((YT) => {
|
||||
if (disposed || !mountRef.current) return;
|
||||
playerRef.current = new YT.Player(mountRef.current, {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
videoId: session.videoId,
|
||||
playerVars: { autoplay: 1, controls: isOwner ? 1 : 0, modestbranding: 1 },
|
||||
events: {
|
||||
onReady: () => setPlayerReady(true),
|
||||
onStateChange: (ev) => {
|
||||
if (!isOwner) return;
|
||||
const playing = ev.data === YT.PlayerState.PLAYING;
|
||||
const pos = ev.target.getCurrentTime();
|
||||
pushState({ playing, positionSeconds: pos, updatedAtMs: Date.now() });
|
||||
},
|
||||
},
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.error('YouTube IFrame API failed', err);
|
||||
});
|
||||
return () => {
|
||||
disposed = true;
|
||||
try {
|
||||
playerRef.current?.destroy();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
playerRef.current = null;
|
||||
};
|
||||
}, [session?.videoId, isOwner, pushState]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOwner || !playerReady) return;
|
||||
const id = window.setInterval(() => {
|
||||
const p = playerRef.current;
|
||||
if (!p) return;
|
||||
try {
|
||||
const state = p.getPlayerState();
|
||||
const playing = state === window.YT?.PlayerState.PLAYING;
|
||||
pushState({
|
||||
playing,
|
||||
positionSeconds: p.getCurrentTime(),
|
||||
updatedAtMs: Date.now(),
|
||||
});
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}, 1000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [isOwner, playerReady, pushState]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOwner || !playerReady || !session) return;
|
||||
const p = playerRef.current;
|
||||
if (!p) return;
|
||||
const remoteAgeSec = Math.max(0, (Date.now() - session.currentState.updatedAtMs) / 1000);
|
||||
const projectedRemote = session.currentState.playing
|
||||
? session.currentState.positionSeconds + remoteAgeSec
|
||||
: session.currentState.positionSeconds;
|
||||
let local = 0;
|
||||
try {
|
||||
local = p.getCurrentTime();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
if (Math.abs(local - projectedRemote) > DRIFT_THRESHOLD_SECONDS) {
|
||||
try {
|
||||
p.seekTo(projectedRemote, true);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
try {
|
||||
const state = p.getPlayerState();
|
||||
const localPlaying = state === window.YT?.PlayerState.PLAYING;
|
||||
if (session.currentState.playing && !localPlaying) {
|
||||
p.playVideo();
|
||||
} else if (!session.currentState.playing && localPlaying) {
|
||||
p.pauseVideo();
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}, [isOwner, playerReady, session]);
|
||||
|
||||
const handleClose = async () => {
|
||||
if (isOwner && !ended) {
|
||||
try {
|
||||
await endSession();
|
||||
} catch (err) {
|
||||
console.warn('endSession failed', err);
|
||||
}
|
||||
}
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={t('app:watch.title', { defaultValue: 'Watch Together' })}
|
||||
className="fixed inset-0 z-[80] flex flex-col bg-black"
|
||||
>
|
||||
<header className="flex shrink-0 items-center justify-between border-b border-line/40 bg-surface-2 px-4 py-2">
|
||||
<h2 className="font-display text-sm font-semibold text-fg">
|
||||
{t('app:watch.title', { defaultValue: 'Watch Together' })}
|
||||
{ended && (
|
||||
<span className="ml-2 rounded-md bg-rose-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-rose-600 dark:text-rose-300">
|
||||
{t('app:watch.ended', { defaultValue: 'Beendet' })}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleClose()}
|
||||
aria-label={t('app:watch.close', { defaultValue: 'Schließen' })}
|
||||
className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg"
|
||||
>
|
||||
<XIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-black p-4">
|
||||
{loading ? (
|
||||
<p className="text-sm text-fg-muted">
|
||||
{t('app:watch.loading', { defaultValue: 'Lädt…' })}
|
||||
</p>
|
||||
) : error ? (
|
||||
<p className="text-sm text-rose-400">{error}</p>
|
||||
) : !session ? (
|
||||
<p className="text-sm text-fg-muted">
|
||||
{t('app:watch.missing', { defaultValue: 'Session nicht gefunden.' })}
|
||||
</p>
|
||||
) : (
|
||||
<div className="aspect-video w-full max-w-5xl">
|
||||
<div ref={mountRef} className="h-full w-full" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<footer className="flex shrink-0 items-center justify-between gap-3 border-t border-line/40 bg-surface-2 px-4 py-2 text-xs text-fg-muted">
|
||||
<span>
|
||||
{isOwner
|
||||
? t('app:watch.you_are_host', { defaultValue: 'Du steuerst die Wiedergabe.' })
|
||||
: t('app:watch.you_are_guest', { defaultValue: 'Nur der Host kann steuern.' })}
|
||||
</span>
|
||||
<span>
|
||||
{session?.currentState.playing
|
||||
? t('app:watch.playing', { defaultValue: '▶ Läuft' })
|
||||
: t('app:watch.paused', { defaultValue: '⏸ Pause' })}
|
||||
</span>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user