forked from Github/frigate
Cleanup video player and use consistently across recordings and events.
This commit is contained in:
Jason Hunter
committed by
Blake Blackshear
Blake Blackshear
parent
e8c342e162
commit
b70c11e7a7
@@ -1,6 +1,6 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { useRef, useEffect } from 'preact/hooks';
|
||||
import videojs from 'video.js';
|
||||
import 'videojs-mobile-ui';
|
||||
import 'videojs-playlist';
|
||||
import 'videojs-seek-buttons';
|
||||
import 'video.js/dist/video-js.css';
|
||||
@@ -11,49 +11,85 @@ const defaultOptions = {
|
||||
playbackRates: [0.5, 1, 2, 4, 8],
|
||||
fluid: true,
|
||||
};
|
||||
const defaultSeekOptions = {
|
||||
forward: 30,
|
||||
back: 10,
|
||||
};
|
||||
|
||||
export default class VideoPlayer extends Component {
|
||||
componentDidMount() {
|
||||
const { options, onReady = () => {} } = this.props;
|
||||
const videoJsOptions = {
|
||||
...defaultOptions,
|
||||
...options,
|
||||
};
|
||||
this.player = videojs(this.videoNode, videoJsOptions, function onPlayerReady() {
|
||||
onReady(this);
|
||||
});
|
||||
this.player.seekButtons({
|
||||
forward: 30,
|
||||
back: 10,
|
||||
});
|
||||
this.player.mobileUi({
|
||||
fullscreen: {
|
||||
iOS: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
export default function VideoPlayer({ children, options, seekOptions = {}, onReady = () => {}, onDispose = () => {} }) {
|
||||
const playerRef = useRef();
|
||||
|
||||
componentWillUnmount() {
|
||||
const { onDispose = () => {} } = this.props;
|
||||
if (this.player) {
|
||||
this.player.dispose();
|
||||
onDispose();
|
||||
useEffect(() => {
|
||||
const player = videojs(playerRef.current, { ...defaultOptions, ...options }, () => {
|
||||
onReady(player);
|
||||
});
|
||||
player.seekButtons({
|
||||
...defaultSeekOptions,
|
||||
...seekOptions,
|
||||
});
|
||||
|
||||
// Disable fullscreen on iOS if we have children
|
||||
if (
|
||||
children &&
|
||||
videojs.browser.IS_IOS &&
|
||||
videojs.browser.IOS_VERSION > 9 &&
|
||||
!player.el_.ownerDocument.querySelector('.bc-iframe')
|
||||
) {
|
||||
player.tech_.el_.setAttribute('playsinline', 'playsinline');
|
||||
player.tech_.supportsFullScreen = function () {
|
||||
return false;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// shouldComponentUpdate() {
|
||||
// return false;
|
||||
// }
|
||||
const screen = window.screen;
|
||||
|
||||
render() {
|
||||
const { style, children } = this.props;
|
||||
return (
|
||||
<div style={style}>
|
||||
<div data-vjs-player>
|
||||
<video ref={(node) => (this.videoNode = node)} className="video-js vjs-default-skin" controls playsinline />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const angle = () => {
|
||||
// iOS
|
||||
if (typeof window.orientation === 'number') {
|
||||
return window.orientation;
|
||||
}
|
||||
// Android
|
||||
if (screen && screen.orientation && screen.orientation.angle) {
|
||||
return window.orientation;
|
||||
}
|
||||
videojs.log('angle unknown');
|
||||
return 0;
|
||||
};
|
||||
|
||||
const rotationHandler = () => {
|
||||
const currentAngle = angle();
|
||||
|
||||
if (currentAngle === 90 || currentAngle === 270 || currentAngle === -90) {
|
||||
if (player.paused() === false) {
|
||||
player.requestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
if ((currentAngle === 0 || currentAngle === 180) && player.isFullscreen()) {
|
||||
player.exitFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
if (videojs.browser.IS_IOS) {
|
||||
window.addEventListener('orientationchange', rotationHandler);
|
||||
} else if (videojs.browser.IS_ANDROID && screen.orientation) {
|
||||
// addEventListener('orientationchange') is not a user interaction on Android
|
||||
screen.orientation.onchange = rotationHandler;
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (videojs.browser.IS_IOS) {
|
||||
window.removeEventListener('orientationchange', rotationHandler);
|
||||
}
|
||||
player.dispose();
|
||||
onDispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div data-vjs-player>
|
||||
<video ref={playerRef} className="video-js vjs-default-skin" controls playsinline />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -25,7 +25,3 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.video-js.vjs-has-started .vjs-touch-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -3,10 +3,13 @@ import { useCallback, useState } from 'preact/hooks';
|
||||
import { route } from 'preact-router';
|
||||
import ActivityIndicator from '../components/ActivityIndicator';
|
||||
import Button from '../components/Button';
|
||||
import Delete from '../icons/Delete'
|
||||
import Clip from '../icons/Clip';
|
||||
import Delete from '../icons/Delete';
|
||||
import Snapshot from '../icons/Snapshot';
|
||||
import Dialog from '../components/Dialog';
|
||||
import Heading from '../components/Heading';
|
||||
import Link from '../components/Link';
|
||||
import VideoPlayer from '../components/VideoPlayer';
|
||||
import { FetchStatus, useApiHost, useEvent } from '../api';
|
||||
import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';
|
||||
|
||||
@@ -24,9 +27,7 @@ export default function Event({ eventId }) {
|
||||
setShowDialog(false);
|
||||
};
|
||||
|
||||
|
||||
const handleClickDeleteDialog = useCallback(async () => {
|
||||
|
||||
let success;
|
||||
try {
|
||||
const response = await fetch(`${apiHost}/api/events/${eventId}`, { method: 'DELETE' });
|
||||
@@ -40,12 +41,11 @@ export default function Event({ eventId }) {
|
||||
setDeleteStatus(FetchStatus.LOADED);
|
||||
setShowDialog(false);
|
||||
route('/events', true);
|
||||
|
||||
}
|
||||
}, [apiHost, eventId, setShowDialog]);
|
||||
|
||||
if (status !== FetchStatus.LOADED) {
|
||||
return <ActivityIndicator />
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
const startime = new Date(data.start_time * 1000);
|
||||
@@ -106,28 +106,44 @@ export default function Event({ eventId }) {
|
||||
|
||||
{data.has_clip ? (
|
||||
<Fragment>
|
||||
<Heading size="sm">Clip</Heading>
|
||||
<video
|
||||
aria-label={`Clip for event ${data.id}`}
|
||||
autoPlay
|
||||
className="w-100"
|
||||
src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`}
|
||||
controls
|
||||
<Heading size="lg">Clip</Heading>
|
||||
<VideoPlayer
|
||||
options={{
|
||||
sources: [
|
||||
{
|
||||
src: `${apiHost}/clips/${data.camera}-${eventId}.mp4`,
|
||||
type: 'video/mp4',
|
||||
},
|
||||
],
|
||||
poster: data.has_snapshot
|
||||
? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
|
||||
: `data:image/jpeg;base64,${data.thumbnail}`,
|
||||
}}
|
||||
seekOptions={{ forward: 10, back: 5 }}
|
||||
onReady={(player) => {}}
|
||||
/>
|
||||
<div className="text-center">
|
||||
<Button className="mx-2" color="blue" href={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} download>
|
||||
<Clip className="w-6" /> Download Clip
|
||||
</Button>
|
||||
<Button className="mx-2" color="blue" href={`${apiHost}/clips/${data.camera}-${eventId}.jpg`} download>
|
||||
<Snapshot className="w-6" /> Download Snapshot
|
||||
</Button>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : (
|
||||
<p>No clip available</p>
|
||||
<Fragment>
|
||||
<Heading size="sm">{data.has_snapshot ? 'Best Image' : 'Thumbnail'}</Heading>
|
||||
<img
|
||||
src={
|
||||
data.has_snapshot
|
||||
? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
|
||||
: `data:image/jpeg;base64,${data.thumbnail}`
|
||||
}
|
||||
alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
|
||||
<Heading size="sm">{data.has_snapshot ? 'Best image' : 'Thumbnail'}</Heading>
|
||||
<img
|
||||
src={
|
||||
data.has_snapshot
|
||||
? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
|
||||
: `data:image/jpeg;base64,${data.thumbnail}`
|
||||
}
|
||||
alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user