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