refactor: switch to fullscreen.options (#6054)

docs/guides/options.md

@@ -29,7 +29,8 @@
   * [languages](#languages)
   * [nativeControlsForTouch](#nativecontrolsfortouch)
   * [notSupportedMessage](#notsupportedmessage)
-  * [fullscreenOptions](#fullscreenoptions)
+  * [fullscreen](#fullscreen)
+    * [options](#options)
   * [playbackRates](#playbackrates)
   * [plugins](#plugins)
   * [responsive](#responsive)
@@ -278,7 +279,14 @@ Explicitly set a default value for [the associated tech option](#nativecontrolsf
 
 Allows overriding the default message that is displayed when Video.js cannot play back a media source.
 
-### `fullscreenOptions`
+### `fullscreen`
+
+> Type: `Object`
+> Default: `{options: {navigationUI: 'hide'}`
+
+`fullscreen.options` can be set to pass in specific fullscreen options. At some point, it will be augmented with `element` and `handler` for more functionality.
+
+#### `options`
 
 > Type: `Object`
 > Default: `{navigationUI: 'hide'}`

src/js/player.js

@@ -562,7 +562,7 @@ class Player extends Component {
     this.off('dispose');
 
     // Make sure all player-specific document listeners are unbound. This is
-    Events.off(document, FullscreenApi.fullscreenchange, this.boundDocumentFullscreenChange_);
+    Events.off(document, this.fsApi_.fullscreenchange, this.boundDocumentFullscreenChange_);
     Events.off(document, 'keydown', this.boundFullWindowOnEscKey_);
 
     if (this.styleEl_ && this.styleEl_.parentNode) {
@@ -1996,14 +1996,13 @@ class Player extends Component {
    * when the document fschange event triggers it calls this
    */
   documentFullscreenChange_(e) {
-    const fsApi = FullscreenApi;
     const el = this.el();
-    let isFs = document[fsApi.fullscreenElement] === el;
+    let isFs = document[this.fsApi_.fullscreenElement] === el;
 
     if (!isFs && el.matches) {
-      isFs = el.matches(':' + fsApi.fullscreen);
+      isFs = el.matches(':' + this.fsApi_.fullscreen);
     } else if (!isFs && el.msMatchesSelector) {
-      isFs = el.msMatchesSelector(':' + fsApi.fullscreen);
+      isFs = el.msMatchesSelector(':' + this.fsApi_.fullscreen);
     }
 
     this.isFullscreen(isFs);
@@ -2755,7 +2754,7 @@ class Player extends Component {
 
       // only pass FullscreenOptions to requestFullscreen if it isn't prefixed
       if (!this.fsApi_.prefixed) {
-        fsOptions = this.options_.fullscreenOptions;
+        fsOptions = this.options_.fullscreen && this.options_.fullscreen.options || {};
         if (fullscreenOptions !== undefined) {
           fsOptions = fullscreenOptions;
         }
@@ -4690,8 +4689,10 @@ Player.prototype.options_ = {
   // Default message to show when a video cannot be played.
   notSupportedMessage: 'No compatible source was found for this media.',
 
-  fullscreenOptions: {
-    navigationUI: 'hide'
+  fullscreen: {
+    options: {
+      navigationUI: 'hide'
+    }
   },
 
   breakpoints: {},

test/unit/player-fullscreen.test.js

@@ -15,7 +15,8 @@ const FullscreenTestHelpers = {
       fullscreenElement: 'vjsFullscreenElement',
       fullscreenEnabled: 'vjsFullscreenEnabled',
       fullscreenchange: 'vjsfullscreenchange',
-      fullscreenerror: 'vjsfullscreenerror'
+      fullscreenerror: 'vjsfullscreenerror',
+      fullscreen: 'vjsfullscreen'
     };
 
     return player;
@@ -72,7 +73,9 @@ QUnit.test('fullscreenOptions should not be passed from player options on prefix
   };
 
   const player = FullscreenTestHelpers.makePlayer(true, {
-    fullscreenOptions
+    fullscreen: {
+      options: fullscreenOptions
+    }
   });
 
   let requestFullscreenCalled = false;
@@ -99,7 +102,9 @@ QUnit.test('fullscreenOptions should be passed from player options on unprefixed
   };
 
   const player = FullscreenTestHelpers.makePlayer(false, {
-    fullscreenOptions
+    fullscreen: {
+      options: fullscreenOptions
+    }
   });
 
   let requestFullscreenCalled = false;
@@ -178,9 +183,11 @@ QUnit.test('fullscreenOptions from function args should override player options'
   };
 
   const player = FullscreenTestHelpers.makePlayer(false, {
-    fullscreenOptions: {
-      navigationUI: 'playeroptions',
-      foo: 'bar'
+    fullscreen: {
+      options: {
+        navigationUI: 'playeroptions',
+        foo: 'bar'
+      }
     }
   });