From bbe0f0645ca958d33a3f409b15166609733b663f Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 15 Jun 2018 16:52:15 +0200 Subject: Add ability to schedule video publication --- .../+video-edit/shared/video-edit.component.html | 19 +++++- .../+video-edit/shared/video-edit.component.scss | 40 +++++++---- .../+video-edit/shared/video-edit.component.ts | 79 ++++++++++++++++++---- .../videos/+video-edit/shared/video-edit.module.ts | 3 + .../videos/+video-edit/video-add.component.html | 1 + .../app/videos/+video-edit/video-add.component.ts | 3 + .../videos/+video-edit/video-update.component.html | 2 +- .../videos/+video-edit/video-update.component.ts | 14 ++-- .../videos/+video-watch/video-watch.component.html | 6 +- .../videos/+video-watch/video-watch.component.scss | 2 +- .../videos/+video-watch/video-watch.component.ts | 4 ++ .../app/videos/video-list/video-local.component.ts | 2 + .../video-list/video-recently-added.component.ts | 2 + .../videos/video-list/video-search.component.ts | 2 + .../videos/video-list/video-trending.component.ts | 2 + 15 files changed, 145 insertions(+), 36 deletions(-) (limited to 'client/src/app/videos') diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 379cf7948..447c5ab9b 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -88,6 +88,7 @@ @@ -96,11 +97,27 @@ +
+ + + + +
+ {{ formErrors.schedulePublicationAt }} +
+
+
- +
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 1295cf098..061eca4a7 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -44,18 +44,6 @@ font-size: 15px; } - .root-tabset /deep/ > .nav { - margin-left: 15px; - margin-bottom: 15px; - - .nav-link { - display: flex !important; - align-items: center; - height: 30px !important; - padding: 0 15px !important; - } - } - .advanced-settings .form-group { margin-bottom: 20px; } @@ -98,7 +86,35 @@ } } +p-calendar { + display: block; + + /deep/ { + input, + .ui-calendar { + width: 100%; + } + + input { + @include peertube-input-text(100%); + color: #000; + } + } +} + /deep/ { + .root-tabset > .nav { + margin-left: 15px; + margin-bottom: 15px; + + .nav-link { + display: flex !important; + align-items: center; + height: 30px !important; + padding: 0 15px !important; + } + } + .ng2-tag-input { border: none !important; } diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts index ee4fd5dc1..24418fc4f 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnInit } from '@angular/core' -import { FormGroup, ValidatorFn } from '@angular/forms' +import { FormGroup, ValidatorFn, Validators } from '@angular/forms' import { ActivatedRoute, Router } from '@angular/router' import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared' import { NotificationsService } from 'angular2-notifications' @@ -7,6 +7,7 @@ import { ServerService } from '../../../core/server' import { VideoEdit } from '../../../shared/video/video-edit.model' import { map } from 'rxjs/operators' import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' @Component({ selector: 'my-video-edit', @@ -20,16 +21,26 @@ export class VideoEditComponent implements OnInit { @Input() validationMessages: FormReactiveValidationMessages = {} @Input() videoPrivacies = [] @Input() userVideoChannels: { id: number, label: string, support: string }[] = [] + @Input() schedulePublicationPossible = true + + // So that it can be accessed in the template + readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY videoCategories = [] videoLicences = [] videoLanguages = [] - video: VideoEdit tagValidators: ValidatorFn[] tagValidatorsMessages: { [ name: string ]: string } + schedulePublicationEnabled = false + error: string = null + calendarLocale: any = {} + minScheduledDate = new Date() + + calendarTimezone: string + calendarDateFormat: string constructor ( private formValidatorService: FormValidatorService, @@ -37,10 +48,15 @@ export class VideoEditComponent implements OnInit { private route: ActivatedRoute, private router: Router, private notificationsService: NotificationsService, - private serverService: ServerService + private serverService: ServerService, + private i18nPrimengCalendarService: I18nPrimengCalendarService ) { this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES + + this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale() + this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone() + this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat() } updateForm () { @@ -64,7 +80,8 @@ export class VideoEditComponent implements OnInit { tags: null, thumbnailfile: null, previewfile: null, - support: this.videoValidatorsService.VIDEO_SUPPORT + support: this.videoValidatorsService.VIDEO_SUPPORT, + schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT } this.formValidatorService.updateForm( @@ -75,6 +92,52 @@ export class VideoEditComponent implements OnInit { defaultValues ) + this.trackChannelChange() + this.trackPrivacyChange() + } + + ngOnInit () { + this.updateForm() + + this.videoCategories = this.serverService.getVideoCategories() + this.videoLicences = this.serverService.getVideoLicences() + this.videoLanguages = this.serverService.getVideoLanguages() + + setTimeout(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute + } + + private trackPrivacyChange () { + // We will update the "support" field depending on the channel + this.form.controls[ 'privacy' ] + .valueChanges + .pipe(map(res => parseInt(res.toString(), 10))) + .subscribe( + newPrivacyId => { + this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY + + // Value changed + const scheduleControl = this.form.get('schedulePublicationAt') + const waitTranscodingControl = this.form.get('waitTranscoding') + + if (this.schedulePublicationEnabled) { + scheduleControl.setValidators([ Validators.required ]) + + waitTranscodingControl.disable() + waitTranscodingControl.setValue(false) + } else { + scheduleControl.clearValidators() + + waitTranscodingControl.enable() + waitTranscodingControl.setValue(true) + } + + scheduleControl.updateValueAndValidity() + waitTranscodingControl.updateValueAndValidity() + } + ) + } + + private trackChannelChange () { // We will update the "support" field depending on the channel this.form.controls[ 'channelId' ] .valueChanges @@ -108,14 +171,6 @@ export class VideoEditComponent implements OnInit { ) } - ngOnInit () { - this.updateForm() - - this.videoCategories = this.serverService.getVideoCategories() - this.videoLicences = this.serverService.getVideoLicences() - this.videoLanguages = this.serverService.getVideoLanguages() - } - private updateSupportField (support: string) { return this.form.patchValue({ support: support || '' }) } diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts index 76eba9c19..6bf3e34b1 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts @@ -4,10 +4,12 @@ import { TagInputModule } from 'ngx-chips' import { SharedModule } from '../../../shared/' import { VideoEditComponent } from './video-edit.component' import { VideoImageComponent } from './video-image.component' +import { CalendarModule } from 'primeng/components/calendar/calendar' @NgModule({ imports: [ TagInputModule, + CalendarModule, SharedModule ], @@ -20,6 +22,7 @@ import { VideoImageComponent } from './video-image.component' exports: [ TagInputModule, TabsModule, + CalendarModule, VideoEditComponent ], 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 f00cfe016..07034e4e1 100644 --- a/client/src/app/videos/+video-edit/video-add.component.html +++ b/client/src/app/videos/+video-edit/video-add.component.html @@ -27,6 +27,7 @@
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index 85afd0caa..3ddeda109 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -27,6 +27,9 @@ import { FormValidatorService } from '@app/shared/forms/form-validators/form-val export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy, CanComponentDeactivate { @ViewChild('videofileInput') videofileInput + // So that it can be accessed in the template + readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY + isUploadingVideo = false isUpdatingVideo = false videoUploaded = false diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html index 73b2bc08f..5cb16c8ab 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html @@ -6,7 +6,7 @@
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 0266164af..c4e6f44de 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts @@ -24,6 +24,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { isUpdatingVideo = false videoPrivacies = [] userVideoChannels = [] + schedulePublicationPossible = false constructor ( protected formValidatorService: FormValidatorService, @@ -70,13 +71,10 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { this.userVideoChannels = videoChannels // We cannot set private a video that was not private - if (video.privacy.id !== 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 !== VideoPrivacy.PRIVATE) + } else { // We can schedule video publication only if it it is private + this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE } this.hydrateFormFromVideo() @@ -123,7 +121,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { } private hydrateFormFromVideo () { - this.form.patchValue(this.video.toJSON()) + this.form.patchValue(this.video.toFormPatch()) const objects = [ { diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 8bd5c00ff..208375e33 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -3,10 +3,14 @@
-
+
The video is being transcoded, it may not work properly.
+
+ This video will be published on {{ video.scheduledUpdate.updateAt | date: 'full' }} +
+
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index ae8bdccaf..71770c93b 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -28,7 +28,7 @@ } } -#warning-transcoding { +.alert { text-align: center; } diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index a760c03e8..72e96ca93 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -280,6 +280,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video && this.video.state.id === VideoState.TO_TRANSCODE } + hasVideoScheduledPublication () { + return this.video && this.video.scheduledUpdate !== undefined + } + private updateVideoDescription (description: string) { this.video.description = description this.setVideoDescriptionHTML() diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts index 2fd82a940..dbe1d937d 100644 --- a/client/src/app/videos/video-list/video-local.component.ts +++ b/client/src/app/videos/video-list/video-local.component.ts @@ -9,6 +9,7 @@ import { VideoSortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' import { VideoFilter } from '../../../../../shared/models/videos/video-query.type' import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-videos-local', @@ -28,6 +29,7 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On protected authService: AuthService, protected location: Location, protected i18n: I18n, + protected screenService: ScreenService, private videoService: VideoService ) { super() diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts index 8183357f8..004a49168 100644 --- a/client/src/app/videos/video-list/video-recently-added.component.ts +++ b/client/src/app/videos/video-list/video-recently-added.component.ts @@ -8,6 +8,7 @@ import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoSortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-videos-recently-added', @@ -26,6 +27,7 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On protected notificationsService: NotificationsService, protected authService: AuthService, protected i18n: I18n, + protected screenService: ScreenService, private videoService: VideoService ) { super() diff --git a/client/src/app/videos/video-list/video-search.component.ts b/client/src/app/videos/video-list/video-search.component.ts index b6434f347..33ed3f00e 100644 --- a/client/src/app/videos/video-list/video-search.component.ts +++ b/client/src/app/videos/video-list/video-search.component.ts @@ -9,6 +9,7 @@ import { AuthService } from '../../core/auth' import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-videos-search', @@ -32,6 +33,7 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O protected authService: AuthService, protected location: Location, protected i18n: I18n, + protected screenService: ScreenService, private videoService: VideoService, private redirectService: RedirectService ) { diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts index e56b749d1..f2174aa14 100644 --- a/client/src/app/videos/video-list/video-trending.component.ts +++ b/client/src/app/videos/video-list/video-trending.component.ts @@ -8,6 +8,7 @@ import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { VideoSortField } from '../../shared/video/sort-field.type' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-videos-trending', @@ -25,6 +26,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit, protected notificationsService: NotificationsService, protected authService: AuthService, protected location: Location, + protected screenService: ScreenService, protected i18n: I18n, private videoService: VideoService ) { -- cgit v1.2.3