From a87213d827e6e7be5f91a76ec85b0f92050a80c8 Mon Sep 17 00:00:00 2001
From: Wassim Gharbi <gharbiw@google.com>
Date: Thu, 20 Jul 2017 14:51:11 -0700
Subject: [PATCH] Implemented enterFullscreen and exitFullscreen for all video
 players + bug fixes and iOS compatibility

---
 extensions/amp-3q-player/0.1/amp-3q-player.js | 16 +++-
 .../amp-brid-player/0.1/amp-brid-player.js    | 16 +++-
 .../amp-dailymotion/0.1/amp-dailymotion.js    | 30 +++++++-
 extensions/amp-ima-video/0.1/amp-ima-video.js | 18 ++++-
 .../0.1/amp-nexxtv-player.js                  | 16 +++-
 .../0.1/amp-ooyala-player.js                  | 16 +++-
 extensions/amp-video/0.1/amp-video.js         | 76 +++++++++++--------
 extensions/amp-youtube/0.1/amp-youtube.js     | 23 +++++-
 src/dom.js                                    | 44 ++++++++---
 src/service/video-manager-impl.js             | 24 ++----
 src/video-interface.js                        | 16 ++++
 11 files changed, 227 insertions(+), 68 deletions(-)

diff --git a/extensions/amp-3q-player/0.1/amp-3q-player.js b/extensions/amp-3q-player/0.1/amp-3q-player.js
index 564def9fc1428..dd6dce4e07d6e 100644
--- a/extensions/amp-3q-player/0.1/amp-3q-player.js
+++ b/extensions/amp-3q-player/0.1/amp-3q-player.js
@@ -17,7 +17,7 @@
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {tryParseJson} from '../../../src/json';
 import {user, dev} from '../../../src/log';
-import {removeElement} from '../../../src/dom';
+import {removeElement, fullscreenEnter, fullscreenExit} from '../../../src/dom';
 import {
   installVideoManagerForDoc,
 } from '../../../src/service/video-manager-impl';
@@ -215,6 +215,20 @@ class Amp3QPlayer extends AMP.BaseElement {
     this.sdnPostMessage_('hideControlbar');
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    fullscreenEnter(this.iframe_);
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    fullscreenExit(this.iframe_);
+  }
+
   /** @override */
   getCurrentTime() {
     // Not supported.
diff --git a/extensions/amp-brid-player/0.1/amp-brid-player.js b/extensions/amp-brid-player/0.1/amp-brid-player.js
index 91adc4584abca..dee633ea503b8 100644
--- a/extensions/amp-brid-player/0.1/amp-brid-player.js
+++ b/extensions/amp-brid-player/0.1/amp-brid-player.js
@@ -22,7 +22,7 @@ import {
 import {VideoEvents} from '../../../src/video-interface';
 import {Services} from '../../../src/services';
 import {assertAbsoluteHttpOrHttpsUrl} from '../../../src/url';
-import {removeElement} from '../../../src/dom';
+import {removeElement, fullscreenEnter, fullscreenExit} from '../../../src/dom';
 import {getData, listen} from '../../../src/event-helper';
 
 /**
@@ -286,6 +286,20 @@ class AmpBridPlayer extends AMP.BaseElement {
     // Not supported.
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    fullscreenEnter(this.iframe_);
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    fullscreenExit(this.iframe_);
+  }
+
   /** @override */
   getCurrentTime() {
     // Not supported.
diff --git a/extensions/amp-dailymotion/0.1/amp-dailymotion.js b/extensions/amp-dailymotion/0.1/amp-dailymotion.js
index e4a7f11502672..174646c077e22 100644
--- a/extensions/amp-dailymotion/0.1/amp-dailymotion.js
+++ b/extensions/amp-dailymotion/0.1/amp-dailymotion.js
@@ -28,7 +28,11 @@ import {
     addParamsToUrl,
     addParamToUrl,
 } from '../../../src/url';
-import {getDataParamsFromAttributes} from '../../../src/dom';
+import {
+  getDataParamsFromAttributes,
+  fullscreenEnter,
+  fullscreenExit,
+} from '../../../src/dom';
 
 /**
  * Player events reverse-engineered from the Dailymotion API
@@ -337,6 +341,30 @@ class AmpDailymotion extends AMP.BaseElement {
     // Not supported
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    const platform = Services.platformFor(this.win);
+    if (platform.isSafari() || platform.isIos()) {
+      this.sendCommand_('fullscreen', [true]);
+    } else {
+      fullscreenEnter(this.iframe_);
+    }
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    const platform = Services.platformFor(this.win);
+    if (platform.isSafari() || platform.isIos()) {
+      this.sendCommand_('fullscreen', [false]);
+    } else {
+      fullscreenExit(this.iframe_);
+    }
+  }
+
   /** @override */
   getCurrentTime() {
     // Not supported.
diff --git a/extensions/amp-ima-video/0.1/amp-ima-video.js b/extensions/amp-ima-video/0.1/amp-ima-video.js
index 67d282cbb5b5f..d8a75184272b1 100644
--- a/extensions/amp-ima-video/0.1/amp-ima-video.js
+++ b/extensions/amp-ima-video/0.1/amp-ima-video.js
@@ -30,7 +30,7 @@ import {
   listen,
 } from '../../../src/event-helper';
 import {dict} from '../../../src/utils/object';
-import {removeElement} from '../../../src/dom';
+import {removeElement, fullscreenEnter, fullscreenExit} from '../../../src/dom';
 import {user} from '../../../src/log';
 import {VideoEvents} from '../../../src/video-interface';
 import {Services} from '../../../src/services';
@@ -273,6 +273,22 @@ class AmpImaVideo extends AMP.BaseElement {
     // Not supported.
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    // TODO(@aghassemi) Make internal <video> element go fullscreen instead
+    // using postMessages
+    fullscreenEnter(this.iframe_);
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    fullscreenExit(this.iframe_);
+  }
+
   /** @override */
   getCurrentTime() {
     // Not supported.
diff --git a/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js b/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js
index 1f65839a1da2e..288686dd738bd 100644
--- a/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js
+++ b/extensions/amp-nexxtv-player/0.1/amp-nexxtv-player.js
@@ -22,7 +22,7 @@ import {user} from '../../../src/log';
 import {
   installVideoManagerForDoc,
 } from '../../../src/service/video-manager-impl';
-import {removeElement} from '../../../src/dom';
+import {removeElement, fullscreenEnter, fullscreenExit} from '../../../src/dom';
 import {getData, listen} from '../../../src/event-helper';
 import {isObject} from '../../../src/types';
 import {VideoEvents} from '../../../src/video-interface';
@@ -241,6 +241,20 @@ class AmpNexxtvPlayer extends AMP.BaseElement {
   hideControls() {
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    fullscreenEnter(this.iframe_);
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    fullscreenExit(this.iframe_);
+  }
+
   /** @override */
   getCurrentTime() {
     // Not supported.
diff --git a/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js b/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js
index e31235edfa177..65fda90d64a7c 100644
--- a/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js
+++ b/extensions/amp-ooyala-player/0.1/amp-ooyala-player.js
@@ -17,7 +17,7 @@
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {tryParseJson} from '../../../src/json';
 import {user} from '../../../src/log';
-import {removeElement} from '../../../src/dom';
+import {removeElement, fullscreenEnter, fullscreenExit} from '../../../src/dom';
 import {
   installVideoManagerForDoc,
 } from '../../../src/service/video-manager-impl';
@@ -226,6 +226,20 @@ class AmpOoyalaPlayer extends AMP.BaseElement {
   hideControls() {
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    fullscreenEnter(this.iframe_);
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    fullscreenExit(this.iframe_);
+  }
+
   /** @override */
   getCurrentTime() {
     // Not supported.
diff --git a/extensions/amp-video/0.1/amp-video.js b/extensions/amp-video/0.1/amp-video.js
index 56dbb1c655547..6ec2ce789c6f4 100644
--- a/extensions/amp-video/0.1/amp-video.js
+++ b/extensions/amp-video/0.1/amp-video.js
@@ -14,7 +14,7 @@
   * limitations under the License.
   */
 
-import {elementByTag} from '../../../src/dom';
+import {elementByTag, fullscreenEnter, fullscreenExit} from '../../../src/dom';
 import {listen} from '../../../src/event-helper';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {getMode} from '../../../src/mode';
@@ -176,9 +176,9 @@ class AmpVideo extends AMP.BaseElement {
     });
   }
 
-    /**
-     * @private
-     */
+  /**
+   * @private
+   */
   installEventHandlers_() {
     const video = dev().assertElement(this.video_);
     this.forwardEvents([VideoEvents.PLAYING, VideoEvents.PAUSE], video);
@@ -194,37 +194,37 @@ class AmpVideo extends AMP.BaseElement {
     });
   }
 
-    /** @override */
+  /** @override */
   pauseCallback() {
     if (this.video_) {
       this.video_.pause();
     }
   }
 
-    /** @private */
+  /** @private */
   isVideoSupported_() {
     return !!this.video_.play;
   }
 
-    // VideoInterface Implementation. See ../src/video-interface.VideoInterface
+  // VideoInterface Implementation. See ../src/video-interface.VideoInterface
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   supportsPlatform() {
     return this.isVideoSupported_();
   }
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   isInteractive() {
     return this.element.hasAttribute('controls');
   }
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   play(unusedIsAutoplay) {
     const ret = this.video_.play();
 
@@ -239,41 +239,55 @@ class AmpVideo extends AMP.BaseElement {
     }
   }
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   pause() {
     this.video_.pause();
   }
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   mute() {
     this.video_.muted = true;
   }
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   unmute() {
     this.video_.muted = false;
   }
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   showControls() {
     this.video_.controls = true;
   }
 
-    /**
-     * @override
-     */
+  /**
+   * @override
+   */
   hideControls() {
     this.video_.controls = false;
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    fullscreenEnter(this.video_);
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    fullscreenExit(this.video_);
+  }
+
   /** @override */
   getCurrentTime() {
     return this.video_.currentTime;
diff --git a/extensions/amp-youtube/0.1/amp-youtube.js b/extensions/amp-youtube/0.1/amp-youtube.js
index 7308f588af3cb..b87a5d2235d59 100644
--- a/extensions/amp-youtube/0.1/amp-youtube.js
+++ b/extensions/amp-youtube/0.1/amp-youtube.js
@@ -14,9 +14,13 @@
  * limitations under the License.
  */
 
-import {getDataParamsFromAttributes} from '../../../src/dom';
+import {
+  getDataParamsFromAttributes,
+  removeElement,
+  fullscreenEnter,
+  fullscreenExit,
+} from '../../../src/dom';
 import {tryParseJson} from '../../../src/json';
-import {removeElement} from '../../../src/dom';
 import {getData, listen} from '../../../src/event-helper';
 import {isLayoutSizeDefined} from '../../../src/layout';
 import {dev, user} from '../../../src/log';
@@ -433,6 +437,21 @@ class AmpYoutube extends AMP.BaseElement {
     // Not supported.
   }
 
+  /**
+   * @override
+   */
+  fullscreenEnter() {
+    fullscreenEnter(this.iframe_);
+  }
+
+  /**
+   * @override
+   */
+  fullscreenExit() {
+    fullscreenExit(this.iframe_);
+  }
+
+
   /** @override */
   getCurrentTime() {
     // Not supported.
diff --git a/src/dom.js b/src/dom.js
index cc5c39a455377..9e414c2598734 100644
--- a/src/dom.js
+++ b/src/dom.js
@@ -755,11 +755,14 @@ export function whenUpgradedToCustomElement(element) {
  * @param {Element} element
  */
 export function fullscreenEnter(element) {
-  const requestFs = element.webkitEnterFullscreen
+  const requestFs = element.requestFullscreen
+   || element.requestFullScreen
+   || element.webkitRequestFullscreen
    || element.webkitRequestFullScreen
-   || element.requestFullscreen
    || element.webkitEnterFullscreen
+   || element.webkitEnterFullScreen
    || element.msRequestFullscreen
+   || element.msRequestFullScreen
    || element.mozRequestFullscreen
    || element.mozRequestFullScreen;
   if (requestFs) {
@@ -770,16 +773,33 @@ export function fullscreenEnter(element) {
 /**
  * Replacement for `Document.exitFullscreen()` method.
  * https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen
- * @param {Document} doc
- */
-export function fullscreenExit(doc) {
-  const exitFs = doc.webkitCancelFullScreen
-  || doc.cancelFullScreen
-  || doc.webkitExitFullscreen
-  || doc.exitFullscreen
-  || doc.mozCancelFullScreen
-  || doc.msExitFullscreen;
+ * @param {Element} element
+ */
+export function fullscreenExit(element) {
+  let exitFs = element.cancelFullScreen
+               || element.exitFullscreen
+               || element.exitFullScreen
+               || element.webkitExitFullscreen
+               || element.webkitExitFullScreen
+               || element.webkitCancelFullScreen
+               || element.mozCancelFullScreen
+               || element.msExitFullscreen;
   if (exitFs) {
-    exitFs.call(doc);
+    exitFs.call(element);
+    return;
+  }
+  if (element.ownerDocument) {
+    exitFs = element.ownerDocument.cancelFullScreen
+             || element.ownerDocument.exitFullscreen
+             || element.ownerDocument.exitFullScreen
+             || element.ownerDocument.webkitExitFullscreen
+             || element.ownerDocument.webkitExitFullScreen
+             || element.ownerDocument.webkitCancelFullScreen
+             || element.ownerDocument.mozCancelFullScreen
+             || element.ownerDocument.msExitFullscreen;
+  }
+  if (exitFs) {
+    exitFs.call(element.ownerDocument);
+    return;
   }
 }
diff --git a/src/service/video-manager-impl.js b/src/service/video-manager-impl.js
index db8496cdf17fe..0ae27c3c5b447 100644
--- a/src/service/video-manager-impl.js
+++ b/src/service/video-manager-impl.js
@@ -17,7 +17,7 @@
 
 import {ActionTrust} from '../action-trust';
 import {VideoSessionManager} from './video-session-manager';
-import {removeElement, isRTL} from '../dom';
+import {removeElement, scopedQuerySelector, isRTL} from '../dom';
 import {listen, listenOncePromise} from '../event-helper';
 import {dev} from '../log';
 import {getMode} from '../mode';
@@ -38,11 +38,6 @@ import {
   PositionObserverFidelity,
   PositionInViewportEntryDef,
 } from './position-observer-impl';
-import {
-  scopedQuerySelector,
-  fullscreenEnter,
-  fullscreenExit,
-} from '../dom';
 import {layoutRectLtwh, RelativePositions} from '../layout-rect';
 import * as st from '../style';
 
@@ -215,8 +210,8 @@ export class VideoManager {
 
     // TODO(@wassgha) Check support status for orientation API and update
     // this as needed.
-    const screen = this.ampdoc_.win.screen;
-    const win = this.ampdoc_.win;
+    const win = this.ampdoc.win;
+    const screen = win.screen;
     const handleOrientationChange = () => {
       let isLandscape;
       if (screen && 'orientation' in screen) {
@@ -548,16 +543,11 @@ class VideoEntry {
    * @private
    */
   orientationChanged_(isLandscape) {
-    if (!viewerForDoc(this.ampdoc_).isVisible()) {
-      return;
-    }
     // Put the video in/out of fullscreen depending on orientation
     if (!isLandscape && this.isFullscreenByOrientationChange_) {
     	this.exitFullscreen_();
-    }
-    if (isLandscape
-        && this.isVisible_
-        && this.getPlayingState() == PlayingStates.PLAYING_MANUAL) {
+    } else if (this.getPlayingState() == PlayingStates.PLAYING_MANUAL
+               && this.isVisible_) {
     	this.enterFullscreen_();
     }
   }
@@ -567,7 +557,7 @@ class VideoEntry {
    * @private
    */
   enterFullscreen_() {
-    fullscreenEnter(this.internalElement_);
+    this.video.fullscreenEnter();
     this.isFullscreenByOrientationChange_ = true;
   }
 
@@ -576,7 +566,7 @@ class VideoEntry {
    * @private
    */
   exitFullscreen_() {
-    fullscreenExit(this.ampdoc_.win.document);
+    this.video.fullscreenExit();
     this.isFullscreenByOrientationChange_ = false;
   }
 
diff --git a/src/video-interface.js b/src/video-interface.js
index d9aa6991d2a4f..f8e56ee1c78ec 100644
--- a/src/video-interface.js
+++ b/src/video-interface.js
@@ -118,6 +118,22 @@ export class VideoInterface {
    */
   isInViewport() {}
 
+  /**
+   * Enables fullscreen on the internal video element
+   * NOTE: While implementing, keep in mind that Safari/iOS do not allow taking
+   * any element other than <video> to fullscreen, if the player has an internal
+   * implementation of fullscreen (flash for example) then check
+   * if Services.platformFor(this.win).isSafari is true and use the internal
+   * implementation instead. If not, it is recommended to take the iframe
+   * to fullscreen using fullscreenEnter from dom.js
+   */
+  fullscreenEnter() {}
+
+  /**
+   * Quits fullscreen mode
+   */
+  fullscreenExit() {}
+
   /**
    * Automatically comes from {@link ./base-element.BaseElement}
    *