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   userVideoChannels: SelectChannelItem[] = []
  21   videoCaptions: VideoCaptionEdit[] = []
  22   liveVideo: LiveVideo
  23
  24   isUpdatingVideo = false
  25   schedulePublicationPossible = false
  26   waitTranscodingEnabled = true
  27
  28   private updateDone = false
  29
  30   constructor (
  31     protected formValidatorService: FormValidatorService,
  32     private route: ActivatedRoute,
  33     private router: Router,
  34     private notifier: Notifier,
  35     private videoService: VideoService,
  36     private loadingBar: LoadingBarService,
  37     private videoCaptionService: VideoCaptionService,
  38     private liveVideoService: LiveVideoService
  39     ) {
  40     super()
  41   }
  42
  43   ngOnInit () {
  44     this.buildForm({})
  45
  46     this.route.data
  47         .pipe(map(data => data.videoData))
  48         .subscribe(({ video, videoChannels, videoCaptions, liveVideo }) => {
  49           this.video = new VideoEdit(video)
  50           this.userVideoChannels = videoChannels
  51           this.videoCaptions = videoCaptions
  52           this.liveVideo = liveVideo
  53
  54           this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
  55
  56           const videoFiles = (video as VideoDetails).getFiles()
  57           if (videoFiles.length > 1) { // Already transcoded
  58             this.waitTranscodingEnabled = false
  59           }
  60
  61           // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
  62           setTimeout(() => {
  63             hydrateFormFromVideo(this.form, this.video, true)
  64
  65             if (this.liveVideo) {
  66               this.form.patchValue({
  67                 saveReplay: this.liveVideo.saveReplay
  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   update () {
 109     if (this.checkForm() === false
 110       || this.isUpdatingVideo === true) {
 111       return
 112     }
 113
 114     this.video.patch(this.form.value)
 115
 116     const liveVideoUpdate: LiveVideoUpdate = {
 117       saveReplay: this.form.value.saveReplay
 118     }
 119
 120     this.loadingBar.useRef().start()
 121     this.isUpdatingVideo = true
 122
 123     // Update the video
 124     this.videoService.updateVideo(this.video)
 125         .pipe(
 126           // Then update captions
 127           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
 128
 129           switchMap(() => {
 130             if (!this.liveVideo) return of(undefined)
 131
 132             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 133           })
 134         )
 135         .subscribe(
 136           () => {
 137             this.updateDone = true
 138             this.isUpdatingVideo = false
 139             this.loadingBar.useRef().complete()
 140             this.notifier.success($localize`Video updated.`)
 141             this.router.navigate([ '/videos/watch', this.video.uuid ])
 142           },
 143
 144           err => {
 145             this.loadingBar.useRef().complete()
 146             this.isUpdatingVideo = false
 147             this.notifier.error(err.message)
 148             console.error(err)
 149           }
 150         )
 151   }
 152
 153   hydratePluginFieldsFromVideo () {
 154     if (!this.video.pluginData) return
 155
 156     this.form.patchValue({
 157       pluginData: this.video.pluginData
 158     })
 159   }
 160 }