X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-edit%2Fvideo-update.component.ts;h=0c60e3439c29433ef445e5162358b49deb6334e5;hb=ce33919c24e7402d92d81f3cd8e545df52d98240;hp=70cb334fddde57e1192e0b89160d7e9cf8e97a55;hpb=404b54e14f6623c1644a8c87ca22f4bab98d5484;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 70cb334fd..0c60e3439 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts @@ -1,102 +1,91 @@ +import { map, switchMap } from 'rxjs/operators' import { Component, OnInit } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' - +import { LoadingBarService } from '@ngx-loading-bar/core' import { NotificationsService } from 'angular2-notifications' - +import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos' import { ServerService } from '../../core' -import { - FormReactive, - VIDEO_NAME, - VIDEO_CATEGORY, - VIDEO_LICENCE, - VIDEO_LANGUAGE, - VIDEO_DESCRIPTION, - VIDEO_TAGS -} from '../../shared' -import { VideoEdit, VideoService } from '../shared' +import { AuthService } from '../../core/auth' +import { FormReactive } from '../../shared' +import { VideoEdit } from '../../shared/video/video-edit.model' +import { VideoService } from '../../shared/video/video.service' +import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { VideoCaptionService } from '@app/shared/video-caption' +import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' @Component({ selector: 'my-videos-update', - styleUrls: [ './video-edit.component.scss' ], + styleUrls: [ './shared/video-edit.component.scss' ], templateUrl: './video-update.component.html' }) - export class VideoUpdateComponent extends FormReactive implements OnInit { - tags: string[] = [] - videoCategories = [] - videoLicences = [] - videoLanguages = [] video: VideoEdit - tagValidators = VIDEO_TAGS.VALIDATORS - tagValidatorsMessages = VIDEO_TAGS.MESSAGES - - error: string = null - form: FormGroup - formErrors = { - name: '', - category: '', - licence: '', - language: '', - description: '' - } - validationMessages = { - name: VIDEO_NAME.MESSAGES, - category: VIDEO_CATEGORY.MESSAGES, - licence: VIDEO_LICENCE.MESSAGES, - language: VIDEO_LANGUAGE.MESSAGES, - description: VIDEO_DESCRIPTION.MESSAGES - } + isUpdatingVideo = false + videoPrivacies: VideoConstant[] = [] + userVideoChannels: { id: number, label: string, support: string }[] = [] + schedulePublicationPossible = false + videoCaptions: VideoCaptionEdit[] = [] - fileError = '' + private updateDone = false constructor ( - private formBuilder: FormBuilder, + protected formValidatorService: FormValidatorService, private route: ActivatedRoute, private router: Router, private notificationsService: NotificationsService, private serverService: ServerService, - private videoService: VideoService + private videoService: VideoService, + private authService: AuthService, + private loadingBar: LoadingBarService, + private videoChannelService: VideoChannelService, + private videoCaptionService: VideoCaptionService, + private i18n: I18n ) { super() } - buildForm () { - this.form = this.formBuilder.group({ - name: [ '', VIDEO_NAME.VALIDATORS ], - nsfw: [ false ], - category: [ '', VIDEO_CATEGORY.VALIDATORS ], - licence: [ '', VIDEO_LICENCE.VALIDATORS ], - language: [ '', VIDEO_LANGUAGE.VALIDATORS ], - description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], - tags: [ '' ] - }) - - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + ngOnInit () { + this.buildForm({}) + + this.serverService.videoPrivaciesLoaded + .subscribe(() => this.videoPrivacies = this.serverService.getVideoPrivacies()) + + this.route.data + .pipe(map(data => data.videoData)) + .subscribe(({ video, videoChannels, videoCaptions }) => { + this.video = new VideoEdit(video) + this.userVideoChannels = videoChannels + this.videoCaptions = videoCaptions + + // We cannot set private a video that was not private + if (this.video.privacy !== VideoPrivacy.PRIVATE) { + this.videoPrivacies = this.videoPrivacies.filter(p => p.id.toString() !== VideoPrivacy.PRIVATE.toString()) + } else { // We can schedule video publication only if it it is private + this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE + } + + // FIXME: Angular does not detect the change inside this subscription, so use the patched setTimeout + setTimeout(() => this.hydrateFormFromVideo()) + }, + + err => { + console.error(err) + this.notificationsService.error(this.i18n('Error'), err.message) + } + ) } - ngOnInit () { - this.buildForm() - - this.videoCategories = this.serverService.getVideoCategories() - this.videoLicences = this.serverService.getVideoLicences() - this.videoLanguages = this.serverService.getVideoLanguages() - - const uuid: string = this.route.snapshot.params['uuid'] - this.videoService.getVideo(uuid) - .subscribe( - video => { - this.video = video - - this.hydrateFormFromVideo() - }, - - err => { - console.error(err) - this.error = 'Cannot fetch video.' - } - ) + canDeactivate () { + if (this.updateDone === true) return { canDeactivate: true } + + for (const caption of this.videoCaptions) { + if (caption.action) return { canDeactivate: false } + } + + return { canDeactivate: this.formChanged === false } } checkForm () { @@ -112,22 +101,55 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { this.video.patch(this.form.value) - this.videoService.updateVideo(this.video) - .subscribe( - () => { - this.notificationsService.success('Success', 'Video updated.') - this.router.navigate([ '/videos/watch', this.video.uuid ]) - }, - - err => { - this.error = 'Cannot update the video.' - console.error(err) - } - ) + this.loadingBar.start() + this.isUpdatingVideo = true + // Update the video + this.videoService.updateVideo(this.video) + .pipe( + // Then update captions + switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)) + ) + .subscribe( + () => { + this.updateDone = true + this.isUpdatingVideo = false + this.loadingBar.complete() + this.notificationsService.success(this.i18n('Success'), this.i18n('Video updated.')) + this.router.navigate([ '/videos/watch', this.video.uuid ]) + }, + + err => { + this.loadingBar.complete() + this.isUpdatingVideo = false + this.notificationsService.error(this.i18n('Error'), err.message) + console.error(err) + } + ) } private hydrateFormFromVideo () { - this.form.patchValue(this.video.toJSON()) + 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 + }) + }) + } } }