X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;ds=sidebyside;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-edit%2Fvideo-update.component.ts;h=952fe02933516d43fafaddd09d77b85e9daa5e40;hb=0f7fedc39857ebc0eb29182c1588a92b9adfb75a;hp=01ab0a7163732d79492819f9651f8f6da63e220d;hpb=ff249f499ccca2e37757f338384e7ba44c906a69;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 01ab0a716..952fe0293 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts @@ -1,90 +1,77 @@ +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 'rxjs/add/observable/forkJoin' -import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum' +import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos' import { ServerService } from '../../core' -import { - FormReactive, - VIDEO_CATEGORY, - VIDEO_DESCRIPTION, - VIDEO_LANGUAGE, - VIDEO_LICENCE, - VIDEO_NAME, - VIDEO_PRIVACY, - VIDEO_TAGS -} from '../../shared' -import { ValidatorMessage } from '../../shared/forms/form-validators' -import { VideoService } from '../../shared/video/video.service' +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: [ './shared/video-edit.component.scss' ], templateUrl: './video-update.component.html' }) - export class VideoUpdateComponent extends FormReactive implements OnInit { video: VideoEdit - error: string = null - form: FormGroup - formErrors: { [ id: string ]: string } = {} - validationMessages: ValidatorMessage = {} - videoPrivacies = [] - - fileError = '' + isUpdatingVideo = false + videoPrivacies: VideoConstant[] = [] + userVideoChannels: { id: number, label: string, support: string }[] = [] + schedulePublicationPossible = false + videoCaptions: VideoCaptionEdit[] = [] 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({}) - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) - } - ngOnInit () { - this.buildForm() - - this.videoPrivacies = this.serverService.getVideoPrivacies() - - const uuid: string = this.route.snapshot.params['uuid'] - this.videoService.getVideo(uuid) - .switchMap(video => { - return this.videoService - .loadCompleteDescription(video.descriptionPath) - .do(description => video.description = description) - .map(() => video) - }) - .subscribe( - video => { + 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 (video.privacy !== VideoPrivacy.PRIVATE) { - const newVideoPrivacies = [] - for (const p of this.videoPrivacies) { - if (p.id !== VideoPrivacy.PRIVATE) newVideoPrivacies.push(p) - } - - this.videoPrivacies = newVideoPrivacies + 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 } - this.hydrateFormFromVideo() + // FIXME: Angular does not detec + setTimeout(() => this.hydrateFormFromVideo()) }, err => { console.error(err) - this.error = 'Cannot fetch video.' + this.notificationsService.error(this.i18n('Error'), err.message) } ) } @@ -102,22 +89,55 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { this.video.patch(this.form.value) + this.loadingBar.start() + this.isUpdatingVideo = true + + // Update the video 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) - } - ) + .pipe( + // Then update captions + switchMap(() => this.videoCaptionService.updateCaptions(this.video.id, this.videoCaptions)) + ) + .subscribe( + () => { + 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 + }) + }) + } } }