diff options
author | Chocobozzz <me@florianbigard.com> | 2018-06-15 16:52:15 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-06-15 18:20:56 +0200 |
commit | bbe0f0645ca958d33a3f409b15166609733b663f (patch) | |
tree | edcd5d702c73cda74a2177c4bdc08c616334337d /client/src/app/videos/+video-edit | |
parent | 2baea0c77cc765f7cbca9c9a2f4272268892a35c (diff) | |
download | PeerTube-bbe0f0645ca958d33a3f409b15166609733b663f.tar.gz PeerTube-bbe0f0645ca958d33a3f409b15166609733b663f.tar.zst PeerTube-bbe0f0645ca958d33a3f409b15166609733b663f.zip |
Add ability to schedule video publication
Diffstat (limited to 'client/src/app/videos/+video-edit')
8 files changed, 127 insertions, 34 deletions
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 @@ | |||
88 | <select id="privacy" formControlName="privacy"> | 88 | <select id="privacy" formControlName="privacy"> |
89 | <option></option> | 89 | <option></option> |
90 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | 90 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> |
91 | <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> | ||
91 | </select> | 92 | </select> |
92 | </div> | 93 | </div> |
93 | 94 | ||
@@ -96,11 +97,27 @@ | |||
96 | </div> | 97 | </div> |
97 | </div> | 98 | </div> |
98 | 99 | ||
100 | <div *ngIf="schedulePublicationEnabled" class="form-group"> | ||
101 | <label i18n for="schedulePublicationAt">Schedule publication ({{ calendarTimezone }})</label> | ||
102 | <p-calendar | ||
103 | id="schedulePublicationAt" formControlName="schedulePublicationAt" [dateFormat]="calendarDateFormat" | ||
104 | [locale]="calendarLocale" [minDate]="minScheduledDate" [showTime]="true" [hideOnDateTimeSelect]="true" | ||
105 | > | ||
106 | </p-calendar> | ||
107 | |||
108 | <div *ngIf="formErrors.schedulePublicationAt" class="form-error"> | ||
109 | {{ formErrors.schedulePublicationAt }} | ||
110 | </div> | ||
111 | </div> | ||
112 | |||
99 | <div class="form-group form-group-checkbox"> | 113 | <div class="form-group form-group-checkbox"> |
100 | <input type="checkbox" id="nsfw" formControlName="nsfw" /> | 114 | <input type="checkbox" id="nsfw" formControlName="nsfw" /> |
101 | <label for="nsfw"></label> | 115 | <label for="nsfw"></label> |
102 | <label i18n for="nsfw">This video contains mature or explicit content</label> | 116 | <label i18n for="nsfw">This video contains mature or explicit content</label> |
103 | <my-help tooltipPlacement="top" helpType="custom" i18n-customHtml customHtml="Some instances do not list NSFW videos by default."></my-help> | 117 | <my-help |
118 | tooltipPlacement="top" helpType="custom" i18n-customHtml | ||
119 | customHtml="Some instances do not list videos containing mature or explicit content by default." | ||
120 | ></my-help> | ||
104 | </div> | 121 | </div> |
105 | 122 | ||
106 | <div class="form-group form-group-checkbox"> | 123 | <div class="form-group form-group-checkbox"> |
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 @@ | |||
44 | font-size: 15px; | 44 | font-size: 15px; |
45 | } | 45 | } |
46 | 46 | ||
47 | .root-tabset /deep/ > .nav { | ||
48 | margin-left: 15px; | ||
49 | margin-bottom: 15px; | ||
50 | |||
51 | .nav-link { | ||
52 | display: flex !important; | ||
53 | align-items: center; | ||
54 | height: 30px !important; | ||
55 | padding: 0 15px !important; | ||
56 | } | ||
57 | } | ||
58 | |||
59 | .advanced-settings .form-group { | 47 | .advanced-settings .form-group { |
60 | margin-bottom: 20px; | 48 | margin-bottom: 20px; |
61 | } | 49 | } |
@@ -98,7 +86,35 @@ | |||
98 | } | 86 | } |
99 | } | 87 | } |
100 | 88 | ||
89 | p-calendar { | ||
90 | display: block; | ||
91 | |||
92 | /deep/ { | ||
93 | input, | ||
94 | .ui-calendar { | ||
95 | width: 100%; | ||
96 | } | ||
97 | |||
98 | input { | ||
99 | @include peertube-input-text(100%); | ||
100 | color: #000; | ||
101 | } | ||
102 | } | ||
103 | } | ||
104 | |||
101 | /deep/ { | 105 | /deep/ { |
106 | .root-tabset > .nav { | ||
107 | margin-left: 15px; | ||
108 | margin-bottom: 15px; | ||
109 | |||
110 | .nav-link { | ||
111 | display: flex !important; | ||
112 | align-items: center; | ||
113 | height: 30px !important; | ||
114 | padding: 0 15px !important; | ||
115 | } | ||
116 | } | ||
117 | |||
102 | .ng2-tag-input { | 118 | .ng2-tag-input { |
103 | border: none !important; | 119 | border: none !important; |
104 | } | 120 | } |
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 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | 1 | import { Component, Input, OnInit } from '@angular/core' |
2 | import { FormGroup, ValidatorFn } from '@angular/forms' | 2 | import { FormGroup, ValidatorFn, Validators } from '@angular/forms' |
3 | import { ActivatedRoute, Router } from '@angular/router' | 3 | import { ActivatedRoute, Router } from '@angular/router' |
4 | import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared' | 4 | import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared' |
5 | import { NotificationsService } from 'angular2-notifications' | 5 | import { NotificationsService } from 'angular2-notifications' |
@@ -7,6 +7,7 @@ import { ServerService } from '../../../core/server' | |||
7 | import { VideoEdit } from '../../../shared/video/video-edit.model' | 7 | import { VideoEdit } from '../../../shared/video/video-edit.model' |
8 | import { map } from 'rxjs/operators' | 8 | import { map } from 'rxjs/operators' |
9 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | 9 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' |
10 | import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calendar' | ||
10 | 11 | ||
11 | @Component({ | 12 | @Component({ |
12 | selector: 'my-video-edit', | 13 | selector: 'my-video-edit', |
@@ -20,16 +21,26 @@ export class VideoEditComponent implements OnInit { | |||
20 | @Input() validationMessages: FormReactiveValidationMessages = {} | 21 | @Input() validationMessages: FormReactiveValidationMessages = {} |
21 | @Input() videoPrivacies = [] | 22 | @Input() videoPrivacies = [] |
22 | @Input() userVideoChannels: { id: number, label: string, support: string }[] = [] | 23 | @Input() userVideoChannels: { id: number, label: string, support: string }[] = [] |
24 | @Input() schedulePublicationPossible = true | ||
25 | |||
26 | // So that it can be accessed in the template | ||
27 | readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY | ||
23 | 28 | ||
24 | videoCategories = [] | 29 | videoCategories = [] |
25 | videoLicences = [] | 30 | videoLicences = [] |
26 | videoLanguages = [] | 31 | videoLanguages = [] |
27 | video: VideoEdit | ||
28 | 32 | ||
29 | tagValidators: ValidatorFn[] | 33 | tagValidators: ValidatorFn[] |
30 | tagValidatorsMessages: { [ name: string ]: string } | 34 | tagValidatorsMessages: { [ name: string ]: string } |
31 | 35 | ||
36 | schedulePublicationEnabled = false | ||
37 | |||
32 | error: string = null | 38 | error: string = null |
39 | calendarLocale: any = {} | ||
40 | minScheduledDate = new Date() | ||
41 | |||
42 | calendarTimezone: string | ||
43 | calendarDateFormat: string | ||
33 | 44 | ||
34 | constructor ( | 45 | constructor ( |
35 | private formValidatorService: FormValidatorService, | 46 | private formValidatorService: FormValidatorService, |
@@ -37,10 +48,15 @@ export class VideoEditComponent implements OnInit { | |||
37 | private route: ActivatedRoute, | 48 | private route: ActivatedRoute, |
38 | private router: Router, | 49 | private router: Router, |
39 | private notificationsService: NotificationsService, | 50 | private notificationsService: NotificationsService, |
40 | private serverService: ServerService | 51 | private serverService: ServerService, |
52 | private i18nPrimengCalendarService: I18nPrimengCalendarService | ||
41 | ) { | 53 | ) { |
42 | this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS | 54 | this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS |
43 | this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES | 55 | this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES |
56 | |||
57 | this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale() | ||
58 | this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone() | ||
59 | this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat() | ||
44 | } | 60 | } |
45 | 61 | ||
46 | updateForm () { | 62 | updateForm () { |
@@ -64,7 +80,8 @@ export class VideoEditComponent implements OnInit { | |||
64 | tags: null, | 80 | tags: null, |
65 | thumbnailfile: null, | 81 | thumbnailfile: null, |
66 | previewfile: null, | 82 | previewfile: null, |
67 | support: this.videoValidatorsService.VIDEO_SUPPORT | 83 | support: this.videoValidatorsService.VIDEO_SUPPORT, |
84 | schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT | ||
68 | } | 85 | } |
69 | 86 | ||
70 | this.formValidatorService.updateForm( | 87 | this.formValidatorService.updateForm( |
@@ -75,6 +92,52 @@ export class VideoEditComponent implements OnInit { | |||
75 | defaultValues | 92 | defaultValues |
76 | ) | 93 | ) |
77 | 94 | ||
95 | this.trackChannelChange() | ||
96 | this.trackPrivacyChange() | ||
97 | } | ||
98 | |||
99 | ngOnInit () { | ||
100 | this.updateForm() | ||
101 | |||
102 | this.videoCategories = this.serverService.getVideoCategories() | ||
103 | this.videoLicences = this.serverService.getVideoLicences() | ||
104 | this.videoLanguages = this.serverService.getVideoLanguages() | ||
105 | |||
106 | setTimeout(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute | ||
107 | } | ||
108 | |||
109 | private trackPrivacyChange () { | ||
110 | // We will update the "support" field depending on the channel | ||
111 | this.form.controls[ 'privacy' ] | ||
112 | .valueChanges | ||
113 | .pipe(map(res => parseInt(res.toString(), 10))) | ||
114 | .subscribe( | ||
115 | newPrivacyId => { | ||
116 | this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY | ||
117 | |||
118 | // Value changed | ||
119 | const scheduleControl = this.form.get('schedulePublicationAt') | ||
120 | const waitTranscodingControl = this.form.get('waitTranscoding') | ||
121 | |||
122 | if (this.schedulePublicationEnabled) { | ||
123 | scheduleControl.setValidators([ Validators.required ]) | ||
124 | |||
125 | waitTranscodingControl.disable() | ||
126 | waitTranscodingControl.setValue(false) | ||
127 | } else { | ||
128 | scheduleControl.clearValidators() | ||
129 | |||
130 | waitTranscodingControl.enable() | ||
131 | waitTranscodingControl.setValue(true) | ||
132 | } | ||
133 | |||
134 | scheduleControl.updateValueAndValidity() | ||
135 | waitTranscodingControl.updateValueAndValidity() | ||
136 | } | ||
137 | ) | ||
138 | } | ||
139 | |||
140 | private trackChannelChange () { | ||
78 | // We will update the "support" field depending on the channel | 141 | // We will update the "support" field depending on the channel |
79 | this.form.controls[ 'channelId' ] | 142 | this.form.controls[ 'channelId' ] |
80 | .valueChanges | 143 | .valueChanges |
@@ -108,14 +171,6 @@ export class VideoEditComponent implements OnInit { | |||
108 | ) | 171 | ) |
109 | } | 172 | } |
110 | 173 | ||
111 | ngOnInit () { | ||
112 | this.updateForm() | ||
113 | |||
114 | this.videoCategories = this.serverService.getVideoCategories() | ||
115 | this.videoLicences = this.serverService.getVideoLicences() | ||
116 | this.videoLanguages = this.serverService.getVideoLanguages() | ||
117 | } | ||
118 | |||
119 | private updateSupportField (support: string) { | 174 | private updateSupportField (support: string) { |
120 | return this.form.patchValue({ support: support || '' }) | 175 | return this.form.patchValue({ support: support || '' }) |
121 | } | 176 | } |
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' | |||
4 | import { SharedModule } from '../../../shared/' | 4 | import { SharedModule } from '../../../shared/' |
5 | import { VideoEditComponent } from './video-edit.component' | 5 | import { VideoEditComponent } from './video-edit.component' |
6 | import { VideoImageComponent } from './video-image.component' | 6 | import { VideoImageComponent } from './video-image.component' |
7 | import { CalendarModule } from 'primeng/components/calendar/calendar' | ||
7 | 8 | ||
8 | @NgModule({ | 9 | @NgModule({ |
9 | imports: [ | 10 | imports: [ |
10 | TagInputModule, | 11 | TagInputModule, |
12 | CalendarModule, | ||
11 | 13 | ||
12 | SharedModule | 14 | SharedModule |
13 | ], | 15 | ], |
@@ -20,6 +22,7 @@ import { VideoImageComponent } from './video-image.component' | |||
20 | exports: [ | 22 | exports: [ |
21 | TagInputModule, | 23 | TagInputModule, |
22 | TabsModule, | 24 | TabsModule, |
25 | CalendarModule, | ||
23 | 26 | ||
24 | VideoEditComponent | 27 | VideoEditComponent |
25 | ], | 28 | ], |
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 @@ | |||
27 | <div class="peertube-select-container"> | 27 | <div class="peertube-select-container"> |
28 | <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId"> | 28 | <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId"> |
29 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | 29 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> |
30 | <option [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> | ||
30 | </select> | 31 | </select> |
31 | </div> | 32 | </div> |
32 | </div> | 33 | </div> |
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 | |||
27 | export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy, CanComponentDeactivate { | 27 | export class VideoAddComponent extends FormReactive implements OnInit, OnDestroy, CanComponentDeactivate { |
28 | @ViewChild('videofileInput') videofileInput | 28 | @ViewChild('videofileInput') videofileInput |
29 | 29 | ||
30 | // So that it can be accessed in the template | ||
31 | readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY | ||
32 | |||
30 | isUploadingVideo = false | 33 | isUploadingVideo = false |
31 | isUpdatingVideo = false | 34 | isUpdatingVideo = false |
32 | videoUploaded = false | 35 | 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 @@ | |||
6 | <form novalidate [formGroup]="form"> | 6 | <form novalidate [formGroup]="form"> |
7 | 7 | ||
8 | <my-video-edit | 8 | <my-video-edit |
9 | [form]="form" [formErrors]="formErrors" | 9 | [form]="form" [formErrors]="formErrors" [schedulePublicationPossible]="schedulePublicationPossible" |
10 | [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels" | 10 | [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels" |
11 | ></my-video-edit> | 11 | ></my-video-edit> |
12 | 12 | ||
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 { | |||
24 | isUpdatingVideo = false | 24 | isUpdatingVideo = false |
25 | videoPrivacies = [] | 25 | videoPrivacies = [] |
26 | userVideoChannels = [] | 26 | userVideoChannels = [] |
27 | schedulePublicationPossible = false | ||
27 | 28 | ||
28 | constructor ( | 29 | constructor ( |
29 | protected formValidatorService: FormValidatorService, | 30 | protected formValidatorService: FormValidatorService, |
@@ -70,13 +71,10 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { | |||
70 | this.userVideoChannels = videoChannels | 71 | this.userVideoChannels = videoChannels |
71 | 72 | ||
72 | // We cannot set private a video that was not private | 73 | // We cannot set private a video that was not private |
73 | if (video.privacy.id !== VideoPrivacy.PRIVATE) { | 74 | if (this.video.privacy !== VideoPrivacy.PRIVATE) { |
74 | const newVideoPrivacies = [] | 75 | this.videoPrivacies = this.videoPrivacies.filter(p => p.id !== VideoPrivacy.PRIVATE) |
75 | for (const p of this.videoPrivacies) { | 76 | } else { // We can schedule video publication only if it it is private |
76 | if (p.id !== VideoPrivacy.PRIVATE) newVideoPrivacies.push(p) | 77 | this.schedulePublicationPossible = this.video.privacy === VideoPrivacy.PRIVATE |
77 | } | ||
78 | |||
79 | this.videoPrivacies = newVideoPrivacies | ||
80 | } | 78 | } |
81 | 79 | ||
82 | this.hydrateFormFromVideo() | 80 | this.hydrateFormFromVideo() |
@@ -123,7 +121,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { | |||
123 | } | 121 | } |
124 | 122 | ||
125 | private hydrateFormFromVideo () { | 123 | private hydrateFormFromVideo () { |
126 | this.form.patchValue(this.video.toJSON()) | 124 | this.form.patchValue(this.video.toFormPatch()) |
127 | 125 | ||
128 | const objects = [ | 126 | const objects = [ |
129 | { | 127 | { |