1 import { of } from 'rxjs'
2 import { map, switchMap } from 'rxjs/operators'
3 import { Component, HostListener, OnInit } from '@angular/core'
4 import { ActivatedRoute, Router } from '@angular/router'
5 import { Notifier } from '@app/core'
6 import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
7 import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
8 import { LiveVideoService } from '@app/shared/shared-video-live'
9 import { LoadingBarService } from '@ngx-loading-bar/core'
10 import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models'
11 import { hydrateFormFromVideo } from './shared/video-edit-utils'
14 selector: 'my-videos-update',
15 styleUrls: [ './shared/video-edit.component.scss' ],
16 templateUrl: './video-update.component.html'
18 export class VideoUpdateComponent extends FormReactive implements OnInit {
20 userVideoChannels: SelectChannelItem[] = []
21 videoCaptions: VideoCaptionEdit[] = []
24 isUpdatingVideo = false
25 schedulePublicationPossible = false
26 waitTranscodingEnabled = true
28 private updateDone = false
31 protected formValidatorService: FormValidatorService,
32 private route: ActivatedRoute,
33 private router: Router,
34 private notifier: Notifier,
35 private videoService: VideoService,
36 private loadingBar: LoadingBarService,
37 private videoCaptionService: VideoCaptionService,
38 private liveVideoService: LiveVideoService
47 .pipe(map(data => data.videoData))
48 .subscribe(({ video, videoChannels, videoCaptions, liveVideo }) => {
49 this.video = new VideoEdit(video)
50 this.userVideoChannels = videoChannels
51 this.videoCaptions = videoCaptions
52 this.liveVideo = liveVideo
54 this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
56 const videoFiles = (video as VideoDetails).getFiles()
57 if (videoFiles.length > 1) { // Already transcoded
58 this.waitTranscodingEnabled = false
61 // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
63 hydrateFormFromVideo(this.form, this.video, true)
66 this.form.patchValue({
67 saveReplay: this.liveVideo.saveReplay,
68 permanentLive: this.liveVideo.permanentLive
76 this.notifier.error(err.message)
81 @HostListener('window:beforeunload', [ '$event' ])
82 onUnload (event: any) {
83 const { text, canDeactivate } = this.canDeactivate()
85 if (canDeactivate) return
87 event.returnValue = text
91 canDeactivate (): { canDeactivate: boolean, text?: string } {
92 if (this.updateDone === true) return { canDeactivate: true }
94 const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
96 for (const caption of this.videoCaptions) {
97 if (caption.action) return { canDeactivate: false, text }
100 return { canDeactivate: this.formChanged === false, text }
106 return this.form.valid
110 if (this.checkForm() === false
111 || this.isUpdatingVideo === true) {
115 this.video.patch(this.form.value)
117 const liveVideoUpdate: LiveVideoUpdate = {
118 saveReplay: this.form.value.saveReplay,
119 permanentLive: this.form.value.permanentLive
122 this.loadingBar.useRef().start()
123 this.isUpdatingVideo = true
126 this.videoService.updateVideo(this.video)
128 // Then update captions
129 switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)),
132 if (!this.liveVideo) return of(undefined)
134 return this.liveVideoService.updateLive(this.video.id, liveVideoUpdate)
139 this.updateDone = true
140 this.isUpdatingVideo = false
141 this.loadingBar.useRef().complete()
142 this.notifier.success($localize`Video updated.`)
143 this.router.navigate([ '/videos/watch', this.video.uuid ])
147 this.loadingBar.useRef().complete()
148 this.isUpdatingVideo = false
149 this.notifier.error(err.message)
155 hydratePluginFieldsFromVideo () {
156 if (!this.video.pluginData) return
158 this.form.patchValue({
159 pluginData: this.video.pluginData