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, FormReactiveService } 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 { logger } from '@root-helpers/logger'
  12 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
  13 import { VideoSource } from '@shared/models/videos/video-source'
  14 import { hydrateFormFromVideo } from './shared/video-edit-utils'
  15
  16 @Component({
  17   selector: 'my-videos-update',
  18   styleUrls: [ './shared/video-edit.component.scss' ],
  19   templateUrl: './video-update.component.html'
  20 })
  21 export class VideoUpdateComponent extends FormReactive implements OnInit {
  22   videoEdit: VideoEdit
  23   videoDetails: VideoDetails
  24   videoSource: VideoSource
  25   userVideoChannels: SelectChannelItem[] = []
  26   videoCaptions: VideoCaptionEdit[] = []
  27   liveVideo: LiveVideo
  28
  29   isUpdatingVideo = false
  30   forbidScheduledPublication = false
  31
  32   private updateDone = false
  33
  34   constructor (
  35     protected formReactiveService: FormReactiveService,
  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.videoDetails = video
  54     this.videoEdit = new VideoEdit(this.videoDetails)
  55
  56     this.userVideoChannels = videoChannels
  57     this.videoCaptions = videoCaptions
  58     this.videoSource = videoSource
  59     this.liveVideo = liveVideo
  60
  61     this.forbidScheduledPublication = this.videoEdit.privacy !== VideoPrivacy.PRIVATE
  62   }
  63
  64   onFormBuilt () {
  65     hydrateFormFromVideo(this.form, this.videoEdit, 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   isWaitTranscodingHidden () {
  99     if (this.videoDetails.getFiles().length > 1) { // Already transcoded
 100       return true
 101     }
 102
 103     return false
 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.videoEdit.patch(this.form.value)
 115
 116     this.loadingBar.useRef().start()
 117     this.isUpdatingVideo = true
 118
 119     // Update the video
 120     this.videoService.updateVideo(this.videoEdit)
 121         .pipe(
 122           // Then update captions
 123           switchMap(() => this.videoCaptionService.updateCaptions(this.videoEdit.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               latencyMode: this.form.value.latencyMode
 132             }
 133
 134             // Don't update live attributes if they did not change
 135             const liveChanged = Object.keys(liveVideoUpdate)
 136               .some(key => this.liveVideo[key] !== liveVideoUpdate[key])
 137             if (!liveChanged) return of(undefined)
 138
 139             return this.liveVideoService.updateLive(this.videoEdit.id, liveVideoUpdate)
 140           })
 141         )
 142         .subscribe({
 143           next: () => {
 144             this.updateDone = true
 145             this.isUpdatingVideo = false
 146             this.loadingBar.useRef().complete()
 147             this.notifier.success($localize`Video updated.`)
 148             this.router.navigateByUrl(Video.buildWatchUrl(this.videoEdit))
 149           },
 150
 151           error: err => {
 152             this.loadingBar.useRef().complete()
 153             this.isUpdatingVideo = false
 154             this.notifier.error(err.message)
 155             logger.error(err)
 156           }
 157         })
 158   }
 159
 160   hydratePluginFieldsFromVideo () {
 161     if (!this.videoEdit.pluginData) return
 162
 163     this.form.patchValue({
 164       pluginData: this.videoEdit.pluginData
 165     })
 166   }
 167
 168   getVideoUrl () {
 169     return Video.buildWatchUrl(this.videoDetails)
 170   }
 171 }