2018-05-15 11:55:51 +02:00
|
|
|
import { map, switchMap } from 'rxjs/operators'
|
2019-01-14 14:55:43 +01:00
|
|
|
import { Component, HostListener, OnInit } from '@angular/core'
|
2017-06-16 14:32:15 +02:00
|
|
|
import { ActivatedRoute, Router } from '@angular/router'
|
2018-12-19 16:04:34 +01:00
|
|
|
import { Notifier } from '@app/core'
|
2020-08-11 16:07:53 +02:00
|
|
|
import { FormReactive, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
|
2020-06-23 14:10:17 +02:00
|
|
|
import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main'
|
|
|
|
import { LoadingBarService } from '@ngx-loading-bar/core'
|
2020-09-25 10:04:21 +02:00
|
|
|
import { LiveVideo, VideoPrivacy } from '@shared/models'
|
2020-09-17 09:20:52 +02:00
|
|
|
import { hydrateFormFromVideo } from './shared/video-edit-utils'
|
2016-04-14 22:07:46 +02:00
|
|
|
|
2016-03-14 13:50:19 +01:00
|
|
|
@Component({
|
2017-04-10 21:15:28 +02:00
|
|
|
selector: 'my-videos-update',
|
2017-11-28 15:40:53 +01:00
|
|
|
styleUrls: [ './shared/video-edit.component.scss' ],
|
2017-04-10 21:15:28 +02:00
|
|
|
templateUrl: './video-update.component.html'
|
2016-03-14 13:50:19 +01:00
|
|
|
})
|
2017-04-10 21:15:28 +02:00
|
|
|
export class VideoUpdateComponent extends FormReactive implements OnInit {
|
2017-10-25 16:43:19 +02:00
|
|
|
video: VideoEdit
|
2020-09-17 09:20:52 +02:00
|
|
|
userVideoChannels: SelectChannelItem[] = []
|
|
|
|
videoCaptions: VideoCaptionEdit[] = []
|
2020-09-25 10:04:21 +02:00
|
|
|
liveVideo: LiveVideo
|
2016-09-09 22:16:51 +02:00
|
|
|
|
2018-02-16 17:24:47 +01:00
|
|
|
isUpdatingVideo = false
|
2018-06-15 16:52:15 +02:00
|
|
|
schedulePublicationPossible = false
|
2018-12-11 14:52:50 +01:00
|
|
|
waitTranscodingEnabled = true
|
2016-03-14 13:50:19 +01:00
|
|
|
|
2018-07-25 10:28:43 +02:00
|
|
|
private updateDone = false
|
|
|
|
|
2017-06-16 14:32:15 +02:00
|
|
|
constructor (
|
2018-06-05 10:58:45 +02:00
|
|
|
protected formValidatorService: FormValidatorService,
|
2017-04-10 21:15:28 +02:00
|
|
|
private route: ActivatedRoute,
|
2017-01-27 16:14:11 +01:00
|
|
|
private router: Router,
|
2018-12-19 16:04:34 +01:00
|
|
|
private notifier: Notifier,
|
2017-12-20 14:29:55 +01:00
|
|
|
private videoService: VideoService,
|
2018-05-16 11:33:11 +02:00
|
|
|
private loadingBar: LoadingBarService,
|
2020-08-12 10:40:04 +02:00
|
|
|
private videoCaptionService: VideoCaptionService
|
|
|
|
) {
|
2017-06-16 14:32:15 +02:00
|
|
|
super()
|
2016-09-09 22:16:51 +02:00
|
|
|
}
|
2016-03-14 13:50:19 +01:00
|
|
|
|
2017-06-16 14:32:15 +02:00
|
|
|
ngOnInit () {
|
2018-06-05 10:58:45 +02:00
|
|
|
this.buildForm({})
|
2017-04-10 21:15:28 +02:00
|
|
|
|
2018-07-16 18:09:31 +02:00
|
|
|
this.route.data
|
|
|
|
.pipe(map(data => data.videoData))
|
2020-09-25 10:04:21 +02:00
|
|
|
.subscribe(({ video, videoChannels, videoCaptions, liveVideo }) => {
|
2018-07-16 18:09:31 +02:00
|
|
|
this.video = new VideoEdit(video)
|
|
|
|
this.userVideoChannels = videoChannels
|
|
|
|
this.videoCaptions = videoCaptions
|
2020-09-25 10:04:21 +02:00
|
|
|
this.liveVideo = liveVideo
|
2018-05-15 11:55:51 +02:00
|
|
|
|
2019-06-07 15:37:36 +02:00
|
|
|
this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE
|
|
|
|
|
2019-11-21 17:01:24 +01:00
|
|
|
const videoFiles = (video as VideoDetails).getFiles()
|
2018-12-11 14:52:50 +01:00
|
|
|
if (videoFiles.length > 1) { // Already transcoded
|
|
|
|
this.waitTranscodingEnabled = false
|
|
|
|
}
|
|
|
|
|
2018-07-25 10:28:43 +02:00
|
|
|
// FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout
|
2020-09-17 09:20:52 +02:00
|
|
|
setTimeout(() => hydrateFormFromVideo(this.form, this.video, true))
|
2018-07-16 18:09:31 +02:00
|
|
|
},
|
2017-10-30 20:26:06 +01:00
|
|
|
|
2018-07-16 18:09:31 +02:00
|
|
|
err => {
|
|
|
|
console.error(err)
|
2018-12-19 16:04:34 +01:00
|
|
|
this.notifier.error(err.message)
|
2018-07-16 18:09:31 +02:00
|
|
|
}
|
|
|
|
)
|
2016-06-07 22:34:02 +02:00
|
|
|
}
|
|
|
|
|
2019-01-14 14:55:43 +01:00
|
|
|
@HostListener('window:beforeunload', [ '$event' ])
|
|
|
|
onUnload (event: any) {
|
|
|
|
const { text, canDeactivate } = this.canDeactivate()
|
|
|
|
|
|
|
|
if (canDeactivate) return
|
|
|
|
|
|
|
|
event.returnValue = text
|
|
|
|
return text
|
|
|
|
}
|
|
|
|
|
|
|
|
canDeactivate (): { canDeactivate: boolean, text?: string } {
|
2018-07-25 10:28:43 +02:00
|
|
|
if (this.updateDone === true) return { canDeactivate: true }
|
|
|
|
|
2020-08-12 10:40:04 +02:00
|
|
|
const text = $localize`You have unsaved changes! If you leave, your changes will be lost.`
|
2019-01-14 14:55:43 +01:00
|
|
|
|
2018-07-25 10:28:43 +02:00
|
|
|
for (const caption of this.videoCaptions) {
|
2019-01-14 14:55:43 +01:00
|
|
|
if (caption.action) return { canDeactivate: false, text }
|
2018-07-25 10:28:43 +02:00
|
|
|
}
|
|
|
|
|
2019-01-14 14:55:43 +01:00
|
|
|
return { canDeactivate: this.formChanged === false, text }
|
2018-07-25 10:28:43 +02:00
|
|
|
}
|
|
|
|
|
2017-06-16 14:32:15 +02:00
|
|
|
checkForm () {
|
|
|
|
this.forceCheck()
|
2017-05-05 14:29:58 +02:00
|
|
|
|
2017-06-16 14:32:15 +02:00
|
|
|
return this.form.valid
|
2017-05-05 14:29:58 +02:00
|
|
|
}
|
|
|
|
|
2017-06-16 14:32:15 +02:00
|
|
|
update () {
|
2018-09-29 02:42:45 +02:00
|
|
|
if (this.checkForm() === false
|
|
|
|
|| this.isUpdatingVideo === true) {
|
2017-06-16 14:32:15 +02:00
|
|
|
return
|
2017-05-05 14:29:58 +02:00
|
|
|
}
|
|
|
|
|
2017-06-16 14:32:15 +02:00
|
|
|
this.video.patch(this.form.value)
|
2017-04-10 21:15:28 +02:00
|
|
|
|
2020-08-06 16:14:58 +02:00
|
|
|
this.loadingBar.useRef().start()
|
2018-02-16 17:24:47 +01:00
|
|
|
this.isUpdatingVideo = true
|
2018-07-12 19:02:00 +02:00
|
|
|
|
|
|
|
// Update the video
|
2017-04-10 21:15:28 +02:00
|
|
|
this.videoService.updateVideo(this.video)
|
2018-07-12 19:02:00 +02:00
|
|
|
.pipe(
|
|
|
|
// Then update captions
|
|
|
|
switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions))
|
|
|
|
)
|
|
|
|
.subscribe(
|
|
|
|
() => {
|
2018-07-25 10:28:43 +02:00
|
|
|
this.updateDone = true
|
2018-07-12 19:02:00 +02:00
|
|
|
this.isUpdatingVideo = false
|
2020-08-06 16:14:58 +02:00
|
|
|
this.loadingBar.useRef().complete()
|
2020-08-12 10:40:04 +02:00
|
|
|
this.notifier.success($localize`Video updated.`)
|
2018-07-12 19:02:00 +02:00
|
|
|
this.router.navigate([ '/videos/watch', this.video.uuid ])
|
|
|
|
},
|
|
|
|
|
|
|
|
err => {
|
2020-08-06 16:14:58 +02:00
|
|
|
this.loadingBar.useRef().complete()
|
2018-07-12 19:02:00 +02:00
|
|
|
this.isUpdatingVideo = false
|
2018-12-19 16:04:34 +01:00
|
|
|
this.notifier.error(err.message)
|
2018-07-12 19:02:00 +02:00
|
|
|
console.error(err)
|
|
|
|
}
|
|
|
|
)
|
2016-03-14 13:50:19 +01:00
|
|
|
}
|
2017-03-22 21:47:05 +01:00
|
|
|
|
2020-08-20 16:18:16 +02:00
|
|
|
hydratePluginFieldsFromVideo () {
|
|
|
|
if (!this.video.pluginData) return
|
|
|
|
|
|
|
|
this.form.patchValue({
|
|
|
|
pluginData: this.video.pluginData
|
|
|
|
})
|
|
|
|
}
|
2016-03-14 13:50:19 +01:00
|
|
|
}
|