Resolve issue https://github.com/owncast/owncast/issues/1044

- use built-in videojs font icon instead
- remove button clickhandler override to make button work on mobile

webroot/js/components/player.js

@@ -168,8 +168,6 @@ class OwncastPlayer {
             MenuButtonClass.call(this, player);
           },
 
-          handleClick: function () {},
-
           createItems: function () {
             const defaultAutoItem = new MenuItem(player, {
               selectable: true,
@@ -224,7 +222,6 @@ class OwncastPlayer {
           {},
           player.controlBar.children_.length - 2
         );
-
         this.qualityMenuButton = menuButton;
       }.bind(this)
     );

webroot/styles/video.css

@@ -14,8 +14,13 @@ video.video-js {
   content: url("../img/airplay.png");
 }
 
+.vjs-quality-selector .vjs-icon-placeholder {
+  font-family: VideoJS;
+  font-weight: 400;
+  font-style: normal;
+}
 .vjs-quality-selector .vjs-icon-placeholder::before {
-  content: url("../img/video-settings.png");
+  content: "\f110";
 }
 
 .vjs-big-play-button {