Refactor player button to fix Safari issues. Closes #2440

This commit is contained in:
Gabe Kangas 2022-12-15 21:26:23 -08:00
parent 8bad76112a
commit 9ed14ca73f
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
2 changed files with 21 additions and 18 deletions

View File

@ -160,15 +160,14 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({ 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<OwncastPlayerProps> = ({ 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');
}
};

View File

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