From 62ab565d1c772764c77dec0df75ce64b19c57119 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Wed, 18 Dec 2019 20:20:04 +0100
Subject: Add play/pause bezels to the video player

---
 client/src/sass/player/bezels.scss | 42 ++++++++++++++++++++++++++++++++++++++
 client/src/sass/player/index.scss  |  3 ++-
 client/src/sass/player/upnext.scss |  3 ++-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 client/src/sass/player/bezels.scss

(limited to 'client/src/sass/player')

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));
   }
 
 }
-- 
cgit v1.2.3