Refactor player button to fix Safari issues. Closes #2440

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -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 VJSButtonClass = 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);
-        },
 
+      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');
     }
   };

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 });
-
+  menuButton.addClass('vjs-quality-selector');
-  if (qualities.length < 2 && (!tech || !tech.vhs)) {
-    return;
-  }
-
   videojs.registerComponent('MenuButton', MenuButton);
 
-  const menuButton = new MenuButton();
+  if (!tech.vhs) {
-  menuButton.addClass('vjs-quality-selector');
+    return menuButton;
+  }
+
+  if (qualities.length < 2 && (!tech || !tech.vhs)) {
+    return menuButton;
+  }
 
   // eslint-disable-next-line consistent-return
   return menuButton;