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

   1 import { map, switchMap } from 'rxjs/operators'
   2 import { Component, HostListener, OnInit } from '@angular/core'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4 import { Notifier } from '@app/core'
   5 import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
   6 import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
   7 import { LoadingBarService } from '@ngx-loading-bar/core'
   8 import { VideoPrivacy, VideoLive } from '@shared/models'
   9 import { hydrateFormFromVideo } from './shared/video-edit-utils'
  10
  11 @Component({
  12   selector: 'my-videos-update',
  13   styleUrls: [ './shared/video-edit.component.scss' ],
  14   templateUrl: './video-update.component.html'
  15 })
  16 export class VideoUpdateComponent extends FormReactive implements OnInit {
  17   video: VideoEdit
  18   userVideoChannels: SelectChannelItem[] = []
  19   videoCaptions: VideoCaptionEdit[] = []
  20   videoLive: VideoLive
  21
  22   isUpdatingVideo = false
  23   schedulePublicationPossible = false
  24   waitTranscodingEnabled = true
  25
  26   private updateDone = false
  27
  28   constructor (
  29     protected formValidatorService: FormValidatorService,
  30     private route: ActivatedRoute,
  31     private router: Router,
  32     private notifier: Notifier,
  33     private videoService: VideoService,
  34     private loadingBar: LoadingBarService,
  35     private videoCaptionService: VideoCaptionService
  36     ) {
  37     super()
  38   }
  39
  40   ngOnInit () {
  41     this.buildForm({})
  42
  43     this.route.data
  44         .pipe(map(data => data.videoData))
  45         .subscribe(({ video, videoChannels, videoCaptions, videoLive }) => {
  46           this.video = new VideoEdit(video)
  47           this.userVideoChannels = videoChannels
  48           this.videoCaptions = videoCaptions
  49           this.videoLive = videoLive
  50
  51           this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
  52
  53           const videoFiles = (video as VideoDetails).getFiles()
  54           if (videoFiles.length > 1) { // Already transcoded
  55             this.waitTranscodingEnabled = false
  56           }
  57
  58           // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
  59           setTimeout(() => hydrateFormFromVideo(this.form, this.video, true))
  60         },
  61
  62         err => {
  63           console.error(err)
  64           this.notifier.error(err.message)
  65         }
  66       )
  67   }
  68
  69   @HostListener('window:beforeunload', [ '$event' ])
  70   onUnload (event: any) {
  71     const { text, canDeactivate } = this.canDeactivate()
  72
  73     if (canDeactivate) return
  74
  75     event.returnValue = text
  76     return text
  77   }
  78
  79   canDeactivate (): { canDeactivate: boolean, text?: string } {
  80     if (this.updateDone === true) return { canDeactivate: true }
  81
  82     const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
  83
  84     for (const caption of this.videoCaptions) {
  85       if (caption.action) return { canDeactivate: false, text }
  86     }
  87
  88     return { canDeactivate: this.formChanged === false, text }
  89   }
  90
  91   checkForm () {
  92     this.forceCheck()
  93
  94     return this.form.valid
  95   }
  96
  97   update () {
  98     if (this.checkForm() === false
  99       || this.isUpdatingVideo === true) {
 100       return
 101     }
 102
 103     this.video.patch(this.form.value)
 104
 105     this.loadingBar.useRef().start()
 106     this.isUpdatingVideo = true
 107
 108     // Update the video
 109     this.videoService.updateVideo(this.video)
 110         .pipe(
 111           // Then update captions
 112           switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions))
 113         )
 114         .subscribe(
 115           () => {
 116             this.updateDone = true
 117             this.isUpdatingVideo = false
 118             this.loadingBar.useRef().complete()
 119             this.notifier.success($localize`Video updated.`)
 120             this.router.navigate([ '/videos/watch', this.video.uuid ])
 121           },
 122
 123           err => {
 124             this.loadingBar.useRef().complete()
 125             this.isUpdatingVideo = false
 126             this.notifier.error(err.message)
 127             console.error(err)
 128           }
 129         )
 130   }
 131
 132   hydratePluginFieldsFromVideo () {
 133     if (!this.video.pluginData) return
 134
 135     this.form.patchValue({
 136       pluginData: this.video.pluginData
 137     })
 138   }
 139 }