X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bvideos%2F%2Bvideo-edit%2Fvideo-update.component.ts;h=ad71162b856a873b36637ce156cdbeb85d8e6981;hb=52798aa5f277492d4dd2482bca9396d2e982fa19;hp=de4f65df3ee56d31f04dae494ecd346825cbc3e4;hpb=02c01341f4dae30ec6b81fcb644952393d73c4a8;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts index de4f65df3..ad71162b8 100644 --- a/client/src/app/+videos/+video-edit/video-update.component.ts +++ b/client/src/app/+videos/+video-edit/video-update.component.ts @@ -1,12 +1,18 @@ -import { map, switchMap } from 'rxjs/operators' +import { of } from 'rxjs' +import { switchMap } from 'rxjs/operators' +import { SelectChannelItem } from 'src/types/select-options-item.model' import { Component, HostListener, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Notifier } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' -import { VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main' +import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' +import { Video, VideoCaptionEdit, VideoCaptionService, VideoDetails, VideoEdit, VideoService } from '@app/shared/shared-main' +import { LiveVideoService } from '@app/shared/shared-video-live' import { LoadingBarService } from '@ngx-loading-bar/core' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { VideoPrivacy } from '@shared/models' +import { logger } from '@root-helpers/logger' +import { pick, simpleObjectsDeepEqual } from '@shared/core-utils' +import { LiveVideo, LiveVideoUpdate, VideoPrivacy } from '@shared/models' +import { VideoSource } from '@shared/models/videos/video-source' +import { hydrateFormFromVideo } from './shared/video-edit-utils' @Component({ selector: 'my-videos-update', @@ -14,25 +20,27 @@ import { VideoPrivacy } from '@shared/models' templateUrl: './video-update.component.html' }) export class VideoUpdateComponent extends FormReactive implements OnInit { - video: VideoEdit + videoEdit: VideoEdit + videoDetails: VideoDetails + videoSource: VideoSource + userVideoChannels: SelectChannelItem[] = [] + videoCaptions: VideoCaptionEdit[] = [] + liveVideo: LiveVideo isUpdatingVideo = false - userVideoChannels: { id: number, label: string, support: string, avatar?: string }[] = [] - schedulePublicationPossible = false - videoCaptions: VideoCaptionEdit[] = [] - waitTranscodingEnabled = true + forbidScheduledPublication = false private updateDone = false constructor ( - protected formValidatorService: FormValidatorService, + protected formReactiveService: FormReactiveService, private route: ActivatedRoute, private router: Router, private notifier: Notifier, private videoService: VideoService, private loadingBar: LoadingBarService, private videoCaptionService: VideoCaptionService, - private i18n: I18n + private liveVideoService: LiveVideoService ) { super() } @@ -40,29 +48,31 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { ngOnInit () { this.buildForm({}) - this.route.data - .pipe(map(data => data.videoData)) - .subscribe(({ video, videoChannels, videoCaptions }) => { - this.video = new VideoEdit(video) - this.userVideoChannels = videoChannels - this.videoCaptions = videoCaptions + const { videoData } = this.route.snapshot.data + const { video, videoChannels, videoCaptions, videoSource, liveVideo } = videoData - this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE + this.videoDetails = video + this.videoEdit = new VideoEdit(this.videoDetails) - const videoFiles = (video as VideoDetails).getFiles() - if (videoFiles.length > 1) { // Already transcoded - this.waitTranscodingEnabled = false - } + this.userVideoChannels = videoChannels + this.videoCaptions = videoCaptions + this.videoSource = videoSource + this.liveVideo = liveVideo - // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout - setTimeout(() => this.hydrateFormFromVideo()) - }, + this.forbidScheduledPublication = this.videoEdit.privacy !== VideoPrivacy.PRIVATE + } + + onFormBuilt () { + hydrateFormFromVideo(this.form, this.videoEdit, true) - err => { - console.error(err) - this.notifier.error(err.message) - } - ) + if (this.liveVideo) { + this.form.patchValue({ + saveReplay: this.liveVideo.saveReplay, + replayPrivacy: this.liveVideo.replaySettings ? this.liveVideo.replaySettings.privacy : VideoPrivacy.PRIVATE, + latencyMode: this.liveVideo.latencyMode, + permanentLive: this.liveVideo.permanentLive + }) + } } @HostListener('window:beforeunload', [ '$event' ]) @@ -78,7 +88,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { canDeactivate (): { canDeactivate: boolean, text?: string } { if (this.updateDone === true) return { canDeactivate: true } - const text = this.i18n('You have unsaved changes! If you leave, your changes will be lost.') + const text = $localize`You have unsaved changes! If you leave, your changes will be lost.` for (const caption of this.videoCaptions) { if (caption.action) return { canDeactivate: false, text } @@ -87,69 +97,83 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { return { canDeactivate: this.formChanged === false, text } } - checkForm () { - this.forceCheck() + isWaitTranscodingHidden () { + if (this.videoDetails.getFiles().length > 1) { // Already transcoded + return true + } - return this.form.valid + return false } - update () { - if (this.checkForm() === false - || this.isUpdatingVideo === true) { + async update () { + await this.waitPendingCheck() + this.forceCheck() + + if (!this.form.valid || this.isUpdatingVideo === true) { return } - this.video.patch(this.form.value) + this.videoEdit.patch(this.form.value) this.loadingBar.useRef().start() this.isUpdatingVideo = true // Update the video - this.videoService.updateVideo(this.video) + this.videoService.updateVideo(this.videoEdit) .pipe( // Then update captions - switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)) + switchMap(() => this.videoCaptionService.updateCaptions(this.videoEdit.id, this.videoCaptions)), + + switchMap(() => { + if (!this.liveVideo) return of(undefined) + + const saveReplay = !!this.form.value.saveReplay + const replaySettings = saveReplay + ? { privacy: this.form.value.replayPrivacy } + : undefined + + const liveVideoUpdate: LiveVideoUpdate = { + saveReplay, + replaySettings, + permanentLive: !!this.form.value.permanentLive, + latencyMode: this.form.value.latencyMode + } + + // Don't update live attributes if they did not change + const baseVideo = pick(this.liveVideo, Object.keys(liveVideoUpdate) as (keyof LiveVideoUpdate)[]) + const liveChanged = !simpleObjectsDeepEqual(baseVideo, liveVideoUpdate) + if (!liveChanged) return of(undefined) + + return this.liveVideoService.updateLive(this.videoEdit.id, liveVideoUpdate) + }) ) - .subscribe( - () => { + .subscribe({ + next: () => { this.updateDone = true this.isUpdatingVideo = false this.loadingBar.useRef().complete() - this.notifier.success(this.i18n('Video updated.')) - this.router.navigate([ '/videos/watch', this.video.uuid ]) + this.notifier.success($localize`Video updated.`) + this.router.navigateByUrl(Video.buildWatchUrl(this.videoEdit)) }, - err => { + error: err => { this.loadingBar.useRef().complete() this.isUpdatingVideo = false this.notifier.error(err.message) - console.error(err) + logger.error(err) } - ) + }) } - private hydrateFormFromVideo () { - this.form.patchValue(this.video.toFormPatch()) - - const objects = [ - { - url: 'thumbnailUrl', - name: 'thumbnailfile' - }, - { - url: 'previewUrl', - name: 'previewfile' - } - ] - - for (const obj of objects) { - fetch(this.video[obj.url]) - .then(response => response.blob()) - .then(data => { - this.form.patchValue({ - [ obj.name ]: data - }) - }) - } + hydratePluginFieldsFromVideo () { + if (!this.videoEdit.pluginData) return + + this.form.patchValue({ + pluginData: this.videoEdit.pluginData + }) + } + + getVideoUrl () { + return Video.buildWatchUrl(this.videoDetails) } }