feat: add core domain types for Photo Gallery SDK including media items, albums, and annotations
This commit is contained in:
@@ -0,0 +1,248 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { Icon } from '../icons';
|
||||
|
||||
const fmt = (s: number) => {
|
||||
if (!Number.isFinite(s)) return '0:00';
|
||||
const m = Math.floor(s / 60);
|
||||
const sec = Math.floor(s % 60);
|
||||
return `${m}:${String(sec).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
interface VideoPlayerProps {
|
||||
src: string;
|
||||
poster?: string;
|
||||
/** CSS filter string applied to the video (for edited clips). */
|
||||
filter?: string;
|
||||
autoPlay?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom macOS-style video player: a glass transport bar (play/pause, scrubber
|
||||
* with buffered + played tracks, time, volume, mute, PiP, fullscreen), a centre
|
||||
* play affordance, auto-hiding controls while playing, and keyboard shortcuts.
|
||||
* Replaces the browser's native controls for a consistent, on-brand look.
|
||||
*/
|
||||
export function VideoPlayer({ src, poster, filter, autoPlay = true }: VideoPlayerProps) {
|
||||
const wrapRef = useRef<HTMLDivElement>(null);
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const [playing, setPlaying] = useState(false);
|
||||
const [time, setTime] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [buffered, setBuffered] = useState(0);
|
||||
const [volume, setVolume] = useState(1);
|
||||
const [muted, setMuted] = useState(false);
|
||||
const [fullscreen, setFullscreen] = useState(false);
|
||||
const [controlsShown, setControlsShown] = useState(true);
|
||||
|
||||
const v = () => videoRef.current;
|
||||
|
||||
const togglePlay = () => {
|
||||
const el = v();
|
||||
if (!el) return;
|
||||
if (el.paused) void el.play();
|
||||
else el.pause();
|
||||
};
|
||||
const seek = (t: number) => {
|
||||
const el = v();
|
||||
if (el) el.currentTime = Math.max(0, Math.min(duration || 0, t));
|
||||
};
|
||||
const toggleMute = () => {
|
||||
const el = v();
|
||||
if (!el) return;
|
||||
el.muted = !el.muted;
|
||||
setMuted(el.muted);
|
||||
};
|
||||
const changeVolume = (val: number) => {
|
||||
const el = v();
|
||||
if (!el) return;
|
||||
el.volume = val;
|
||||
el.muted = val === 0;
|
||||
setVolume(val);
|
||||
setMuted(val === 0);
|
||||
};
|
||||
const toggleFullscreen = () => {
|
||||
const wrap = wrapRef.current;
|
||||
if (!wrap) return;
|
||||
if (document.fullscreenElement) void document.exitFullscreen();
|
||||
else void wrap.requestFullscreen?.();
|
||||
};
|
||||
const togglePip = () => {
|
||||
const el = v() as HTMLVideoElement & { requestPictureInPicture?: () => Promise<unknown> };
|
||||
if (!el) return;
|
||||
if (document.pictureInPictureElement) void document.exitPictureInPicture();
|
||||
else void el.requestPictureInPicture?.().catch(() => {});
|
||||
};
|
||||
|
||||
// Auto-hide controls while playing; always show when paused / on activity.
|
||||
const nudge = () => {
|
||||
setControlsShown(true);
|
||||
if (hideTimer.current) clearTimeout(hideTimer.current);
|
||||
hideTimer.current = setTimeout(() => {
|
||||
if (!v()?.paused) setControlsShown(false);
|
||||
}, 2600);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const onFs = () => setFullscreen(Boolean(document.fullscreenElement));
|
||||
document.addEventListener('fullscreenchange', onFs);
|
||||
return () => {
|
||||
document.removeEventListener('fullscreenchange', onFs);
|
||||
if (hideTimer.current) clearTimeout(hideTimer.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const onKeyDown = (e: React.KeyboardEvent) => {
|
||||
const el = v();
|
||||
if (!el) return;
|
||||
// Keys the player owns. For these, fully stop the native event so the
|
||||
// Lightbox's window-level keydown listener (prev/next/Escape) doesn't ALSO
|
||||
// fire — React's stopPropagation alone can't stop a separate window listener.
|
||||
const owned = [' ', 'k', 'ArrowLeft', 'ArrowRight', 'm', 'f'];
|
||||
if (owned.includes(e.key)) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
e.nativeEvent.stopImmediatePropagation?.();
|
||||
}
|
||||
switch (e.key) {
|
||||
case ' ':
|
||||
case 'k':
|
||||
togglePlay();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
seek(el.currentTime - 5);
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
seek(el.currentTime + 5);
|
||||
break;
|
||||
case 'm':
|
||||
toggleMute();
|
||||
break;
|
||||
case 'f':
|
||||
toggleFullscreen();
|
||||
break;
|
||||
}
|
||||
nudge();
|
||||
};
|
||||
|
||||
const pct = duration ? (time / duration) * 100 : 0;
|
||||
const bufPct = duration ? (buffered / duration) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={wrapRef}
|
||||
className={['apg-vp', controlsShown ? '' : 'apg-vp--idle', fullscreen ? 'apg-vp--fs' : ''].join(' ')}
|
||||
onMouseMove={nudge}
|
||||
onKeyDown={onKeyDown}
|
||||
tabIndex={0}
|
||||
role="group"
|
||||
aria-label="Video player"
|
||||
>
|
||||
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="apg-vp__video"
|
||||
src={src}
|
||||
poster={poster}
|
||||
autoPlay={autoPlay}
|
||||
playsInline
|
||||
style={filter ? { filter } : undefined}
|
||||
onClick={togglePlay}
|
||||
onPlay={() => {
|
||||
setPlaying(true);
|
||||
nudge();
|
||||
}}
|
||||
onPause={() => {
|
||||
setPlaying(false);
|
||||
setControlsShown(true);
|
||||
}}
|
||||
onLoadedMetadata={(e) => setDuration(e.currentTarget.duration || 0)}
|
||||
onTimeUpdate={(e) => {
|
||||
const el = e.currentTarget;
|
||||
setTime(el.currentTime);
|
||||
try {
|
||||
if (el.buffered.length) setBuffered(el.buffered.end(el.buffered.length - 1));
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}}
|
||||
onVolumeChange={(e) => {
|
||||
setVolume(e.currentTarget.volume);
|
||||
setMuted(e.currentTarget.muted);
|
||||
}}
|
||||
/>
|
||||
|
||||
{!playing ? (
|
||||
<button type="button" className="apg-vp__center" aria-label="Play" onClick={togglePlay}>
|
||||
<Icon name="play" size={34} />
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<div className="apg-vp__controls" onClick={(e) => e.stopPropagation()}>
|
||||
<button type="button" className="apg-vp__btn" aria-label={playing ? 'Pause' : 'Play'} onClick={togglePlay}>
|
||||
<Icon name={playing ? 'pause' : 'play'} size={18} />
|
||||
</button>
|
||||
<span className="apg-vp__time">{fmt(time)}</span>
|
||||
<div
|
||||
className="apg-vp__scrub"
|
||||
role="slider"
|
||||
aria-label="Seek"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={Math.round(duration)}
|
||||
aria-valuenow={Math.round(time)}
|
||||
onPointerDown={(e) => {
|
||||
if (!duration) return; // metadata not loaded yet — nothing to seek
|
||||
const bar = e.currentTarget;
|
||||
const move = (clientX: number) => {
|
||||
const r = bar.getBoundingClientRect();
|
||||
seek(((clientX - r.left) / r.width) * duration);
|
||||
};
|
||||
move(e.clientX);
|
||||
bar.setPointerCapture(e.pointerId);
|
||||
const onMove = (ev: PointerEvent) => move(ev.clientX);
|
||||
// Release on BOTH pointerup and pointercancel (touch interruptions,
|
||||
// system gestures) so capture/listeners never leak.
|
||||
const onUp = () => {
|
||||
bar.removeEventListener('pointermove', onMove);
|
||||
bar.removeEventListener('pointerup', onUp);
|
||||
bar.removeEventListener('pointercancel', onUp);
|
||||
};
|
||||
bar.addEventListener('pointermove', onMove);
|
||||
bar.addEventListener('pointerup', onUp);
|
||||
bar.addEventListener('pointercancel', onUp);
|
||||
}}
|
||||
>
|
||||
<span className="apg-vp__track" />
|
||||
<span className="apg-vp__buffered" style={{ width: `${bufPct}%` }} />
|
||||
<span className="apg-vp__played" style={{ width: `${pct}%` }}>
|
||||
<span className="apg-vp__knob" />
|
||||
</span>
|
||||
</div>
|
||||
<span className="apg-vp__time">{fmt(duration)}</span>
|
||||
<button type="button" className="apg-vp__btn" aria-label={muted ? 'Unmute' : 'Mute'} onClick={toggleMute}>
|
||||
<Icon name={muted || volume === 0 ? 'mute' : 'volume'} size={18} />
|
||||
</button>
|
||||
<input
|
||||
className="apg-vp__vol"
|
||||
type="range"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={muted ? 0 : volume}
|
||||
aria-label="Volume"
|
||||
onChange={(e) => changeVolume(Number(e.target.value))}
|
||||
/>
|
||||
<button type="button" className="apg-vp__btn" aria-label="Picture in picture" onClick={togglePip}>
|
||||
<Icon name="pip" size={18} />
|
||||
</button>
|
||||
<button type="button" className="apg-vp__btn" aria-label="Fullscreen" onClick={toggleFullscreen}>
|
||||
<Icon name="expand" size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user