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 import { VideoSource } from '@shared/models/videos/video-source'
  14
  15 @Component({
  16   selector: 'my-videos-update',
  17   styleUrls: [ './shared/video-edit.component.scss' ],
  18   templateUrl: './video-update.component.html'
  19 })
  20 export class VideoUpdateComponent extends FormReactive implements OnInit {
  21   video: VideoEdit
  22   videoDetails: VideoDetails
  23   videoSource: VideoSource
  24   userVideoChannels: SelectChannelItem[] = []
  25   videoCaptions: VideoCaptionEdit[] = []
  26   liveVideo: LiveVideo
  27
  28   isUpdatingVideo = false
  29   forbidScheduledPublication = false
  30   waitTranscodingEnabled = true
  31
  32   private updateDone = false
  33
  34   constructor (
  35     protected formValidatorService: FormValidatorService,
  36     private route: ActivatedRoute,
  37     private router: Router,
  38     private notifier: Notifier,
  39     private videoService: VideoService,
  40     private loadingBar: LoadingBarService,
  41     private videoCaptionService: VideoCaptionService,
  42     private liveVideoService: LiveVideoService
  43   ) {
  44     super()
  45   }
  46
  47   ngOnInit () {
  48     this.buildForm({})
  49
  50     const { videoData } = this.route.snapshot.data
  51     const { video, videoChannels, videoCaptions, videoSource, liveVideo } = videoData
  52
  53     this.video = new VideoEdit(video)
  54     this.videoDetails = video
  55
  56     this.userVideoChannels = videoChannels
  57     this.videoCaptions = videoCaptions
  58     this.videoSource = videoSource
  59     this.liveVideo = liveVideo
  60
  61     this.forbidScheduledPublication = this.video.privacy !== VideoPrivacy.PRIVATE
  62   }
  63
  64   onFormBuilt () {
  65     hydrateFormFromVideo(this.form, this.video, true)
  66
  67     if (this.liveVideo) {
  68       this.form.patchValue({
  69         saveReplay: this.liveVideo.saveReplay,
  70         latencyMode: this.liveVideo.latencyMode,
  71         permanentLive: this.liveVideo.permanentLive
  72       })
  73     }
  74   }
  75
  76   @HostListener('window:beforeunload', [ '$event' ])
  77   onUnload (event: any) {
  78     const { text, canDeactivate } = this.canDeactivate()
  79
  80     if (canDeactivate) return
  81
  82     event.returnValue = text
  83     return text
  84   }
  85
  86   canDeactivate (): { canDeactivate: boolean, text?: string } {
  87     if (this.updateDone === true) return { canDeactivate: true }
  88
  89     const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
  90
  91     for (const caption of this.videoCaptions) {
  92       if (caption.action) return { canDeactivate: false, text }
  93     }
  94
  95     return { canDeactivate: this.formChanged === false, text }
  96   }
  97
  98   isWaitTranscodingEnabled () {
  99     if (this.videoDetails.getFiles().length > 1) { // Already transcoded
 100       return false
 101     }
 102
 103     if (this.liveVideo && this.form.value['saveReplay'] !== true) {
 104       return false
 105     }
 106
 107     return true
 108   }
 109
 110   async update () {
 111     await this.waitPendingCheck()
 112     this.forceCheck()
 113
 114     if (!this.form.valid || this.isUpdatingVideo === true) {
 115       return
 116     }
 117
 118     this.video.patch(this.form.value)
 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             const liveVideoUpdate: LiveVideoUpdate = {
 133               saveReplay: !!this.form.value.saveReplay,
 134               permanentLive: !!this.form.value.permanentLive,
 135               latencyMode: this.form.value.latencyMode
 136             }
 137
 138             // Don't update live attributes if they did not change
 139             const liveChanged = Object.keys(liveVideoUpdate)
 140               .some(key => this.liveVideo[key] !== liveVideoUpdate[key])
 141             if (!liveChanged) return of(undefined)
 142
 143             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 144           })
 145         )
 146         .subscribe({
 147           next: () => {
 148             this.updateDone = true
 149             this.isUpdatingVideo = false
 150             this.loadingBar.useRef().complete()
 151             this.notifier.success($localize`Video updated.`)
 152             this.router.navigateByUrl(Video.buildWatchUrl(this.video))
 153           },
 154
 155           error: err => {
 156             this.loadingBar.useRef().complete()
 157             this.isUpdatingVideo = false
 158             this.notifier.error(err.message)
 159             console.error(err)
 160           }
 161         })
 162   }
 163
 164   hydratePluginFieldsFromVideo () {
 165     if (!this.video.pluginData) return
 166
 167     this.form.patchValue({
 168       pluginData: this.video.pluginData
 169     })
 170   }
 171
 172   getVideoUrl () {
 173     return Video.buildWatchUrl(this.videoDetails)
 174   }
 175 }