Started working on the rotate to fullscreen

src/service/video-manager-impl.js

@@ -112,6 +112,7 @@ export class VideoManager {
     this.entries_ = this.entries_ || [];
     const entry = new VideoEntry(this.ampdoc_, video);
     this.maybeInstallVisibilityObserver_(entry);
+    this.maybeInstallOrientationObserver_(entry);
     this.entries_.push(entry);
   }
 
@@ -146,7 +147,8 @@ export class VideoManager {
     // TODO(aghassemi): Remove this later. For now, the visibility observer
     // only matters for autoplay videos so no point in monitoring arbitrary
     // videos yet.
-    if (!entry.video.element.hasAttribute(VideoAttributes.AUTOPLAY)) {
+    if (!entry.video.element.hasAttribute(VideoAttributes.AUTOPLAY)
+        && !entry.video.element.hasAttribute(VideoAttributes.AUTOFULLSCREEN)) {
       return;
     }
 
@@ -172,6 +174,40 @@ export class VideoManager {
     }
   }
 
+
+  /**
+   * Install the necessary listeners to be notified when the user changes
+   * the orientation of their device
+   *
+   * @param {VideoEntry} entry
+   * @private
+   */
+  maybeInstallOrientationObserver_(entry) {
+    // TODO(@wassgha): Remove this later. For now, the orientation observer
+    // is only useful for automatically putting videos in fullscreen.
+    if (!entry.video.element.hasAttribute(VideoAttributes.AUTOFULLSCREEN)) {
+      return;
+    }
+
+    // TODO(@wassgha) Check support status for orientation API and updateVisibility
+    // this as needed.
+    //
+    // Chrome apparently considers 'orientationchange' to be an untrusted
+    // event, while 'change' on screen.orientation is considered a user
+    // interaction
+    if (screen.orientation !== undefined) {
+      listen(screen.orientation, 'change', () => {
+        entry.orientationChanged_();
+      });
+    } else {
+      // iOS Safari does not have screen.orientation but classifies
+      // 'orientationchange' as a user interaction.
+      listen(this.ampdoc_.win, 'orientationchange', () => {
+        entry.orientationChanged_();
+      });
+    }
+  }
+
   /**
    * Returns the entry in the video manager corresponding to the video
    * provided
@@ -243,6 +279,9 @@ class VideoEntry {
     /** @private {boolean} */
     this.isVisible_ = false;
 
+    /** @private {boolean} */
+    this.isFullscreen_ = false;
+
     /** @private @const {!../service/vsync-impl.Vsync} */
     this.vsync_ = vsyncFor(ampdoc.win);
 
@@ -324,6 +363,44 @@ class VideoEntry {
     }
   }
 
+  /**
+   * Called when the orientation of the device changes
+   * @private
+   */
+  orientationChanged_() {
+
+    const vidElement = this.video.element.querySelector('iframe, video');
+
+    // Determine which implementation of the orientation angle to use
+    const angle = this.ampdoc_.win.orientation !== undefined ?
+                  this.ampdoc_.win.orientation : screen.orientation.angle;
+
+    if (this.isVisible_
+    && this.getPlayingState() == PlayingStates.PLAYING_MANUAL
+    && (Math.abs(angle) == 270 || Math.abs(angle) == 90)) {
+
+      // Determine which implementation of requestFullScreen to use
+      const requestFullScreen = vidElement.webkitEnterFullscreen
+      || vidElement.webkitRequestFullScreen || vidElement.requestFullscreen
+      || vidElement.webkitEnterFullscreen || vidElement.msRequestFullscreen
+      || vidElement.mozRequestFullScreen;
+
+      requestFullScreen.call(vidElement);
+      this.isFullscreen_ = true;
+
+    } else if (this.isFullscreen_) {
+
+      // Determine which implementation of exitFullScreen to use
+      const exitFullScreen = vidElement.webkitCancelFullscreen
+      || vidElement.webkitExitFullscreen || vidElement.exitFullscreen
+      || vidElement.mozCancelFullScreen || vidElement.msExitFullscreen;
+
+      exitFullScreen.call(vidElement);
+      this.isFullscreen_ = false;
+    }
+  }
+
+
   /**
    * Only called when visibility of a loaded video changes.
    * @private

src/video-interface.js

@@ -142,6 +142,18 @@ export const VideoAttributes = {
    *
    */
   AUTOPLAY: 'autoplay',
+  /**
+   * auto-fullscreen
+   *
+   * NOTE: experimental
+   * If enabled, this automatically expands the currently visible video to
+   * fullscreen when the user changes the device's orientation to landscape if
+   * the video was started following a user interaction (not autoplay)
+   *
+   * Dependent browser support of http://caniuse.com/#feat=screen-orientation
+   * and http://caniuse.com/#feat=fullscreen
+   */
+  AUTOFULLSCREEN: 'auto-fullscreen',
 };