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