Bug 1543994 - Fade out Picture-in-Picture player controls after being open for 3 seconds, and reveal on hover. r=JSON_voorhees
authorMike Conley <mconley@mozilla.com>
Thu, 25 Apr 2019 18:49:08 +0000
changeset 530176 537eef35789de0383a14029e44b3f7eec5fe993a
parent 530175 b2bb8867a1b5866d70063263eb7029d3b1ea793a
child 530177 34d3173eb662ec893d94f1a0f45d1b98ea0068cd
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersJSON_voorhees
bugs1543994
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1543994 - Fade out Picture-in-Picture player controls after being open for 3 seconds, and reveal on hover. r=JSON_voorhees Depends on D23231 Differential Revision: https://phabricator.services.mozilla.com/D27946
toolkit/components/pictureinpicture/content/player.js
toolkit/themes/shared/pictureinpicture/player.css
--- a/toolkit/components/pictureinpicture/content/player.js
+++ b/toolkit/components/pictureinpicture/content/player.js
@@ -1,14 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const {PictureInPicture} = ChromeUtils.import("resource://gre/modules/PictureInPicture.jsm");
 
+// Time to fade the Picture-in-Picture video controls after first opening.
+const CONTROLS_FADE_TIMEOUT = 3000;
+
 async function setupPlayer(originatingBrowser, videoData) {
   window.windowUtils.setChromeMargin(0, 0, 0, 0);
   let holder = document.querySelector(".player-holder");
   let browser = document.getElementById("browser");
   browser.remove();
 
   browser.setAttribute("nodefaultsrc", "true");
   browser.sameProcessAsFrameLoader = originatingBrowser.frameLoader;
@@ -45,9 +48,14 @@ async function setupPlayer(originatingBr
 
   await window.promiseDocumentFlushed(() => {});
   browser.style.MozWindowDragging = "drag";
 
   let close = document.getElementById("close");
   close.addEventListener("click", () => {
     window.close();
   });
+
+  document.getElementById("controls").setAttribute("showing", true);
+  setTimeout(() => {
+    document.getElementById("controls").removeAttribute("showing");
+  }, CONTROLS_FADE_TIMEOUT);
 }
--- a/toolkit/themes/shared/pictureinpicture/player.css
+++ b/toolkit/themes/shared/pictureinpicture/player.css
@@ -39,16 +39,27 @@ browser {
   cursor: pointer;
   height: 15%;
   max-height: 32px;
   max-width: 32px;
   min-height: 16px;
   min-width: 16px;
   position: absolute;
   width: 10%;
+  transition: opacity 160ms linear;
+  opacity: 0;
+}
+
+#controls:hover > .control-item {
+  opacity: 0.8;
+}
+
+#controls[showing] > .control-item,
+#controls:hover > .control-item:hover {
+  opacity: 1;
 }
 
 #close {
   background-color: var(--close-btn-bg-color);
   background-image: url("chrome://global/skin/pictureinpicture/close-pip.svg");
   right: 10px;
   top: 10px;
 }