Bug 1055198 - [Video] Hide soft home key during full screen video playba...

apps/video/index.html

@@ -10,6 +10,9 @@
     <!-- this file is loaded lazily but is listed here so it gets packaged
     <link rel="stylesheet" href="shared/style/confirm.css" type="text/css" />
     -->
+    <!-- this file is loaded lazily but is listed here so it gets packaged
+    <link rel="stylesheet" href="style/confirm.css" type="text/css" />
+    -->
     <link rel="stylesheet" type="text/css" href="style/video.css" />
     <link rel="stylesheet" type="text/css" href="style/info.css" />
     <link rel="stylesheet" type="text/css" href="style/spinner.css" />

apps/video/js/video.js

@@ -215,9 +215,21 @@ function initLayout() {
     dom.playerView.classList.add('disabled');
   }
 
-  // We handle the isPortrait calculation here, because window dispatches
-  // multiple resize event with different width and height in Firefox nightly.
-  window.addEventListener('screenlayoutchange', handleScreenLayoutChange);
+  //
+  // Regarding how we handle screen orientation changes, we can use either
+  // 'screenlayoutchange' or 'resize' events. Both have negative side affects: 
+  //
+  // 'resize' -- firefox nightly dispatches multiple 'resize' events with
+  //             different width and height when using the rotate button in
+  //             the responsive design view.
+  //  'screenlayoutchange' -- causes a problem when hiding the software home
+  //                          button using mozRequestFullScreen due to the
+  //                          timing of the layout change event and the
+  //                          MediaQueryList events (bug 1062022).
+  //
+
+  //window.addEventListener('screenlayoutchange', handleScreenLayoutChange);
+  window.onresize = handleScreenLayoutChange;
 
   switchLayout(LAYOUT_MODE.list);
 }
@@ -283,6 +295,23 @@ function toggleFullscreenPlayer(e) {
                           currentVideo.metadata.rotation || 0);
 }
 
+document.addEventListener('mozfullscreenerror', function fullScreenError(e) {
+  console.error('mozfullscreenerror -- ' + e);
+});
+
+function setSoftwareHomeButtonVisibility(visible) {
+  // Currently we only support when the device has no hardware home button
+  if (!ScreenLayout.getCurrentLayout('hardwareHomeButton')) {
+    if (visible) {
+      document.mozCancelFullScreen();
+      dom.videoControls.classList.add('software-button-present');
+    }
+    else {
+      dom.playerView.mozRequestFullScreen();
+    }
+  }
+}
+
 function toggleVideoControls(e) {
   // When we change the visibility state of video controls, we need to check the
   // timeout of auto hiding.
@@ -297,9 +326,11 @@ function toggleVideoControls(e) {
       // If control not shown, tap any place to show it.
       setControlsVisibility(true);
       e.cancelBubble = true;
+      setSoftwareHomeButtonVisibility(true);
     } else if (e.originalTarget === dom.videoControls) {
       // If control is shown, only tap the empty area should show it.
       setControlsVisibility(false);
+      setSoftwareHomeButtonVisibility(false);
     }
   }
 }
@@ -386,40 +417,43 @@ function handleActivityEvents(a) {
 }
 
 function showInfoView() {
-  hideOptionsView();
-  //Get the length of the playing video
-  var length = isFinite(currentVideo.metadata.duration) ?
+  LazyLoader.load(['shared/style/confirm.css',
+                   'style/confirm.css'], function() {
+    hideOptionsView();
+    //Get the length of the playing video
+    var length = isFinite(currentVideo.metadata.duration) ?
       MediaUtils.formatDuration(currentVideo.metadata.duration) : '';
-  //Get the video size
-  var size = isFinite(currentVideo.size) ?
+    //Get the video size
+    var size = isFinite(currentVideo.size) ?
       MediaUtils.formatSize(currentVideo.size) : '';
-  //Check if video type has prefix 'video/' e.g. video/mp4
-  var type = currentVideo.type;
-  if (type) {
-    var index = currentVideo.type.indexOf('/');
-    type = index > -1 ?
-      currentVideo.type.slice(index + 1) : currentVideo.type;
-  }
-  //Get the resolution of the playing video
-  var resolution = (currentVideo.metadata.width &&
-      currentVideo.metadata.height) ? currentVideo.metadata.width + 'x' +
-      currentVideo.metadata.height : '';
-  //Create data object to fill in the fields of info overlay view
-  var data = {
-    'info-name': currentVideo.metadata.title,
-    'info-length': length,
-    'info-size': size,
-    'info-type': type,
-    'info-date': MediaUtils.formatDate(currentVideo.date),
-    'info-resolution': resolution
-  };
+    //Check if video type has prefix 'video/' e.g. video/mp4
+    var type = currentVideo.type;
+    if (type) {
+      var index = currentVideo.type.indexOf('/');
+      type = index > -1 ?
+        currentVideo.type.slice(index + 1) : currentVideo.type;
+    }
+    //Get the resolution of the playing video
+    var resolution = (currentVideo.metadata.width &&
+        currentVideo.metadata.height) ? currentVideo.metadata.width + 'x' +
+        currentVideo.metadata.height : '';
+    //Create data object to fill in the fields of info overlay view
+    var data = {
+      'info-name': currentVideo.metadata.title,
+      'info-length': length,
+      'info-size': size,
+      'info-type': type,
+      'info-date': MediaUtils.formatDate(currentVideo.date),
+      'info-resolution': resolution
+    };
 
   //Populate info overlay view
-  MediaUtils.populateMediaInfo(data);
-  // We need to disable NFC sharing when showing info view
-  setNFCSharing(false);
-  //Show the video info view
-  dom.infoView.classList.remove('hidden');
+    MediaUtils.populateMediaInfo(data);
+    // We need to disable NFC sharing when showing info view
+    setNFCSharing(false);
+    //Show the video info view
+    dom.infoView.classList.remove('hidden');
+  });
 }
 
 function hideInfoView() {
@@ -556,7 +590,8 @@ function resetCurrentVideo() {
 function deleteSelectedItems() {
   if (selectedFileNames.length === 0)
     return;
-  LazyLoader.load('shared/style/confirm.css', function() {
+  LazyLoader.load(['shared/style/confirm.css',
+                   'style/confirm.css'], function() {
 
     Dialogs.confirm({
       messageId: 'delete-n-items?',
@@ -705,6 +740,7 @@ function thumbnailClickHandler(videodata) {
       stopParsingMetadata(function() {
         var fullscreen = pendingPick || isPhone || isPortrait;
         showPlayer(videodata, !pendingPick, fullscreen, pendingPick);
+        setSoftwareHomeButtonVisibility(false); 
       });
     });
   }
@@ -760,6 +796,7 @@ function showOverlay(id) {
 }
 
 function setControlsVisibility(visible) {
+
   // in tablet landscape mode, we always shows controls in list layout. We
   // don't need to hide it.
   if (isPhone || isPortrait ||
@@ -771,6 +808,7 @@ function setControlsVisibility(visible) {
     // always set it as shown.
     controlShowing = true;
   }
+
   // to sync the slider under the case of auto-pause(unplugging headset), we
   // need to update the slider when controls is visible.
   if (controlShowing) {
@@ -816,7 +854,8 @@ function deleteCurrentVideo() {
   // We need to disable NFC sharing when showing delete confirmation dialog
   setNFCSharing(false);
 
-  LazyLoader.load('shared/style/confirm.css', function() {
+  LazyLoader.load(['shared/style/confirm.css',
+                   'style/confirm.css'], function() {
     // If we're deleting the file shown in the player we've got to
     // return to the thumbnail list. We pass false to hidePlayer() to tell it
     // not to record new metadata for the file we're about to delete.
@@ -975,7 +1014,6 @@ function showPlayer(video, autoPlay, enterFullscreen, keepControls) {
   //hide video player before setVideoUrl
   dom.player.hidden = true;
   setVideoUrl(dom.player, currentVideo, function() {
-
     if (enterFullscreen) {
       switchLayout(LAYOUT_MODE.fullscreenPlayer);
     }

apps/video/manifest.webapp

@@ -8,6 +8,7 @@
     "url": "https://github.com/mozilla-b2g/gaia"
   },
   "fullscreen": true,
+  "fullscreen_layout": true,
   "permissions": {
     "themeable":{},
     "storage":{},

apps/video/style/confirm.css

@@ -0,0 +1,23 @@
+/*
+ * Overrides for software home button
+ * 
+ * Note: The adjustment of height and width are based on the height
+ * (width in landscape) of the software home button which is set here:
+ * 
+ * apps/system/style//definitions.css:  --software-home-button-height: 4.4rem;
+ */
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    form[role="dialog"][data-type="confirm"] menu {
+      left: 0;
+      bottom: 4.4rem;
+    }
+  }
+  @media (orientation: landscape) {
+    form[role="dialog"][data-type="confirm"] menu {
+      right: 4.4rem;
+      bottom: 0;
+    }
+  }
+}
+

apps/video/style/video.css

@@ -755,3 +755,75 @@ form[role="dialog"][data-type="confirm"] button.hidden {
   border: none;
   padding: 0;
 }
+
+/*
+ * Overrides for software home button
+ * 
+ * Note: The adjustment of height and width are based on the height
+ * (width in landscape) of the software home button which is set here:
+ * 
+ * apps/system/style//definitions.css:  --software-home-button-height: 4.4rem;
+ */
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    #thumbnail-list-view, #thumbnail-select-view {
+      height: calc(100% - 4.4rem);
+      width: 100%;
+    }
+
+    #options-view {
+      right: 0;
+      bottom: 4.4rem;
+    }
+
+    #options-cancel-button {
+      right: 0;
+      bottom: 4.4rem;
+    }
+  }
+
+  @media (orientation: landscape) {
+    #thumbnail-list-view, #thumbnail-select-view {
+      height: 100%;
+      width: calc(100% - 4.4rem);
+    }
+
+    #options-view {
+      right: 4.4rem;
+      bottom: 0;
+    }
+
+    /*
+     * options-cancel-button needs special treatment because its position
+     * is 'fixed'. In order for 'right' to be applied, set 'left: auto'.
+     * Adjust width by 5+3 ('5' because right is shifted by 5, '3' because
+     * width has already been shortened by 3 by here:
+     * '[role="dialog"][data-type="action"] > menu > button' in action_menu.css
+     */
+    #options-cancel-button {
+      left: auto;
+      right: 4.4rem;
+      width: calc(100% - 7.6rem);
+      bottom: 0;
+    }
+  }
+}
+
+/* 
+ * Adjust video controls when software home button is present
+*/
+@media (orientation: portrait) {
+  #videoControls.software-button-present {
+    height: calc(100% - 4.4rem);
+    width: 100%;
+  }
+}
+
+@media (orientation: landscape) {
+  #videoControls.software-button-present {
+    height: 100%;
+    width: calc(100% - 4.4rem);
+  }
+}
+
+