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

   1 import { forkJoin } from 'rxjs'
   2 import { map } from 'rxjs/operators'
   3 import { Component, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
   4 import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
   5 import { ServerService } from '@app/core'
   6 import { removeElementFromArray } from '@app/helpers'
   7 import { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem, VideoValidatorsService } from '@app/shared/shared-forms'
   8 import { InstanceService } from '@app/shared/shared-instance'
   9 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
  10 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
  11 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
  12 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
  13
  14 type VideoLanguages = VideoConstant<string> & { group?: string }
  15
  16 @Component({
  17   selector: 'my-video-edit',
  18   styleUrls: [ './video-edit.component.scss' ],
  19   templateUrl: './video-edit.component.html'
  20 })
  21 export class VideoEditComponent implements OnInit, OnDestroy {
  22   @Input() form: FormGroup
  23   @Input() formErrors: { [ id: string ]: string } = {}
  24   @Input() validationMessages: FormReactiveValidationMessages = {}
  25   @Input() userVideoChannels: SelectChannelItem[] = []
  26   @Input() schedulePublicationPossible = true
  27   @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
  28   @Input() waitTranscodingEnabled = true
  29
  30   @ViewChild('videoCaptionAddModal', { static: true }) videoCaptionAddModal: VideoCaptionAddModalComponent
  31
  32   // So that it can be accessed in the template
  33   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
  34
  35   videoPrivacies: VideoConstant<VideoPrivacy>[] = []
  36   videoCategories: VideoConstant<number>[] = []
  37   videoLicences: VideoConstant<number>[] = []
  38   videoLanguages: VideoLanguages[] = []
  39
  40   tagValidators: ValidatorFn[]
  41   tagValidatorsMessages: { [ name: string ]: string }
  42
  43   schedulePublicationEnabled = false
  44
  45   calendarLocale: any = {}
  46   minScheduledDate = new Date()
  47   myYearRange = '1880:' + (new Date()).getFullYear()
  48
  49   calendarTimezone: string
  50   calendarDateFormat: string
  51
  52   serverConfig: ServerConfig
  53
  54   private schedulerInterval: any
  55   private firstPatchDone = false
  56   private initialVideoCaptions: string[] = []
  57
  58   constructor (
  59     private formValidatorService: FormValidatorService,
  60     private videoValidatorsService: VideoValidatorsService,
  61     private videoService: VideoService,
  62     private serverService: ServerService,
  63     private instanceService: InstanceService,
  64     private i18nPrimengCalendarService: I18nPrimengCalendarService,
  65     private ngZone: NgZone
  66   ) {
  67     this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale()
  68     this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone()
  69     this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat()
  70   }
  71
  72   get existingCaptions () {
  73     return this.videoCaptions
  74                .filter(c => c.action !== 'REMOVE')
  75                .map(c => c.language.id)
  76   }
  77
  78   updateForm () {
  79     const defaultValues: any = {
  80       nsfw: 'false',
  81       commentsEnabled: 'true',
  82       downloadEnabled: 'true',
  83       waitTranscoding: 'true',
  84       tags: []
  85     }
  86     const obj: any = {
  87       name: this.videoValidatorsService.VIDEO_NAME,
  88       privacy: this.videoValidatorsService.VIDEO_PRIVACY,
  89       channelId: this.videoValidatorsService.VIDEO_CHANNEL,
  90       nsfw: null,
  91       commentsEnabled: null,
  92       downloadEnabled: null,
  93       waitTranscoding: null,
  94       category: this.videoValidatorsService.VIDEO_CATEGORY,
  95       licence: this.videoValidatorsService.VIDEO_LICENCE,
  96       language: this.videoValidatorsService.VIDEO_LANGUAGE,
  97       description: this.videoValidatorsService.VIDEO_DESCRIPTION,
  98       tags: this.videoValidatorsService.VIDEO_TAGS_ARRAY,
  99       previewfile: null,
 100       support: this.videoValidatorsService.VIDEO_SUPPORT,
 101       schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT,
 102       originallyPublishedAt: this.videoValidatorsService.VIDEO_ORIGINALLY_PUBLISHED_AT
 103     }
 104
 105     this.formValidatorService.updateForm(
 106       this.form,
 107       this.formErrors,
 108       this.validationMessages,
 109       obj,
 110       defaultValues
 111     )
 112
 113     this.form.addControl('captions', new FormArray([
 114       new FormGroup({
 115         language: new FormControl(),
 116         captionfile: new FormControl()
 117       })
 118     ]))
 119
 120     this.trackChannelChange()
 121     this.trackPrivacyChange()
 122   }
 123
 124   ngOnInit () {
 125     this.updateForm()
 126
 127     this.serverService.getVideoCategories()
 128         .subscribe(res => this.videoCategories = res)
 129     this.serverService.getVideoLicences()
 130         .subscribe(res => this.videoLicences = res)
 131     forkJoin([
 132       this.instanceService.getAbout(),
 133       this.serverService.getVideoLanguages()
 134     ]).pipe(map(([ about, languages ]) => ({ about, languages })))
 135       .subscribe(res => {
 136         this.videoLanguages = res.languages
 137           .map(l => res.about.instance.languages.includes(l.id)
 138             ? { ...l, group: $localize`Instance languages`, groupOrder: 0 }
 139             : { ...l, group: $localize`All languages`, groupOrder: 1 })
 140           .sort((a, b) => a.groupOrder - b.groupOrder)
 141       })
 142
 143     this.serverService.getVideoPrivacies()
 144       .subscribe(privacies => {
 145         this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies)
 146         if (this.schedulePublicationPossible) {
 147           this.videoPrivacies.push({
 148             id: this.SPECIAL_SCHEDULED_PRIVACY,
 149             label: $localize`Scheduled`,
 150             description: $localize`Hide the video until a specific date`
 151           })
 152         }
 153       })
 154
 155     this.serverConfig = this.serverService.getTmpConfig()
 156     this.serverService.getConfig()
 157       .subscribe(config => this.serverConfig = config)
 158
 159     this.initialVideoCaptions = this.videoCaptions.map(c => c.language.id)
 160
 161     this.ngZone.runOutsideAngular(() => {
 162       this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
 163     })
 164   }
 165
 166   ngOnDestroy () {
 167     if (this.schedulerInterval) clearInterval(this.schedulerInterval)
 168   }
 169
 170   onCaptionAdded (caption: VideoCaptionEdit) {
 171     const existingCaption = this.videoCaptions.find(c => c.language.id === caption.language.id)
 172
 173     // Replace existing caption?
 174     if (existingCaption) {
 175       Object.assign(existingCaption, caption, { action: 'CREATE' as 'CREATE' })
 176     } else {
 177       this.videoCaptions.push(
 178         Object.assign(caption, { action: 'CREATE' as 'CREATE' })
 179       )
 180     }
 181
 182     this.sortVideoCaptions()
 183   }
 184
 185   async deleteCaption (caption: VideoCaptionEdit) {
 186     // Caption recovers his former state
 187     if (caption.action && this.initialVideoCaptions.indexOf(caption.language.id) !== -1) {
 188       caption.action = undefined
 189       return
 190     }
 191
 192     // This caption is not on the server, just remove it from our array
 193     if (caption.action === 'CREATE') {
 194       removeElementFromArray(this.videoCaptions, caption)
 195       return
 196     }
 197
 198     caption.action = 'REMOVE' as 'REMOVE'
 199   }
 200
 201   openAddCaptionModal () {
 202     this.videoCaptionAddModal.show()
 203   }
 204
 205   private sortVideoCaptions () {
 206     this.videoCaptions.sort((v1, v2) => {
 207       if (v1.language.label < v2.language.label) return -1
 208       if (v1.language.label === v2.language.label) return 0
 209
 210       return 1
 211     })
 212   }
 213
 214   private trackPrivacyChange () {
 215     // We will update the schedule input and the wait transcoding checkbox validators
 216     this.form.controls[ 'privacy' ]
 217       .valueChanges
 218       .pipe(map(res => parseInt(res.toString(), 10)))
 219       .subscribe(
 220         newPrivacyId => {
 221
 222           this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY
 223
 224           // Value changed
 225           const scheduleControl = this.form.get('schedulePublicationAt')
 226           const waitTranscodingControl = this.form.get('waitTranscoding')
 227
 228           if (this.schedulePublicationEnabled) {
 229             scheduleControl.setValidators([ Validators.required ])
 230
 231             waitTranscodingControl.disable()
 232             waitTranscodingControl.setValue(false)
 233           } else {
 234             scheduleControl.clearValidators()
 235
 236             waitTranscodingControl.enable()
 237
 238             // Do not update the control value on first patch (values come from the server)
 239             if (this.firstPatchDone === true) {
 240               waitTranscodingControl.setValue(true)
 241             }
 242           }
 243
 244           scheduleControl.updateValueAndValidity()
 245           waitTranscodingControl.updateValueAndValidity()
 246
 247           this.firstPatchDone = true
 248
 249         }
 250       )
 251   }
 252
 253   private trackChannelChange () {
 254     // We will update the "support" field depending on the channel
 255     this.form.controls[ 'channelId' ]
 256       .valueChanges
 257       .pipe(map(res => parseInt(res.toString(), 10)))
 258       .subscribe(
 259         newChannelId => {
 260           const oldChannelId = parseInt(this.form.value[ 'channelId' ], 10)
 261
 262           // Not initialized yet
 263           if (isNaN(newChannelId)) return
 264           const newChannel = this.userVideoChannels.find(c => c.id === newChannelId)
 265           if (!newChannel) return
 266
 267           // Wait support field update
 268           setTimeout(() => {
 269             const currentSupport = this.form.value[ 'support' ]
 270
 271             // First time we set the channel?
 272             if (isNaN(oldChannelId) && !currentSupport) return this.updateSupportField(newChannel.support)
 273
 274             const oldChannel = this.userVideoChannels.find(c => c.id === oldChannelId)
 275             if (!newChannel || !oldChannel) {
 276               console.error('Cannot find new or old channel.')
 277               return
 278             }
 279
 280             // If the current support text is not the same than the old channel, the user updated it.
 281             // We don't want the user to lose his text, so stop here
 282             if (currentSupport && currentSupport !== oldChannel.support) return
 283
 284             // Update the support text with our new channel
 285             this.updateSupportField(newChannel.support)
 286           })
 287         }
 288       )
 289   }
 290
 291   private updateSupportField (support: string) {
 292     return this.form.patchValue({ support: support || '' })
 293   }
 294 }