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

---
 .../src/assets/player/peertube-videojs-plugin.ts   |  2 +-
 client/src/sass/video-js-custom.scss               | 31 ++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

(limited to 'client/src')

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 8c131c9e9..ca2b9a724 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -263,7 +263,7 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
     const isPaused = player.paused()
 
     // Hide bigPlayButton
-    if (!isPaused && this.player_.options_.bigPlayButton) {
+    if (!isPaused) {
       this.player_.bigPlayButton.hide()
     }
 
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