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

   1 import { of } from 'rxjs'
   2 import { 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 { Video, 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   forbidScheduledPublication = 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     const { videoData } = this.route.snapshot.data
  49     const { video, videoChannels, videoCaptions, liveVideo } = videoData
  50
  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.forbidScheduledPublication = this.video.privacy !== VideoPrivacy.PRIVATE
  59   }
  60
  61   onFormBuilt () {
  62     hydrateFormFromVideo(this.form, this.video, true)
  63
  64     if (this.liveVideo) {
  65       this.form.patchValue({
  66         saveReplay: this.liveVideo.saveReplay,
  67         latencyMode: this.liveVideo.latencyMode,
  68         permanentLive: this.liveVideo.permanentLive
  69       })
  70     }
  71   }
  72
  73   @HostListener('window:beforeunload', [ '$event' ])
  74   onUnload (event: any) {
  75     const { text, canDeactivate } = this.canDeactivate()
  76
  77     if (canDeactivate) return
  78
  79     event.returnValue = text
  80     return text
  81   }
  82
  83   canDeactivate (): { canDeactivate: boolean, text?: string } {
  84     if (this.updateDone === true) return { canDeactivate: true }
  85
  86     const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
  87
  88     for (const caption of this.videoCaptions) {
  89       if (caption.action) return { canDeactivate: false, text }
  90     }
  91
  92     return { canDeactivate: this.formChanged === false, text }
  93   }
  94
  95   isWaitTranscodingEnabled () {
  96     if (this.videoDetails.getFiles().length > 1) { // Already transcoded
  97       return false
  98     }
  99
 100     if (this.liveVideo && this.form.value['saveReplay'] !== true) {
 101       return false
 102     }
 103
 104     return true
 105   }
 106
 107   async update () {
 108     await this.waitPendingCheck()
 109     this.forceCheck()
 110
 111     if (!this.form.valid || this.isUpdatingVideo === true) {
 112       return
 113     }
 114
 115     this.video.patch(this.form.value)
 116
 117     this.loadingBar.useRef().start()
 118     this.isUpdatingVideo = true
 119
 120     // Update the video
 121     this.videoService.updateVideo(this.video)
 122         .pipe(
 123           // Then update captions
 124           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
 125
 126           switchMap(() => {
 127             if (!this.liveVideo) return of(undefined)
 128
 129             const liveVideoUpdate: LiveVideoUpdate = {
 130               saveReplay: !!this.form.value.saveReplay,
 131               permanentLive: !!this.form.value.permanentLive,
 132               latencyMode: this.form.value.latencyMode
 133             }
 134
 135             // Don't update live attributes if they did not change
 136             const liveChanged = Object.keys(liveVideoUpdate)
 137               .some(key => this.liveVideo[key] !== liveVideoUpdate[key])
 138             if (!liveChanged) return of(undefined)
 139
 140             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 141           })
 142         )
 143         .subscribe({
 144           next: () => {
 145             this.updateDone = true
 146             this.isUpdatingVideo = false
 147             this.loadingBar.useRef().complete()
 148             this.notifier.success($localize`Video updated.`)
 149             this.router.navigateByUrl(Video.buildWatchUrl(this.video))
 150           },
 151
 152           error: err => {
 153             this.loadingBar.useRef().complete()
 154             this.isUpdatingVideo = false
 155             this.notifier.error(err.message)
 156             console.error(err)
 157           }
 158         })
 159   }
 160
 161   hydratePluginFieldsFromVideo () {
 162     if (!this.video.pluginData) return
 163
 164     this.form.patchValue({
 165       pluginData: this.video.pluginData
 166     })
 167   }
 168
 169   getVideoUrl () {
 170     return Video.buildWatchUrl(this.videoDetails)
 171   }
 172 }