Plan to have multiple sizes in the future

config/default.yaml

@@ -469,16 +469,18 @@ thumbnails:
     # Increasing this value will increase CPU and memory usage when generating the thumbnail, especially for high video resolution
     # Minimum value is 2
     frames_to_analyze: 50
-  size:
+
+  # Only two sizes are currently supported for now (not less, not more)
+  # 1 size for the thumbnail (displayed in video miniatures)
+  # 1 size for the preview (displayed in the video player)
+  sizes:
+    -
       width: 280
       height: 157
-    min_width: 150
 
-previews:
+    -
-  size:
       width: 850
       height: 480
-    min_width: 400
 
 stats:
   # Display registration requests stats (average response time, total requests...)

config/production.yaml.example

@@ -468,6 +468,18 @@ thumbnails:
     # Minimum value is 2
     frames_to_analyze: 50
 
+  # Only two sizes are currently supported for now (not less, not more)
+  # 1 size for the thumbnail (displayed in video miniatures)
+  # 1 size for the preview (displayed in the video player)
+  sizes:
+    -
+      width: 280
+      height: 157
+
+    -
+      width: 850
+      height: 480
+
 stats:
   # Display registration requests stats (average response time, total requests...)
   registration_requests:

server/core/initializers/checker-after-init.ts

@@ -377,4 +377,8 @@ function checkThumbnailsConfig () {
   if (CONFIG.THUMBNAILS.GENERATION_FROM_VIDEO.FRAMES_TO_ANALYZE < 2) {
     throw new Error('thumbnails.generation_from_video.frames_to_analyze must be a number greater than 1')
   }
+
+  if (!isArray(CONFIG.THUMBNAILS.SIZES) || CONFIG.THUMBNAILS.SIZES.length !== 2) {
+    throw new Error('thumbnails.sizes must be an array of 2 sizes')
+  }
 }

server/core/initializers/checker-before-init.ts

@@ -40,7 +40,7 @@ function checkMissedConfig () {
     'video_studio.enabled', 'video_studio.remote_runners.enabled',
     'video_file.update.enabled',
     'remote_runners.stalled_jobs.vod', 'remote_runners.stalled_jobs.live',
-    'thumbnails.generation_from_video.frames_to_analyze',
+    'thumbnails.generation_from_video.frames_to_analyze', 'thumbnails.sizes',
     'import.videos.http.enabled', 'import.videos.torrent.enabled', 'import.videos.concurrency', 'import.videos.timeout',
     'import.video_channel_synchronization.enabled', 'import.video_channel_synchronization.max_per_user',
     'import.video_channel_synchronization.check_interval', 'import.video_channel_synchronization.videos_limit_per_synchronization',

server/core/initializers/config.ts

@@ -372,18 +372,7 @@ const CONFIG = {
     GENERATION_FROM_VIDEO: {
       FRAMES_TO_ANALYZE: config.get<number>('thumbnails.generation_from_video.frames_to_analyze')
     },
-    SIZE: {
+    SIZES: config.get<{ width: number, height: number }[]>('thumbnails.sizes')
-      WIDTH: config.get<number>('thumbnails.size.width'),
-      HEIGHT: config.get<number>('thumbnails.size.height'),
-      MIN_WIDTH: config.get<number>('thumbnails.size.min_width'),
-    }
-  },
-  PREVIEWS: {
-    SIZE: {
-      WIDTH: config.get<number>('previews.size.width'),
-      HEIGHT: config.get<number>('previews.size.height'),
-      MIN_WIDTH: config.get<number>('previews.size.min_width'),
-    }
   },
   STATS: {
     REGISTRATION_REQUESTS: {

server/core/initializers/constants.ts

@@ -1,4 +1,4 @@
-import { randomInt } from '@peertube/peertube-core-utils'
+import { maxBy, minBy, randomInt } from '@peertube/peertube-core-utils'
 import {
   AbuseState,
   AbuseStateType,
@@ -903,14 +903,14 @@ const STATIC_MAX_AGE = {
 
 // Videos thumbnail size
 const THUMBNAILS_SIZE = {
-  width: CONFIG.THUMBNAILS.SIZE.WIDTH || 280,
+  width: minBy(CONFIG.THUMBNAILS.SIZES, 'width').width,
-  height: CONFIG.THUMBNAILS.SIZE.HEIGHT || 157,
+  height: minBy(CONFIG.THUMBNAILS.SIZES, 'width').height,
-  minWidth: CONFIG.THUMBNAILS.SIZE.MIN_WIDTH || 150
+  minRemoteWidth: 150
 }
 const PREVIEWS_SIZE = {
-  width: CONFIG.PREVIEWS.SIZE.WIDTH || 850,
+  width: maxBy(CONFIG.THUMBNAILS.SIZES, 'width').width,
-  height: CONFIG.PREVIEWS.SIZE.HEIGHT || 480,
+  height: maxBy(CONFIG.THUMBNAILS.SIZES, 'width').height,
-  minWidth: CONFIG.PREVIEWS.SIZE.MIN_WIDTH || 400
+  minRemoteWidth: 400
 }
 const ACTOR_IMAGES_SIZE: { [key in ActorImageType_Type]: { width: number, height: number }[] } = {
   [ActorImageType.AVATAR]: [ // 1/1 ratio

server/core/lib/activitypub/videos/shared/object-to-model-attributes.ts

@@ -30,7 +30,7 @@ import { basename, extname } from 'path'
 import { getDurationFromActivityStream } from '../../activity.js'
 
 export function getThumbnailFromIcons (videoObject: VideoObject) {
-  let validIcons = videoObject.icon.filter(i => i.width > THUMBNAILS_SIZE.minWidth)
+  let validIcons = videoObject.icon.filter(i => i.width > THUMBNAILS_SIZE.minRemoteWidth)
   // Fallback if there are not valid icons
   if (validIcons.length === 0) validIcons = videoObject.icon
 
@@ -38,7 +38,7 @@ export function getThumbnailFromIcons (videoObject: VideoObject) {
 }
 
 export function getPreviewFromIcons (videoObject: VideoObject) {
-  const validIcons = videoObject.icon.filter(i => i.width > PREVIEWS_SIZE.minWidth)
+  const validIcons = videoObject.icon.filter(i => i.width > PREVIEWS_SIZE.minRemoteWidth)
 
   return maxBy(validIcons, 'width')
 }