administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 04:05:26 +03:00
Code Issues Actions 2 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

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

@ -1,23 +1,29 @@
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({
children,
options,
seekOptions = { forward: 30, backward: 10 },
onReady = (_) => {},
onDispose = () => {},
}: VideoPlayerProps) {
const videoRef = useRef<HTMLDivElement | null>(null); const videoRef = useRef<HTMLDivElement | null>(null);
const playerRef = useRef<Player | null>(null); const playerRef = useRef<Player | null>(null);
@ -31,7 +37,6 @@ export default function VideoPlayer({ children, options, seekOptions = {forward:
fluid: true, fluid: true,
}; };
if (!videojs.browser.IS_FIREFOX) { if (!videojs.browser.IS_FIREFOX) {
defaultOptions.playbackRates.push(16); defaultOptions.playbackRates.push(16);
} }
@ -40,15 +45,22 @@ export default function VideoPlayer({ children, options, seekOptions = {forward:
if (!playerRef.current) { if (!playerRef.current) {
// The Video.js player needs to be _inside_ the component el for React 18 Strict Mode. // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
const videoElement = document.createElement("video-js"); const videoElement = document.createElement("video-js");
// @ts-ignore we know this is a video element
videoElement.classList.add('small-player'); videoElement.controls = true;
videoElement.classList.add('video-js'); // @ts-ignore
videoElement.classList.add('vjs-default-skin'); videoElement.playsInline = true;
videoElement.classList.add("small-player");
videoElement.classList.add("video-js");
videoElement.classList.add("vjs-default-skin");
videoRef.current?.appendChild(videoElement); videoRef.current?.appendChild(videoElement);
const player = playerRef.current = videojs(videoElement, { ...defaultOptions, ...options }, () => { const player = (playerRef.current = videojs(
videoElement,
{ ...defaultOptions, ...options },
() => {
onReady && onReady(player); onReady && onReady(player);
}); }
));
} }
}, [options, videoRef]); }, [options, videoRef]);