From eba8538089df9564bc08a7d5747d2674349aa85b Mon Sep 17 00:00:00 2001 From: Russ Nicoletti Date: Tue, 23 Sep 2014 14:25:19 -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 | 47 +++++++++++++++++++++---- apps/video/manifest.webapp | 1 + apps/video/style/confirm.css | 18 ++++++++++ apps/video/style/info.css | 18 ++++++++++ apps/video/style/video.css | 66 ++++++++++++++++++++++++++++++++++++ 6 files changed, 147 insertions(+), 6 deletions(-) create mode 100644 apps/video/style/confirm.css diff --git a/apps/video/index.html b/apps/video/index.html index e16dfdef2f92..b42abffb9fc3 100644 --- a/apps/video/index.html +++ b/apps/video/index.html @@ -10,6 +10,9 @@ + diff --git a/apps/video/js/video.js b/apps/video/js/video.js index b154f1ba7141..a7c59e6027fb 100644 --- a/apps/video/js/video.js +++ b/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); } } } @@ -556,7 +587,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?', @@ -721,6 +753,7 @@ function thumbnailClickHandler(videodata) { stopParsingMetadata(function() { var fullscreen = pendingPick || isPhone || isPortrait; showPlayer(videodata, !pendingPick, fullscreen, pendingPick); + setSoftwareHomeButtonVisibility(false); }); }); } @@ -774,6 +807,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 || @@ -785,6 +819,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) { @@ -830,7 +865,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. @@ -989,7 +1025,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); } diff --git a/apps/video/manifest.webapp b/apps/video/manifest.webapp index 344ad74ecd7b..afa980a29702 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": { "themeable":{}, "storage":{}, 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..a176852f2f83 100644 --- a/apps/video/style/info.css +++ b/apps/video/style/info.css @@ -39,3 +39,21 @@ /* no separator after the last item in the list */ border-bottom: none; } + +/* + * Overrides for software home button + */ +@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 c64854746a9b..f8bd2d78d146 100644 --- a/apps/video/style/video.css +++ b/apps/video/style/video.css @@ -753,3 +753,69 @@ form[role="dialog"][data-type="confirm"] button.hidden { border: none; padding: 0; } + +/* + * 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); + } +} + +/* + * Overrides for software home button + */ +@media not all and (-moz-physical-home-button) { + @media (orientation: portrait) { + #thumbnail-list-view, #thumbnail-select-view { + height: calc(100% - 5rem); + width: 100%; + } + + #options-view { + right: 0; + bottom: 5rem; + } + + #options-cancel-button { + right: 0; + bottom: 5rem; + } + } + + @media (orientation: landscape) { + #thumbnail-list-view, #thumbnail-select-view { + height: 100%; + width: calc(100% - 5rem); + } + + #options-view { + right: 5rem; + 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: 5rem; + width: calc(100% - 8rem); + bottom: 0; + } + } +} +