Rebuild thumbnail and media file architecture

 * Move to sharp library to improve image manipulation performance and
   support more image formats
 * Move video previews in thumbnails directory
 * Deprecate lazy static previews endpoint
 * Plugin `getFiles()` API now includes a `width`/`height` attribute
 * Deprecate previewfile for video publication/update.
   Use `thumbnailfile` instead
 * Deprecate `thumbnailPath` and `previewPath` of `Video` in favour of
   `thumbnails`
 * Deprecate `thumbnailPath` of `VideoPlaylist` in favour of
   `thumbnails`
 * Replace `torrentPath` by `torrentFilename` and `torrentStream` for
   remote torrents for `filter:api.download.torrent.allowed.result`
   plugin filter
 * Remove useless `fileUrl` from `UserExport` and `VideoSource`
 * Remove remote captions where we don't have a valid URL
 * cache directory is not deleted on each run anymore
 * Add permanent cache for video captions and storyboards

Author: Chocobozzz

apps/peertube-cli/src/peertube-upload.ts

@@ -11,7 +11,6 @@ type UploadOptions = {
   username?: string
   password?: string
   thumbnail?: string
-  preview?: string
   file?: string
   videoName?: string
   category?: number
@@ -38,7 +37,6 @@ export function defineUploadProgram () {
     .option('-U, --username <username>', 'Username')
     .option('-p, --password <token>', 'Password')
     .option('-b, --thumbnail <thumbnailPath>', 'Thumbnail path')
-    .option('--preview <previewPath>', 'Preview path')
     .option('-f, --file <file>', 'Video absolute file path')
     .option('-n, --video-name <name>', 'Video name')
     .option('-c, --category <category_number>', 'Category number', parseInt)
@@ -105,8 +103,7 @@ async function run (options: UploadOptions) {
     ...baseAttributes,
 
     fixture: options.file,
-    thumbnailfile: options.thumbnail,
-    previewfile: options.preview
+    thumbnailfile: options.thumbnail
   }
 
   try {

apps/peertube-runner/src/server/process/shared/process-vod.ts

@@ -169,7 +169,7 @@ export async function processAudioMergeTranscoding (options: ProcessOptions<Runn
 
   let ffmpegProgress: number
   let audioPath: string
-  let previewPath: string
+  let thumbnailPath: string
 
   const outputPath = join(ConfigManager.Instance.getTranscodingDirectory(), `output-${buildUUID()}.mp4`)
 
@@ -187,7 +187,7 @@ export async function processAudioMergeTranscoding (options: ProcessOptions<Runn
     )
 
     audioPath = await downloadInputFile({ url: payload.input.audioFileUrl, runnerToken, job })
-    previewPath = await downloadInputFile({ url: payload.input.previewFileUrl, runnerToken, job })
+    thumbnailPath = await downloadInputFile({ url: payload.input.previewFileUrl, runnerToken, job })
 
     logger.info(
       `Downloaded input files ${payload.input.audioFileUrl} and ${payload.input.previewFileUrl} ` +
@@ -204,7 +204,7 @@ export async function processAudioMergeTranscoding (options: ProcessOptions<Runn
       type: 'merge-audio',
 
       audioPath,
-      videoInputPath: previewPath,
+      videoInputPath: thumbnailPath,
 
       outputPath,
 
@@ -227,7 +227,7 @@ export async function processAudioMergeTranscoding (options: ProcessOptions<Runn
     })
   } finally {
     if (audioPath) await remove(audioPath)
-    if (previewPath) await remove(previewPath)
+    if (thumbnailPath) await remove(thumbnailPath)
     if (outputPath) await remove(outputPath)
     if (updateProgressInterval) clearInterval(updateProgressInterval)
   }

client/src/app/+about/about-follows/follower-image.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, inject } from '@angular/core'
 import { ServerService } from '@app/core'
-import { Actor } from '@app/shared/shared-main/account/actor.model'
+import { findAppropriateImageFileUrl } from '@root-helpers/images'
 
 @Component({
   selector: 'my-follower-image',
@@ -15,6 +15,6 @@ export class FollowerImageComponent implements OnInit {
   avatarUrl: string
 
   ngOnInit () {
-    this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.server.getHTMLConfig().instance, 30)
+    this.avatarUrl = findAppropriateImageFileUrl(this.server.getHTMLConfig().instance.avatars, 30)
   }
 }

client/src/app/+about/about-follows/subscription-image.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, inject } from '@angular/core'
 import { ServerService } from '@app/core'
-import { Actor } from '@app/shared/shared-main/account/actor.model'
+import { findAppropriateImageFileUrl } from '@root-helpers/images'
 
 @Component({
   selector: 'my-subscription-image',
@@ -15,6 +15,6 @@ export class SubscriptionImageComponent implements OnInit {
   avatarUrl: string
 
   ngOnInit () {
-    this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.server.getHTMLConfig().instance, 30)
+    this.avatarUrl = findAppropriateImageFileUrl(this.server.getHTMLConfig().instance.avatars, 30)
   }
 }

client/src/app/+about/about.component.ts

@@ -2,12 +2,12 @@ import { Component, OnInit, inject, viewChild } from '@angular/core'
 import { RouterOutlet } from '@angular/router'
 import { ServerService } from '@app/core'
 import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component'
-import { Actor } from '@app/shared/shared-main/account/actor.model'
 import { ButtonComponent } from '@app/shared/shared-main/buttons/button.component'
 import { HorizontalMenuComponent, HorizontalMenuEntry } from '@app/shared/shared-main/menu/horizontal-menu.component'
 import { SupportModalComponent } from '@app/shared/shared-support-modal/support-modal.component'
 import { maxBy } from '@peertube/peertube-core-utils'
 import { HTMLServerConfig } from '@peertube/peertube-models'
+import { findAppropriateImageFileUrl } from '@root-helpers/images'
 
 @Component({
   selector: 'my-about',
@@ -34,7 +34,7 @@ export class AboutComponent implements OnInit {
       ? maxBy(this.config.instance.banners, 'width').fileUrl
       : undefined
 
-    this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.config.instance, 110)
+    this.avatarUrl = findAppropriateImageFileUrl(this.config.instance.avatars, 110)
 
     this.menuEntries = [
       {

client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss

@@ -21,6 +21,7 @@ my-select-options {
 }
 
 my-image-input {
+  // Keep it sync with image size requested by the component
   width: 223px;
   height: 122px;
 }

client/src/app/+my-library/my-video-playlists/my-video-playlist-update.component.ts

@@ -150,7 +150,8 @@ export class MyVideoPlaylistUpdateComponent extends MyVideoPlaylistEdit implemen
       videoChannelId: this.videoPlaylistToUpdate.videoChannel ? this.videoPlaylistToUpdate.videoChannel.id : null
     })
 
-    fetch(this.videoPlaylistToUpdate.thumbnailUrl)
+    // Keep it sync with image size set in the SASS file
+    fetch(this.videoPlaylistToUpdate.getThumbnailUrl(223))
       .then(response => response.blob())
       .then(data => {
         this.form.patchValue({

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss

@@ -22,5 +22,7 @@
 
 my-video-playlist-miniature {
   display: block;
+
+  // Sync wid
   width: 130px;
 }

client/src/app/+video-watch/shared/recommendations/recommended-videos.component.scss

@@ -49,8 +49,10 @@ my-video-miniature {
 }
 
 .other-videos:not(.display-as-row) my-video-miniature {
-  min-width: $video-thumbnail-medium-width;
-  max-width: $video-thumbnail-medium-width;
+  --co-miniature-max-width: #{$video-thumbnail-medium-width};
+
+  min-width: var(--co-miniature-min-width);
+  max-width: var(--co-miniature-max-width);
 }
 
 .display-as-row {

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

@@ -870,9 +870,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         !video.canBypassPassword(this.authUser),
       videoPassword: () => videoPassword,
 
-      poster: video.isNSFWBlurForUser(loggedInOrAnonymousUser, this.serverConfig)
+      thumbnails: video.isNSFWBlurForUser(loggedInOrAnonymousUser, this.serverConfig)
         ? null
-        : video.previewUrl,
+        : video.thumbnails,
 
       nsfwWarning: video.isNSFWHiddenOrWarned(loggedInOrAnonymousUser, this.serverConfig)
         ? {
@@ -980,7 +980,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.peertubePlayer.disable()
 
     if (hasPlayed || !this.video.isNSFWBlurForUser(this.authUser || this.anonymousUser, this.serverConfig)) {
-      this.peertubePlayer.setPoster(this.video.previewPath)
+      this.peertubePlayer.setPoster(this.video.thumbnails)
     }
   }