feat: Audio Only Mode

docs/guides/options.md

@@ -21,6 +21,7 @@
   * [width](#width)
 * [Video.js-specific Options](#videojs-specific-options)
   * [aspectRatio](#aspectratio)
+  * [audioOnlyMode](#audioonlymode)
   * [autoSetup](#autosetup)
   * [breakpoints](#breakpoints)
   * [children](#children)
@@ -181,6 +182,13 @@ Puts the player in [fluid](#fluid) mode and the value is used when calculating t
 
 Alternatively, the classes `vjs-16-9`, `vjs-9-16`, `vjs-4-3` or `vjs-1-1` can be added to the player.
 
+### `audioOnlyMode`
+
+> Type: `boolean`
+> Default: `false`
+
+If set to true, it hides all player components except the control bar, as well as any specific controls that are needed only for video. This option can be set to `true` or `false` by calling `audioOnlyMode([true|false])` at runtime.
+
 ### `autoSetup`
 
 > Type: `boolean`

src/css/components/_captions.scss

@@ -1,3 +1,7 @@
 .video-js .vjs-captions-button .vjs-icon-placeholder {
   @extend .vjs-icon-captions;
 }
+
+.video-js.vjs-audio-only-mode .vjs-captions-button {
+  display: none;
+}

src/css/components/_control-bar.scss

@@ -10,8 +10,9 @@
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 }
 
-// Video has started playing
-.vjs-has-started .vjs-control-bar {
+// Video has started playing or we are in audioOnlyMode
+.vjs-has-started .vjs-control-bar,
+.vjs-audio-only-mode .vjs-control-bar {
   @include display-flex;
   visibility: visible;
   opacity: 1;
@@ -41,8 +42,9 @@
   display: none !important;
 }
 
-// Don't hide the control bar if it's audio
-.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+// Don't hide the control bar if it's audio or in audioOnlyMode
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
+.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
   opacity: 1;
   visibility: visible;
 }

src/css/components/_descriptions.scss

@@ -1,3 +1,7 @@
 .video-js .vjs-descriptions-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio-description;
 }
+
+.video-js.vjs-audio-only-mode .vjs-descriptions-button {
+  display: none;
+}

src/css/components/_fullscreen.scss

@@ -6,6 +6,11 @@
     @extend .vjs-icon-fullscreen-enter;
   }
 }
+
+.video-js.vjs-audio-only-mode .vjs-fullscreen-control {
+  display: none;
+}
+
 // Switch to the exit icon when the player is in fullscreen
 .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
   @extend .vjs-icon-fullscreen-exit;

src/css/components/_layout.scss

@@ -111,6 +111,10 @@
   height: 100%;
 }
 
+.video-js.vjs-audio-only-mode .vjs-tech {
+  display: none;
+}
+
 // Fullscreen Styles
 body.vjs-full-window {
   padding: 0;

src/css/components/_picture-in-picture.scss

@@ -6,6 +6,11 @@
     @extend .vjs-icon-picture-in-picture-enter;
   }
 }
+
+.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control {
+  display: none;
+}
+
 // Switch to the exit icon when the player is in Picture-in-Picture
 .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
   @extend .vjs-icon-picture-in-picture-exit;

src/css/components/_subs-caps.scss

@@ -25,3 +25,7 @@
   font-size: 1.5em;
   line-height: inherit;
 }
+
+.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
+  display: none;
+}

src/js/player.js

@@ -395,6 +395,15 @@ class Player extends Component {
     // Init debugEnabled_
     this.debugEnabled_ = false;
 
+    // Init state audioOnlyMode_
+    this.audioOnlyMode_ = false;
+
+    // Init state audioOnlyCache_
+    this.audioOnlyCache_ = {
+      playerHeight: null,
+      hiddenChildren: []
+    };
+
     // if the global option object was accidentally blown away by
     // someone, bail early with an informative error
     if (!this.options_ ||
@@ -574,6 +583,7 @@ class Player extends Component {
 
     this.breakpoints(this.options_.breakpoints);
     this.responsive(this.options_.responsive);
+    this.audioOnlyMode(this.options_.audioOnlyMode);
   }
 
   /**
@@ -4290,6 +4300,69 @@ class Player extends Component {
     return !!this.isAudio_;
   }
 
+  /**
+   * Get the current audioOnlyMode state or set audioOnlyMode to true or false.
+   *
+   * Setting this to `true` will hide all player components except the control bar,
+   * as well as control bar components needed only for video.
+   *
+   * @param {boolean} [value]
+   *         The value to set audioOnlyMode to.
+   *
+   * @return {boolean}
+   *         True if audioOnlyMode is on, false otherwise.
+   */
+  audioOnlyMode(value) {
+    if (typeof value !== 'boolean' || value === this.audioOnlyMode_) {
+      return this.audioOnlyMode_;
+    }
+
+    if (value === true) {
+      // Update styling immediately so we can get the control bar's height
+      this.addClass('vjs-audio-only-mode');
+
+      const playerChildren = this.children();
+      const controlBar = this.getChild('ControlBar');
+      const controlBarHeight = controlBar && controlBar.height();
+
+      // Hide all player components except the control bar. Control bar components
+      // needed only for video are hidden with CSS
+      playerChildren.forEach(child => {
+        if (child === controlBar) {
+          return;
+        }
+
+        if (child.el_ && !child.hasClass('vjs-hidden')) {
+          child.hide();
+
+          this.audioOnlyCache_.hiddenChildren.push(child);
+        }
+      });
+
+      this.audioOnlyCache_.playerHeight = this.height();
+
+      // Set the player height the same as the control bar
+      this.height(controlBarHeight);
+
+      // Fullscreen is not supported in audioOnlyMode, so exit if we need to
+      if (this.isFullscreen()) {
+        this.exitFullscreen();
+      }
+    } else {
+      this.removeClass('vjs-audio-only-mode');
+
+      // Show player components that were previously hidden
+      this.audioOnlyCache_.hiddenChildren.forEach(child => child.show());
+
+      // Reset player height
+      this.height(this.audioOnlyCache_.playerHeight);
+    }
+
+    this.audioOnlyMode_ = value;
+
+    this.trigger('audioonlymodechange');
+  }
+
   /**
    * A helper method for adding a {@link TextTrack} to our
    * {@link TextTrackList}.
@@ -5096,7 +5169,8 @@ Player.prototype.options_ = {
   },
 
   breakpoints: {},
-  responsive: false
+  responsive: false,
+  audioOnlyMode: false
 };
 
 [