Improve first play

7 files changed, 42 insertions, 19 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index ec5bd30dc..9c6038a5e 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <!-- We need the video container for videojs so we just hide it -->
   <div [hidden]="videoNotFound" id="video-container">
-     <video [poster]="getVideoPoster()" id="video-element" class="video-js vjs-peertube-skin"></video>
+     <video id="video-element" class="video-js vjs-peertube-skin"></video>
   </div>
 
   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index c7e26fad2..0f7c76d0b 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -337,11 +337,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     if (this.videoPlayerLoaded !== true) {
       this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
 
-      // If autoplay is true, we don't really need a poster
-      if (this.isAutoplay() === false) {
-        this.playerElement.poster = this.video.previewUrl
-      }
-
       const videojsOptions = getVideojsOptions({
         autoplay: this.isAutoplay(),
         inactivityTimeout: 4000,
@@ -350,7 +345,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid),
         videoDuration: this.video.duration,
         enableHotkeys: true,
-        peertubeLink: false
+        peertubeLink: false,
+        poster: this.video.previewUrl
       })
 
       this.videoPlayerLoaded = true
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index 4ae3e71bd..58a8aa26c 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -20,10 +20,12 @@ function getVideojsOptions (options: {
   videoFiles: VideoFile[],
   enableHotkeys: boolean,
   inactivityTimeout: number,
-  peertubeLink: boolean
+  peertubeLink: boolean,
+  poster: string
 }) {
   const videojsOptions = {
     controls: true,
+    poster: options.poster,
     autoplay: options.autoplay,
     inactivityTimeout: options.inactivityTimeout,
     playbackRates: [ 0.5, 1, 1.5, 2 ],
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index c35ce12cb..425c8c7a0 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -212,6 +212,7 @@ class PeerTubePlugin extends Plugin {
     this.alterInactivity()
 
     if (this.autoplay === true) {
+      this.player.posterImage.hide()
       this.updateVideoFile(undefined, () => this.player.play())
     } else {
       // Proxify first play
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 2c589553c..c533bd116 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -56,11 +56,11 @@ $setting-transition-easing: ease-out;
     outline: 0;
     font-size: 6em;
 
-    $big-play-width: 1.5em;
-    $big-play-height: 1em;
+    $big-play-width: 1.2em;
+    $big-play-height: 1.2em;
 
     border: 0;
-    border-radius: 0.3em;
+    border-radius: 100%;
 
     left: 50%;
     top: 50%;
@@ -77,14 +77,14 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-icon-placeholder::before {
-      transition: text-shadow 0.3s;
+      transition: font-size 0.5s, opacity 0.5s;
     }
 
     &:hover {
-      opacity: 0.9;
+      opacity: 0.8;
 
       .vjs-icon-placeholder::before {
-        text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
+        font-size: 110%;
       }
     }
   }
@@ -92,8 +92,28 @@ $setting-transition-easing: ease-out;
   &.vjs-has-started .vjs-big-play-button {
     display: block;
     visibility: hidden;
-    opacity: 0;
-    transition: visibility 0.3s, opacity 0.3s;
+
+    &, &::before {
+      opacity: 0;
+      transition: visibility 0.1s, opacity 0.1s;
+    }
+  }
+
+  &.vjs-has-started video {
+    background-color: #000;
+    animation: fade-black-on-play 0.5s linear;
+
+    @keyframes fade-black-on-play {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
   }
 
   .vjs-control-bar,
@@ -651,6 +671,10 @@ $setting-transition-easing: ease-out;
 
         .vjs-menu-item {
 
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+          }
+
           &:first-child {
             margin-top: 5px;
           }
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index b015c6736..fc7135d64 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -12,6 +12,7 @@ video {
 html, body {
   height: 100%;
   margin: 0;
+  background-color: #000;
 }
 
 .video-js.vjs-peertube-skin {
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index f2ac5dca6..1efecd3f3 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -22,8 +22,6 @@ loadVideoInfo(videoId)
     const videoContainerId = 'video-container'
 
     const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
-    videoElement.poster = window.location.origin + videoInfo.previewPath
-
     let autoplay = false
 
     try {
@@ -41,7 +39,8 @@ loadVideoInfo(videoId)
       videoFiles: videoInfo.files,
       videoDuration: videoInfo.duration,
       enableHotkeys: true,
-      peertubeLink: true
+      peertubeLink: true,
+      poster: window.location.origin + videoInfo.previewPath
     })
     videojs(videoContainerId, videojsOptions, function () {
       const player = this