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

   1 import { Component, Input, OnInit } from '@angular/core'
   2 import { FormGroup, ValidatorFn, Validators } from '@angular/forms'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4 import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared'
   5 import { NotificationsService } from 'angular2-notifications'
   6 import { ServerService } from '../../../core/server'
   7 import { VideoEdit } from '../../../shared/video/video-edit.model'
   8 import { map } from 'rxjs/operators'
   9 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
  10 import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar'
  11
  12 @Component({
  13   selector: 'my-video-edit',
  14   styleUrls: [ './video-edit.component.scss' ],
  15   templateUrl: './video-edit.component.html'
  16 })
  17
  18 export class VideoEditComponent implements OnInit {
  19   @Input() form: FormGroup
  20   @Input() formErrors: { [ id: string ]: string } = {}
  21   @Input() validationMessages: FormReactiveValidationMessages = {}
  22   @Input() videoPrivacies = []
  23   @Input() userVideoChannels: { id: number, label: string, support: string }[] = []
  24   @Input() schedulePublicationPossible = true
  25
  26   // So that it can be accessed in the template
  27   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
  28
  29   videoCategories = []
  30   videoLicences = []
  31   videoLanguages = []
  32
  33   tagValidators: ValidatorFn[]
  34   tagValidatorsMessages: { [ name: string ]: string }
  35
  36   schedulePublicationEnabled = false
  37
  38   calendarLocale: any = {}
  39   minScheduledDate = new Date()
  40
  41   calendarTimezone: string
  42   calendarDateFormat: string
  43
  44   constructor (
  45     private formValidatorService: FormValidatorService,
  46     private videoValidatorsService: VideoValidatorsService,
  47     private route: ActivatedRoute,
  48     private router: Router,
  49     private notificationsService: NotificationsService,
  50     private serverService: ServerService,
  51     private i18nPrimengCalendarService: I18nPrimengCalendarService
  52   ) {
  53     this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS
  54     this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES
  55
  56     this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale()
  57     this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone()
  58     this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat()
  59   }
  60
  61   updateForm () {
  62     const defaultValues = {
  63       nsfw: 'false',
  64       commentsEnabled: 'true',
  65       waitTranscoding: 'true',
  66       tags: []
  67     }
  68     const obj = {
  69       name: this.videoValidatorsService.VIDEO_NAME,
  70       privacy: this.videoValidatorsService.VIDEO_PRIVACY,
  71       channelId: this.videoValidatorsService.VIDEO_CHANNEL,
  72       nsfw: null,
  73       commentsEnabled: null,
  74       waitTranscoding: null,
  75       category: this.videoValidatorsService.VIDEO_CATEGORY,
  76       licence: this.videoValidatorsService.VIDEO_LICENCE,
  77       language: this.videoValidatorsService.VIDEO_LANGUAGE,
  78       description: this.videoValidatorsService.VIDEO_DESCRIPTION,
  79       tags: null,
  80       thumbnailfile: null,
  81       previewfile: null,
  82       support: this.videoValidatorsService.VIDEO_SUPPORT,
  83       schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT
  84     }
  85
  86     this.formValidatorService.updateForm(
  87       this.form,
  88       this.formErrors,
  89       this.validationMessages,
  90       obj,
  91       defaultValues
  92     )
  93
  94     this.trackChannelChange()
  95     this.trackPrivacyChange()
  96   }
  97
  98   ngOnInit () {
  99     this.updateForm()
 100
 101     this.videoCategories = this.serverService.getVideoCategories()
 102     this.videoLicences = this.serverService.getVideoLicences()
 103     this.videoLanguages = this.serverService.getVideoLanguages()
 104
 105     setTimeout(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
 106   }
 107
 108   private trackPrivacyChange () {
 109     // We will update the "support" field depending on the channel
 110     this.form.controls[ 'privacy' ]
 111       .valueChanges
 112       .pipe(map(res => parseInt(res.toString(), 10)))
 113       .subscribe(
 114         newPrivacyId => {
 115           this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY
 116
 117           // Value changed
 118           const scheduleControl = this.form.get('schedulePublicationAt')
 119           const waitTranscodingControl = this.form.get('waitTranscoding')
 120
 121           if (this.schedulePublicationEnabled) {
 122             scheduleControl.setValidators([ Validators.required ])
 123
 124             waitTranscodingControl.disable()
 125             waitTranscodingControl.setValue(false)
 126           } else {
 127             scheduleControl.clearValidators()
 128
 129             waitTranscodingControl.enable()
 130             waitTranscodingControl.setValue(true)
 131           }
 132
 133           scheduleControl.updateValueAndValidity()
 134           waitTranscodingControl.updateValueAndValidity()
 135         }
 136       )
 137   }
 138
 139   private trackChannelChange () {
 140     // We will update the "support" field depending on the channel
 141     this.form.controls[ 'channelId' ]
 142       .valueChanges
 143       .pipe(map(res => parseInt(res.toString(), 10)))
 144       .subscribe(
 145         newChannelId => {
 146           const oldChannelId = parseInt(this.form.value[ 'channelId' ], 10)
 147           const currentSupport = this.form.value[ 'support' ]
 148
 149           // Not initialized yet
 150           if (isNaN(newChannelId)) return
 151           const newChannel = this.userVideoChannels.find(c => c.id === newChannelId)
 152           if (!newChannel) return
 153
 154           // First time we set the channel?
 155           if (isNaN(oldChannelId)) return this.updateSupportField(newChannel.support)
 156           const oldChannel = this.userVideoChannels.find(c => c.id === oldChannelId)
 157
 158           if (!newChannel || !oldChannel) {
 159             console.error('Cannot find new or old channel.')
 160             return
 161           }
 162
 163           // If the current support text is not the same than the old channel, the user updated it.
 164           // We don't want the user to lose his text, so stop here
 165           if (currentSupport && currentSupport !== oldChannel.support) return
 166
 167           // Update the support text with our new channel
 168           this.updateSupportField(newChannel.support)
 169         }
 170       )
 171   }
 172
 173   private updateSupportField (support: string) {
 174     return this.form.patchValue({ support: support || '' })
 175   }
 176 }