Enh/update videojs

web/package.json

@@ -31,11 +31,11 @@
     "@fullcalendar/icalendar": "^6.1.10",
     "@fullcalendar/list": "^6.1.10",
     "@fullcalendar/timegrid": "^6.1.10",
-    "@silvermine/videojs-airplay": "^1.2.0",
-    "@silvermine/videojs-quality-selector": "^1.3.0",
+    "@silvermine/videojs-airplay": "^1.3.0",
+    "@silvermine/videojs-quality-selector": "^1.3.1",
     "alpinejs": "^3.13.3",
     "chart.js": "^4.4.1",
-    "extract-loader": "^5.1.0",
+    "extract-loader": "^4.0.3",
     "flatpickr": "^4.6.13",
     "fullcalendar": "^6.1.10",
     "handlebars": "^4.7.8",
@@ -47,10 +47,10 @@
     "moment": "^2.30.1",
     "nouislider": "^15.7.1",
     "split.js": "^1.6.5",
-    "video.js": "^7.21.1",
-    "videojs-contrib-quality-levels": "^3.0.0",
-    "videojs-seek-buttons": "^3.0.1",
-    "videojs-sprite-thumbnails": "^1.1.1"
+    "video.js": "^8.9.0",
+    "videojs-contrib-quality-levels": "^4.0.0",
+    "videojs-seek-buttons": "^4.0.3",
+    "videojs-sprite-thumbnails": "^2.2.0"
   },
   "devDependencies": {
     "@types/video.js": "^7.3.52",

web/ts/TUMLiveVjs.ts

@@ -1,30 +1,31 @@
 import { getQueryParam, keepQuery, postData, Time } from "./global";
 import { StatusCodes } from "http-status-codes";
-import videojs, { VideoJsPlayer } from "video.js";
+import videojs from "video.js";
+import Player from "video.js/dist/types/player";
+import type Button from "video.js/dist/types/button.d.ts";
 import airplay from "@silvermine/videojs-airplay";
 import { loadAndSetTrackbars } from "./track-bars";
 
 import { handleHotkeys } from "./hotkeys";
 import dom = videojs.dom;
+import { Event } from "video.js/dist/types/event-target";
 
-require("videojs-sprite-thumbnails");
 require("videojs-seek-buttons");
+require("videojs-sprite-thumbnails");
 require("videojs-contrib-quality-levels");
 
-const Button = videojs.getComponent("Button");
+const players: Player[] = [];
 
-const players: VideoJsPlayer[] = [];
-
-export function getPlayers(): VideoJsPlayer[] {
+export function getPlayers(): Player[] {
     return players;
 }
 
 class PlayerSettings {
-    private readonly player: VideoJsPlayer;
+    private readonly player: Player;
     private readonly isLive: boolean;
     private readonly isEmbedded: boolean;
 
-    constructor(player: VideoJsPlayer, isLive: boolean, isEmbedded: boolean) {
+    constructor(player: Player, isLive: boolean, isEmbedded: boolean) {
         this.player = player;
         this.isLive = isLive;
         this.isEmbedded = isEmbedded;
@@ -94,9 +95,10 @@ class PlayerSettings {
         }
     }
 
-    addOverlayIcon(options: object = {}) {
+    // Removed because not used
+    /*addOverlayIcon(options: object = {}) {
         this.player.addChild("OverlayIcon", options);
-    }
+    }*/
 
     addTimeToolTipClass(spriteID?: number) {
         if (spriteID) {
@@ -222,7 +224,7 @@ export const initPlayer = function (
         settings.addTitleBar({ ...options });
         settings.addTimeToolTipClass(spriteID);
         settings.addStartInOverlay(streamStartIn, { ...options });
-        settings.addOverlayIcon();
+        //settings.addOverlayIcon(); // Removed because not used
     });
     // handle hotkeys from anywhere on the page
     document.addEventListener("keydown", (event) => player.handleKeyDown(event));
@@ -231,34 +233,40 @@ export const initPlayer = function (
 
 let skipTo = 0;
 
+// Should be changed when videojs fully supports typescript, but for now this works as a fix
+const CustomButton = videojs.getComponent("Button") as any;
+
 /**
  * Button to add a class to passed player that will toggle skip silence button.
  */
-export const SkipSilenceToggle = videojs.extend(Button, {
-    constructor: function (...args) {
-        Button.apply(this, args);
+export class SkipSilenceButton extends CustomButton {
+    constructor(player, options) {
+        super(player, options);
         this.controlText("Skip pause");
         (this.el().firstChild as HTMLElement).classList.add("icon-forward");
-    },
-    handleClick: function () {
+    }
+
+    handleClick(event: Event, ...args) {
         for (let i = 0; i < players.length; i++) {
             players[i].currentTime(skipTo);
         }
-    },
-    buildCSSClass: function () {
+    }
+
+    buildCSSClass(): string {
         return `vjs-skip-silence-control`;
-    },
-});
+    }
+}
 
-videojs.registerComponent("SkipSilenceToggle", SkipSilenceToggle);
+// Should be changed when videojs fully supports typescript, but for now this works as a fix
+videojs.registerComponent("SkipSilenceToggle", SkipSilenceButton as any as typeof Button);
 
 export const skipSilence = function (options) {
     for (let j = 0; j < players.length; j++) {
         players[j].ready(() => {
             players[j].addClass("vjs-skip-silence");
             const toggle = players[j].addChild("SkipSilenceToggle");
             toggle.el().classList.add("invisible");
-            players[j].el().insertBefore(toggle.el(), players[j].bigPlayButton.el());
+            players[j].el().insertBefore(toggle.el(), (players[j] as any).bigPlayButton.el());
 
             let isShowing = false;
             const silences = JSON.parse(options);
@@ -583,6 +591,8 @@ export class StartInOverlay extends Component {
     }
 }
 
+// Removed because not used
+/*
 export class OverlayIcon extends Component {
     private removeIconTimeout;
     private readonly removeIconAfter;
@@ -620,7 +630,7 @@ export class OverlayIcon extends Component {
         dom.emptyEl(this.el());
         this.el().classList.remove("vjs-overlay-icon-animate");
     }
-}
+}*/
 
 export type jumpToSettings = {
     timeParts: { hours: number; minutes: number; seconds: number } | undefined;
@@ -698,9 +708,9 @@ function debounce(func, timeout) {
 }
 
 // Register the plugin with video.js.
-videojs.registerPlugin("skipSilence", skipSilence);
+//videojs.registerPlugin("skipSilence", skipSilence);
 videojs.registerPlugin("watchProgress", watchProgress);
 videojs.registerComponent("Titlebar", Titlebar);
 videojs.registerComponent("StartInOverlay", StartInOverlay);
-videojs.registerComponent("OverlayIcon", OverlayIcon);
+//videojs.registerComponent("OverlayIcon", OverlayIcon); // Removed because not used
 airplay(videojs); //calls registerComponent internally

web/ts/components/chat.ts

@@ -7,7 +7,7 @@ import { User } from "../api/users";
 import { Tunnel } from "../utilities/tunnels";
 import Alpine from "alpinejs";
 import { ToggleableElement } from "../utilities/ToggleableElement";
-import { VideoJsPlayer } from "video.js";
+import Player from "video.js/dist/types/player";
 import { registerTimeWatcher, deregisterTimeWatcher } from "../video/watchers";
 
 export function chatContext(streamId: number, user: User, isRecording: boolean): AlpineComponent {
@@ -28,7 +28,7 @@ export function chatContext(streamId: number, user: User, isRecording: boolean):
         serverMessage: {},
         unreadMessages: false,
 
-        attachedPlayer: undefined as VideoJsPlayer,
+        attachedPlayer: undefined as Player,
         streamStart: undefined as Date,
         replay: ChatReplay.get(),
 
@@ -41,7 +41,7 @@ export function chatContext(streamId: number, user: User, isRecording: boolean):
             this.__initpromise = Promise.all([this.loadMessages(), this.initWebsocket()]);
         },
 
-        afterInitNotPopout(player: VideoJsPlayer, streamStart: string) {
+        afterInitNotPopout(player: Player, streamStart: string) {
             if (this.isRecording) {
                 this.__initpromise.then(() => {
                     this.preprocessors.push(ChatMessagePreprocessor.GrayOut);
@@ -286,12 +286,12 @@ class ChatReplay {
         return this.activated;
     }
 
-    deactivate(player: VideoJsPlayer) {
+    deactivate(player: Player) {
         this.activated = false;
         deregisterTimeWatcher(player, this.callback);
     }
 
-    activate(player: VideoJsPlayer, callback: (t: number) => void) {
+    activate(player: Player, callback: (t: number) => void) {
         this.activated = true;
         this.callback = registerTimeWatcher(player, callback);
     }

web/ts/hotkeys.ts

@@ -1,4 +1,6 @@
 import videojs from "video.js";
+import Button from "video.js/dist/types/button";
+import KeyboardEvent from "video.js/dist/types/utils/events";
 
 // VideoJS uses `import * as keycode from "keycode";`
 // However, keycode uses deprecated event.keyCode https://github.com/timoxley/keycode/issues/52
@@ -21,7 +23,7 @@ const vjsIcon = (icon) => `vjs-icon-${icon}`;
  * @param keys An iterable of strings, each naming a key code as per {@link KeyboardEvent#key}.
  * @param event The event to match.
  */
-const matchKeys = (keys: Iterable<string>, event: videojs.KeyboardEvent) =>
+const matchKeys = (keys: Iterable<string>, event: KeyboardEvent) =>
     Array.from(keys).includes(event.key) ? event.key : undefined;
 
 const matches = (match, player, event) =>
@@ -30,7 +32,8 @@ const matches = (match, player, event) =>
 const getIcon = (icon, player, event) => (typeof icon === "function" ? icon(player, event) : icon);
 
 const handleWithClick = (name) => (player, event) => {
-    const ButtonComponent = videojs.getComponent(name);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const ButtonComponent = videojs.getComponent(name) as any;
     ButtonComponent.prototype.handleClick.call(player, event);
 };
 
@@ -193,7 +196,7 @@ export const defaultOptions = {
 export function handleHotkeys(extraOptions = {}) {
     const options = videojs.mergeOptions(defaultOptions, extraOptions) as typeof defaultOptions;
 
-    return function (event: videojs.KeyboardEvent) {
+    return function (event: KeyboardEvent) {
         // ignore events where Alt, Ctrl or Meta is pressed
         // note: we are processing keydown events
         if (event.altKey || event.ctrlKey || event.metaKey) return;
@@ -204,9 +207,11 @@ export function handleHotkeys(extraOptions = {}) {
                 event.preventDefault();
                 event.stopPropagation();
                 const handleIcon = handle(this, event, data);
-                optional(icon)
+                // No more OverlayIcons in Player as they are not used
+                optional(icon).or(handleIcon);
+                /*optional(icon)
                     .or(handleIcon)
-                    .map((i) => this.getChild("OverlayIcon").showIcon(getIcon(i, this, event)));
+                    .map((i) => this.getChild("OverlayIcon").showIcon(getIcon(i, this, event)));*/
             });
         }
     };

web/ts/seekbar-highlights.ts

@@ -1,6 +1,6 @@
 import { Section } from "./global";
 import { getPlayers } from "./TUMLiveVjs";
-import { VideoJsPlayer } from "video.js";
+import Player from "video.js/dist/types/player";
 import { DataStore } from "./data-store/data-store";
 import { Bookmark } from "./data-store/bookmarks";
 
@@ -23,7 +23,7 @@ export type SeekbarSection = {
 
 class SeekbarHighlights {
     streamId: number;
-    player: VideoJsPlayer;
+    player: Player;
     sections: SeekbarSection[];
     marker: SeekbarMarker[];
 

web/ts/stream-playlist.ts

@@ -39,7 +39,9 @@ export class StreamPlaylist {
     }
 
     public scrollSelectedIntoView() {
-        this.elem.querySelector(".--selected").scrollIntoView({ block: "center" });
+        if (this.elem.querySelector(".--selected")) {
+            this.elem.querySelector(".--selected").scrollIntoView({ block: "center" });
+        }
     }
 
     private findNextAndPrev(): { next: StreamPlaylistEntry; prev: StreamPlaylistEntry } {

web/ts/track-bars.ts

@@ -1,11 +1,11 @@
-import { VideoJsPlayer } from "video.js";
+import Player from "video.js/dist/types/player";
 
 const LANGUAGES = [
     { id: "en", label: "English" },
     { id: "de", label: "Deutsch" },
 ];
 
-export async function loadAndSetTrackbars(player: VideoJsPlayer, streamID: number) {
+export async function loadAndSetTrackbars(player: Player, streamID: number) {
     for (const language of LANGUAGES) {
         await fetch(`/api/stream/${streamID}/subtitles/${language.id}`).then((res) => {
             if (res.ok) {

web/ts/video/watchers.ts

@@ -1,4 +1,4 @@
-import { VideoJsPlayer } from "video.js";
+import Player from "video.js/dist/types/player";
 
 /**
  * Registers a time watcher that observes the time of the current player
@@ -7,7 +7,7 @@ import { VideoJsPlayer } from "video.js";
  * @return callBack function that got registered for listening to player time updates (used to deregister)
  */
 export const registerTimeWatcher = function (
-    player: VideoJsPlayer,
+    player: Player,
     callback: (currentPlayerTime: number) => void,
 ): () => void {
     const timeWatcherCallBack: () => void = () => callback(player.currentTime());
@@ -20,6 +20,6 @@ export const registerTimeWatcher = function (
  * @param player The player to deregister the watcher.
  * @param callback regestered callBack function
  */
-export const deregisterTimeWatcher = function (player: VideoJsPlayer, callback: () => void) {
+export const deregisterTimeWatcher = function (player: Player, callback: () => void) {
     player.off("timeupdate", callback);
 };