From 8fa5653ad8bebed9a1b2a649e8ea160184d52408 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 20 Dec 2017 11:05:10 +0100
Subject: Add transition on play/loading player

---
 client/src/sass/video-js-custom.scss | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

(limited to 'client/src/sass')

diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index b093bbdec..724874995 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -39,6 +39,25 @@ $control-bar-height: 34px;
     background-color: transparent !important;
   }
 
+  &.vjs-has-started .vjs-big-play-button {
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.5s, opacity 0.5s;
+  }
+
+  .vjs-loading-spinner {
+    display: block;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &.vjs-waiting .vjs-loading-spinner {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0.5s, opacity 0.5s;
+  }
+
   .vjs-control-bar,
   .vjs-big-play-button,
   .vjs-menu-button .vjs-menu-content {
@@ -308,6 +327,10 @@ $control-bar-height: 34px;
   }
 
   @media screen and (max-width: 550px) {
+    .vjs-big-play-button {
+      font-size: 6.5em;
+    }
+
     .vjs-webtorrent {
       padding: 0 !important;
 
@@ -318,6 +341,14 @@ $control-bar-height: 34px;
   }
 
   @media screen and (max-width: 300px) {
+    .vjs-dock-text {
+      font-size: 1.5em;
+    }
+
+    .vjs-big-play-button {
+      font-size: 5em;
+    }
+
     .vjs-volume-control {
       display: none !important;
     }
-- 
cgit v1.2.3