aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-edit/shared
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/+video-edit/shared')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html19
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss40
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.ts79
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.module.ts3
4 files changed, 116 insertions, 25 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
89p-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 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { FormGroup, ValidatorFn } from '@angular/forms' 2import { FormGroup, ValidatorFn, Validators } from '@angular/forms'
3import { ActivatedRoute, Router } from '@angular/router' 3import { ActivatedRoute, Router } from '@angular/router'
4import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared' 4import { FormReactiveValidationMessages, VideoValidatorsService } from '@app/shared'
5import { NotificationsService } from 'angular2-notifications' 5import { NotificationsService } from 'angular2-notifications'
@@ -7,6 +7,7 @@ import { ServerService } from '../../../core/server'
7import { VideoEdit } from '../../../shared/video/video-edit.model' 7import { VideoEdit } from '../../../shared/video/video-edit.model'
8import { map } from 'rxjs/operators' 8import { map } from 'rxjs/operators'
9import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' 9import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
10import { 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'
4import { SharedModule } from '../../../shared/' 4import { SharedModule } from '../../../shared/'
5import { VideoEditComponent } from './video-edit.component' 5import { VideoEditComponent } from './video-edit.component'
6import { VideoImageComponent } from './video-image.component' 6import { VideoImageComponent } from './video-image.component'
7import { 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 ],