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