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   schedulePublicationPossible = 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.schedulePublicationPossible = 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   checkForm () {
  95     this.forceCheck()
  96
  97     return this.form.valid
  98   }
  99
 100   isWaitTranscodingEnabled () {
 101     if (this.videoDetails.getFiles().length > 1) { // Already transcoded
 102       return false
 103     }
 104
 105     if (this.liveVideo && this.form.value['saveReplay'] !== true) {
 106       return false
 107     }
 108
 109     return true
 110   }
 111
 112   update () {
 113     if (this.checkForm() === false || this.isUpdatingVideo === true) {
 114       return
 115     }
 116
 117     this.video.patch(this.form.value)
 118
 119     this.loadingBar.useRef().start()
 120     this.isUpdatingVideo = true
 121
 122     // Update the video
 123     this.videoService.updateVideo(this.video)
 124         .pipe(
 125           // Then update captions
 126           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
 127
 128           switchMap(() => {
 129             if (!this.liveVideo) return of(undefined)
 130
 131             const liveVideoUpdate: LiveVideoUpdate = {
 132               saveReplay: !!this.form.value.saveReplay,
 133               permanentLive: !!this.form.value.permanentLive
 134             }
 135
 136             // Don't update live attributes if they did not change
 137             const liveChanged = Object.keys(liveVideoUpdate)
 138               .some(key => this.liveVideo[key] !== liveVideoUpdate[key])
 139             if (!liveChanged) return of(undefined)
 140
 141             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 142           })
 143         )
 144         .subscribe({
 145           next: () => {
 146             this.updateDone = true
 147             this.isUpdatingVideo = false
 148             this.loadingBar.useRef().complete()
 149             this.notifier.success($localize`Video updated.`)
 150             this.router.navigateByUrl(Video.buildWatchUrl(this.video))
 151           },
 152
 153           error: err => {
 154             this.loadingBar.useRef().complete()
 155             this.isUpdatingVideo = false
 156             this.notifier.error(err.message)
 157             console.error(err)
 158           }
 159         })
 160   }
 161
 162   hydratePluginFieldsFromVideo () {
 163     if (!this.video.pluginData) return
 164
 165     this.form.patchValue({
 166       pluginData: this.video.pluginData
 167     })
 168   }
 169
 170   getVideoUrl () {
 171     return Video.buildWatchUrl(this.videoDetails)
 172   }
 173 }