WIP: store thumbnails on object storage

Author: kontrollanten

client/src/app/+videos/+video-watch/video-watch.component.ts

@@ -932,7 +932,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   private updatePlayerOnNoLive () {
     this.peertubePlayer.unload()
     this.peertubePlayer.disable()
-    this.peertubePlayer.setPoster(this.video.previewPath)
+    this.peertubePlayer.setPoster(this.video.previewUrl)
   }
 
   private buildHotkeysHelp (video: Video) {

client/src/app/shared/shared-main/video/video-edit.model.ts

@@ -62,8 +62,8 @@ export class VideoEdit implements VideoUpdate {
     this.commentsPolicy = video.commentsPolicy.id
     this.downloadEnabled = video.downloadEnabled
 
-    if (video.thumbnailPath) this.thumbnailUrl = getAbsoluteAPIUrl() + video.thumbnailPath
-    if (video.previewPath) this.previewUrl = getAbsoluteAPIUrl() + video.previewPath
+    if (video.thumbnailUrl) this.thumbnailUrl = video.thumbnailUrl
+    if (video.previewUrl) this.previewUrl = video.previewUrl
 
     this.scheduleUpdate = video.scheduledUpdate
     this.originallyPublishedAt = video.originallyPublishedAt

client/src/app/shared/shared-main/video/video.model.ts

@@ -48,14 +48,12 @@ export class Video implements VideoServerModel {
 
   name: string
   serverHost: string
-  thumbnailPath: string
   thumbnailUrl: string
 
   aspectRatio: number
 
   isLive: boolean
 
-  previewPath: string
   previewUrl: string
 
   embedPath: string
@@ -151,15 +149,9 @@ export class Video implements VideoServerModel {
     this.isLocal = hash.isLocal
     this.name = hash.name
 
-    this.thumbnailPath = hash.thumbnailPath
-    this.thumbnailUrl = this.thumbnailPath
-      ? hash.thumbnailUrl || (absoluteAPIUrl + hash.thumbnailPath)
-      : null
+    this.thumbnailUrl = hash.thumbnailUrl
 
-    this.previewPath = hash.previewPath
-    this.previewUrl = this.previewPath
-      ? hash.previewUrl || (absoluteAPIUrl + hash.previewPath)
-      : null
+    this.previewUrl = hash.previewUrl
 
     this.embedPath = hash.embedPath
     this.embedUrl = hash.embedUrl || (getAbsoluteEmbedUrl() + hash.embedPath)

client/src/app/shared/shared-tables/video-cell.component.html

@@ -1,7 +1,7 @@
 <a [href]="getVideoUrl()" class="table-video-link" [title]="video().name" target="_blank" rel="noopener noreferrer">
   <div class="table-video">
     <div class="table-video-image">
-      <img [src]="video().thumbnailPath" alt="">
+      <img [src]="video().thumbnailUrl" alt="">
 
       <ng-content select="[image]"></ng-content>
     </div>

client/src/app/shared/shared-video-playlist/video-playlist.model.ts

@@ -34,7 +34,6 @@ export class VideoPlaylist implements ServerVideoPlaylist {
   ownerAccount: AccountSummary
   videoChannel?: VideoChannelSummary
 
-  thumbnailPath: string
   thumbnailUrl: string
 
   embedPath: string
@@ -63,11 +62,7 @@ export class VideoPlaylist implements ServerVideoPlaylist {
     this.description = hash.description
     this.privacy = hash.privacy
 
-    this.thumbnailPath = hash.thumbnailPath
-
-    this.thumbnailUrl = this.thumbnailPath
-      ? hash.thumbnailUrl || (absoluteAPIUrl + hash.thumbnailPath)
-      : absoluteAPIUrl + '/client/assets/images/default-playlist.jpg'
+    this.thumbnailUrl = hash.thumbnailUrl || absoluteAPIUrl + '/client/assets/images/default-playlist.jpg'
 
     this.embedPath = hash.embedPath
     this.embedUrl = hash.embedUrl || (getAbsoluteEmbedUrl() + hash.embedPath)

client/src/standalone/player/src/shared/playlist/playlist-menu-item.ts

@@ -83,7 +83,7 @@ class PlaylistMenuItem extends Component {
     positionBlock.appendChild(player)
 
     const thumbnail = super.createEl('img', {
-      src: window.location.origin + videoElement.video.thumbnailPath
+      src: window.location.origin + videoElement.video.thumbnailUrl
     })
 
     const infoBlock = super.createEl('div', {

client/src/standalone/videos/embed.ts

@@ -381,7 +381,7 @@ export class PeerTubeEmbed {
 
     this.peertubePlayer.unload()
     this.peertubePlayer.disable()
-    this.peertubePlayer.setPoster(video.previewPath)
+    this.peertubePlayer.setPoster(video.previewUrl)
   }
 
   private async handlePasswordError (err: PeerTubeServerError) {

client/src/standalone/videos/shared/player-options-builder.ts

@@ -294,7 +294,7 @@ export class PlayerOptionsBuilder {
       duration: video.duration,
       videoRatio: video.aspectRatio,
 
-      poster: getBackendUrl() + video.previewPath,
+      poster: video.previewUrl,
 
       embedUrl: getBackendUrl() + video.embedPath,
       embedTitle: video.name,

config/default.yaml

@@ -266,6 +266,12 @@ object_storage:
     prefix: ''
     base_url: ''
 
+  # Video thumbnails
+  thumbnails:
+    bucket_name: 'thumbnails'
+    prefix: ''
+    base_url: ''
+
 log:
   level: 'info' # 'debug' | 'info' | 'warn' | 'error'
 

package.json

@@ -150,7 +150,6 @@
     "ip-anonymize": "^0.1.0",
     "ipaddr.js": "2.2.0",
     "iso-639-3": "3.0.1",
-    "jimp": "^0.22.4",
     "js-yaml": "^4.0.0",
     "jsonld": "~8.3.1",
     "jsonwebtoken": "^9.0.2",
@@ -181,6 +180,7 @@
     "sanitize-html": "2.x",
     "sequelize": "~6.37.3",
     "sequelize-typescript": "^2.0.0-beta.1",
+    "sharp": "^0.33.5",
     "short-uuid": "^5.2.0",
     "sitemap": "^8.0.0",
     "socket.io": "^4.5.4",