Bug 842782 - p1: lock fullscreen video orientation. r?ralin draft
authorJohn Lin <jolin@mozilla.com>
Thu, 17 Aug 2017 11:07:13 +0800
changeset 650274 15f7d80a9e930cb2fc50e15b194d426906735b33
parent 650273 ed85225d155bf3b907dc60fcfa17f37c2e396b78
child 650275 db31b8884dec557ba005f0c9bfd01eca94f042bd
push id75327
push userbmo:jolin@mozilla.com
push dateTue, 22 Aug 2017 05:22:28 +0000
reviewersralin
bugs842782
milestone57.0a1
Bug 842782 - p1: lock fullscreen video orientation. r?ralin - introduce a property to enable/disable orientation lock. Initially disabled. - lock orienation when fullscreen state change if enabled - use video aspect ratio to choose which orientation to lock MozReview-Commit-ID: 3HP60YNbWcc
toolkit/content/widgets/videocontrols.xml
--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -184,16 +184,22 @@
         </div>
         <div anonid="textTrackList" class="textTrackList" hidden="true" offlabel="&closedCaption.off;"></div>
       </div>
     </div>
   </xbl:content>
 
   <implementation>
 
+  <property name="shouldLockOrientation" readonly="true">
+    <getter><![CDATA[
+      return false;
+    ]]></getter>
+  </property>
+
   <constructor>
     <![CDATA[
     this.isTouchControls = false;
     this.randomID = 0;
 
     this.Utils = {
       debug: false,
       video: null,
@@ -1229,22 +1235,45 @@
         if (this.isVideoInFullScreen()) {
           this.fullscreenButton.setAttribute("fullscreened", "true");
         } else {
           this.fullscreenButton.removeAttribute("fullscreened");
         }
       },
 
       onFullscreenChange() {
+        this.updateOrientationState(this.isVideoInFullScreen());
         if (this.isVideoInFullScreen()) {
           Utils._hideControlsTimeout = setTimeout(this._hideControlsFn, this.HIDE_CONTROLS_TIMEOUT_MS);
         }
         this.setFullscreenButtonState();
       },
 
+      updateOrientationState(lock) {
+        if (!this.videocontrols.shouldLockOrientation) {
+          return;
+        }
+        if (lock) {
+          if (!!this.video.mozOrientationLocked) {
+            return;
+          }
+          let dimenDiff = this.video.videoWidth - this.video.videoHeight;
+          if (dimenDiff > 0) {
+            this.video.mozOrientationLocked = window.screen.mozLockOrientation('landscape');
+          } else if (dimenDiff < 0) {
+            this.video.mozOrientationLocked = window.screen.mozLockOrientation('portrait');
+          } else {
+            this.video.mozOrientationLocked = window.screen.mozLockOrientation(window.screen.orientation);
+          }
+        } else if (!!this.video.mozOrientationLocked) {
+          window.screen.mozUnlockOrientation();
+          this.video.mozOrientationLocked = false;
+        }
+      },
+
       clickToPlayClickHandler(e) {
         if (e.button != 0) {
           return;
         }
         if (this.hasError() && !this.suppressError) {
           // Errors that can be dismissed should be placed here as we discover them.
           if (this.video.error.code != this.video.error.MEDIA_ERR_ABORTED) {
             return;
@@ -1829,16 +1858,17 @@
     };
 
     this.Utils.init(this);
     ]]>
   </constructor>
   <destructor>
     <![CDATA[
     this.Utils.terminateEventListeners();
+    this.Utils.updateOrientationState(false);
     // randomID used to be a <field>, which meant that the XBL machinery
     // undefined the property when the element was unbound. The code in
     // this file actually depends on this, so now that randomID is an
     // expando, we need to make sure to explicitly delete it.
     delete this.randomID;
     ]]>
   </destructor>