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

   1 import { map, switchMap } from 'rxjs/operators'
   2 import { Component, HostListener, OnInit } from '@angular/core'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4 import { Notifier } from '@app/core'
   5 import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
   6 import { LiveVideoService, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
   7 import { LoadingBarService } from '@ngx-loading-bar/core'
   8 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
   9 import { hydrateFormFromVideo } from './shared/video-edit-utils'
  10 import { of } from 'rxjs'
  11
  12 @Component({
  13   selector: 'my-videos-update',
  14   styleUrls: [ './shared/video-edit.component.scss' ],
  15   templateUrl: './video-update.component.html'
  16 })
  17 export class VideoUpdateComponent extends FormReactive implements OnInit {
  18   video: VideoEdit
  19   userVideoChannels: SelectChannelItem[] = []
  20   videoCaptions: VideoCaptionEdit[] = []
  21   liveVideo: LiveVideo
  22
  23   isUpdatingVideo = false
  24   schedulePublicationPossible = false
  25   waitTranscodingEnabled = true
  26
  27   private updateDone = false
  28
  29   constructor (
  30     protected formValidatorService: FormValidatorService,
  31     private route: ActivatedRoute,
  32     private router: Router,
  33     private notifier: Notifier,
  34     private videoService: VideoService,
  35     private loadingBar: LoadingBarService,
  36     private videoCaptionService: VideoCaptionService,
  37     private liveVideoService: LiveVideoService
  38     ) {
  39     super()
  40   }
  41
  42   ngOnInit () {
  43     this.buildForm({})
  44
  45     this.route.data
  46         .pipe(map(data => data.videoData))
  47         .subscribe(({ video, videoChannels, videoCaptions, liveVideo }) => {
  48           this.video = new VideoEdit(video)
  49           this.userVideoChannels = videoChannels
  50           this.videoCaptions = videoCaptions
  51           this.liveVideo = liveVideo
  52
  53           this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
  54
  55           const videoFiles = (video as VideoDetails).getFiles()
  56           if (videoFiles.length > 1) { // Already transcoded
  57             this.waitTranscodingEnabled = false
  58           }
  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               })
  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   update () {
 108     if (this.checkForm() === false
 109       || this.isUpdatingVideo === true) {
 110       return
 111     }
 112
 113     this.video.patch(this.form.value)
 114
 115     const liveVideoUpdate: LiveVideoUpdate = {
 116       saveReplay: this.form.value.saveReplay
 117     }
 118
 119     this.loadingBar.useRef().start()
 120     this.isUpdatingVideo = true
 121
 122     // Update the video
 123     this.videoService.updateVideo(this.video)
 124         .pipe(
 125           // Then update captions
 126           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
 127
 128           switchMap(() => {
 129             if (!this.liveVideo) return of(undefined)
 130
 131             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 132           })
 133         )
 134         .subscribe(
 135           () => {
 136             this.updateDone = true
 137             this.isUpdatingVideo = false
 138             this.loadingBar.useRef().complete()
 139             this.notifier.success($localize`Video updated.`)
 140             this.router.navigate([ '/videos/watch', this.video.uuid ])
 141           },
 142
 143           err => {
 144             this.loadingBar.useRef().complete()
 145             this.isUpdatingVideo = false
 146             this.notifier.error(err.message)
 147             console.error(err)
 148           }
 149         )
 150   }
 151
 152   hydratePluginFieldsFromVideo () {
 153     if (!this.video.pluginData) return
 154
 155     this.form.patchValue({
 156       pluginData: this.video.pluginData
 157     })
 158   }
 159 }