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'
12 selector: 'my-videos-update',
13 styleUrls: [ './shared/video-edit.component.scss' ],
14 templateUrl: './video-update.component.html'
16 export class VideoUpdateComponent extends FormReactive implements OnInit {
18 userVideoChannels: SelectChannelItem[] = []
19 videoCaptions: VideoCaptionEdit[] = []
22 isUpdatingVideo = false
23 schedulePublicationPossible = false
24 waitTranscodingEnabled = true
26 private updateDone = false
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
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
51 this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
53 const videoFiles = (video as VideoDetails).getFiles()
54 if (videoFiles.length > 1) { // Already transcoded
55 this.waitTranscodingEnabled = false
58 // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
59 setTimeout(() => hydrateFormFromVideo(this.form, this.video, true))
64 this.notifier.error(err.message)
69 @HostListener('window:beforeunload', [ '$event' ])
70 onUnload (event: any) {
71 const { text, canDeactivate } = this.canDeactivate()
73 if (canDeactivate) return
75 event.returnValue = text
79 canDeactivate (): { canDeactivate: boolean, text?: string } {
80 if (this.updateDone === true) return { canDeactivate: true }
82 const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
84 for (const caption of this.videoCaptions) {
85 if (caption.action) return { canDeactivate: false, text }
88 return { canDeactivate: this.formChanged === false, text }
94 return this.form.valid
98 if (this.checkForm() === false
99 || this.isUpdatingVideo === true) {
103 this.video.patch(this.form.value)
105 this.loadingBar.useRef().start()
106 this.isUpdatingVideo = true
109 this.videoService.updateVideo(this.video)
111 // Then update captions
112 switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions))
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 ])
124 this.loadingBar.useRef().complete()
125 this.isUpdatingVideo = false
126 this.notifier.error(err.message)
132 hydratePluginFieldsFromVideo () {
133 if (!this.video.pluginData) return
135 this.form.patchValue({
136 pluginData: this.video.pluginData