Add transition on play/loading player

4 files changed, 52 insertions, 4 deletions

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;
     }
diff --git a/server/lib/cache/videos-preview-cache.ts b/server/lib/cache/videos-preview-cache.ts
index c5bda8dd8..28908b186 100644
--- a/server/lib/cache/videos-preview-cache.ts
+++ b/server/lib/cache/videos-preview-cache.ts
@@ -33,7 +33,12 @@ class VideosPreviewCache {
     })
   }
 
-  getPreviewPath (key: string) {
+  async getPreviewPath (key: string) {
+    const video = await VideoModel.loadByUUID(key)
+    if (!video) return undefined
+
+    if (video.isOwned()) return join(CONFIG.STORAGE.PREVIEWS_DIR, video.getPreviewName())
+
     return new Promise<string>((res, rej) => {
       this.lru.get(key, (err, value) => {
         err ? rej(err) : res(value)
@@ -42,10 +47,10 @@ class VideosPreviewCache {
   }
 
   private async loadPreviews (key: string) {
-    const video = await VideoModel.loadByUUIDAndPopulateAccountAndServerAndTags(key)
+    const video = await VideoModel.loadByUUID(key)
     if (!video) return undefined
 
-    if (video.isOwned()) return join(CONFIG.STORAGE.PREVIEWS_DIR, video.getPreviewName())
+    if (video.isOwned()) throw new Error('Cannot load preview of owned video.')
 
     const res = await this.saveRemotePreviewAndReturnPath(video)
 
diff --git a/server/models/video/video.ts b/server/models/video/video.ts
index 97fdbc8ef..8c49bc3af 100644
--- a/server/models/video/video.ts
+++ b/server/models/video/video.ts
@@ -528,6 +528,18 @@ export class VideoModel extends Model<VideoModel> {
       .findById(id, options)
   }
 
+  static loadByUUID (uuid: string) {
+    const options = {
+      where: {
+        uuid
+      }
+    }
+
+    return VideoModel
+      .scope([ ScopeNames.WITH_FILES ])
+      .findOne(options)
+  }
+
   static loadByUUIDAndPopulateAccountAndServerAndTags (uuid: string) {
     const options = {
       order: [ [ 'Tags', 'name', 'ASC' ] ],