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

   1 import { of } from 'rxjs'
   2 import { map, switchMap } from 'rxjs/operators'
   3 import { SelectChannelItem } from 'src/types/select-options-item.model'
   4 import { Component, HostListener, OnInit } from '@angular/core'
   5 import { ActivatedRoute, Router } from '@angular/router'
   6 import { Notifier } from '@app/core'
   7 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
   8 import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
   9 import { LiveVideoService } from '@app/shared/shared-video-live'
  10 import { LoadingBarService } from '@ngx-loading-bar/core'
  11 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
  12 import { hydrateFormFromVideo } from './shared/video-edit-utils'
  13
  14 @Component({
  15   selector: 'my-videos-update',
  16   styleUrls: [ './shared/video-edit.component.scss' ],
  17   templateUrl: './video-update.component.html'
  18 })
  19 export class VideoUpdateComponent extends FormReactive implements OnInit {
  20   video: VideoEdit
  21   videoDetails: VideoDetails
  22   userVideoChannels: SelectChannelItem[] = []
  23   videoCaptions: VideoCaptionEdit[] = []
  24   liveVideo: LiveVideo
  25
  26   isUpdatingVideo = false
  27   schedulePublicationPossible = false
  28   waitTranscodingEnabled = true
  29
  30   private updateDone = false
  31
  32   constructor (
  33     protected formValidatorService: FormValidatorService,
  34     private route: ActivatedRoute,
  35     private router: Router,
  36     private notifier: Notifier,
  37     private videoService: VideoService,
  38     private loadingBar: LoadingBarService,
  39     private videoCaptionService: VideoCaptionService,
  40     private liveVideoService: LiveVideoService
  41     ) {
  42     super()
  43   }
  44
  45   ngOnInit () {
  46     this.buildForm({})
  47
  48     this.route.data
  49         .pipe(map(data => data.videoData))
  50         .subscribe(({ video, videoChannels, videoCaptions, liveVideo }) => {
  51           this.video = new VideoEdit(video)
  52           this.videoDetails = video
  53
  54           this.userVideoChannels = videoChannels
  55           this.videoCaptions = videoCaptions
  56           this.liveVideo = liveVideo
  57
  58           this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
  59
  60           // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
  61           setTimeout(() => {
  62             hydrateFormFromVideo(this.form, this.video, true)
  63
  64             if (this.liveVideo) {
  65               this.form.patchValue({
  66                 saveReplay: this.liveVideo.saveReplay,
  67                 permanentLive: this.liveVideo.permanentLive
  68               })
  69             }
  70           })
  71         },
  72
  73         err => {
  74           console.error(err)
  75           this.notifier.error(err.message)
  76         }
  77       )
  78   }
  79
  80   @HostListener('window:beforeunload', [ '$event' ])
  81   onUnload (event: any) {
  82     const { text, canDeactivate } = this.canDeactivate()
  83
  84     if (canDeactivate) return
  85
  86     event.returnValue = text
  87     return text
  88   }
  89
  90   canDeactivate (): { canDeactivate: boolean, text?: string } {
  91     if (this.updateDone === true) return { canDeactivate: true }
  92
  93     const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
  94
  95     for (const caption of this.videoCaptions) {
  96       if (caption.action) return { canDeactivate: false, text }
  97     }
  98
  99     return { canDeactivate: this.formChanged === false, text }
 100   }
 101
 102   checkForm () {
 103     this.forceCheck()
 104
 105     return this.form.valid
 106   }
 107
 108   isWaitTranscodingEnabled () {
 109     if (this.videoDetails.getFiles().length > 1) { // Already transcoded
 110       return false
 111     }
 112
 113     if (this.liveVideo && this.form.value['saveReplay'] !== true) {
 114       return false
 115     }
 116
 117     return true
 118   }
 119
 120   update () {
 121     if (this.checkForm() === false
 122       || this.isUpdatingVideo === true) {
 123       return
 124     }
 125
 126     this.video.patch(this.form.value)
 127
 128     this.loadingBar.useRef().start()
 129     this.isUpdatingVideo = true
 130
 131     // Update the video
 132     this.videoService.updateVideo(this.video)
 133         .pipe(
 134           // Then update captions
 135           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
 136
 137           switchMap(() => {
 138             if (!this.liveVideo) return of(undefined)
 139
 140             const liveVideoUpdate: LiveVideoUpdate = {
 141               saveReplay: !!this.form.value.saveReplay,
 142               permanentLive: !!this.form.value.permanentLive
 143             }
 144
 145             // Don't update live attributes if they did not change
 146             const liveChanged = Object.keys(liveVideoUpdate)
 147               .some(key => this.liveVideo[key] !== liveVideoUpdate[key])
 148             if (!liveChanged) return of(undefined)
 149
 150             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 151           })
 152         )
 153         .subscribe(
 154           () => {
 155             this.updateDone = true
 156             this.isUpdatingVideo = false
 157             this.loadingBar.useRef().complete()
 158             this.notifier.success($localize`Video updated.`)
 159             this.router.navigate([ '/videos/watch', this.video.uuid ])
 160           },
 161
 162           err => {
 163             this.loadingBar.useRef().complete()
 164             this.isUpdatingVideo = false
 165             this.notifier.error(err.message)
 166             console.error(err)
 167           }
 168         )
 169   }
 170
 171   hydratePluginFieldsFromVideo () {
 172     if (!this.video.pluginData) return
 173
 174     this.form.patchValue({
 175       pluginData: this.video.pluginData
 176     })
 177   }
 178 }