diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx index 9d25c97ed..4d5733fbf 100644 --- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx +++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx @@ -160,15 +160,14 @@ export const OwncastPlayer: FC = ({ source, online }) => { const setupAirplay = (player, videojs) => { // eslint-disable-next-line no-prototype-builtins if (window.hasOwnProperty('WebKitPlaybackTargetAvailabilityEvent')) { - const videoJsButtonClass = videojs.getComponent('Button'); - const ConcreteButtonClass = videojs.extend(videoJsButtonClass, { - // The `init()` method will also work for constructor logic here, but it is - // deprecated. If you provide an `init()` method, it will override the - // `constructor()` method! - constructor() { - videoJsButtonClass.call(this, player); - }, + const VJSButtonClass = videojs.getComponent('Button'); + class ConcreteButtonClass extends VJSButtonClass { + constructor() { + super(player); + } + + // eslint-disable-next-line class-methods-use-this handleClick() { try { const videoElement = document.getElementsByTagName('video')[0]; @@ -176,10 +175,11 @@ export const OwncastPlayer: FC = ({ source, online }) => { } catch (e) { console.error(e); } - }, - }); + } + } - const concreteButtonInstance = player.controlBar.addChild(new ConcreteButtonClass()); + const ccbc = new ConcreteButtonClass(); + const concreteButtonInstance = player.controlBar.addChild(ccbc); concreteButtonInstance.addClass('vjs-airplay'); } }; diff --git a/web/components/video/settings-menu.ts b/web/components/video/settings-menu.ts index 8341e9c5c..badafbaf1 100644 --- a/web/components/video/settings-menu.ts +++ b/web/components/video/settings-menu.ts @@ -92,17 +92,20 @@ export function createVideoSettingsMenuButton(player, videojs, qualities, latenc } } + const menuButton = new MenuButton(); + // If none of the settings in this menu are applicable then don't show it. const tech = player.tech({ IWillNotUseThisInPlugins: true }); - - if (qualities.length < 2 && (!tech || !tech.vhs)) { - return; - } - + menuButton.addClass('vjs-quality-selector'); videojs.registerComponent('MenuButton', MenuButton); - const menuButton = new MenuButton(); - menuButton.addClass('vjs-quality-selector'); + if (!tech.vhs) { + return menuButton; + } + + if (qualities.length < 2 && (!tech || !tech.vhs)) { + return menuButton; + } // eslint-disable-next-line consistent-return return menuButton;