From 12ab4868505e34d34b0132adda0a89881f4717de Mon Sep 17 00:00:00 2001
From: Russ Nicoletti <rnicoletti@mozilla.com>
Date: Fri, 29 Aug 2014 11:05:56 -0700
Subject: [PATCH] Bug 1055198 - [Video] Hide soft home key during full screen
 video playback

---
 apps/video/index.html        |  3 ++
 apps/video/js/video.js       | 22 ++++++++++-
 apps/video/manifest.webapp   |  1 +
 apps/video/style/confirm.css | 18 +++++++++
 apps/video/style/info.css    | 15 ++++++++
 apps/video/style/video.css   | 74 ++++++++++++++++++++++++++++++++++++
 6 files changed, 131 insertions(+), 2 deletions(-)
 create mode 100644 apps/video/style/confirm.css

diff --git a/apps/video/index.html b/apps/video/index.html
index b3fa9118360f..49439b1d8dd6 100644
--- a/apps/video/index.html
+++ b/apps/video/index.html
@@ -9,6 +9,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" />
diff --git a/apps/video/js/video.js b/apps/video/js/video.js
index a9ab6bb07a40..c7399ccf8a11 100644
--- a/apps/video/js/video.js
+++ b/apps/video/js/video.js
@@ -9,6 +9,7 @@ const LAYOUT_MODE = {
   selection: 'layout-selection',
   fullscreenPlayer: 'layout-fullscreen-player'
 };
+var foo = 0;
 
 var dom = {};
 
@@ -556,7 +557,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?',
@@ -774,6 +776,21 @@ 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();
+      dom.videoControls.classList.add('software-button-present');
+    }
+    else {
+      // When hiding the controls, hide the software home button.
+      dom.playerView.mozRequestFullScreen();
+      dom.videoControls.classList.remove('software-button-present');
+    }
+  }
+
   // in tablet landscape mode, we always shows controls in list layout. We
   // don't need to hide it.
   if (isPhone || isPortrait ||
@@ -830,7 +847,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.
diff --git a/apps/video/manifest.webapp b/apps/video/manifest.webapp
index 06cd0b2caa2b..f88fb22ff636 100644
--- a/apps/video/manifest.webapp
+++ b/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" },
diff --git a/apps/video/style/confirm.css b/apps/video/style/confirm.css
new file mode 100644
index 000000000000..e61c8972a61d
--- /dev/null
+++ b/apps/video/style/confirm.css
@@ -0,0 +1,18 @@
+/*
+ * 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 {
+      left: 0;
+      bottom: 5rem;
+    }
+  }
+  @media (orientation: landscape) {
+    form[role="dialog"][data-type="confirm"] menu {
+      right: 5rem;
+      bottom: 0;
+    }
+  }
+}
+
diff --git a/apps/video/style/info.css b/apps/video/style/info.css
index dede93bce8a0..fdd809b4c44c 100644
--- a/apps/video/style/info.css
+++ b/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 button {
+      right: 0;
+      bottom: 5rem;
+    }
+  }
+  @media (orientation: landscape) {
+    #info-view > menu button {
+      right: 5rem;
+      bottom: 0;
+    }
+  }
+}
diff --git a/apps/video/style/video.css b/apps/video/style/video.css
index e8af91ca5c72..03e4afdaa8e8 100644
--- a/apps/video/style/video.css
+++ b/apps/video/style/video.css
@@ -113,6 +113,21 @@ span.line-break {
   font-size: 2.1rem;
 }
 
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    #thumbnail-list-view, #thumbnail-select-view {
+      height: calc(100% - 5rem);
+      width: 100%;
+    }
+  }
+  @media (orientation: landscape) {
+    #thumbnail-list-view, #thumbnail-select-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
@@ -444,6 +459,23 @@ header .icon:after {
   pointer-events: none;
 }
 
+/* 
+ * Adjust video controls when software home button is present
+*/
+@media (orientation: portrait) {
+  #videoControls.software-button-present {
+    height: calc(100% - 5rem);
+    width: 100%;
+  }
+}
+
+@media (orientation: landscape) {
+  #videoControls.software-button-present {
+    height: 100%;
+    width: calc(100% - 5rem);
+  }
+}
+
 /* main control bar: play|pause, timeupdate, rwd|fwd
    For landscape mode here. Settings for portrait mode is written in
    media query at bottom */
@@ -754,3 +786,45 @@ form[role="dialog"][data-type="confirm"] button.hidden {
   border: none;
   padding: 0;
 }
+
+@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;
+    }
+  }
+}
+
+@media not all and (-moz-physical-home-button) {
+  @media (orientation: portrait) {
+    #options-cancel-button {
+      right: 0;
+      bottom: 5rem;
+    }
+  }
+
+  /*
+   * 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
+   */
+  @media (orientation: landscape) {
+    #options-cancel-button {
+      left: auto;
+      right: 5rem;
+      width: calc(100% - 8rem);
+      bottom: 0;
+    }
+  }
+}
+