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

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

@ -1,23 +1,29 @@
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[],
children?: ReactElement | ReactElement[];
options?: {
[key: string]: any
},
[key: string]: any;
};
seekOptions?: {
forward?: number,
backward?: number,
},
onReady?: (player: Player) => void,
onDispose?: () => void,
}
forward?: number;
backward?: number;
};
onReady?: (player: Player) => 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 playerRef = useRef<Player | null>(null);
@ -31,7 +37,6 @@ export default function VideoPlayer({ children, options, seekOptions = {forward:
fluid: true,
};
if (!videojs.browser.IS_FIREFOX) {
defaultOptions.playbackRates.push(16);
}
@ -40,15 +45,22 @@ export default function VideoPlayer({ children, options, seekOptions = {forward:
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');
// @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);
const player = playerRef.current = videojs(videoElement, { ...defaultOptions, ...options }, () => {
const player = (playerRef.current = videojs(
videoElement,
{ ...defaultOptions, ...options },
() => {
onReady && onReady(player);
});
}
));
}
}, [options, videoRef]);
@ -71,4 +83,4 @@ export default function VideoPlayer({ children, options, seekOptions = {forward:
{children}
</div>
);
}
}