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

Adjust VideoPlayer to accept live option which disables irrelevant controls

Browse Source
This commit is contained in:
Nick Mowen 2022-10-14 10:11:31 -06:00
parent 2096701c79
commit a6867bf89b
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/VideoPlayer.jsx
View File

@ -6,7 +6,7 @@ import 'videojs-seek-buttons';
import 'video.js/dist/video-js.css';
import 'videojs-seek-buttons/dist/videojs-seek-buttons.css';
export default function VideoPlayer({ children, options, seekOptions = {}, onReady = () => {}, onDispose = () => {} }) {
export default function VideoPlayer({ children, options, audio=true, live=false, seekOptions = {}, onReady = () => {}, onDispose = () => {} }) {
const playerRef = useRef();
useEffect(() => {
@ -25,7 +25,7 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
defaultOptions.playbackRates.push(16);
}
const player = videojs(playerRef.current, { ...defaultOptions, ...options }, () => {
const player = videojs(playerRef.current, { ...defaultOptions, ...options, controlBar: { volumePanel: audio, playToggle: !live, progressControl: !live, remainingTimeDisplay: !live, playbackRateMenuButton: !live } }, () => {
onReady(player);
});
player.seekButtons({

5
web/src/routes/Camera.jsx
View File

@ -94,11 +94,13 @@ export default function Camera({ camera }) {
let player;
if (viewMode === 'live') {
if (cameraConfig.live.source == 'restream') {
if (cameraConfig.live.source == 'mp4') {
player = (
<Fragment>
<div style={`max-height: ${cameraConfig.live.height}px; max-width: ${liveWidth}px`}>
<VideoPlayer
audio={false}
live={true}
options={{
autoplay: true,
preload: 'metadata',
@ -111,6 +113,7 @@ export default function Camera({ camera }) {
},
],
}}
seekOptions={{ forward: false, back: false }}
onReady={() => {}}
/>
</div>