89 lines
2.9 KiB
JavaScript
89 lines
2.9 KiB
JavaScript
|
"use client";
|
||
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
||
|
|
import cn from "classnames";
|
||
|
|
import styles from "./videojs.module.scss";
|
||
|
|
import { useEffect, useMemo, useRef } from "react";
|
||
|
|
import { isIOS, isMobile } from "react-device-detect";
|
||
|
|
import { VideoPlayerRuntime, } from "../../../../core";
|
||
|
|
const DEFAULT_SOURCE_TYPE = "application/x-mpegurl";
|
||
|
|
const VideoJS = ({ options, classNames = [], onReady, className, initialTime = 0, full = false, withRewind = true, }) => {
|
||
|
|
const videoContainerRef = useRef(null);
|
||
|
|
const runtimeRef = useRef(null);
|
||
|
|
const onReadyRef = useRef(onReady);
|
||
|
|
useEffect(() => {
|
||
|
|
onReadyRef.current = onReady;
|
||
|
|
}, [onReady]);
|
||
|
|
const runtimeOptions = useMemo(() => {
|
||
|
|
const source = options.sources?.[0];
|
||
|
|
return {
|
||
|
|
source: {
|
||
|
|
src: source?.src ?? "",
|
||
|
|
type: source?.type ?? DEFAULT_SOURCE_TYPE,
|
||
|
|
},
|
||
|
|
strategy: "auto",
|
||
|
|
preload: options.preload,
|
||
|
|
autoplay: options.autoplay,
|
||
|
|
controls: options.controls,
|
||
|
|
responsive: options.responsive,
|
||
|
|
aspectRatio: options.aspectRatio,
|
||
|
|
fluid: options.fluid,
|
||
|
|
muted: options.muted,
|
||
|
|
poster: options.poster,
|
||
|
|
preferHQ: options.preferHQ ?? false,
|
||
|
|
debug: options.debug ?? false,
|
||
|
|
initialTime,
|
||
|
|
isIOS,
|
||
|
|
isMobile,
|
||
|
|
full,
|
||
|
|
withRewind,
|
||
|
|
skipSeconds: 10,
|
||
|
|
classNames,
|
||
|
|
onPlayerReady: player => {
|
||
|
|
onReadyRef.current?.(player);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}, [
|
||
|
|
options.sources,
|
||
|
|
options.preload,
|
||
|
|
options.autoplay,
|
||
|
|
options.controls,
|
||
|
|
options.responsive,
|
||
|
|
options.aspectRatio,
|
||
|
|
options.fluid,
|
||
|
|
options.muted,
|
||
|
|
options.poster,
|
||
|
|
options.preferHQ,
|
||
|
|
options.debug,
|
||
|
|
initialTime,
|
||
|
|
full,
|
||
|
|
withRewind,
|
||
|
|
classNames,
|
||
|
|
]);
|
||
|
|
useEffect(() => {
|
||
|
|
const container = videoContainerRef.current;
|
||
|
|
if (!container || runtimeRef.current) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const runtime = new VideoPlayerRuntime();
|
||
|
|
runtimeRef.current = runtime;
|
||
|
|
void runtime.init({
|
||
|
|
container,
|
||
|
|
...runtimeOptions,
|
||
|
|
});
|
||
|
|
return () => {
|
||
|
|
runtime.dispose();
|
||
|
|
runtimeRef.current = null;
|
||
|
|
};
|
||
|
|
// init once; subsequent prop updates go through runtime.update
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
if (!runtimeRef.current) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
void runtimeRef.current.update(runtimeOptions);
|
||
|
|
}, [runtimeOptions]);
|
||
|
|
return (_jsx("div", { className: cn([styles.player, className]), "data-vjs-player": true, children: _jsx("div", { ref: videoContainerRef, className: cn([styles.player, className]) }) }));
|
||
|
|
};
|
||
|
|
export default VideoJS;
|
||
|
|
//# sourceMappingURL=hls-or-videojs-player.js.map
|