Bug 1055198 - [Video] Hide soft home key during full screen video pla…

…yback

apps/video/index.html

@@ -128,7 +128,7 @@ <h1 id="video-title"></h1>
           <dd id="info-resolution" class="value"></dd>
         </dl>
       </section>
-      <menu>
+      <menu class="software-home-button">
         <button type="button" id="info-close-button"
                 data-l10n-id="close-button" class="full"></button>
       </menu>
@@ -192,7 +192,7 @@ <h1 id="overlay-title"></h1>
       <section>
         <p id="confirm-msg"></p>
       </section>
-      <menu>
+      <menu class="software-home-button">
         <button id="confirm-cancel"></button>
         <button id="confirm-ok"></button>
       </menu>

apps/video/js/video.js

@@ -774,6 +774,19 @@ function showOverlay(id) {
 }
 
 function setControlsVisibility(visible) {
+
+  // On phone with a software home button
+  if (isPhone && !ScreenLayout.getCurrentLayout('hardwareHomeButton')) {
+    if (visible) {
+      // When showing the controls, show the software home button.
+      document.mozCancelFullScreen();
+    }
+    else {
+      // When hiding the controls, hide the software home button.
+      dom.player.mozRequestFullScreen();
+    }
+  }
+
   // in tablet landscape mode, we always shows controls in list layout. We
   // don't need to hide it.
   if (isPhone || isPortrait ||

apps/video/manifest.webapp

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

apps/video/style/info.css

@@ -39,3 +39,18 @@
   /* no separator after the last item in the list */
   border-bottom: none;
 }
+
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    #info-view > menu.software-home-button > button {
+      right: 0;
+      bottom: 5rem;
+    }
+  }
+  @media (orientation: landscape) {
+    #info-view > menu.software-home-button > button {
+      right: 5rem;
+      bottom: 0;
+    }
+  }
+}

apps/video/style/video.css

@@ -113,6 +113,22 @@ span.line-break {
   font-size: 2.1rem;
 }
 
+/* Overrides for sotware home button */
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    #thumbnail-list-view, #thumbnail-select-view, #player-view {
+      height: calc(100% - 5rem);
+      width: 100%;
+    }
+  }
+  @media (orientation: landscape) {
+    #thumbnail-list-view, #thumbnail-select-view, #player-view {
+      height: 100%;
+      width: calc(100% - 5rem);
+    }
+  }
+}
+
 /*
  * Thumbnails are implemented as <li> elements in a <ul> with background-image
  * set to display the image. We use background-size: cover to automatically
@@ -754,3 +770,70 @@ form[role="dialog"][data-type="confirm"] button.hidden {
   border: none;
   padding: 0;
 }
+
+/*
+ * options-view overrides for software home button
+ */
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    #options-view {
+      right: 0;
+      bottom: 5rem;
+    }
+  }
+  @media (orientation: landscape) {
+
+    #options-view {
+      right: 5rem;
+      bottom: 0;
+    }
+  }
+}
+
+/*
+ * options-cancel-button overrides for software home button
+ */
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    #options-cancel-button {
+      right: 0;
+      bottom: 5rem;
+    }
+  }
+
+  /*
+   * options-cancel-button needs special treatment in landscape orientation
+   * because in landscape orientation 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
+   */
+  @media (orientation: landscape) {
+    #options-cancel-button {
+      left: auto;
+      right: 5rem;
+      width: calc(100% - 8rem);
+      bottom: 0;
+    }
+  }
+}
+
+/*
+ * confirm dialog overrides for software home button
+ */
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    form[role="dialog"][data-type="confirm"] menu.software-home-button {
+      left: 0;
+      bottom: 5rem;
+    }
+  }
+  @media (orientation: landscape) {
+    form[role="dialog"][data-type="confirm"] menu.software-home-button {
+      right: 5rem;
+      bottom: 0;
+    }
+  }
+}
+