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 --- .../account-videos/account-videos.component.ts | 2 + .../my-account-videos.component.html | 6 +- .../my-account-videos.component.scss | 1 + .../my-account-videos.component.ts | 29 +++++-- .../video-channel-videos.component.ts | 2 + client/src/app/app.component.ts | 9 ++- client/src/app/core/server/server.service.ts | 1 + .../form-validators/video-validators.service.ts | 8 ++ .../shared/forms/markdown-textarea.component.ts | 9 ++- .../src/app/shared/i18n/i18n-primeng-calendar.ts | 94 ++++++++++++++++++++++ client/src/app/shared/misc/screen.service.ts | 23 ++++++ client/src/app/shared/misc/utils.ts | 14 ---- client/src/app/shared/shared.module.ts | 5 ++ client/src/app/shared/video/abstract-video-list.ts | 5 +- client/src/app/shared/video/video-edit.model.ts | 32 +++++++- .../app/shared/video/video-thumbnail.component.ts | 6 +- client/src/app/shared/video/video.model.ts | 3 + client/src/app/shared/video/video.service.ts | 3 +- .../+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 + 33 files changed, 358 insertions(+), 75 deletions(-) create mode 100644 client/src/app/shared/i18n/i18n-primeng-calendar.ts create mode 100644 client/src/app/shared/misc/screen.service.ts (limited to 'client/src/app') diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts index 5e3dbb6b3..d4fcd7acf 100644 --- a/client/src/app/+accounts/account-videos/account-videos.component.ts +++ b/client/src/app/+accounts/account-videos/account-videos.component.ts @@ -12,6 +12,7 @@ import { AccountService } from '@app/shared/account/account.service' import { tap } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' import { Subscription } from 'rxjs' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-account-videos', @@ -37,6 +38,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit, protected notificationsService: NotificationsService, protected confirmService: ConfirmService, protected location: Location, + protected screenService: ScreenService, protected i18n: I18n, private accountService: AccountService, private videoService: VideoService diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index eb24de7a7..7ac6371db 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -18,7 +18,7 @@
{{ video.name }} {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views -
{{ video.privacy.label }} - {{ getStateLabel(video) }}
+
{{ video.privacy.label }}{{ getStateLabel(video) }}
@@ -28,9 +28,9 @@ Cancel - + - Delete + Delete diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index f276ea389..1f22aec71 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -75,6 +75,7 @@ color: #000; display: block; + width: fit-content; font-size: 16px; font-weight: $font-semibold; } diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index afc01073c..e698b75ec 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts @@ -1,6 +1,6 @@ import { from as observableFrom, Observable } from 'rxjs' import { concatAll, tap } from 'rxjs/operators' -import { Component, OnDestroy, OnInit } from '@angular/core' +import { Component, OnDestroy, OnInit, Inject, LOCALE_ID } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Location } from '@angular/common' import { immutableAssign } from '@app/shared/misc/utils' @@ -12,7 +12,8 @@ import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { Video } from '../../shared/video/video.model' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' -import { VideoState } from '../../../../../shared/models/videos' +import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-account-videos', @@ -39,8 +40,10 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni protected notificationsService: NotificationsService, protected confirmService: ConfirmService, protected location: Location, + protected screenService: ScreenService, protected i18n: I18n, - private videoService: VideoService + private videoService: VideoService, + @Inject(LOCALE_ID) private localeId: string ) { super() @@ -131,12 +134,22 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni } getStateLabel (video: Video) { - if (video.state.id === VideoState.PUBLISHED) return this.i18n('Published') - - if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) return this.i18n('Waiting transcoding') - if (video.state.id === VideoState.TO_TRANSCODE) return this.i18n('To transcode') + let suffix: string + + if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) { + suffix = this.i18n('Published') + } else if (video.scheduledUpdate) { + const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId) + suffix = this.i18n('Publication scheduled on ') + updateAt + } else if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) { + suffix = this.i18n('Waiting transcoding') + } else if (video.state.id === VideoState.TO_TRANSCODE) { + suffix = this.i18n('To transcode') + } else { + return '' + } - return this.i18n('Unknown state') + return ' - ' + suffix } protected buildVideoHeight () { diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts index 2d3f66994..800d97b7f 100644 --- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts +++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts @@ -12,6 +12,7 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model' import { tap } from 'rxjs/operators' import { I18n } from '@ngx-translate/i18n-polyfill' import { Subscription } from 'rxjs' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-video-channel-videos', @@ -37,6 +38,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On protected notificationsService: NotificationsService, protected confirmService: ConfirmService, protected location: Location, + protected screenService: ScreenService, protected i18n: I18n, private videoChannelService: VideoChannelService, private videoService: VideoService diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 0bfe9f916..494cd9ea6 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core' import { DomSanitizer, SafeHtml } from '@angular/platform-browser' import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router' import { AuthService, RedirectService, ServerService } from '@app/core' -import { isInSmallView } from '@app/shared/misc/utils' import { is18nPath } from '../../../shared/models/i18n' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-app', @@ -33,7 +33,8 @@ export class AppComponent implements OnInit { private authService: AuthService, private serverService: ServerService, private domSanitizer: DomSanitizer, - private redirectService: RedirectService + private redirectService: RedirectService, + private screenService: ScreenService ) { } get serverVersion () { @@ -75,14 +76,14 @@ export class AppComponent implements OnInit { this.serverService.loadVideoPrivacies() // Do not display menu on small screens - if (isInSmallView()) { + if (this.screenService.isInSmallView()) { this.isMenuDisplayed = false } this.router.events.subscribe( e => { // User clicked on a link in the menu, change the page - if (e instanceof GuardsCheckStart && isInSmallView()) { + if (e instanceof GuardsCheckStart && this.screenService.isInSmallView()) { this.isMenuDisplayed = false } } diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index 74363e6a1..6323a7edf 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -141,6 +141,7 @@ export class ServerService { ) .subscribe(({ data, translations }) => { Object.keys(data) + .map(dataKey => parseInt(dataKey, 10)) .forEach(dataKey => { const label = data[ dataKey ] diff --git a/client/src/app/shared/forms/form-validators/video-validators.service.ts b/client/src/app/shared/forms/form-validators/video-validators.service.ts index 76fc5cf04..396be6f3b 100644 --- a/client/src/app/shared/forms/form-validators/video-validators.service.ts +++ b/client/src/app/shared/forms/form-validators/video-validators.service.ts @@ -15,6 +15,7 @@ export class VideoValidatorsService { readonly VIDEO_DESCRIPTION: BuildFormValidator readonly VIDEO_TAGS: BuildFormValidator readonly VIDEO_SUPPORT: BuildFormValidator + readonly VIDEO_SCHEDULE_PUBLICATION_AT: BuildFormValidator constructor (private i18n: I18n) { @@ -84,5 +85,12 @@ export class VideoValidatorsService { 'maxlength': this.i18n('Video support cannot be more than 500 characters long.') } } + + this.VIDEO_SCHEDULE_PUBLICATION_AT = { + VALIDATORS: [ ], + MESSAGES: { + 'required': this.i18n('A date is required to schedule video update.') + } + } } } diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts index 8b932cd15..db6f9e5c8 100644 --- a/client/src/app/shared/forms/markdown-textarea.component.ts +++ b/client/src/app/shared/forms/markdown-textarea.component.ts @@ -1,10 +1,10 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators' import { Component, forwardRef, Input, OnInit } from '@angular/core' import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' -import { isInSmallView } from '@app/shared/misc/utils' import { MarkdownService } from '@app/videos/shared' import { Subject } from 'rxjs/Subject' import truncate from 'lodash-es/truncate' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-markdown-textarea', @@ -35,7 +35,10 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { private contentChanged = new Subject() - constructor (private markdownService: MarkdownService) {} + constructor ( + private screenService: ScreenService, + private markdownService: MarkdownService +) {} ngOnInit () { this.contentChanged @@ -76,7 +79,7 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit { } arePreviewsDisplayed () { - return isInSmallView() === false + return this.screenService.isInSmallView() === false } private updatePreviews () { diff --git a/client/src/app/shared/i18n/i18n-primeng-calendar.ts b/client/src/app/shared/i18n/i18n-primeng-calendar.ts new file mode 100644 index 000000000..b05852ff8 --- /dev/null +++ b/client/src/app/shared/i18n/i18n-primeng-calendar.ts @@ -0,0 +1,94 @@ +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Injectable } from '@angular/core' + +@Injectable() +export class I18nPrimengCalendarService { + private readonly calendarLocale: any = {} + + constructor (private i18n: I18n) { + this.calendarLocale = { + firstDayOfWeek: 0, + dayNames: [ + this.i18n('Sunday'), + this.i18n('Monday'), + this.i18n('Tuesday'), + this.i18n('Wednesday'), + this.i18n('Thursday'), + this.i18n('Friday'), + this.i18n('Saturday') + ], + + dayNamesShort: [ + this.i18n({ value: 'Sun', description: 'Day name short' }), + this.i18n({ value: 'Mon', description: 'Day name short' }), + this.i18n({ value: 'Tue', description: 'Day name short' }), + this.i18n({ value: 'Wed', description: 'Day name short' }), + this.i18n({ value: 'Thu', description: 'Day name short' }), + this.i18n({ value: 'Fri', description: 'Day name short' }), + this.i18n({ value: 'Sat', description: 'Day name short' }) + ], + + dayNamesMin: [ + this.i18n({ value: 'Su', description: 'Day name min' }), + this.i18n({ value: 'Mo', description: 'Day name min' }), + this.i18n({ value: 'Tu', description: 'Day name min' }), + this.i18n({ value: 'We', description: 'Day name min' }), + this.i18n({ value: 'Th', description: 'Day name min' }), + this.i18n({ value: 'Fr', description: 'Day name min' }), + this.i18n({ value: 'Sa', description: 'Day name min' }) + ], + + monthNames: [ + this.i18n('January'), + this.i18n('February'), + this.i18n('March'), + this.i18n('April'), + this.i18n('May'), + this.i18n('June'), + this.i18n('July'), + this.i18n('August'), + this.i18n('September'), + this.i18n('October'), + this.i18n('November'), + this.i18n('December') + ], + + monthNamesShort: [ + this.i18n({ value: 'Jan', description: 'Month name short' }), + this.i18n({ value: 'Feb', description: 'Month name short' }), + this.i18n({ value: 'Mar', description: 'Month name short' }), + this.i18n({ value: 'Apr', description: 'Month name short' }), + this.i18n({ value: 'May', description: 'Month name short' }), + this.i18n({ value: 'Jun', description: 'Month name short' }), + this.i18n({ value: 'Jul', description: 'Month name short' }), + this.i18n({ value: 'Aug', description: 'Month name short' }), + this.i18n({ value: 'Sep', description: 'Month name short' }), + this.i18n({ value: 'Oct', description: 'Month name short' }), + this.i18n({ value: 'Nov', description: 'Month name short' }), + this.i18n({ value: 'Dec', description: 'Month name short' }) + ], + + today: this.i18n('Today'), + + clear: this.i18n('Clear') + } + } + + getCalendarLocale () { + return this.calendarLocale + } + + getTimezone () { + const gmt = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1] + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone + + return `${timezone} - ${gmt}` + } + + getDateFormat () { + return this.i18n({ + value: 'yy-mm-dd ', + description: 'Date format in this locale.' + }) + } +} diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts new file mode 100644 index 000000000..5b17a914a --- /dev/null +++ b/client/src/app/shared/misc/screen.service.ts @@ -0,0 +1,23 @@ +import { Injectable, NgZone } from '@angular/core' + +@Injectable() +export class ScreenService { + private windowInnerWidth: number + + constructor (private zone: NgZone) { + this.windowInnerWidth = window.innerWidth + + // Try to cache a little bit window.innerWidth + this.zone.runOutsideAngular(() => { + setInterval(() => this.windowInnerWidth = window.innerWidth, 500) + }) + } + + isInSmallView () { + return this.windowInnerWidth < 600 + } + + isInMobileView () { + return this.windowInnerWidth < 500 + } +} diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index 2219ac802..53aff1b24 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -96,26 +96,12 @@ function lineFeedToHtml (obj: object, keyToNormalize: string) { }) } -// Try to cache a little bit window.innerWidth -let windowInnerWidth = window.innerWidth -setInterval(() => windowInnerWidth = window.innerWidth, 500) - -function isInSmallView () { - return windowInnerWidth < 600 -} - -function isInMobileView () { - return windowInnerWidth < 500 -} - export { objectToUrlEncoded, getParameterByName, populateAsyncUserVideoChannels, getAbsoluteAPIUrl, dateToHuman, - isInSmallView, - isInMobileView, immutableAssign, objectToFormData, lineFeedToHtml diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index b85445ef5..97e49e7ab 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -41,6 +41,8 @@ import { ResetPasswordValidatorsService, UserValidatorsService, VideoAbuseValidatorsService, VideoChannelValidatorsService, VideoCommentValidatorsService, VideoValidatorsService } from '@app/shared/forms' +import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' +import { ScreenService } from '@app/shared/misc/screen.service' @NgModule({ imports: [ @@ -128,6 +130,9 @@ import { VideoCommentValidatorsService, VideoValidatorsService, + I18nPrimengCalendarService, + ScreenService, + I18n ] }) diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 1c84573da..a468d3231 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -2,7 +2,6 @@ import { debounceTime } from 'rxjs/operators' import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Location } from '@angular/common' -import { isInMobileView } from '@app/shared/misc/utils' import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' import { NotificationsService } from 'angular2-notifications' import { fromEvent, Observable, Subscription } from 'rxjs' @@ -11,6 +10,7 @@ import { ComponentPagination } from '../rest/component-pagination.model' import { VideoSortField } from './sort-field.type' import { Video } from './video.model' import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' export abstract class AbstractVideoList implements OnInit, OnDestroy { private static LINES_PER_PAGE = 4 @@ -41,6 +41,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { protected abstract authService: AuthService protected abstract router: Router protected abstract route: ActivatedRoute + protected abstract screenService: ScreenService protected abstract i18n: I18n protected abstract location: Location protected abstract currentRoute: string @@ -199,7 +200,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { } private calcPageSizes () { - if (isInMobileView() || this.baseVideoWidth === -1) { + if (this.screenService.isInMobileView() || this.baseVideoWidth === -1) { this.pagination.itemsPerPage = 5 // Video takes all the width diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts index f045a3acd..78aed4f9f 100644 --- a/client/src/app/shared/video/video-edit.model.ts +++ b/client/src/app/shared/video/video-edit.model.ts @@ -1,8 +1,11 @@ import { VideoDetails } from './video-details.model' import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum' import { VideoUpdate } from '../../../../../shared/models/videos' +import { VideoScheduleUpdate } from '../../../../../shared/models/videos/video-schedule-update.model' export class VideoEdit implements VideoUpdate { + static readonly SPECIAL_SCHEDULED_PRIVACY = -1 + category: number licence: number language: string @@ -21,6 +24,7 @@ export class VideoEdit implements VideoUpdate { previewUrl: string uuid?: string id?: number + scheduleUpdate?: VideoScheduleUpdate constructor (videoDetails?: VideoDetails) { if (videoDetails) { @@ -40,6 +44,8 @@ export class VideoEdit implements VideoUpdate { this.support = videoDetails.support this.thumbnailUrl = videoDetails.thumbnailUrl this.previewUrl = videoDetails.previewUrl + + this.scheduleUpdate = videoDetails.scheduledUpdate } } @@ -47,10 +53,22 @@ export class VideoEdit implements VideoUpdate { Object.keys(values).forEach((key) => { this[ key ] = values[ key ] }) + + // If schedule publication, the video is private and will be changed to public privacy + if (values['schedulePublicationAt']) { + const updateAt = (values['schedulePublicationAt'] as Date) + updateAt.setSeconds(0) + + this.privacy = VideoPrivacy.PRIVATE + this.scheduleUpdate = { + updateAt: updateAt.toISOString(), + privacy: VideoPrivacy.PUBLIC + } + } } - toJSON () { - return { + toFormPatch () { + const json = { category: this.category, licence: this.licence, language: this.language, @@ -64,5 +82,15 @@ export class VideoEdit implements VideoUpdate { channelId: this.channelId, privacy: this.privacy } + + // Special case if we scheduled an update + if (this.scheduleUpdate) { + Object.assign(json, { + privacy: VideoEdit.SPECIAL_SCHEDULED_PRIVACY, + schedulePublicationAt: new Date(this.scheduleUpdate.updateAt.toString()) + }) + } + + return json } } diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts index e52f7dfb0..86d8f6f74 100644 --- a/client/src/app/shared/video/video-thumbnail.component.ts +++ b/client/src/app/shared/video/video-thumbnail.component.ts @@ -1,6 +1,6 @@ import { Component, Input } from '@angular/core' -import { isInMobileView } from '@app/shared/misc/utils' import { Video } from './video.model' +import { ScreenService } from '@app/shared/misc/screen.service' @Component({ selector: 'my-video-thumbnail', @@ -11,10 +11,12 @@ export class VideoThumbnailComponent { @Input() video: Video @Input() nsfw = false + constructor (private screenService: ScreenService) {} + getImageUrl () { if (!this.video) return '' - if (isInMobileView()) { + if (this.screenService.isInMobileView()) { return this.video.previewUrl } diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts index 48a4b4260..7f421dbbb 100644 --- a/client/src/app/shared/video/video.model.ts +++ b/client/src/app/shared/video/video.model.ts @@ -6,6 +6,7 @@ import { getAbsoluteAPIUrl } from '../misc/utils' import { ServerConfig } from '../../../../../shared/models' import { Actor } from '@app/shared/actor/actor.model' import { peertubeTranslate } from '@app/shared/i18n/i18n-utils' +import { VideoScheduleUpdate } from '../../../../../shared/models/videos/video-schedule-update.model' export class Video implements VideoServerModel { by: string @@ -38,6 +39,7 @@ export class Video implements VideoServerModel { waitTranscoding?: boolean state?: VideoConstant + scheduledUpdate?: VideoScheduleUpdate account: { id: number @@ -109,6 +111,7 @@ export class Video implements VideoServerModel { this.language.label = peertubeTranslate(this.language.label, translations) this.privacy.label = peertubeTranslate(this.privacy.label, translations) + this.scheduledUpdate = hash.scheduledUpdate if (this.state) this.state.label = peertubeTranslate(this.state.label, translations) } diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index d63915ad2..3af90e7ad 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -83,7 +83,8 @@ export class VideoService { waitTranscoding: video.waitTranscoding, commentsEnabled: video.commentsEnabled, thumbnailfile: video.thumbnailfile, - previewfile: video.previewfile + previewfile: video.previewfile, + scheduleUpdate: video.scheduleUpdate || undefined } const data = objectToFormData(body) 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