Improve big play button animation

3 files changed, 49 insertions, 30 deletions

diff --git a/client/src/assets/player/images/big-play-button.svg b/client/src/assets/player/images/big-play-button.svg
new file mode 100644
index 000000000..f2e65dc38
--- /dev/null
+++ b/client/src/assets/player/images/big-play-button.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+         viewBox="0 0 460.114 460.114" style="enable-background:new 0 0 460.114 460.114;" xml:space="preserve">
+<g>
+        <g>
+                <path fill="#fff" d="M393.538,203.629L102.557,5.543c-9.793-6.666-22.468-7.372-32.94-1.832c-10.472,5.538-17.022,16.413-17.022,28.26v396.173
+                        c0,11.846,6.55,22.721,17.022,28.26c10.471,5.539,23.147,4.834,32.94-1.832l290.981-198.087
+                        c8.746-5.954,13.98-15.848,13.98-26.428C407.519,219.477,402.285,209.582,393.538,203.629z"/>
+        </g>
+</g>
+</svg>
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index ddb73d074..83df24af6 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -322,11 +322,10 @@ class PeerTubePlugin extends Plugin {
       // Proxy first play
       const oldPlay = this.player.play.bind(this.player)
       this.player.play = () => {
-        this.updateVideoFile(undefined, 0, () => {
-          this.seek(this.startTime)
-          oldPlay()
-        })
+        this.player.addClass('vjs-has-big-play-button-clicked')
         this.player.play = oldPlay
+
+        this.updateVideoFile(undefined, 0, () => this.seek(this.startTime))
       }
     }
   }
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 768b7895f..cae7ab431 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -1,6 +1,13 @@
 @import '_variables';
 @import '_mixins';
 
+@mixin big-play-button-triangle-size($triangle-size) {
+  width: $triangle-size;
+  height: $triangle-size;
+  top: calc(50% - #{$triangle-size / 2});
+  left: calc(53% - #{($triangle-size / 2)});
+}
+
 $primary-foreground-color: #fff;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
@@ -59,7 +66,7 @@ $setting-transition-easing: ease-out;
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
-    border: 0;
+    border: 6px solid #fff;
     border-radius: 100%;
 
     left: 50%;
@@ -69,7 +76,7 @@ $setting-transition-easing: ease-out;
     line-height: $big-play-height;
     margin-left: -($big-play-width / 2);
     margin-top: -($big-play-height / 2);
-    transition: opacity 0.5s;
+    transition: 0.4s opacity;
 
     &::-moz-focus-inner {
       border: 0;
@@ -77,41 +84,33 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-icon-placeholder::before {
-      transition: font-size 0.2s, opacity 0.2s;
+      @include big-play-button-triangle-size(45px);
+
+      content: '';
+      background-image: url('../assets/player/images/big-play-button.svg');
     }
 
     &:hover {
       opacity: 0.8;
-
-      .vjs-icon-placeholder::before {
-        font-size: 110%;
-      }
     }
   }
 
-  &.vjs-has-started .vjs-big-play-button {
-    display: block;
-    visibility: hidden;
-
-    &, &::before {
-      opacity: 0;
-      transition: visibility 0.1s, opacity 0.1s;
-    }
-  }
+  // Small effect when we click on the play button
+  &.vjs-has-big-play-button-clicked {
 
-  &.vjs-has-started video {
-    background-color: #000;
-    animation: fade-black-on-play 0.5s linear;
+    .vjs-big-play-button, .vjs-poster {
+      display: block;
+      visibility: hidden;
 
-    @keyframes fade-black-on-play {
-      0% {
-        opacity: 1;
-      }
-      50% {
+      &.vjs-big-play-button, &.vjs-big-play-button::before {
         opacity: 0;
+        transition: visibility 0.2s, opacity 0.2s;
       }
-      100% {
-        opacity: 1;
+
+      &.vjs-poster, &.vjs-poster::before {
+        opacity: 0;
+        transition: visibility 0.3s, opacity 0.3s;
+        transition-delay: 0.05s;
       }
     }
   }
@@ -446,6 +445,11 @@ $setting-transition-easing: ease-out;
 
     .vjs-big-play-button {
       font-size: 4.5em;
+      border-width: 4.5px;
+
+      .vjs-icon-placeholder::before {
+        @include big-play-button-triangle-size(27px);
+      }
     }
 
     .vjs-playback-rate {
@@ -468,6 +472,11 @@ $setting-transition-easing: ease-out;
 
     .vjs-big-play-button {
       font-size: 3em;
+      border-width: 3px;
+
+      .vjs-icon-placeholder::before {
+        @include big-play-button-triangle-size(20px);
+      }
     }
 
     .vjs-volume-control {