client/src/app/+videos/+video-edit/video-update.component.ts

   1 import { of } from 'rxjs'
   2 import { map, 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     this.route.data
  49         .pipe(map(data => data.videoData))
  50         .subscribe({
  51           next: ({ video, videoChannels, videoCaptions, liveVideo }) => {
  52             this.video = new VideoEdit(video)
  53             this.videoDetails = video
  54
  55             this.userVideoChannels = videoChannels
  56             this.videoCaptions = videoCaptions
  57             this.liveVideo = liveVideo
  58
  59             this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
  60
  61             // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
  62             setTimeout(() => {
  63               hydrateFormFromVideo(this.form, this.video, true)
  64
  65               if (this.liveVideo) {
  66                 this.form.patchValue({
  67                   saveReplay: this.liveVideo.saveReplay,
  68                   permanentLive: this.liveVideo.permanentLive
  69                 })
  70               }
  71             })
  72           },
  73
  74           error: err => {
  75             console.error(err)
  76             this.notifier.error(err.message)
  77           }
  78         })
  79   }
  80
  81   @HostListener('window:beforeunload', [ '$event' ])
  82   onUnload (event: any) {
  83     const { text, canDeactivate } = this.canDeactivate()
  84
  85     if (canDeactivate) return
  86
  87     event.returnValue = text
  88     return text
  89   }
  90
  91   canDeactivate (): { canDeactivate: boolean, text?: string } {
  92     if (this.updateDone === true) return { canDeactivate: true }
  93
  94     const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
  95
  96     for (const caption of this.videoCaptions) {
  97       if (caption.action) return { canDeactivate: false, text }
  98     }
  99
 100     return { canDeactivate: this.formChanged === false, text }
 101   }
 102
 103   checkForm () {
 104     this.forceCheck()
 105
 106     return this.form.valid
 107   }
 108
 109   isWaitTranscodingEnabled () {
 110     if (this.videoDetails.getFiles().length > 1) { // Already transcoded
 111       return false
 112     }
 113
 114     if (this.liveVideo && this.form.value['saveReplay'] !== true) {
 115       return false
 116     }
 117
 118     return true
 119   }
 120
 121   update () {
 122     if (this.checkForm() === false
 123       || this.isUpdatingVideo === true) {
 124       return
 125     }
 126
 127     this.video.patch(this.form.value)
 128
 129     this.loadingBar.useRef().start()
 130     this.isUpdatingVideo = true
 131
 132     // Update the video
 133     this.videoService.updateVideo(this.video)
 134         .pipe(
 135           // Then update captions
 136           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
 137
 138           switchMap(() => {
 139             if (!this.liveVideo) return of(undefined)
 140
 141             const liveVideoUpdate: LiveVideoUpdate = {
 142               saveReplay: !!this.form.value.saveReplay,
 143               permanentLive: !!this.form.value.permanentLive
 144             }
 145
 146             // Don't update live attributes if they did not change
 147             const liveChanged = Object.keys(liveVideoUpdate)
 148               .some(key => this.liveVideo[key] !== liveVideoUpdate[key])
 149             if (!liveChanged) return of(undefined)
 150
 151             return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
 152           })
 153         )
 154         .subscribe({
 155           next: () => {
 156             this.updateDone = true
 157             this.isUpdatingVideo = false
 158             this.loadingBar.useRef().complete()
 159             this.notifier.success($localize`Video updated.`)
 160             this.router.navigateByUrl(Video.buildWatchUrl(this.video))
 161           },
 162
 163           error: err => {
 164             this.loadingBar.useRef().complete()
 165             this.isUpdatingVideo = false
 166             this.notifier.error(err.message)
 167             console.error(err)
 168           }
 169         })
 170   }
 171
 172   hydratePluginFieldsFromVideo () {
 173     if (!this.video.pluginData) return
 174
 175     this.form.patchValue({
 176       pluginData: this.video.pluginData
 177     })
 178   }
 179
 180   getVideoUrl () {
 181     return Video.buildWatchUrl(this.videoDetails)
 182   }
 183 }