administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 11:45:24 +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 { useEffect, useRef, ReactElement } from "react";
import videojs from 'video.js'; import videojs from "video.js";
import 'videojs-playlist'; import "videojs-playlist";
import 'video.js/dist/video-js.css'; import "video.js/dist/video-js.css";
import Player from "video.js/dist/types/player"; import Player from "video.js/dist/types/player";
type VideoPlayerProps = { type VideoPlayerProps = {
children?: ReactElement | ReactElement[], children?: ReactElement | ReactElement[];
options?: { options?: {
[key: string]: any [key: string]: any;
}, };
seekOptions?: { seekOptions?: {
forward?: number, forward?: number;
backward?: number, backward?: number;
}, };
onReady?: (player: Player) => void, onReady?: (player: Player) => void;
onDispose?: () => void, onDispose?: () => void;
} };
export default function VideoPlayer({ children, options, seekOptions = {forward:30, backward: 10}, onReady = (_) => {}, onDispose = () => {} }: VideoPlayerProps) { export default function VideoPlayer({
const videoRef = useRef<HTMLDivElement | null>(null); children,
const playerRef = useRef<Player | null>(null); options,
seekOptions = { forward: 30, backward: 10 },
onReady = (_) => {},
onDispose = () => {},
}: VideoPlayerProps) {
const videoRef = useRef<HTMLDivElement | null>(null);
const playerRef = useRef<Player | null>(null);
useEffect(() => { useEffect(() => {
const defaultOptions = { const defaultOptions = {
controls: true, controls: true,
controlBar: { controlBar: {
skipButtons: seekOptions, skipButtons: seekOptions,
}, },
playbackRates: [0.5, 1, 2, 4, 8], playbackRates: [0.5, 1, 2, 4, 8],
fluid: true, fluid: true,
}; };
if (!videojs.browser.IS_FIREFOX) {
defaultOptions.playbackRates.push(16);
}
if (!videojs.browser.IS_FIREFOX) { // Make sure Video.js player is only initialized once
defaultOptions.playbackRates.push(16); 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 const player = (playerRef.current = videojs(
if (!playerRef.current) { videoElement,
// The Video.js player needs to be _inside_ the component el for React 18 Strict Mode. { ...defaultOptions, ...options },
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 }, () => {
onReady && onReady(player); 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 ( // Dispose the Video.js player when the functional component unmounts
<div data-vjs-player> useEffect(() => {
<div ref={videoRef} /> const player = playerRef.current;
{children}
</div> return () => {
); if (player && !player.isDisposed()) {
} player.dispose();
playerRef.current = null;
onDispose();
}
};
}, [playerRef]);
return (
<div data-vjs-player>
<div ref={videoRef} />
{children}
</div>
);
}