Add play/pause bezels to the video player

3 files changed, 46 insertions, 2 deletions

diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
new file mode 100644
index 000000000..f1b1dcb4a
--- /dev/null
+++ b/client/src/sass/player/bezels.scss
@@ -0,0 +1,42 @@
+@keyframes bezels-fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+.vjs-bezel {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 52px;
+        height: 52px;
+        z-index: 19;
+        margin-left: -26px;
+        margin-top: -26px;
+        background: rgba(0,0,0,.5);
+        border-radius: 26px;
+        animation: bezels-fadeout .5s linear 1 normal forwards;
+  pointer-events: none;
+}
+
+.vjs-bezel-icon {
+        width: 36px;
+        height: 36px;
+  margin: 8px;
+  
+  svg .vjs-svg-fill {
+    fill: #fff;
+  }
+}
+
+.video-js {
+
+  .vjs-bezel-content {
+
+  }
+
+}
\ No newline at end of file
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 886a76536..58ce3ac96 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -3,4 +3,5 @@
 @import './context-menu';
 @import './settings-menu';
 @import './spinner';
-@import './upnext';
\ No newline at end of file
+@import './upnext';
+@import './bezels.scss';
\ No newline at end of file
diff --git a/client/src/sass/player/upnext.scss b/client/src/sass/player/upnext.scss
index ecce22aa8..f1f2e0fe2 100644
--- a/client/src/sass/player/upnext.scss
+++ b/client/src/sass/player/upnext.scss
@@ -95,8 +95,9 @@ $browser-context: 16;
     width: 98px;
     height: 98px;
     margin: -49px 0 0 -49px;
-    transition: stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1);
     cursor: pointer;
+
+    @include transition(stroke-dasharray 0.1s cubic-bezier(0.4,0,1,1));
   }
 
 }