diff options
7 files changed, 190 insertions, 135 deletions
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts index 65f11f5da..8e512e8c8 100644 --- a/client/src/app/shared/forms/form-validators/video.ts +++ b/client/src/app/shared/forms/form-validators/video.ts | |||
@@ -1,5 +1,11 @@ | |||
1 | import { Validators } from '@angular/forms' | 1 | import { Validators } from '@angular/forms' |
2 | 2 | ||
3 | export type ValidatorMessage = { | ||
4 | [ id: string ]: { | ||
5 | [ error: string ]: string | ||
6 | } | ||
7 | } | ||
8 | |||
3 | export const VIDEO_NAME = { | 9 | export const VIDEO_NAME = { |
4 | VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ], | 10 | VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ], |
5 | MESSAGES: { | 11 | MESSAGES: { |
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 new file mode 100644 index 000000000..e087b71a4 --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html | |||
@@ -0,0 +1,85 @@ | |||
1 | <div [formGroup]="form"> | ||
2 | <div class="form-group"> | ||
3 | <label for="name">Name</label> | ||
4 | <input | ||
5 | type="text" class="form-control" id="name" | ||
6 | formControlName="name" | ||
7 | > | ||
8 | <div *ngIf="formErrors.name" class="alert alert-danger"> | ||
9 | {{ formErrors.name }} | ||
10 | </div> | ||
11 | </div> | ||
12 | |||
13 | <div class="form-group"> | ||
14 | <label for="privacy">Privacy</label> | ||
15 | <select class="form-control" id="privacy" formControlName="privacy"> | ||
16 | <option></option> | ||
17 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | ||
18 | </select> | ||
19 | |||
20 | <div *ngIf="formErrors.privacy" class="alert alert-danger"> | ||
21 | {{ formErrors.privacy }} | ||
22 | </div> | ||
23 | </div> | ||
24 | |||
25 | <div class="form-group"> | ||
26 | <input | ||
27 | type="checkbox" id="nsfw" | ||
28 | formControlName="nsfw" | ||
29 | > | ||
30 | <label for="nsfw">This video contains mature or explicit content</label> | ||
31 | </div> | ||
32 | |||
33 | <div class="form-group"> | ||
34 | <label for="category">Category</label> | ||
35 | <select class="form-control" id="category" formControlName="category"> | ||
36 | <option></option> | ||
37 | <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> | ||
38 | </select> | ||
39 | |||
40 | <div *ngIf="formErrors.category" class="alert alert-danger"> | ||
41 | {{ formErrors.category }} | ||
42 | </div> | ||
43 | </div> | ||
44 | |||
45 | <div class="form-group"> | ||
46 | <label for="licence">Licence</label> | ||
47 | <select class="form-control" id="licence" formControlName="licence"> | ||
48 | <option></option> | ||
49 | <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> | ||
50 | </select> | ||
51 | |||
52 | <div *ngIf="formErrors.licence" class="alert alert-danger"> | ||
53 | {{ formErrors.licence }} | ||
54 | </div> | ||
55 | </div> | ||
56 | |||
57 | <div class="form-group"> | ||
58 | <label for="language">Language</label> | ||
59 | <select class="form-control" id="language" formControlName="language"> | ||
60 | <option></option> | ||
61 | <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> | ||
62 | </select> | ||
63 | |||
64 | <div *ngIf="formErrors.language" class="alert alert-danger"> | ||
65 | {{ formErrors.language }} | ||
66 | </div> | ||
67 | </div> | ||
68 | |||
69 | <div class="form-group"> | ||
70 | <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span> | ||
71 | <tag-input | ||
72 | [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages" | ||
73 | formControlName="tags" maxItems="5" modelAsStrings="true" | ||
74 | ></tag-input> | ||
75 | </div> | ||
76 | |||
77 | <div class="form-group"> | ||
78 | <label for="description">Description</label> | ||
79 | <my-video-description formControlName="description"></my-video-description> | ||
80 | |||
81 | <div *ngIf="formErrors.description" class="alert alert-danger"> | ||
82 | {{ formErrors.description }} | ||
83 | </div> | ||
84 | </div> | ||
85 | </div> | ||
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 new file mode 100644 index 000000000..5b1cc3f9c --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts | |||
@@ -0,0 +1,83 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | ||
2 | import { FormBuilder, FormControl, FormGroup } from '@angular/forms' | ||
3 | import { ActivatedRoute, Router } from '@angular/router' | ||
4 | import { NotificationsService } from 'angular2-notifications' | ||
5 | import { ServerService } from 'app/core' | ||
6 | import { VideoEdit } from 'app/shared/video/video-edit.model' | ||
7 | import 'rxjs/add/observable/forkJoin' | ||
8 | import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum' | ||
9 | import { | ||
10 | ValidatorMessage, | ||
11 | VIDEO_CATEGORY, | ||
12 | VIDEO_DESCRIPTION, | ||
13 | VIDEO_LANGUAGE, | ||
14 | VIDEO_LICENCE, | ||
15 | VIDEO_NAME, | ||
16 | VIDEO_PRIVACY, | ||
17 | VIDEO_TAGS | ||
18 | } from '../../../shared/forms/form-validators' | ||
19 | |||
20 | @Component({ | ||
21 | selector: 'my-video-edit', | ||
22 | styleUrls: [ './video-edit.component.scss' ], | ||
23 | templateUrl: './video-edit.component.html' | ||
24 | }) | ||
25 | |||
26 | export class VideoEditComponent implements OnInit { | ||
27 | @Input() form: FormGroup | ||
28 | @Input() formErrors: { [ id: string ]: string } = {} | ||
29 | @Input() validationMessages: ValidatorMessage = {} | ||
30 | @Input() videoPrivacies = [] | ||
31 | |||
32 | tags: string[] = [] | ||
33 | videoCategories = [] | ||
34 | videoLicences = [] | ||
35 | videoLanguages = [] | ||
36 | video: VideoEdit | ||
37 | |||
38 | tagValidators = VIDEO_TAGS.VALIDATORS | ||
39 | tagValidatorsMessages = VIDEO_TAGS.MESSAGES | ||
40 | |||
41 | error: string = null | ||
42 | |||
43 | constructor ( | ||
44 | private formBuilder: FormBuilder, | ||
45 | private route: ActivatedRoute, | ||
46 | private router: Router, | ||
47 | private notificationsService: NotificationsService, | ||
48 | private serverService: ServerService | ||
49 | ) { } | ||
50 | |||
51 | updateForm () { | ||
52 | this.formErrors['name'] = '' | ||
53 | this.formErrors['privacy'] = '' | ||
54 | this.formErrors['category'] = '' | ||
55 | this.formErrors['licence'] = '' | ||
56 | this.formErrors['language'] = '' | ||
57 | this.formErrors['description'] = '' | ||
58 | |||
59 | this.validationMessages['name'] = VIDEO_NAME.MESSAGES | ||
60 | this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES | ||
61 | this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES | ||
62 | this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES | ||
63 | this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES | ||
64 | this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES | ||
65 | |||
66 | this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS)) | ||
67 | this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS)) | ||
68 | this.form.addControl('nsfw', new FormControl(false)) | ||
69 | this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS)) | ||
70 | this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS)) | ||
71 | this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS)) | ||
72 | this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS)) | ||
73 | this.form.addControl('tags', new FormControl('')) | ||
74 | } | ||
75 | |||
76 | ngOnInit () { | ||
77 | this.updateForm() | ||
78 | |||
79 | this.videoCategories = this.serverService.getVideoCategories() | ||
80 | this.videoLicences = this.serverService.getVideoLicences() | ||
81 | this.videoLanguages = this.serverService.getVideoLanguages() | ||
82 | } | ||
83 | } | ||
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 cdab694f9..c7ed8c351 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 | |||
@@ -5,6 +5,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs' | |||
5 | 5 | ||
6 | import { MarkdownService, VideoDescriptionComponent } from '../../shared' | 6 | import { MarkdownService, VideoDescriptionComponent } from '../../shared' |
7 | import { SharedModule } from '../../../shared' | 7 | import { SharedModule } from '../../../shared' |
8 | import { VideoEditComponent } from './video-edit.component' | ||
8 | 9 | ||
9 | @NgModule({ | 10 | @NgModule({ |
10 | imports: [ | 11 | imports: [ |
@@ -15,14 +16,16 @@ import { SharedModule } from '../../../shared' | |||
15 | ], | 16 | ], |
16 | 17 | ||
17 | declarations: [ | 18 | declarations: [ |
18 | VideoDescriptionComponent | 19 | VideoDescriptionComponent, |
20 | VideoEditComponent | ||
19 | ], | 21 | ], |
20 | 22 | ||
21 | exports: [ | 23 | exports: [ |
22 | TagInputModule, | 24 | TagInputModule, |
23 | TabsModule, | 25 | TabsModule, |
24 | 26 | ||
25 | VideoDescriptionComponent | 27 | VideoDescriptionComponent, |
28 | VideoEditComponent | ||
26 | ], | 29 | ], |
27 | 30 | ||
28 | providers: [ | 31 | providers: [ |
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 b9c6139b2..c57f35da0 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html | |||
@@ -3,92 +3,12 @@ | |||
3 | 3 | ||
4 | <h3>Update {{ video?.name }}</h3> | 4 | <h3>Update {{ video?.name }}</h3> |
5 | 5 | ||
6 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
7 | |||
8 | <form novalidate [formGroup]="form"> | 6 | <form novalidate [formGroup]="form"> |
9 | <div class="form-group"> | ||
10 | <label for="name">Name</label> | ||
11 | <input | ||
12 | type="text" class="form-control" id="name" | ||
13 | formControlName="name" | ||
14 | > | ||
15 | <div *ngIf="formErrors.name" class="alert alert-danger"> | ||
16 | {{ formErrors.name }} | ||
17 | </div> | ||
18 | </div> | ||
19 | |||
20 | <div class="form-group"> | ||
21 | <label for="privacy">Privacy</label> | ||
22 | <select class="form-control" id="privacy" formControlName="privacy"> | ||
23 | <option></option> | ||
24 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | ||
25 | </select> | ||
26 | |||
27 | <div *ngIf="formErrors.privacy" class="alert alert-danger"> | ||
28 | {{ formErrors.privacy }} | ||
29 | </div> | ||
30 | </div> | ||
31 | |||
32 | <div class="form-group"> | ||
33 | <input | ||
34 | type="checkbox" id="nsfw" | ||
35 | formControlName="nsfw" | ||
36 | > | ||
37 | <label for="nsfw">This video contains mature or explicit content</label> | ||
38 | </div> | ||
39 | |||
40 | <div class="form-group"> | ||
41 | <label for="category">Category</label> | ||
42 | <select class="form-control" id="category" formControlName="category"> | ||
43 | <option></option> | ||
44 | <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> | ||
45 | </select> | ||
46 | 7 | ||
47 | <div *ngIf="formErrors.category" class="alert alert-danger"> | 8 | <my-video-edit |
48 | {{ formErrors.category }} | 9 | [form]="form" [formErrors]="formErrors" |
49 | </div> | 10 | [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" |
50 | </div> | 11 | ></my-video-edit> |
51 | |||
52 | <div class="form-group"> | ||
53 | <label for="licence">Licence</label> | ||
54 | <select class="form-control" id="licence" formControlName="licence"> | ||
55 | <option></option> | ||
56 | <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> | ||
57 | </select> | ||
58 | |||
59 | <div *ngIf="formErrors.licence" class="alert alert-danger"> | ||
60 | {{ formErrors.licence }} | ||
61 | </div> | ||
62 | </div> | ||
63 | |||
64 | <div class="form-group"> | ||
65 | <label for="language">Language</label> | ||
66 | <select class="form-control" id="language" formControlName="language"> | ||
67 | <option></option> | ||
68 | <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> | ||
69 | </select> | ||
70 | |||
71 | <div *ngIf="formErrors.language" class="alert alert-danger"> | ||
72 | {{ formErrors.language }} | ||
73 | </div> | ||
74 | </div> | ||
75 | |||
76 | <div class="form-group"> | ||
77 | <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span> | ||
78 | <tag-input | ||
79 | [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages" | ||
80 | formControlName="tags" maxItems="5" modelAsStrings="true" | ||
81 | ></tag-input> | ||
82 | </div> | ||
83 | |||
84 | <div class="form-group"> | ||
85 | <label for="description">Description</label> | ||
86 | <my-video-description formControlName="description"></my-video-description> | ||
87 | |||
88 | <div *ngIf="formErrors.description" class="alert alert-danger"> | ||
89 | {{ formErrors.description }} | ||
90 | </div> | ||
91 | </div> | ||
92 | 12 | ||
93 | <div class="form-group"> | 13 | <div class="form-group"> |
94 | <input | 14 | <input |
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 017781866..01ab0a716 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts | |||
@@ -15,6 +15,7 @@ import { | |||
15 | VIDEO_PRIVACY, | 15 | VIDEO_PRIVACY, |
16 | VIDEO_TAGS | 16 | VIDEO_TAGS |
17 | } from '../../shared' | 17 | } from '../../shared' |
18 | import { ValidatorMessage } from '../../shared/forms/form-validators' | ||
18 | import { VideoService } from '../../shared/video/video.service' | 19 | import { VideoService } from '../../shared/video/video.service' |
19 | import { VideoEdit } from '../../shared/video/video-edit.model' | 20 | import { VideoEdit } from '../../shared/video/video-edit.model' |
20 | 21 | ||
@@ -25,34 +26,13 @@ import { VideoEdit } from '../../shared/video/video-edit.model' | |||
25 | }) | 26 | }) |
26 | 27 | ||
27 | export class VideoUpdateComponent extends FormReactive implements OnInit { | 28 | export class VideoUpdateComponent extends FormReactive implements OnInit { |
28 | tags: string[] = [] | ||
29 | videoCategories = [] | ||
30 | videoLicences = [] | ||
31 | videoLanguages = [] | ||
32 | videoPrivacies = [] | ||
33 | video: VideoEdit | 29 | video: VideoEdit |
34 | 30 | ||
35 | tagValidators = VIDEO_TAGS.VALIDATORS | ||
36 | tagValidatorsMessages = VIDEO_TAGS.MESSAGES | ||
37 | |||
38 | error: string = null | 31 | error: string = null |
39 | form: FormGroup | 32 | form: FormGroup |
40 | formErrors = { | 33 | formErrors: { [ id: string ]: string } = {} |
41 | name: '', | 34 | validationMessages: ValidatorMessage = {} |
42 | privacy: '', | 35 | videoPrivacies = [] |
43 | category: '', | ||
44 | licence: '', | ||
45 | language: '', | ||
46 | description: '' | ||
47 | } | ||
48 | validationMessages = { | ||
49 | name: VIDEO_NAME.MESSAGES, | ||
50 | privacy: VIDEO_PRIVACY.MESSAGES, | ||
51 | category: VIDEO_CATEGORY.MESSAGES, | ||
52 | licence: VIDEO_LICENCE.MESSAGES, | ||
53 | language: VIDEO_LANGUAGE.MESSAGES, | ||
54 | description: VIDEO_DESCRIPTION.MESSAGES | ||
55 | } | ||
56 | 36 | ||
57 | fileError = '' | 37 | fileError = '' |
58 | 38 | ||
@@ -68,30 +48,16 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { | |||
68 | } | 48 | } |
69 | 49 | ||
70 | buildForm () { | 50 | buildForm () { |
71 | this.form = this.formBuilder.group({ | 51 | this.form = this.formBuilder.group({}) |
72 | name: [ '', VIDEO_NAME.VALIDATORS ], | ||
73 | privacy: [ '', VIDEO_PRIVACY.VALIDATORS ], | ||
74 | nsfw: [ false ], | ||
75 | category: [ '', VIDEO_CATEGORY.VALIDATORS ], | ||
76 | licence: [ '', VIDEO_LICENCE.VALIDATORS ], | ||
77 | language: [ '', VIDEO_LANGUAGE.VALIDATORS ], | ||
78 | description: [ '', VIDEO_DESCRIPTION.VALIDATORS ], | ||
79 | tags: [ '' ] | ||
80 | }) | ||
81 | |||
82 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | 52 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) |
83 | } | 53 | } |
84 | 54 | ||
85 | ngOnInit () { | 55 | ngOnInit () { |
86 | this.buildForm() | 56 | this.buildForm() |
87 | 57 | ||
88 | this.videoCategories = this.serverService.getVideoCategories() | ||
89 | this.videoLicences = this.serverService.getVideoLicences() | ||
90 | this.videoLanguages = this.serverService.getVideoLanguages() | ||
91 | this.videoPrivacies = this.serverService.getVideoPrivacies() | 58 | this.videoPrivacies = this.serverService.getVideoPrivacies() |
92 | 59 | ||
93 | const uuid: string = this.route.snapshot.params['uuid'] | 60 | const uuid: string = this.route.snapshot.params['uuid'] |
94 | |||
95 | this.videoService.getVideo(uuid) | 61 | this.videoService.getVideo(uuid) |
96 | .switchMap(video => { | 62 | .switchMap(video => { |
97 | return this.videoService | 63 | return this.videoService |
@@ -103,7 +69,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { | |||
103 | video => { | 69 | video => { |
104 | this.video = new VideoEdit(video) | 70 | this.video = new VideoEdit(video) |
105 | 71 | ||
106 | // We cannot set private a video that was not private anymore | 72 | // We cannot set private a video that was not private |
107 | if (video.privacy !== VideoPrivacy.PRIVATE) { | 73 | if (video.privacy !== VideoPrivacy.PRIVATE) { |
108 | const newVideoPrivacies = [] | 74 | const newVideoPrivacies = [] |
109 | for (const p of this.videoPrivacies) { | 75 | for (const p of this.videoPrivacies) { |
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 3c6951403..87db023bf 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -11,12 +11,12 @@ import '../../../assets/player/peertube-videojs-plugin' | |||
11 | import { AuthService, ConfirmService } from '../../core' | 11 | import { AuthService, ConfirmService } from '../../core' |
12 | import { VideoBlacklistService } from '../../shared' | 12 | import { VideoBlacklistService } from '../../shared' |
13 | import { Account } from '../../shared/account/account.model' | 13 | import { Account } from '../../shared/account/account.model' |
14 | import { VideoDetails } from '../../shared/video/video-details.model' | ||
14 | import { Video } from '../../shared/video/video.model' | 15 | import { Video } from '../../shared/video/video.model' |
15 | import { MarkdownService } from '../shared' | 16 | import { MarkdownService } from '../shared' |
16 | import { VideoDownloadComponent } from './video-download.component' | 17 | import { VideoDownloadComponent } from './video-download.component' |
17 | import { VideoReportComponent } from './video-report.component' | 18 | import { VideoReportComponent } from './video-report.component' |
18 | import { VideoShareComponent } from './video-share.component' | 19 | import { VideoShareComponent } from './video-share.component' |
19 | import { VideoDetails } from '../../shared/video/video-details.model' | ||
20 | 20 | ||
21 | @Component({ | 21 | @Component({ |
22 | selector: 'my-video-watch', | 22 | selector: 'my-video-watch', |
@@ -199,14 +199,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
199 | return this.authService.isLoggedIn() | 199 | return this.authService.isLoggedIn() |
200 | } | 200 | } |
201 | 201 | ||
202 | canUserUpdateVideo () { | ||
203 | return this.video.isUpdatableBy(this.authService.getUser()) | ||
204 | } | ||
205 | |||
206 | isVideoRemovable () { | ||
207 | return this.video.isRemovableBy(this.authService.getUser()) | ||
208 | } | ||
209 | |||
210 | isVideoBlacklistable () { | 202 | isVideoBlacklistable () { |
211 | return this.video.isBlackistableBy(this.authService.getUser()) | 203 | return this.video.isBlackistableBy(this.authService.getUser()) |
212 | } | 204 | } |