X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fvideos%2F%2Bvideo-edit%2Fvideo-update.component.ts;h=4fe65bccd83cee34acbeed2e85256b8450afa0f5;hb=ef4c78da4f0da61aebfa42f6e8420bf431a68bc8;hp=30390ac058ef23836a9a2f420e6c0bdaa407d383;hpb=9d9597df427542eb5c7d3ba8ff5aeb146fab40e2;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 30390ac05..4fe65bccd 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,103 @@ +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 - } - - 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({ - 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.buildForm({}) - this.videoCategories = this.serverService.getVideoCategories() - this.videoLicences = this.serverService.getVideoLicences() - this.videoLanguages = this.serverService.getVideoLanguages() + this.serverService.videoPrivaciesLoaded + .subscribe(() => this.videoPrivacies = this.serverService.getVideoPrivacies()) - const uuid: string = this.route.snapshot.params['uuid'] + const uuid: string = this.route.snapshot.params[ 'uuid' ] this.videoService.getVideo(uuid) - .subscribe( - video => { - this.video = new VideoEdit(video) - - this.hydrateFormFromVideo() - }, - - err => { - console.error(err) - this.error = 'Cannot fetch video.' - } - ) + .pipe( + switchMap(video => { + return this.videoService + .loadCompleteDescription(video.descriptionPath) + .pipe(map(description => Object.assign(video, { description }))) + }), + switchMap(video => { + return this.videoChannelService + .listAccountVideoChannels(video.account) + .pipe( + map(result => result.data), + map(videoChannels => videoChannels.map(c => ({ id: c.id, label: c.displayName, support: c.support }))), + map(videoChannels => ({ video, videoChannels })) + ) + }), + switchMap(({ video, videoChannels }) => { + return this.videoCaptionService + .listCaptions(video.id) + .pipe( + map(result => result.data), + map(videoCaptions => ({ video, videoChannels, videoCaptions })) + ) + }) + ) + .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 + } + + this.hydrateFormFromVideo() + }, + + err => { + console.error(err) + this.notificationsService.error(this.i18n('Error'), err.message) + } + ) } checkForm () { @@ -112,22 +113,54 @@ 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.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 + }) + }) + } } }