update to 8.3.x (#6100)

web/src/components/HistoryViewer/HistoryVideo.tsx

@@ -3,11 +3,10 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useApiHost } from '../../api';
 import { isNullOrUndefined } from '../../utils/objectUtils';
 
-import 'videojs-seek-buttons';
 import 'video.js/dist/video-js.css';
-import 'videojs-seek-buttons/dist/videojs-seek-buttons.css';
 
-import videojs, { VideoJsPlayer } from 'video.js';
+import videojs from 'video.js';
+import type Player from 'video.js/dist/types/player';
 
 interface OnTimeUpdateEvent {
   timestamp: number;
@@ -34,10 +33,10 @@ export const HistoryVideo = ({
   const apiHost = useApiHost();
   const videoRef = useRef<HTMLVideoElement>(null);
 
-  const [video, setVideo] = useState<VideoJsPlayer>();
+  const [video, setVideo] = useState<Player>();
 
   useEffect(() => {
-    let video: VideoJsPlayer
+    let video: Player
     if (videoRef.current) {
       video = videojs(videoRef.current, {})
       setVideo(video)
@@ -88,7 +87,8 @@ export const HistoryVideo = ({
   );
 
   useEffect(() => {
-    if (video && video.readyState() >= 1) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (video && (video as any).readyState() >= 1) {
       if (videoIsPlaying) {
         video.play()
       } else {
@@ -98,7 +98,8 @@ export const HistoryVideo = ({
   }, [video, videoIsPlaying])
 
   const onLoad = useCallback(() => {
-    if (video && video.readyState() >= 1 && videoIsPlaying) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (video && (video as any).readyState() >= 1 && videoIsPlaying) {
       video.play()
     }
   }, [video, videoIsPlaying])

web/src/components/VideoPlayer.jsx

@@ -2,24 +2,21 @@ import { h } from 'preact';
 import { useRef, useEffect } from 'preact/hooks';
 import videojs from 'video.js';
 import 'videojs-playlist';
-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, seekOptions = {forward:30, backward: 10}, onReady = () => {}, onDispose = () => {} }) {
   const playerRef = useRef();
 
   useEffect(() => {
     const defaultOptions = {
       controls: true,
+      controlBar: {
+        skipButtons: seekOptions,
+      },
       playbackRates: [0.5, 1, 2, 4, 8],
       fluid: true,
     };
 
-    const defaultSeekOptions = {
-      forward: 30,
-      back: 10,
-    };
 
     if (!videojs.browser.IS_FIREFOX) {
       defaultOptions.playbackRates.push(16);
@@ -28,10 +25,6 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
     const player = videojs(playerRef.current, { ...defaultOptions, ...options }, () => {
       onReady(player);
     });
-    player.seekButtons({
-      ...defaultSeekOptions,
-      ...seekOptions,
-    });
 
     // Allows player to continue on error
     player.reloadSourceOnError();

web/src/routes/Events.jsx

@@ -584,7 +584,7 @@ export default function Events({ path, ...props }) {
                                   },
                                 ],
                               }}
-                              seekOptions={{ forward: 10, back: 5 }}
+                              seekOptions={{ forward: 10, backward: 5 }}
                               onReady={() => {}}
                             />
                           ) : null}