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