administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 03:35:26 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Set video plays inline

Browse Source
This commit is contained in:
Nick Mowen 2023-12-14 15:56:46 -07:00
parent 42dd3064fa
commit 19ba92bbe3
1 changed files with 74 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
web-new/src/components/player/VideoPlayer.tsx
View File

@ -1,74 +1,86 @@
import { useEffect, useRef, ReactElement } from "react";
import videojs from 'video.js';
import 'videojs-playlist';
import 'video.js/dist/video-js.css';
import videojs from "video.js";
import "videojs-playlist";
import "video.js/dist/video-js.css";
import Player from "video.js/dist/types/player";
type VideoPlayerProps = {
children?: ReactElement | ReactElement[],
options?: {
[key: string]: any
},
seekOptions?: {
forward?: number,
backward?: number,
},
onReady?: (player: Player) => void,
onDispose?: () => void,
}
children?: ReactElement | ReactElement[];
options?: {
[key: string]: any;
};
seekOptions?: {
forward?: number;
backward?: number;
};
onReady?: (player: Player) => void;
onDispose?: () => void;
};
export default function VideoPlayer({ children, options, seekOptions = {forward:30, backward: 10}, onReady = (_) => {}, onDispose = () => {} }: VideoPlayerProps) {
const videoRef = useRef<HTMLDivElement | null>(null);
const playerRef = useRef<Player | null>(null);
export default function VideoPlayer({
children,
options,
seekOptions = { forward: 30, backward: 10 },
onReady = (_) => {},
onDispose = () => {},
}: VideoPlayerProps) {
const videoRef = useRef<HTMLDivElement | null>(null);
const playerRef = useRef<Player | null>(null);
useEffect(() => {
const defaultOptions = {
controls: true,
controlBar: {
skipButtons: seekOptions,
},
playbackRates: [0.5, 1, 2, 4, 8],
fluid: true,
};
useEffect(() => {
const defaultOptions = {
controls: true,
controlBar: {
skipButtons: seekOptions,
},
playbackRates: [0.5, 1, 2, 4, 8],
fluid: true,
};
if (!videojs.browser.IS_FIREFOX) {
defaultOptions.playbackRates.push(16);
}
if (!videojs.browser.IS_FIREFOX) {
defaultOptions.playbackRates.push(16);
}
// Make sure Video.js player is only initialized once
if (!playerRef.current) {
// The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
const videoElement = document.createElement("video-js");
// @ts-ignore we know this is a video element
videoElement.controls = true;
// @ts-ignore
videoElement.playsInline = true;
videoElement.classList.add("small-player");
videoElement.classList.add("video-js");
videoElement.classList.add("vjs-default-skin");
videoRef.current?.appendChild(videoElement);
// Make sure Video.js player is only initialized once
if (!playerRef.current) {
// The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
const videoElement = document.createElement("video-js");
videoElement.classList.add('small-player');
videoElement.classList.add('video-js');
videoElement.classList.add('vjs-default-skin');
videoRef.current?.appendChild(videoElement);
const player = playerRef.current = videojs(videoElement, { ...defaultOptions, ...options }, () => {
const player = (playerRef.current = videojs(
videoElement,
{ ...defaultOptions, ...options },
() => {
onReady && onReady(player);
});
}
}, [options, videoRef]);
// Dispose the Video.js player when the functional component unmounts
useEffect(() => {
const player = playerRef.current;
return () => {
if (player && !player.isDisposed()) {
player.dispose();
playerRef.current = null;
onDispose();
}
};
}, [playerRef]);
));
}
}, [options, videoRef]);
return (
<div data-vjs-player>
<div ref={videoRef} />
{children}
</div>
);
}
// Dispose the Video.js player when the functional component unmounts
useEffect(() => {
const player = playerRef.current;
return () => {
if (player && !player.isDisposed()) {
player.dispose();
playerRef.current = null;
onDispose();
}
};
}, [playerRef]);
return (
<div data-vjs-player>
<div ref={videoRef} />
{children}
</div>
);
}