fix(FEC-10537): When multi players on page, isFullscreen() API return…

…s true for all of them (#498)

Issue: the isFullscreen() API checks the document element.
Solution: local state for each player and verification of fullscreen promise resolved

src/fullscreen/fullscreen-controller.js

@@ -19,6 +19,8 @@ const EXIT_PIP_TIMEOUT: number = 1000;
  */
 class FullscreenController {
   _player: Player;
+  // Flag to indicate that player is in fullscreen(when different element on fullscreen - api return correct state).
+  _isInFullscreen: boolean = false;
   _isInBrowserFullscreen: boolean;
   _eventManager: EventManager;
   // Flag to overcome browsers which supports more than one fullscreenchange event
@@ -65,7 +67,7 @@ class FullscreenController {
    */
   isFullscreen(): boolean {
     return (
-      this._isNativeFullscreen() ||
+      (this._isNativeFullscreen() && this._isInFullscreen) ||
       //indicator for manually full screen in ios - with css flag
       this._isInBrowserFullscreen
     );
@@ -132,45 +134,72 @@ class FullscreenController {
   }
 
   /**
-   * request fullscreen function to all browsers
+   * get native fullscreen function response
    *
    * @param {HTMLElement} fullScreenElement - element to enter fullscreen
    * @memberof FullScreenController
    * @returns {void}
    */
-  _requestFullscreen(fullScreenElement: HTMLElement) {
-    if (this._player.isInPictureInPicture()) {
-      this._player.exitPictureInPicture();
-    }
+  _nativeEnterFullScreen(fullScreenElement: HTMLElement) {
     if (typeof fullScreenElement.requestFullscreen === 'function') {
-      fullScreenElement.requestFullscreen();
+      return fullScreenElement.requestFullscreen();
     } else if (typeof fullScreenElement.mozRequestFullScreen === 'function') {
-      fullScreenElement.mozRequestFullScreen();
+      return fullScreenElement.mozRequestFullScreen();
     } else if (typeof fullScreenElement.webkitRequestFullScreen === 'function') {
-      fullScreenElement.webkitRequestFullScreen();
+      return fullScreenElement.webkitRequestFullScreen();
     } else if (typeof fullScreenElement.msRequestFullscreen === 'function') {
-      fullScreenElement.msRequestFullscreen();
+      return fullScreenElement.msRequestFullscreen();
     }
   }
 
   /**
-   * request exit from fullscreen function for all browsers
+   * request fullscreen function to all browsers
    *
+   * @param {HTMLElement} fullScreenElement - element to enter fullscreen
    * @memberof FullScreenController
    * @returns {void}
    */
-  _requestExitFullscreen(): void {
+  _requestFullscreen(fullScreenElement: HTMLElement) {
+    if (this._player.isInPictureInPicture()) {
+      this._player.exitPictureInPicture();
+    }
+    Promise.resolve(this._nativeEnterFullScreen(fullScreenElement)).then(
+      () => (this._isInFullscreen = true),
+      () => {}
+    );
+  }
+
+  /**
+   * get native fullscreen function response
+   *
+   * @memberof FullScreenController
+   * @returns {void}
+   */
+  _nativeExitFullScreen() {
     if (typeof document.exitFullscreen === 'function') {
-      document.exitFullscreen();
+      return document.exitFullscreen();
     } else if (typeof document.webkitExitFullscreen === 'function') {
-      document.webkitExitFullscreen();
+      return document.webkitExitFullscreen();
     } else if (typeof document.mozCancelFullScreen === 'function') {
-      document.mozCancelFullScreen();
+      return document.mozCancelFullScreen();
     } else if (typeof document.msExitFullscreen === 'function') {
-      document.msExitFullscreen();
+      return document.msExitFullscreen();
     }
   }
 
+  /**
+   * request exit from fullscreen function for all browsers
+   *
+   * @memberof FullScreenController
+   * @returns {void}
+   */
+  _requestExitFullscreen(): void {
+    Promise.resolve(this._nativeExitFullScreen()).then(
+      () => (this._isInFullscreen = false),
+      () => {}
+    );
+  }
+
   /**
    * enter from ios manually method enter to fullscreen with css
    * @memberof FullScreenController

test/src/fullscreen/fullscreen-controller.spec.js

@@ -63,6 +63,8 @@ describe('check inBrowserFullscreen config', function () {
     sandbox.stub(player._fullscreenController, '_isNativeFullscreen').callsFake(() => {
       return true;
     });
+    // indicator for specific player if it's in fullscreen or another element in fullscreen
+    player._fullscreenController._isInFullscreen = true;
     player.isFullscreen().should.be.true;
   });
 
@@ -76,12 +78,20 @@ describe('check inBrowserFullscreen config', function () {
     sandbox.stub(player._fullscreenController, '_isNativeFullscreen').callsFake(() => {
       return true;
     });
-    player.enterFullscreen();
+    // indicator for specific player if it's in fullscreen or another element in fullscreen
+    player._fullscreenController._isInFullscreen = true;
     player.isFullscreen().should.be.true;
+
+    // indicator for specific player if it's in fullscreen or another element in fullscreen
+    player._fullscreenController._isInFullscreen = false;
+    player.isFullscreen().should.be.false;
+
     sandbox.restore();
     sandbox.stub(player._fullscreenController, '_isNativeFullscreen').callsFake(() => {
       return false;
     });
+
+    player._fullscreenController._isInFullscreen = false;
     player.isFullscreen().should.be.false;
   });
 });