✨ Implement video docking (minimize to corner) (#14961)

ampproject · May 10, 2018 · f7bb404 · f7bb404
1 parent a81f43a
commit f7bb404
Show file tree

Hide file tree

Showing 12 changed files with 2,038 additions and 110 deletions.
diff --git a/build-system/dep-check-config.js b/build-system/dep-check-config.js
@@ -226,6 +226,10 @@ exports.rules = [
           'src/service/position-observer/position-observer-impl.js',
       'extensions/amp-fx-collection/0.1/providers/fx-provider.js->' +
           'src/service/position-observer/position-observer-worker.js',
+      'src/service/video/docking.js->' +
+          'src/service/position-observer/position-observer-impl.js',
+      'src/service/video/docking.js->' +
+          'src/service/position-observer/position-observer-worker.js',
       'extensions/amp-analytics/0.1/amp-analytics.js->' +
           'src/service/cid-impl.js',
       'extensions/amp-next-page/0.1/next-page-service.js->' +

diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
@@ -282,6 +282,7 @@ const forbiddenTerms = {
       'extensions/amp-next-page/0.1/next-page-service.js',
       'extensions/amp-fx-collection/0.1/providers/fx-provider.js',
       'src/service/video-manager-impl.js',
+      'src/service/video/docking.js',
     ],
   },
   'initLogConstructor|setReportError': {

diff --git a/css/amp.css b/css/amp.css
@@ -322,6 +322,10 @@ i-amphtml-sizer {
   overflow-y: hidden !important;
 }
 
+.i-amphtml-select-disabled {
+  user-select: none !important;
+}
+
 /* "notbuild" classes are set as soon as an element is created and removed
    as soon as the element is built. */
 
@@ -670,90 +674,6 @@ amp-experiment, amp-share-tracking {
   padding: 5px;
 }
 
-/**
- * Animated equalizer icon for muted autoplaying videos.
- */
-i-amphtml-video-mask, i-amp-video-mask {
-  z-index: 1;
-}
-.amp-video-eq {
-  align-items: flex-end;
-  bottom: 7px;
-  display: flex;
-  height: 12px;
-  opacity: 0.8;
-  overflow: hidden;
-  position: absolute;
-  right: 7px;
-  width: 20px;
-  z-index: 1;
-}
-.amp-video-eq .amp-video-eq-col {
-  flex: 1;
-  height: 100%;
-  margin-right: 1px;
-  position: relative;
-}
-.amp-video-eq .amp-video-eq-col div {
-  animation-name: amp-video-eq-animation;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-  background-color: #FAFAFA;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-  will-change: transform;
-}
-.amp-video-eq .amp-video-eq-col div {
-  animation-play-state: paused;
-}
-.amp-video-eq[unpausable] .amp-video-eq-col div {
-  animation-name: none;
-}
-.amp-video-eq[unpausable].amp-video-eq-play .amp-video-eq-col div {
-  animation-name: amp-video-eq-animation;
-}
-.amp-video-eq.amp-video-eq-play .amp-video-eq-col div {
-  animation-play-state: running;
-}
-.amp-video-eq-1-1 {
-  animation-duration: 0.3s;
-  transform: translateY(60%);
-}
-.amp-video-eq-1-2 {
-  animation-duration: 0.45s;
-  transform: translateY(60%);
-}
-.amp-video-eq-2-1 {
-  animation-duration: 0.5s;
-  transform: translateY(30%);
-}
-.amp-video-eq-2-2 {
-  animation-duration: 0.4s;
-  transform: translateY(30%);
-}
-.amp-video-eq-3-1 {
-  animation-duration: 0.3s;
-  transform: translateY(70%);
-}
-.amp-video-eq-3-2 {
-  animation-duration: 0.35s;
-  transform: translateY(70%);
-}
-.amp-video-eq-4-1 {
-  animation-duration: 0.4s;
-  transform: translateY(50%);
-}
-.amp-video-eq-4-2 {
-  animation-duration: 0.25s;
-  transform: translateY(50%);
-}
-@keyframes amp-video-eq-animation {
-  0% {transform: translateY(100%);}
-  100% {transform: translateY(0);}
-}
-
 /**
  * amp-accordion to avoid FOUC.
  */

diff --git a/css/video-autoplay.css b/css/video-autoplay.css
@@ -0,0 +1,98 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Animated equalizer icon for muted autoplaying videos.
+ */
+i-amphtml-video-mask {
+  z-index: 1;
+}
+.amp-video-eq {
+  align-items: flex-end;
+  bottom: 7px;
+  display: flex;
+  height: 12px;
+  opacity: 0.8;
+  overflow: hidden;
+  position: absolute;
+  right: 7px;
+  width: 20px;
+  z-index: 1;
+}
+.amp-video-eq .amp-video-eq-col {
+  flex: 1;
+  height: 100%;
+  margin-right: 1px;
+  position: relative;
+}
+.amp-video-eq .amp-video-eq-col div {
+  animation-name: amp-video-eq-animation;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  background-color: #FAFAFA;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  will-change: transform;
+}
+.amp-video-eq .amp-video-eq-col div {
+  animation-play-state: paused;
+}
+.amp-video-eq[unpausable] .amp-video-eq-col div {
+  animation-name: none;
+}
+.amp-video-eq[unpausable].amp-video-eq-play .amp-video-eq-col div {
+  animation-name: amp-video-eq-animation;
+}
+.amp-video-eq.amp-video-eq-play .amp-video-eq-col div {
+  animation-play-state: running;
+}
+.amp-video-eq-1-1 {
+  animation-duration: 0.3s;
+  transform: translateY(60%);
+}
+.amp-video-eq-1-2 {
+  animation-duration: 0.45s;
+  transform: translateY(60%);
+}
+.amp-video-eq-2-1 {
+  animation-duration: 0.5s;
+  transform: translateY(30%);
+}
+.amp-video-eq-2-2 {
+  animation-duration: 0.4s;
+  transform: translateY(30%);
+}
+.amp-video-eq-3-1 {
+  animation-duration: 0.3s;
+  transform: translateY(70%);
+}
+.amp-video-eq-3-2 {
+  animation-duration: 0.35s;
+  transform: translateY(70%);
+}
+.amp-video-eq-4-1 {
+  animation-duration: 0.4s;
+  transform: translateY(50%);
+}
+.amp-video-eq-4-2 {
+  animation-duration: 0.25s;
+  transform: translateY(50%);
+}
+@keyframes amp-video-eq-animation {
+  0% {transform: translateY(100%);}
+  100% {transform: translateY(0);}
+}
diff --git a/css/video-docking.css b/css/video-docking.css
@@ -0,0 +1,159 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.amp-video-docked-controls {
+  contain: strict !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none !important;
+  transition: 0.3s opacity ease;
+  height: 40px;
+
+  /* Container is dynamically centered at corner. Offset by -50% in both axes
+     to properly center. */
+  margin: -20px 0 0 -80px;
+}
+
+.amp-video-docked-controls-shown {
+  opacity: 1;
+  pointer-events: initial !important;
+}
+
+.amp-video-docked-button-group {
+  margin: 0;
+}
+
+.amp-video-docked-button-group,
+.amp-video-docked-button-group > div[role=button] {
+  min-width: 40px;
+  height: 40px;
+  border-radius: 40px;
+}
+
+.amp-video-docked-button-group:active {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.amp-video-docked-button-group,
+.amp-video-docked-button-group > div[role=button],
+.amp-video-docked-controls,
+.i-amphtml-video-docked-overlay {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+}
+
+.amp-video-docked-button-group > div[role=button] {
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.amp-video-docked-shadow {
+  box-shadow: 0px 0 20px 6px rgba(0, 0, 0, 0.2);
+}
+
+.amp-video-docked-controls-bg {
+  background: rgba(230, 230, 230, 0.6);
+}
+
+.amp-video-docked-mute {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+}
+
+.amp-video-docked-unmute {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+}
+
+.amp-video-docked-pause {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+}
+
+.amp-video-docked-play {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+}
+
+.amp-video-docked-fullscreen {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
+}
+
+.amp-video-docked-dismiss {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+}
+
+.amp-video-docked-shadow,
+.i-amphtml-video-docked,
+.i-amphtml-video-docked-overlay {
+  margin: 0 !important;
+}
+
+.amp-video-docked-shadow,
+.amp-video-docked-controls,
+.i-amphtml-video-docked,
+.i-amphtml-video-docked-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: auto !important;
+  bottom: auto !important;
+  padding: 0 !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  max-width: auto !important;
+  max-height: auto !important;
+
+  /* So (x, y) coordinates can be used in transforms: */
+  transform-origin: left top !important;
+
+  will-change: width, height, transition, transform, opacity;
+}
+
+.i-amphtml-video-docked-overlay {
+  opacity: 0;
+  transition: 0.3s opacity ease;
+  contain: strict !important;
+}
+
+.amp-video-docked-controls-bg {
+  opacity: 1;
+}
+
+.i-amphtml-video-docked-overlay.amp-video-docked-almost-dismissed {
+  opacity: 1;
+  background: rgba(100, 100, 100, 0.1);
+}
+
+.i-amphtml-video-docked.amp-video-docked-almost-dismissed,
+.i-amphtml-video-docked-shadow.amp-video-docked-almost-dismissed {
+  opacity: 0.3;
+}
+
+/*
+  Z-index ordering positions all right below amp-sidebar, which has a value of
+  2147483647.
+  Please keep this list in descending order.
+*/
+.amp-video-docked-controls {
+  z-index: 2147483646 !important;
+}
+.i-amphtml-video-docked-overlay {
+  z-index: 2147483645 !important;
+}
+.i-amphtml-video-docked {
+  z-index: 2147483644 !important;
+}
+.amp-video-docked-shadow {
+  z-index: 2147483643 !important;
+}