Implemented minimized controls

ampproject · Jul 31, 2017 · 53c48ce · 53c48ce
1 parent ed3da3f
commit 53c48ce
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/css/amp.css b/css/amp.css
@@ -708,6 +708,16 @@ i-amphtml-video-mask, i-amp-video-mask {
   margin: initial !important;
 }
 
+i-amphtml-dockable-video-control-btn {
+  flex-grow: 1;
+  font-size: 40px;
+  color: white;
+}
+
+i-amphtml-dockable-video-control-btn.play {
+
+}
+
 /**
  * amp-accordion to avoid FOUC.
  */

diff --git a/src/service/video-manager-impl.js b/src/service/video-manager-impl.js
@@ -916,7 +916,6 @@ class VideoEntry {
       function cloneStyle(prop) {
         return st.getStyle(dev().assertElement(internalElement), prop);
       };
-
       st.setStyles(dev().assertElement(this.draggingMask_), {
         'top': cloneStyle('top'),
         'left': cloneStyle('left'),
@@ -929,7 +928,10 @@ class VideoEntry {
         'height': cloneStyle('height'),
         'position': 'fixed',
         'z-index': '17',
-        'background': 'transparent',
+        'background': 'rgba(0,0,0,0.4)',
+        'display': 'flex',
+        'align-items': 'center',
+        'text-align': 'center',
       });
     });
   }
@@ -1607,6 +1609,17 @@ class VideoEntry {
   createDraggingMask_() {
     const doc = this.ampdoc_.win.document;
     this.draggingMask_ = doc.createElement('i-amphtml-dragging-mask');
+    const play_btn = doc.createElement('i-amphtml-dockable-video-control-btn');
+    play_btn.classList.toggle('play', !this.isPlaying_);
+    play_btn.classList.toggle('pause', this.isPlaying_);
+    const mute_btn = doc.createElement('i-amphtml-dockable-video-control-btn');
+    mute_btn.classList.toggle('mute', !this.muted_);
+    mute_btn.classList.toggle('unmute', this.muted_);
+    const fs_btn = doc.createElement('i-amphtml-dockable-video-control-btn');
+    fs_btn.classList.add('fullscreen');
+    this.draggingMask_.appendChild(play_btn);
+    this.draggingMask_.appendChild(mute_btn);
+    this.draggingMask_.appendChild(fs_btn);
     this.realignDraggingMask_();
     this.video.element.appendChild(this.draggingMask_);
   }