Cleanup video player and use consistently across recordings and events.

web/package.json

@@ -18,9 +18,8 @@
  "preact-async-route": "^2.2.1",
  "preact-router": "^3.2.1",
  "video.js": "^7.11.8",
- "videojs-mobile-ui": "^0.5.3",
  "videojs-playlist": "^4.3.1",
- "videojs-seek-buttons": "^2.0.0"
+ "videojs-seek-buttons": "^2.0.1"
  },
  "devDependencies": {
  "@babel/eslint-parser": "^7.12.13",

web/snowpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
  src: { url: '/dist' },
  },
  plugins: ['@snowpack/plugin-postcss', '@prefresh/snowpack', 'snowpack-plugin-hash'],
- routes: [{ match: 'routes', src: '.*', dest: '/index.html' }],
+ routes: [{ match: 'all', src: '(?!.*(.svg|.gif|.json|.jpg|.jpeg|.png|.js)).*', dest: '/index.html' }],
  optimize: {
  bundle: false,
  minify: true,

web/src/components/VideoPlayer.jsx

@@ -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,
+export default function VideoPlayer({ children, options, seekOptions = {}, onReady = () => {}, onDispose = () => {} }) {
+ const playerRef = useRef();
+
+ useEffect(() => {
+ const player = videojs(playerRef.current, { ...defaultOptions, ...options }, () => {
+ onReady(player);
  });
- this.player.mobileUi({
- fullscreen: {
- iOS: true,
- },
+ player.seekButtons({
+ ...defaultSeekOptions,
+ ...seekOptions,
  });
- }
 
- componentWillUnmount() {
- const { onDispose = () => {} } = this.props;
- if (this.player) {
- this.player.dispose();
- onDispose();
+ // 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;
+ };
+ }
+
+ const screen = window.screen;
+
+ 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;
  }
- }
-
- // shouldComponentUpdate() {
- // return false;
- // }
-
- 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>
- );
- }
+
+ 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>
+ );
 }

web/src/index.css

@@ -25,7 +25,3 @@
  transform: rotate(360deg);
  }
 }
-
-.video-js.vjs-has-started .vjs-touch-overlay {
- display: none;
-}

web/src/routes/Event.jsx

@@ -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>
  );
 }