diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx index e04b67882..a0adb245e 100644 --- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx +++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx @@ -1,7 +1,6 @@ import React, { FC, useContext, useEffect } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { useHotkeys } from 'react-hotkeys-hook'; -import { VideoJsPlayerOptions } from 'video.js'; import classNames from 'classnames'; import { ErrorBoundary } from 'react-error-boundary'; import { VideoJS } from '../VideoJS/VideoJS'; @@ -244,7 +243,7 @@ export const OwncastPlayer: FC = ({ type: 'application/x-mpegURL', }, ], - } satisfies VideoJsPlayerOptions; + }; const handlePlayerReady = (player, videojs) => { playerRef.current = player; diff --git a/web/components/video/VideoJS/VideoJS.tsx b/web/components/video/VideoJS/VideoJS.tsx index 81e2276ac..f1e39b2a8 100644 --- a/web/components/video/VideoJS/VideoJS.tsx +++ b/web/components/video/VideoJS/VideoJS.tsx @@ -1,12 +1,14 @@ import React, { FC } from 'react'; -import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'; +import videojs from 'video.js'; +import type VideoJsPlayer from 'video.js/dist/types/player'; + import styles from './VideoJS.module.scss'; require('video.js/dist/video-js.css'); export type VideoJSProps = { - options: VideoJsPlayerOptions; - onReady: (player: videojs.Player, vjsInstance: typeof videojs) => void; + options: any; + onReady: (player: VideoJsPlayer, vjsInstance: typeof videojs) => void; }; export const VideoJS: FC = ({ options, onReady }) => { @@ -29,15 +31,17 @@ export const VideoJS: FC = ({ options, onReady }) => { } // Add a cachebuster param to playlist URLs. - videojs.Vhs.xhr.beforeRequest = o => { - if (o.uri.match('m3u8')) { - const cachebuster = Math.random().toString(16).substr(2, 8); - // eslint-disable-next-line no-param-reassign - o.uri = `${o.uri}?cachebust=${cachebuster}`; - } + if ((videojs.getPlayer(videoRef.current).tech() as any)?.vhs) { + (videojs.getPlayer(videoRef.current).tech() as any).vhs.xhr.beforeRequest = o => { + if (o.uri.match('m3u8')) { + const cachebuster = Math.random().toString(16).substr(2, 8); + // eslint-disable-next-line no-param-reassign + o.uri = `${o.uri}?cachebust=${cachebuster}`; + } - return o; - }; + return o; + }; + } }, [options, videoRef]); return ( diff --git a/web/package-lock.json b/web/package-lock.json index 60468e693..3dc9188f0 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -50,7 +50,7 @@ "slate": "0.94.0", "slate-react": "0.94.0", "ua-parser-js": "1.0.35", - "video.js": "7.20.3", + "video.js": "^8.3.0", "xstate": "4.37.2", "yaml": "2.2.2" }, @@ -13951,31 +13951,31 @@ } }, "node_modules/@videojs/http-streaming": { - "version": "2.14.3", - "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.3.tgz", - "integrity": "sha512-2tFwxCaNbcEZzQugWf8EERwNMyNtspfHnvxRGRABQs09W/5SqmkWFuGWfUAm4wQKlXGfdPyAJ1338ASl459xAA==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.0.2.tgz", + "integrity": "sha512-iSZkwTLGg3Rx78ypCCq/GsMME89ElNvU02xj7reCE2PlITMQjyYsER1w5AsySvT1A694u5yuSzEzLLGF1cL4pg==", "dependencies": { "@babel/runtime": "^7.12.5", - "@videojs/vhs-utils": "3.0.5", - "aes-decrypter": "3.1.3", + "@videojs/vhs-utils": "4.0.0", + "aes-decrypter": "4.0.1", "global": "^4.4.0", - "m3u8-parser": "4.7.1", - "mpd-parser": "0.21.1", - "mux.js": "6.0.1", - "video.js": "^6 || ^7" + "m3u8-parser": "^6.0.0", + "mpd-parser": "^1.0.1", + "mux.js": "6.3.0", + "video.js": "^7 || ^8" }, "engines": { "node": ">=8", "npm": ">=5" }, "peerDependencies": { - "video.js": "^6 || ^7" + "video.js": "^7 || ^8" } }, "node_modules/@videojs/vhs-utils": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz", - "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz", + "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==", "dependencies": { "@babel/runtime": "^7.12.5", "global": "^4.4.0", @@ -14240,9 +14240,9 @@ } }, "node_modules/@xmldom/xmldom": { - "version": "0.7.10", - "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.10.tgz", - "integrity": "sha512-hb9QhOg5MGmpVkFcoZ9XJMe1em5gd0e2eqqjK87O1dwULedXsnY/Zg/Ju6lcohA+t6jVkmKpe7I1etqhvdRdrQ==", + "version": "0.8.7", + "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.7.tgz", + "integrity": "sha512-sI1Ly2cODlWStkINzqGrZ8K6n+MTSbAeQnAipGyL+KZCXuHaRlj2gyyy8B/9MvsFFqN7XHryQnB2QwhzvJXovg==", "engines": { "node": ">=10.0.0" } @@ -14651,9 +14651,9 @@ } }, "node_modules/aes-decrypter": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz", - "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz", + "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==", "dependencies": { "@babel/runtime": "^7.12.5", "@videojs/vhs-utils": "^3.0.5", @@ -14661,6 +14661,20 @@ "pkcs7": "^1.0.4" } }, + "node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz", + "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "global": "^4.4.0", + "url-toolkit": "^2.2.1" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, "node_modules/agent-base": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz", @@ -28324,9 +28338,9 @@ } }, "node_modules/keycode": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz", - "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A==" }, "node_modules/keyv": { "version": "4.5.2", @@ -29067,15 +29081,29 @@ } }, "node_modules/m3u8-parser": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.1.tgz", - "integrity": "sha512-pbrQwiMiq+MmI9bl7UjtPT3AK603PV9bogNlr83uC+X9IoxqL5E4k7kU7fMQ0dpRgxgeSMygqUa0IMLQNXLBNA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-6.0.0.tgz", + "integrity": "sha512-s3JfDtqhxTilZQf+P1m9dZc4ohL4O/aylP1VV6g9lhKuQNfAcVUzq7d2wgJ9nZR4ibjuXaP87QzGCV6vB0kV6g==", "dependencies": { "@babel/runtime": "^7.12.5", "@videojs/vhs-utils": "^3.0.5", "global": "^4.4.0" } }, + "node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz", + "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "global": "^4.4.0", + "url-toolkit": "^2.2.1" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, "node_modules/make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -30927,19 +30955,33 @@ } }, "node_modules/mpd-parser": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.21.1.tgz", - "integrity": "sha512-BxlSXWbKE1n7eyEPBnTEkrzhS3PdmkkKdM1pgKbPnPOH0WFZIc0sPOWi7m0Uo3Wd2a4Or8Qf4ZbS7+ASqQ49fw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.1.1.tgz", + "integrity": "sha512-uZ/db5wQdlQn1L+OD49YXBhPI9UGeK1SeQE4D5EoaJIhf0WM9X3HDj8d+9PjoG06CgCvGZw3YW/wsHku+CH3yA==", "dependencies": { "@babel/runtime": "^7.12.5", "@videojs/vhs-utils": "^3.0.5", - "@xmldom/xmldom": "^0.7.2", + "@xmldom/xmldom": "^0.8.3", "global": "^4.4.0" }, "bin": { "mpd-to-m3u8-json": "bin/parse.js" } }, + "node_modules/mpd-parser/node_modules/@videojs/vhs-utils": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz", + "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "global": "^4.4.0", + "url-toolkit": "^2.2.1" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", @@ -30962,9 +31004,9 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/mux.js": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz", - "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.3.0.tgz", + "integrity": "sha512-/QTkbSAP2+w1nxV+qTcumSDN5PA98P0tjrADijIzQHe85oBK3Akhy9AHlH0ne/GombLMz1rLyvVsmrgRxoPDrQ==", "dependencies": { "@babel/runtime": "^7.11.2", "global": "^4.4.0" @@ -42874,29 +42916,45 @@ } }, "node_modules/video.js": { - "version": "7.20.3", - "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.3.tgz", - "integrity": "sha512-JMspxaK74LdfWcv69XWhX4rILywz/eInOVPdKefpQiZJSMD5O8xXYueqACP2Q5yqKstycgmmEKlJzZ+kVmDciw==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.3.0.tgz", + "integrity": "sha512-Vp3mqMLSUE354t+G8CbZKwcV520VKoS5fow8zjnEEKFuqStmkmnvK7/FurP6zuP/oWGJ1rqlKxML56kmJOrwRw==", "dependencies": { "@babel/runtime": "^7.12.5", - "@videojs/http-streaming": "2.14.3", - "@videojs/vhs-utils": "^3.0.4", + "@videojs/http-streaming": "3.0.2", + "@videojs/vhs-utils": "^4.0.0", "@videojs/xhr": "2.6.0", - "aes-decrypter": "3.1.3", - "global": "^4.4.0", - "keycode": "^2.2.0", - "m3u8-parser": "4.7.1", - "mpd-parser": "0.21.1", - "mux.js": "6.0.1", + "aes-decrypter": "^4.0.1", + "global": "4.4.0", + "keycode": "2.2.0", + "m3u8-parser": "^6.0.0", + "mpd-parser": "^1.0.1", + "mux.js": "^6.2.0", "safe-json-parse": "4.0.0", - "videojs-font": "3.2.0", - "videojs-vtt.js": "^0.15.4" + "videojs-contrib-quality-levels": "3.0.0", + "videojs-font": "4.1.0", + "videojs-vtt.js": "0.15.4" + } + }, + "node_modules/videojs-contrib-quality-levels": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-3.0.0.tgz", + "integrity": "sha512-sNx38EYUx+Q+gmup1gVTv9P9/sPs28rM7gZOx1sedaHoKxEdYB+ysOGfHj6MSELBMNGMj6ZspdrpSiWguGvGxA==", + "dependencies": { + "global": "^4.4.0" + }, + "engines": { + "node": ">=14", + "npm": ">=6" + }, + "peerDependencies": { + "video.js": "^6 || ^7 || ^8" } }, "node_modules/videojs-font": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz", - "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==" + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz", + "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w==" }, "node_modules/videojs-vtt.js": { "version": "0.15.4", diff --git a/web/package.json b/web/package.json index ea488bcd5..9f0ea8ab0 100644 --- a/web/package.json +++ b/web/package.json @@ -55,7 +55,7 @@ "slate": "0.94.0", "slate-react": "0.94.0", "ua-parser-js": "1.0.35", - "video.js": "7.20.3", + "video.js": "^8.3.0", "xstate": "4.37.2", "yaml": "2.2.2" },