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

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