feat-1322-select-from-frame-proto

client/src/app/+videos/+video-edit/shared/thumbnail-manager/frame-selector.component.ts

@@ -13,6 +13,7 @@ import videojs from 'video.js';
   `,
   styleUrls: ['./frame-selector.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 
 export class FrameSelectorComponent implements OnInit, OnDestroy {

client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.scss

@@ -0,0 +1,37 @@
+
+.root {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+
+  .preview-container {
+    position: relative;
+
+    .preview {
+      object-fit: cover;
+      border-radius: 4px;
+      max-width: 100%;
+
+      &.no-image {
+        border: 2px solid #808080;
+        background-color: pvar(--mainBackgroundColor);
+      }
+    }
+  }
+
+  .inputs {
+
+    margin-top: 10px;
+
+    my-reactive-file {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+    input {
+      display: inline-block;
+      margin-right: 10px;
+    }
+
+  }
+}

client/src/app/+videos/+video-edit/shared/thumbnail-manager/thumbnail-manager.component.ts

@@ -1,6 +1,7 @@
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { CommonModule } from '@angular/common';
 import { imageToDataURL } from '../../../../../root-helpers/images'
-import { BytesPipe } from '../../../../shared/shared-main'
+import { BytesPipe } from '../../../../shared/shared-main/angular/bytes.pipe'
 
 import { addQueryParams } from '@peertube/peertube-core-utils'
 
@@ -18,11 +19,9 @@ import {
   RestExtractor,
   ServerService,
 } from '../../../../core'
-import {
-  VideoDetails,
-  VideoFileTokenService,
-  VideoService
-} from '../../../../shared/shared-main'
+import { VideoDetails } from '../../../../shared/shared-main/video/video-details.model'
+import { VideoFileTokenService } from '../../../../shared/shared-main/video/video-file-token.service'
+import { VideoService } from '../../../../shared/shared-main/video/video.service'
 import {
   HTMLServerConfig,
   HttpStatusCode,
@@ -30,13 +29,15 @@ import {
   ServerErrorCode
 } from '@peertube/peertube-models'
 import { videoRequiresFileToken } from '../../../../../root-helpers/video'
-
-
+import { FrameSelectorComponent } from './frame-selector.component';
+import { ReactiveFileComponent } from '@app/shared/shared-forms/reactive-file.component';
 
 @Component({
   selector: 'my-thumbnail-manager',
   styleUrls: ['./thumbnail-manager.component.scss'],
   templateUrl: './thumbnail-manager.component.html',
+  standalone: true,
+  imports: [ CommonModule, FrameSelectorComponent, ReactiveFileComponent ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -105,10 +106,6 @@ export class ThumbnailManagerComponent implements OnInit, ControlValueAccessor {
     this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
   }
 
-  ngOnDestroy() {
-    // if (this.player) this.player.dispose()
-  }
-
   onFileChanged(file: Blob) {
     this.file = file
 

client/src/app/+videos/+video-edit/shared/video-edit.component.html

@@ -375,10 +375,7 @@
             <div class="form-group">
               <label i18n for="previewfile">Video thumbnail</label>
 
-              <my-preview-upload
-                i18n-inputLabel inputLabel="Edit" inputName="previewfile" formControlName="previewfile"
-                previewWidth="360px" previewHeight="200px"
-              ></my-preview-upload>
+              <my-thumbnail-manager id="previewfile" formControlName="previewfile"></my-thumbnail-manager>
             </div>
 
             <div class="form-group">

client/src/app/+videos/+video-edit/shared/video-edit.component.ts

@@ -65,6 +65,7 @@ import { VideoService } from '@app/shared/shared-main/video/video.service'
 import { BuildFormArgument, BuildFormValidator } from '@app/shared/form-validators/form-validator.model'
 import { FormReactiveErrors, FormReactiveValidationMessages } from '@app/shared/shared-forms/form-reactive.service'
 import { FormValidatorService } from '@app/shared/shared-forms/form-validator.service'
+import { ThumbnailManagerComponent } from './thumbnail-manager/thumbnail-manager.component'
 
 type VideoLanguages = VideoConstant<string> & { group?: string }
 type PluginField = {
@@ -108,7 +109,8 @@ type PluginField = {
     PreviewUploadComponent,
     NgbNavOutlet,
     VideoCaptionAddModalComponent,
-    DatePipe
+    DatePipe,
+    ThumbnailManagerComponent
   ]
 })
 export class VideoEditComponent implements OnInit, OnDestroy {

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

@@ -583,4 +583,11 @@ export class VideoService {
                .put(url, body, { headers })
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
+
+  setThumbnailAtTimecode (id: string, timecode: string): Observable<string> {
+    const url = `${VideoService.BASE_VIDEO_URL}/${id}/thumbnail/${timecode}`
+
+    return this.authHttp.put<string>(url, '')
+               .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
 }

packages/ffmpeg/src/ffmpeg-images.ts

@@ -47,14 +47,23 @@ export class FFmpegImage {
       height: number
     }
     ffprobe?: FfprobeData
+    timecode?: number
   }) {
-    const { fromPath, ffprobe } = options
+    const { fromPath, ffprobe, timecode } = options
 
     let duration = await getVideoStreamDuration(fromPath, ffprobe)
     if (isNaN(duration)) duration = 0
 
+    let seekPosition = duration / 2
+
+    if (timecode !== undefined) {
+      if (timecode >= 0) {
+        seekPosition = timecode
+      }
+    }
+
     this.buildGenerateThumbnailFromVideo(options)
-      .seekInput(duration / 2)
+      .seekInput(seekPosition)
 
     try {
       return await this.commandWrapper.runCommand()

server/core/controllers/api/videos/index.ts

@@ -50,6 +50,7 @@ import { updateRouter } from './update.js'
 import { uploadRouter } from './upload.js'
 import { viewRouter } from './view.js'
 import { videoChaptersRouter } from './chapters.js'
+import { thumbnailRouter } from './thumbnails.js'
 
 const auditLogger = auditLoggerFactory('videos')
 const videosRouter = express.Router()
@@ -75,6 +76,7 @@ videosRouter.use('/', videoPasswordRouter)
 videosRouter.use('/', storyboardRouter)
 videosRouter.use('/', videoSourceRouter)
 videosRouter.use('/', videoChaptersRouter)
+videosRouter.use('/', thumbnailRouter)
 
 videosRouter.get('/categories',
   openapiOperationDoc({ operationId: 'getCategories' }),

server/core/controllers/api/videos/thumbnails.ts

@@ -0,0 +1,53 @@
+// import { FFmpegImage } from '@peertube/peertube-ffmpeg'
+import express from 'express'
+
+import { VideoModel } from '@server/models/video/video.js'
+import { generateLocalVideoMiniature } from '../../../lib/thumbnail.js'
+
+
+import { MThumbnail, MVideoWithAllFiles } from '@server/types/models/index.js'
+
+import { ThumbnailType } from '@peertube/peertube-models'
+
+const thumbnailRouter = express.Router()
+
+thumbnailRouter.put('/:id/thumbnail/:timecode',
+    setThumbnailAtTimecode
+)
+
+export {
+    thumbnailRouter
+}
+
+
+async function setThumbnailAtTimecode(req: express.Request, res: express.Response) {
+
+    let videoId = req.params.id
+
+    let timecode: number = Number.parseFloat(req.params.timecode)
+
+    const video: MVideoWithAllFiles = await VideoModel.loadWithFiles(videoId)
+
+    const videoFile = video.getMaxQualityFile()
+
+    let thumbnails: MThumbnail[] =
+     await generateLocalVideoMiniature({ 
+        video: video, 
+        videoFile: videoFile, 
+        types: [ThumbnailType.MINIATURE, ThumbnailType.PREVIEW], 
+        timecode: timecode })
+
+    let url: string = undefined
+
+    thumbnails.forEach((thumbnail) => { 
+        
+        thumbnail.save()
+
+        if (thumbnail.type == ThumbnailType.PREVIEW) {
+            url = thumbnail.getOriginFileUrl(video)
+        }
+    
+    })
+
+    return res.json(url)
+}

server/core/lib/thumbnail.ts

@@ -101,8 +101,9 @@ function generateLocalVideoMiniature (options: {
   videoFile: MVideoFile
   types: ThumbnailType_Type[]
   ffprobe?: FfprobeData
+  timecode?: number
 }): Promise<MThumbnail[]> {
-  const { video, videoFile, types, ffprobe } = options
+  const { video, videoFile, types, ffprobe, timecode } = options
 
   if (types.length === 0) return Promise.resolve([])
 
@@ -141,7 +142,8 @@ function generateLocalVideoMiniature (options: {
           folder: basePath,
           imageName: filename,
           size: { height, width },
-          ffprobe
+          ffprobe,
+          timecode
         })
       }
 
@@ -371,16 +373,17 @@ async function generateImageFromVideoFile (options: {
   folder: string
   imageName: string
   size: { width: number, height: number }
-  ffprobe?: FfprobeData
+  ffprobe?: FfprobeData,
+  timecode?: number
 }) {
-  const { fromPath, folder, imageName, size, ffprobe } = options
+  const { fromPath, folder, imageName, size, ffprobe, timecode } = options
 
   const pendingImageName = 'pending-' + imageName
   const pendingImagePath = join(folder, pendingImageName)
 
   try {
     const framesToAnalyze = CONFIG.THUMBNAILS.GENERATION_FROM_VIDEO.FRAMES_TO_ANALYZE
-    await generateThumbnailFromVideo({ fromPath, output: pendingImagePath, framesToAnalyze, ffprobe, scale: size })
+    await generateThumbnailFromVideo({ fromPath, output: pendingImagePath, framesToAnalyze, ffprobe, scale: size, timecode })
 
     const destination = join(folder, imageName)
     await processImageFromWorker({ path: pendingImagePath, destination, newSize: size })