Improve big play button animation

2 files changed, 14 insertions, 4 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))
       }
     }
   }