Fix: Fix inheritance and add bindings for controls options (#523)

src/lib/viewers/media/MediaControls.js

@@ -62,10 +62,6 @@ class MediaControls extends EventEmitter {
         this.subtitlesButtonEl = this.wrapperEl.querySelector('.bp-media-cc-icon');
         this.setLabel(this.subtitlesButtonEl, __('media_subtitles_cc'));
 
-        this.setDuration(this.mediaEl.duration);
-        this.setupSettings();
-        this.setupScrubbers();
-
         // Bind context for callbacks
         this.mouseenterHandler = this.mouseenterHandler.bind(this);
         this.mouseleaveHandler = this.mouseleaveHandler.bind(this);
@@ -83,7 +79,13 @@ class MediaControls extends EventEmitter {
         this.filmstripShowHandler = this.filmstripShowHandler.bind(this);
         this.filmstripHideHandler = this.filmstripHideHandler.bind(this);
         this.timeScrubbingStopHandler = this.timeScrubbingStopHandler.bind(this);
+        this.handleRate = this.handleRate.bind(this);
+        this.handleQuality = this.handleQuality.bind(this);
+        this.handleAutoplay = this.handleAutoplay.bind(this);
 
+        this.setDuration(this.mediaEl.duration);
+        this.setupSettings();
+        this.setupScrubbers();
         this.attachEventHandlers();
     }
 

src/lib/viewers/media/VideoBaseViewer.js

@@ -171,6 +171,13 @@ class VideoBaseViewer extends MediaBaseViewer {
         this.playButtonEl.addEventListener('click', this.togglePlay);
     }
 
+    /**
+     * @inheritdoc
+     */
+    showLoadingIcon() {
+        super.showLoadingIcon();
+    }
+
     /**
      * Overriden method to handle resizing of the window.
      * Adjusts the size of the time scrubber since its
@@ -209,6 +216,13 @@ class VideoBaseViewer extends MediaBaseViewer {
             this.containerEl.classList.add(CLASS_DARK);
         }
     }
+
+    /**
+     * @inheritdoc
+     */
+    onKeydown(key) {
+        return super.onKeydown(key);
+    }
 }
 
 export default VideoBaseViewer;