client/src/app/+video-editor/edit/video-editor-edit.component.ts

   1 import { Component, OnInit } from '@angular/core'
   2 import { ActivatedRoute, Router } from '@angular/router'
   3 import { ConfirmService, Notifier, ServerService } from '@app/core'
   4 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
   5 import { Video, VideoDetails } from '@app/shared/shared-main'
   6 import { LoadingBarService } from '@ngx-loading-bar/core'
   7 import { secondsToTime } from '@shared/core-utils'
   8 import { VideoEditorTask, VideoEditorTaskCut } from '@shared/models'
   9 import { VideoEditorService } from '../shared'
  10
  11 @Component({
  12   selector: 'my-video-editor-edit',
  13   templateUrl: './video-editor-edit.component.html',
  14   styleUrls: [ './video-editor-edit.component.scss' ]
  15 })
  16 export class VideoEditorEditComponent extends FormReactive implements OnInit {
  17   isRunningEdition = false
  18
  19   video: VideoDetails
  20
  21   constructor (
  22     protected formValidatorService: FormValidatorService,
  23     private serverService: ServerService,
  24     private notifier: Notifier,
  25     private router: Router,
  26     private route: ActivatedRoute,
  27     private videoEditorService: VideoEditorService,
  28     private loadingBar: LoadingBarService,
  29     private confirmService: ConfirmService
  30   ) {
  31     super()
  32   }
  33
  34   ngOnInit () {
  35     this.video = this.route.snapshot.data.video
  36
  37     const defaultValues = {
  38       cut: {
  39         start: 0,
  40         end: this.video.duration
  41       }
  42     }
  43
  44     this.buildForm({
  45       cut: {
  46         start: null,
  47         end: null
  48       },
  49       'add-intro': {
  50         file: null
  51       },
  52       'add-outro': {
  53         file: null
  54       },
  55       'add-watermark': {
  56         file: null
  57       }
  58     }, defaultValues)
  59   }
  60
  61   get videoExtensions () {
  62     return this.serverService.getHTMLConfig().video.file.extensions
  63   }
  64
  65   get imageExtensions () {
  66     return this.serverService.getHTMLConfig().video.image.extensions
  67   }
  68
  69   async runEdition () {
  70     if (this.isRunningEdition) return
  71
  72     const title = $localize`Are you sure you want to edit "${this.video.name}"?`
  73     const listHTML = this.getTasksSummary().map(t => `<li>${t}</li>`).join('')
  74
  75     // eslint-disable-next-line max-len
  76     const confirmHTML = $localize`The current video will be overwritten by this edited video and <strong>you won't be able to recover it</strong>.<br /><br />` +
  77       $localize`As a reminder, the following tasks will be executed: <ol>${listHTML}</ol>`
  78
  79     if (await this.confirmService.confirm(confirmHTML, title) !== true) return
  80
  81     this.isRunningEdition = true
  82
  83     const tasks = this.buildTasks()
  84
  85     this.loadingBar.useRef().start()
  86
  87     return this.videoEditorService.editVideo(this.video.uuid, tasks)
  88       .subscribe({
  89         next: () => {
  90           this.notifier.success($localize`Video updated.`)
  91           this.router.navigateByUrl(Video.buildWatchUrl(this.video))
  92         },
  93
  94         error: err => {
  95           this.loadingBar.useRef().complete()
  96           this.isRunningEdition = false
  97           this.notifier.error(err.message)
  98           console.error(err)
  99         }
 100       })
 101   }
 102
 103   getIntroOutroTooltip () {
 104     return $localize`(extensions: ${this.videoExtensions.join(', ')})`
 105   }
 106
 107   getWatermarkTooltip () {
 108     return $localize`(extensions: ${this.imageExtensions.join(', ')})`
 109   }
 110
 111   noEdition () {
 112     return this.buildTasks().length === 0
 113   }
 114
 115   getTasksSummary () {
 116     const tasks = this.buildTasks()
 117
 118     return tasks.map(t => {
 119       if (t.name === 'add-intro') {
 120         return $localize`"${this.getFilename(t.options.file)}" will be added at the beggining of the video`
 121       }
 122
 123       if (t.name === 'add-outro') {
 124         return $localize`"${this.getFilename(t.options.file)}" will be added at the end of the video`
 125       }
 126
 127       if (t.name === 'add-watermark') {
 128         return $localize`"${this.getFilename(t.options.file)}" image watermark will be added to the video`
 129       }
 130
 131       if (t.name === 'cut') {
 132         const { start, end } = t.options
 133
 134         if (start !== undefined && end !== undefined) {
 135           return $localize`Video will begin at ${secondsToTime(start)} and stop at ${secondsToTime(end)}`
 136         }
 137
 138         if (start !== undefined) {
 139           return $localize`Video will begin at ${secondsToTime(start)}`
 140         }
 141
 142         if (end !== undefined) {
 143           return $localize`Video will stop at ${secondsToTime(end)}`
 144         }
 145       }
 146
 147       return ''
 148     })
 149   }
 150
 151   private getFilename (obj: any) {
 152     return obj.name
 153   }
 154
 155   private buildTasks () {
 156     const tasks: VideoEditorTask[] = []
 157     const value = this.form.value
 158
 159     const cut = value['cut']
 160     if (cut['start'] !== 0 || cut['end'] !== this.video.duration) {
 161
 162       const options: VideoEditorTaskCut['options'] = {}
 163       if (cut['start'] !== 0) options.start = cut['start']
 164       if (cut['end'] !== this.video.duration) options.end = cut['end']
 165
 166       tasks.push({
 167         name: 'cut',
 168         options
 169       })
 170     }
 171
 172     if (value['add-intro']?.['file']) {
 173       tasks.push({
 174         name: 'add-intro',
 175         options: {
 176           file: value['add-intro']['file']
 177         }
 178       })
 179     }
 180
 181     if (value['add-outro']?.['file']) {
 182       tasks.push({
 183         name: 'add-outro',
 184         options: {
 185           file: value['add-outro']['file']
 186         }
 187       })
 188     }
 189
 190     if (value['add-watermark']?.['file']) {
 191       tasks.push({
 192         name: 'add-watermark',
 193         options: {
 194           file: value['add-watermark']['file']
 195         }
 196       })
 197     }
 198
 199     return tasks
 200   }
 201
 202 }