From: Chocobozzz Date: Mon, 6 Aug 2018 13:12:54 +0000 (+0200) Subject: Refractor video upload/import X-Git-Tag: delete~49 X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=43620009d5bc0d2a8da6480276b046d1c946bdc9;p=github%2FChocobozzz%2FPeerTube.git Refractor video upload/import --- diff --git a/client/src/app/videos/+video-edit/shared/video-send.ts b/client/src/app/videos/+video-edit/shared/video-send.ts new file mode 100644 index 000000000..bc1c7a45b --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-send.ts @@ -0,0 +1,70 @@ +import { FormReactive } from '@app/shared' +import { OnInit } from '@angular/core' +import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' +import { populateAsyncUserVideoChannels } from '@app/shared/misc/utils' +import { VideoConstant, VideoPrivacy } from '../../../../../../shared/models/videos' +import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' +import { LoadingBarService } from '@ngx-loading-bar/core' +import { NotificationsService } from 'angular2-notifications' +import { AuthService, ServerService } from '@app/core' +import { VideoService } from '@app/shared/video/video.service' +import { VideoCaptionService } from '@app/shared/video-caption' +import { catchError, switchMap, tap } from 'rxjs/operators' +import { VideoEdit } from '@app/shared/video/video-edit.model' + +export abstract class VideoSend extends FormReactive implements OnInit, CanComponentDeactivate { + + userVideoChannels: { id: number, label: string, support: string }[] = [] + videoPrivacies: VideoConstant[] = [] + videoCaptions: VideoCaptionEdit[] = [] + + firstStepPrivacyId = 0 + firstStepChannelId = 0 + + protected abstract readonly DEFAULT_VIDEO_PRIVACY: VideoPrivacy + + protected loadingBar: LoadingBarService + protected notificationsService: NotificationsService + protected authService: AuthService + protected serverService: ServerService + protected videoService: VideoService + protected videoCaptionService: VideoCaptionService + + abstract canDeactivate () + + ngOnInit () { + this.buildForm({}) + + populateAsyncUserVideoChannels(this.authService, this.userVideoChannels) + .then(() => this.firstStepChannelId = this.userVideoChannels[ 0 ].id) + + this.serverService.videoPrivaciesLoaded + .subscribe( + () => { + this.videoPrivacies = this.serverService.getVideoPrivacies() + + this.firstStepPrivacyId = this.DEFAULT_VIDEO_PRIVACY + }) + } + + checkForm () { + this.forceCheck() + + return this.form.valid + } + + protected updateVideoAndCaptions (video: VideoEdit) { + this.loadingBar.start() + + return this.videoService.updateVideo(video) + .pipe( + // Then update captions + switchMap(() => this.videoCaptionService.updateCaptions(video.id, this.videoCaptions)), + tap(() => this.loadingBar.complete()), + catchError(err => { + this.loadingBar.complete() + throw err + }) + ) + } +} diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html index 1575007d2..17d086fc6 100644 --- a/client/src/app/videos/+video-edit/video-add.component.html +++ b/client/src/app/videos/+video-edit/video-add.component.html @@ -6,11 +6,11 @@ - + - + diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss index a811b9cf0..02ee295f9 100644 --- a/client/src/app/videos/+video-edit/video-add.component.scss +++ b/client/src/app/videos/+video-edit/video-add.component.scss @@ -21,7 +21,10 @@ $background-color: #F7F7F7; margin-bottom: -$border-width; } - .nav-link { + a.nav-link { + @include disable-default-a-behaviour; + + color: #000; height: 40px !important; padding: 0 30px !important; font-size: 15px; diff --git a/client/src/app/videos/+video-edit/video-import.component.ts b/client/src/app/videos/+video-edit/video-import.component.ts index 5f14efd54..5d355dc8b 100644 --- a/client/src/app/videos/+video-edit/video-import.component.ts +++ b/client/src/app/videos/+video-edit/video-import.component.ts @@ -2,19 +2,16 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core' import { Router } from '@angular/router' import { CanComponentDeactivate } from '@app/shared/guards/can-deactivate-guard.service' import { NotificationsService } from 'angular2-notifications' -import { VideoConstant, VideoPrivacy, VideoUpdate } from '../../../../../shared/models/videos' +import { VideoPrivacy, VideoUpdate } from '../../../../../shared/models/videos' import { AuthService, ServerService } from '../../core' -import { FormReactive } from '../../shared' -import { populateAsyncUserVideoChannels } from '../../shared/misc/utils' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' import { VideoImportService } from '@app/shared/video-import' import { VideoEdit } from '@app/shared/video/video-edit.model' -import { switchMap } from 'rxjs/operators' import { LoadingBarService } from '@ngx-loading-bar/core' import { VideoCaptionService } from '@app/shared/video-caption' +import { VideoSend } from '@app/videos/+video-edit/shared/video-send' @Component({ selector: 'my-video-import', @@ -24,7 +21,7 @@ import { VideoCaptionService } from '@app/shared/video-caption' './video-import.component.scss' ] }) -export class VideoImportComponent extends FormReactive implements OnInit, CanComponentDeactivate { +export class VideoImportComponent extends VideoSend implements OnInit, CanComponentDeactivate { @Output() firstStepDone = new EventEmitter() targetUrl = '' @@ -34,55 +31,33 @@ export class VideoImportComponent extends FormReactive implements OnInit, CanCom hasImportedVideo = false isUpdatingVideo = false - userVideoChannels: { id: number, label: string, support: string }[] = [] - videoPrivacies: VideoConstant[] = [] - videoCaptions: VideoCaptionEdit[] = [] - - firstStepPrivacyId = 0 - firstStepChannelId = 0 video: VideoEdit + protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PRIVATE + constructor ( protected formValidatorService: FormValidatorService, + protected loadingBar: LoadingBarService, + protected notificationsService: NotificationsService, + protected authService: AuthService, + protected serverService: ServerService, + protected videoService: VideoService, + protected videoCaptionService: VideoCaptionService, private router: Router, - private loadingBar: LoadingBarService, - private notificationsService: NotificationsService, - private authService: AuthService, - private serverService: ServerService, - private videoService: VideoService, private videoImportService: VideoImportService, - private videoCaptionService: VideoCaptionService, private i18n: I18n ) { super() } ngOnInit () { - this.buildForm({}) - - populateAsyncUserVideoChannels(this.authService, this.userVideoChannels) - .then(() => this.firstStepChannelId = this.userVideoChannels[ 0 ].id) - - this.serverService.videoPrivaciesLoaded - .subscribe( - () => { - this.videoPrivacies = this.serverService.getVideoPrivacies() - - // Private by default - this.firstStepPrivacyId = VideoPrivacy.PRIVATE - }) + super.ngOnInit() } canDeactivate () { return { canDeactivate: true } } - checkForm () { - this.forceCheck() - - return this.form.valid - } - isTargetUrlValid () { return this.targetUrl && this.targetUrl.match(/https?:\/\//) } @@ -130,26 +105,19 @@ export class VideoImportComponent extends FormReactive implements OnInit, CanCom this.video.patch(this.form.value) - 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)) - ) + this.updateVideoAndCaptions(this.video) .subscribe( () => { this.isUpdatingVideo = false - this.loadingBar.complete() this.notificationsService.success(this.i18n('Success'), this.i18n('Video to import updated.')) this.router.navigate([ '/my-account', 'video-imports' ]) }, err => { - this.loadingBar.complete() this.isUpdatingVideo = false this.notificationsService.error(this.i18n('Error'), err.message) console.error(err) diff --git a/client/src/app/videos/+video-edit/video-upload.component.ts b/client/src/app/videos/+video-edit/video-upload.component.ts index c5e9c1592..983af60ce 100644 --- a/client/src/app/videos/+video-edit/video-upload.component.ts +++ b/client/src/app/videos/+video-edit/video-upload.component.ts @@ -7,17 +7,14 @@ import { LoadingBarService } from '@ngx-loading-bar/core' import { NotificationsService } from 'angular2-notifications' import { BytesPipe } from 'ngx-pipes' import { Subscription } from 'rxjs' -import { VideoConstant, VideoPrivacy } from '../../../../../shared/models/videos' +import { VideoPrivacy } from '../../../../../shared/models/videos' import { AuthService, ServerService } from '../../core' -import { FormReactive } from '../../shared' -import { populateAsyncUserVideoChannels } from '../../shared/misc/utils' import { VideoEdit } from '../../shared/video/video-edit.model' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { switchMap } from 'rxjs/operators' import { VideoCaptionService } from '@app/shared/video-caption' -import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.model' +import { VideoSend } from '@app/videos/+video-edit/shared/video-send' @Component({ selector: 'my-video-upload', @@ -27,13 +24,15 @@ import { VideoCaptionEdit } from '@app/shared/video-caption/video-caption-edit.m './video-upload.component.scss' ] }) -export class VideoUploadComponent extends FormReactive implements OnInit, OnDestroy, CanComponentDeactivate { +export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate { @Output() firstStepDone = new EventEmitter() @ViewChild('videofileInput') videofileInput // So that it can be accessed in the template readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY + userVideoQuotaUsed = 0 + isUploadingVideo = false isUpdatingVideo = false videoUploaded = false @@ -44,24 +43,19 @@ export class VideoUploadComponent extends FormReactive implements OnInit, OnDest uuid: '' } - userVideoChannels: { id: number, label: string, support: string }[] = [] - userVideoQuotaUsed = 0 - videoPrivacies: VideoConstant[] = [] - firstStepPrivacyId = 0 - firstStepChannelId = 0 - videoCaptions: VideoCaptionEdit[] = [] + protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC constructor ( protected formValidatorService: FormValidatorService, - private router: Router, - private notificationsService: NotificationsService, - private authService: AuthService, + protected loadingBar: LoadingBarService, + protected notificationsService: NotificationsService, + protected authService: AuthService, + protected serverService: ServerService, + protected videoService: VideoService, + protected videoCaptionService: VideoCaptionService, private userService: UserService, - private serverService: ServerService, - private videoService: VideoService, - private loadingBar: LoadingBarService, - private i18n: I18n, - private videoCaptionService: VideoCaptionService + private router: Router, + private i18n: I18n ) { super() } @@ -71,28 +65,14 @@ export class VideoUploadComponent extends FormReactive implements OnInit, OnDest } ngOnInit () { - this.buildForm({}) - - populateAsyncUserVideoChannels(this.authService, this.userVideoChannels) - .then(() => this.firstStepChannelId = this.userVideoChannels[0].id) + super.ngOnInit() this.userService.getMyVideoQuotaUsed() .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed) - - this.serverService.videoPrivaciesLoaded - .subscribe( - () => { - this.videoPrivacies = this.serverService.getVideoPrivacies() - - // Public by default - this.firstStepPrivacyId = VideoPrivacy.PUBLIC - }) } ngOnDestroy () { - if (this.videoUploadObservable) { - this.videoUploadObservable.unsubscribe() - } + if (this.videoUploadObservable) this.videoUploadObservable.unsubscribe() } canDeactivate () { @@ -116,12 +96,6 @@ export class VideoUploadComponent extends FormReactive implements OnInit, OnDest this.uploadFirstStep() } - checkForm () { - this.forceCheck() - - return this.form.valid - } - cancelUpload () { if (this.videoUploadObservable !== null) { this.videoUploadObservable.unsubscribe() @@ -225,17 +199,12 @@ export class VideoUploadComponent extends FormReactive implements OnInit, OnDest video.uuid = this.videoUploadedIds.uuid this.isUpdatingVideo = true - this.loadingBar.start() - this.videoService.updateVideo(video) - .pipe( - // Then update captions - switchMap(() => this.videoCaptionService.updateCaptions(video.id, this.videoCaptions)) - ) + + this.updateVideoAndCaptions(video) .subscribe( () => { this.isUpdatingVideo = false this.isUploadingVideo = false - this.loadingBar.complete() this.notificationsService.success(this.i18n('Success'), this.i18n('Video published.')) this.router.navigate([ '/videos/watch', video.uuid ])