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                 permanentLive: this.liveVideo.permanentLive
  69               })
  70             }
  71           })
  72         },
  73
  74         err => {
  75           console.error(err)
  76           this.notifier.error(err.message)
  77         }
  78       )
  79   }
  80
  81   @HostListener('window:beforeunload', [ '$event' ])
  82   onUnload (event: any) {
  83     const { text, canDeactivate } = this.canDeactivate()
  84
  85     if (canDeactivate) return
  86
  87     event.returnValue = text
  88     return text
  89   }
  90
  91   canDeactivate (): { canDeactivate: boolean, text?: string } {
  92     if (this.updateDone === true) return { canDeactivate: true }
  93
  94     const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
  95
  96     for (const caption of this.videoCaptions) {
  97       if (caption.action) return { canDeactivate: false, text }
  98     }
  99
 100     return { canDeactivate: this.formChanged === false, text }
 101   }
 102
 103   checkForm () {
 104     this.forceCheck()
 105
 106     return this.form.valid
 107   }
 108
 109   update () {
 110     if (this.checkForm() === false
 111       || this.isUpdatingVideo === true) {
 112       return
 113     }
 114
 115     this.video.patch(this.form.value)
 116
 117     const liveVideoUpdate: LiveVideoUpdate = {
 118       saveReplay: this.form.value.saveReplay,
 119       permanentLive: this.form.value.permanentLive
 120     }
 121
 122     this.loadingBar.useRef().start()
 123     this.isUpdatingVideo = true
 124
 125     // Update the video
 126     this.videoService.updateVideo(this.video)
 127         .pipe(
 128           // Then update captions
 129           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
 130
 131           switchMap(() => {
 132             if (!this.liveVideo) return of(undefined)
 133
 134             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 135           })
 136         )
 137         .subscribe(
 138           () => {
 139             this.updateDone = true
 140             this.isUpdatingVideo = false
 141             this.loadingBar.useRef().complete()
 142             this.notifier.success($localize`Video updated.`)
 143             this.router.navigate([ '/videos/watch', this.video.uuid ])
 144           },
 145
 146           err => {
 147             this.loadingBar.useRef().complete()
 148             this.isUpdatingVideo = false
 149             this.notifier.error(err.message)
 150             console.error(err)
 151           }
 152         )
 153   }
 154
 155   hydratePluginFieldsFromVideo () {
 156     if (!this.video.pluginData) return
 157
 158     this.form.patchValue({
 159       pluginData: this.video.pluginData
 160     })
 161   }
 162 }