610 lines
17 KiB
TypeScript
610 lines
17 KiB
TypeScript
import React, {
|
|
forwardRef,
|
|
useCallback,
|
|
useEffect,
|
|
useImperativeHandle,
|
|
useRef,
|
|
useState,
|
|
type RefObject,
|
|
} from 'react';
|
|
//@ts-ignore
|
|
import shaka from 'shaka-player';
|
|
import type {VideoRef, ReactVideoProps, VideoMetadata} from './types';
|
|
|
|
// Action Queue Class
|
|
class ActionQueue {
|
|
private queue: { action: () => Promise<void>; name: string }[] = [];
|
|
private isRunning = false;
|
|
|
|
enqueue(action: () => Promise<void>, name: string) {
|
|
this.queue.push({ action, name });
|
|
this.runNext();
|
|
}
|
|
|
|
private async runNext() {
|
|
if (this.isRunning || this.queue.length === 0) {
|
|
console.log("Refusing to run in runNext", this.queue.length, this.isRunning);
|
|
return;
|
|
}
|
|
this.isRunning = true;
|
|
const { action, name } = this.queue.shift()!;
|
|
console.log(`Running action: ${name}`);
|
|
|
|
const actionPromise = action();
|
|
const timeoutPromise = new Promise<void>((_, reject) =>
|
|
setTimeout(() => reject(new Error(`Action ${name} timed out`)), 2000)
|
|
);
|
|
|
|
try {
|
|
await Promise.race([actionPromise, timeoutPromise]);
|
|
} catch (e) {
|
|
console.error('Error in queued action:', e);
|
|
} finally {
|
|
this.isRunning = false;
|
|
this.runNext();
|
|
}
|
|
}
|
|
}
|
|
|
|
function shallowEqual(obj1: any, obj2: any) {
|
|
// If both are strictly equal (covers primitive types and identical object references)
|
|
if (obj1 === obj2) return true;
|
|
|
|
// If one is not an object (meaning it's a primitive), they must be strictly equal
|
|
if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
|
|
return false;
|
|
}
|
|
|
|
// Get the keys of both objects
|
|
const keys1 = Object.keys(obj1);
|
|
const keys2 = Object.keys(obj2);
|
|
|
|
// If the number of keys is different, the objects are not equal
|
|
if (keys1.length !== keys2.length) return false;
|
|
|
|
// Check that all keys and their corresponding values are the same
|
|
return keys1.every(key => {
|
|
// If the value is an object, we fall back to reference equality (shallow comparison)
|
|
return obj1[key] === obj2[key];
|
|
});
|
|
}
|
|
|
|
const Video = forwardRef<VideoRef, ReactVideoProps>(
|
|
(
|
|
{
|
|
source,
|
|
paused,
|
|
muted,
|
|
volume,
|
|
rate,
|
|
repeat,
|
|
controls,
|
|
showNotificationControls = false,
|
|
poster,
|
|
fullscreen,
|
|
fullscreenAutorotate,
|
|
fullscreenOrientation,
|
|
onBuffer,
|
|
onLoad,
|
|
onProgress,
|
|
onPlaybackRateChange,
|
|
onError,
|
|
onReadyForDisplay,
|
|
onSeek,
|
|
onSeekComplete,
|
|
onVolumeChange,
|
|
onEnd,
|
|
onPlaybackStateChanged,
|
|
},
|
|
ref,
|
|
) => {
|
|
const nativeRef = useRef<HTMLVideoElement>(null);
|
|
const shakaPlayerRef = useRef<shaka.Player | null>(null);
|
|
const [currentSource, setCurrentSource] = useState<object | null>(null);
|
|
const actionQueue = useRef(new ActionQueue());
|
|
|
|
const isSeeking = useRef(false);
|
|
|
|
const seek = useCallback(
|
|
(time: number, _tolerance?: number) => {
|
|
actionQueue.current.enqueue(async () => {
|
|
if (isNaN(time)) {
|
|
throw new Error('Specified time is not a number');
|
|
}
|
|
if (!nativeRef.current) {
|
|
console.warn('Video Component is not mounted');
|
|
return;
|
|
}
|
|
time = Math.max(0, Math.min(time, nativeRef.current.duration));
|
|
nativeRef.current.currentTime = time;
|
|
onSeek?.({
|
|
seekTime: time,
|
|
currentTime: nativeRef.current.currentTime,
|
|
});
|
|
}, 'seek');
|
|
},
|
|
[onSeek],
|
|
);
|
|
|
|
const pause = useCallback(() => {
|
|
actionQueue.current.enqueue(async () => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
await nativeRef.current.pause();
|
|
}, 'pause');
|
|
}, []);
|
|
|
|
const resume = useCallback(() => {
|
|
actionQueue.current.enqueue(async () => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
try {
|
|
await nativeRef.current.play();
|
|
} catch (e) {
|
|
console.error('Error playing video:', e);
|
|
}
|
|
}, 'resume');
|
|
}, []);
|
|
|
|
const setVolume = useCallback((vol: number) => {
|
|
actionQueue.current.enqueue(async () => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
nativeRef.current.volume = Math.max(0, Math.min(vol, 100)) / 100;
|
|
}, 'setVolume');
|
|
}, []);
|
|
|
|
const getCurrentPosition = useCallback(async () => {
|
|
if (!nativeRef.current) {
|
|
throw new Error('Video Component is not mounted');
|
|
}
|
|
return nativeRef.current.currentTime;
|
|
}, []);
|
|
|
|
const unsupported = useCallback(() => {
|
|
throw new Error('This is unsupported on the web');
|
|
}, []);
|
|
|
|
// Stock this in a ref to not invalidate memoization when those changes.
|
|
const fsPrefs = useRef({
|
|
fullscreenAutorotate,
|
|
fullscreenOrientation,
|
|
});
|
|
fsPrefs.current = {
|
|
fullscreenOrientation,
|
|
fullscreenAutorotate,
|
|
};
|
|
const setFullScreen = useCallback(
|
|
(
|
|
newVal: boolean,
|
|
orientation?: ReactVideoProps['fullscreenOrientation'],
|
|
autorotate?: boolean,
|
|
) => {
|
|
orientation ??= fsPrefs.current.fullscreenOrientation;
|
|
autorotate ??= fsPrefs.current.fullscreenAutorotate;
|
|
|
|
const run = async () => {
|
|
try {
|
|
if (newVal) {
|
|
await nativeRef.current?.requestFullscreen({
|
|
navigationUI: 'hide',
|
|
});
|
|
if (orientation === 'all' || !orientation || autorotate) {
|
|
screen.orientation.unlock();
|
|
} else {
|
|
await screen.orientation.lock(orientation);
|
|
}
|
|
} else {
|
|
if (document.fullscreenElement) {
|
|
await document.exitFullscreen();
|
|
}
|
|
screen.orientation.unlock();
|
|
}
|
|
} catch (e) {
|
|
// Changing fullscreen status without a button click is not allowed so it throws.
|
|
// Some browsers also used to throw when locking screen orientation was not supported.
|
|
console.error('Could not toggle fullscreen/screen lock status', e);
|
|
}
|
|
};
|
|
actionQueue.current.enqueue(run, 'setFullScreen');
|
|
},
|
|
[],
|
|
);
|
|
|
|
useEffect(() => {
|
|
setFullScreen(
|
|
fullscreen || false,
|
|
fullscreenOrientation,
|
|
fullscreenAutorotate,
|
|
);
|
|
}, [
|
|
setFullScreen,
|
|
fullscreen,
|
|
fullscreenAutorotate,
|
|
fullscreenOrientation,
|
|
]);
|
|
|
|
const presentFullscreenPlayer = useCallback(
|
|
() => setFullScreen(true),
|
|
[setFullScreen],
|
|
);
|
|
const dismissFullscreenPlayer = useCallback(
|
|
() => setFullScreen(false),
|
|
[setFullScreen],
|
|
);
|
|
|
|
useImperativeHandle(
|
|
ref,
|
|
() => ({
|
|
seek,
|
|
pause,
|
|
resume,
|
|
setVolume,
|
|
getCurrentPosition,
|
|
presentFullscreenPlayer,
|
|
dismissFullscreenPlayer,
|
|
setFullScreen,
|
|
save: unsupported,
|
|
restoreUserInterfaceForPictureInPictureStopCompleted: unsupported,
|
|
nativeHtmlVideoRef: nativeRef,
|
|
}),
|
|
[
|
|
seek,
|
|
pause,
|
|
resume,
|
|
unsupported,
|
|
setVolume,
|
|
getCurrentPosition,
|
|
nativeRef,
|
|
presentFullscreenPlayer,
|
|
dismissFullscreenPlayer,
|
|
setFullScreen,
|
|
],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (paused) {
|
|
pause();
|
|
} else {
|
|
resume();
|
|
}
|
|
}, [paused, pause, resume]);
|
|
|
|
useEffect(() => {
|
|
if (volume === undefined) {
|
|
return;
|
|
}
|
|
setVolume(volume);
|
|
}, [volume, setVolume]);
|
|
|
|
// we use a ref to prevent triggerring the useEffect when the component rerender with a non-stable `onPlaybackStateChanged`.
|
|
const playbackStateRef = useRef(onPlaybackStateChanged);
|
|
playbackStateRef.current = onPlaybackStateChanged;
|
|
useEffect(() => {
|
|
// Not sure about how to do this but we want to wait for nativeRef to be initialized
|
|
setTimeout(() => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
|
|
// Set play state to the player's value (if autoplay is denied)
|
|
// This is useful if our UI is in a play state but autoplay got denied so
|
|
// the video is actaully in a paused state.
|
|
playbackStateRef.current?.({
|
|
isPlaying: !nativeRef.current.paused,
|
|
isSeeking: isSeeking.current,
|
|
});
|
|
}, 500);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!nativeRef.current || rate === undefined) {
|
|
return;
|
|
}
|
|
nativeRef.current.playbackRate = rate;
|
|
}, [rate]);
|
|
|
|
const makeNewShaka = useCallback(() => {
|
|
console.log("makeNewShaka");
|
|
actionQueue.current.enqueue(async () => {
|
|
console.log("makeNewShaka actionQueue");
|
|
if (!nativeRef.current) {
|
|
console.warn('No video element to attach Shaka Player');
|
|
return;
|
|
}
|
|
|
|
// Pause the video before changing the source
|
|
nativeRef.current.pause();
|
|
|
|
// Unload the previous Shaka player if it exists
|
|
if (shakaPlayerRef.current) {
|
|
await shakaPlayerRef.current.unload();
|
|
shakaPlayerRef.current = null;
|
|
}
|
|
|
|
// Create a new Shaka player and attach it to the video element
|
|
shakaPlayerRef.current = new shaka.Player();
|
|
|
|
shakaPlayerRef.current.attach(nativeRef.current);
|
|
|
|
if (source?.cropStart) {
|
|
shakaPlayerRef.current.configure({
|
|
playRangeStart: source?.cropStart / 1000,
|
|
});
|
|
}
|
|
if (source?.cropEnd) {
|
|
shakaPlayerRef.current.configure({
|
|
playRangeEnd: source?.cropEnd / 1000,
|
|
});
|
|
}
|
|
|
|
//@ts-ignore
|
|
shakaPlayerRef.current.addEventListener('error', event => {
|
|
//@ts-ignore
|
|
const shakaError = event.detail;
|
|
console.error('Shaka Player Error', shakaError);
|
|
onError?.({
|
|
error: {
|
|
errorString: shakaError.message,
|
|
code: shakaError.code,
|
|
},
|
|
});
|
|
});
|
|
|
|
console.log('Initializing and attaching shaka');
|
|
|
|
// Load the new source
|
|
try {
|
|
//@ts-ignore
|
|
await shakaPlayerRef.current.load(source?.uri);
|
|
console.log(`${source?.uri} finished loading`);
|
|
|
|
// Optionally resume playback if not paused
|
|
if (!paused) {
|
|
try {
|
|
await nativeRef.current.play();
|
|
} catch (e) {
|
|
console.error('Error playing video:', e);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Error loading video with Shaka Player', e);
|
|
onError?.({
|
|
error: {
|
|
//@ts-ignore
|
|
errorString: e.message,
|
|
//@ts-ignore
|
|
code: e.code,
|
|
},
|
|
});
|
|
}
|
|
}, 'makeNewShaka');
|
|
}, [source, paused, onError]);
|
|
|
|
const nativeRefDefined = !!nativeRef.current;
|
|
|
|
useEffect(() => {
|
|
if (!nativeRef.current) {
|
|
console.log('Not starting shaka yet because video element is undefined');
|
|
return;
|
|
}
|
|
if (!shallowEqual(source, currentSource)) {
|
|
console.log(
|
|
'Making new shaka, Old source: ',
|
|
currentSource,
|
|
'New source',
|
|
source,
|
|
);
|
|
//@ts-ignore
|
|
setCurrentSource(source);
|
|
makeNewShaka();
|
|
}
|
|
}, [source, nativeRefDefined, currentSource, makeNewShaka]);
|
|
|
|
useMediaSession(source?.metadata, nativeRef, showNotificationControls);
|
|
|
|
const cropStartSeconds = (source?.cropStart || 0) / 1000;
|
|
|
|
return (
|
|
<video
|
|
ref={nativeRef}
|
|
muted={muted}
|
|
autoPlay={!paused}
|
|
controls={controls}
|
|
loop={repeat}
|
|
playsInline
|
|
//@ts-ignore
|
|
poster={poster}
|
|
onCanPlay={() => onBuffer?.({isBuffering: false})}
|
|
onWaiting={() => onBuffer?.({isBuffering: true})}
|
|
onRateChange={() => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
onPlaybackRateChange?.({
|
|
playbackRate: nativeRef.current?.playbackRate,
|
|
});
|
|
}}
|
|
onDurationChange={() => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
onLoad?.({
|
|
currentTime: nativeRef.current.currentTime,
|
|
duration: nativeRef.current.duration,
|
|
videoTracks: [],
|
|
textTracks: [],
|
|
audioTracks: [],
|
|
naturalSize: {
|
|
width: nativeRef.current.videoWidth,
|
|
height: nativeRef.current.videoHeight,
|
|
orientation: 'landscape',
|
|
},
|
|
});
|
|
}}
|
|
onTimeUpdate={() => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
onProgress?.({
|
|
currentTime: nativeRef.current.currentTime - cropStartSeconds,
|
|
playableDuration: nativeRef.current.buffered.length
|
|
? nativeRef.current.buffered.end(
|
|
nativeRef.current.buffered.length - 1,
|
|
)
|
|
: 0,
|
|
seekableDuration: 0,
|
|
});
|
|
}}
|
|
onLoadedData={() => onReadyForDisplay?.()}
|
|
onError={() => {
|
|
if (!nativeRef.current?.error) {
|
|
return;
|
|
}
|
|
onError?.({
|
|
error: {
|
|
errorString: nativeRef.current.error.message ?? 'Unknown error',
|
|
code: nativeRef.current.error.code,
|
|
},
|
|
});
|
|
}}
|
|
onLoadedMetadata={() => {
|
|
if (source?.startPosition) {
|
|
seek(source.startPosition / 1000);
|
|
}
|
|
}}
|
|
onPlay={() =>
|
|
onPlaybackStateChanged?.({
|
|
isPlaying: true,
|
|
isSeeking: isSeeking.current,
|
|
})
|
|
}
|
|
onPause={() =>
|
|
onPlaybackStateChanged?.({
|
|
isPlaying: false,
|
|
isSeeking: isSeeking.current,
|
|
})
|
|
}
|
|
onSeeking={() => (isSeeking.current = true)}
|
|
onSeeked={() => {
|
|
(isSeeking.current = false)
|
|
|
|
onSeekComplete?.({
|
|
currentTime: (nativeRef.current?.currentTime || 0.0) - cropStartSeconds,
|
|
seekTime: 0.0,
|
|
target: 0.0,
|
|
|
|
})
|
|
}}
|
|
onVolumeChange={() => {
|
|
if (!nativeRef.current) {
|
|
return;
|
|
}
|
|
onVolumeChange?.({volume: nativeRef.current.volume});
|
|
}}
|
|
onEnded={onEnd}
|
|
style={videoStyle}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
const videoStyle = {
|
|
position: 'absolute',
|
|
inset: 0,
|
|
objectFit: 'contain',
|
|
width: '100%',
|
|
height: '100%',
|
|
} satisfies React.CSSProperties;
|
|
|
|
const useMediaSession = (
|
|
metadata: VideoMetadata | undefined,
|
|
nativeRef: RefObject<HTMLVideoElement>,
|
|
showNotification: boolean,
|
|
) => {
|
|
const isPlaying = !nativeRef.current?.paused ?? false;
|
|
const progress = nativeRef.current?.currentTime ?? 0;
|
|
const duration = Number.isFinite(nativeRef.current?.duration)
|
|
? nativeRef.current?.duration
|
|
: undefined;
|
|
const playbackRate = nativeRef.current?.playbackRate ?? 1;
|
|
|
|
const enabled = 'mediaSession' in navigator && showNotification;
|
|
|
|
useEffect(() => {
|
|
if (enabled) {
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
|
title: metadata?.title,
|
|
artist: metadata?.artist,
|
|
artwork: metadata?.imageUri ? [{src: metadata.imageUri}] : undefined,
|
|
});
|
|
}
|
|
}, [enabled, metadata]);
|
|
|
|
useEffect(() => {
|
|
if (!enabled) {
|
|
return;
|
|
}
|
|
|
|
const seekTo = (time: number) => {
|
|
if (nativeRef.current) {
|
|
nativeRef.current.currentTime = time;
|
|
}
|
|
};
|
|
|
|
const seekRelative = (offset: number) => {
|
|
if (nativeRef.current) {
|
|
nativeRef.current.currentTime = nativeRef.current.currentTime + offset;
|
|
}
|
|
};
|
|
|
|
const mediaActions: [
|
|
MediaSessionAction,
|
|
MediaSessionActionHandler | null,
|
|
][] = [
|
|
['play', () => nativeRef.current?.play()],
|
|
['pause', () => nativeRef.current?.pause()],
|
|
[
|
|
'seekbackward',
|
|
(evt: MediaSessionActionDetails) =>
|
|
seekRelative(evt.seekOffset ? -evt.seekOffset : -10),
|
|
],
|
|
[
|
|
'seekforward',
|
|
(evt: MediaSessionActionDetails) =>
|
|
seekRelative(evt.seekOffset ? evt.seekOffset : 10),
|
|
],
|
|
['seekto', (evt: MediaSessionActionDetails) => seekTo(evt.seekTime!)],
|
|
];
|
|
|
|
for (const [action, handler] of mediaActions) {
|
|
try {
|
|
navigator.mediaSession.setActionHandler(action, handler);
|
|
} catch {
|
|
// ignored
|
|
}
|
|
}
|
|
}, [enabled, nativeRef]);
|
|
|
|
useEffect(() => {
|
|
if (enabled) {
|
|
navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
|
|
}
|
|
}, [isPlaying, enabled]);
|
|
useEffect(() => {
|
|
if (enabled && duration !== undefined) {
|
|
navigator.mediaSession.setPositionState({
|
|
position: Math.min(progress, duration),
|
|
duration,
|
|
playbackRate: playbackRate,
|
|
});
|
|
}
|
|
}, [progress, duration, playbackRate, enabled]);
|
|
};
|
|
|
|
Video.displayName = 'Video';
|
|
export default Video;
|