aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-07 11:15:19 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-07 11:15:19 +0100
commitff249f499ccca2e37757f338384e7ba44c906a69 (patch)
treecb8f88c105536e5edf4bf02030edecfe6b6c0d17 /client
parent59aa1e5e7541f604363d2a1ebfd670a5d1db245f (diff)
downloadPeerTube-ff249f499ccca2e37757f338384e7ba44c906a69.tar.gz
PeerTube-ff249f499ccca2e37757f338384e7ba44c906a69.tar.zst
PeerTube-ff249f499ccca2e37757f338384e7ba44c906a69.zip
Move video form inside a component
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/forms/form-validators/video.ts6
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html85
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.ts83
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.module.ts7
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.html88
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts46
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts10
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 @@
1import { Validators } from '@angular/forms' 1import { Validators } from '@angular/forms'
2 2
3export type ValidatorMessage = {
4 [ id: string ]: {
5 [ error: string ]: string
6 }
7}
8
3export const VIDEO_NAME = { 9export 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 @@
1import { Component, Input, OnInit } from '@angular/core'
2import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
3import { ActivatedRoute, Router } from '@angular/router'
4import { NotificationsService } from 'angular2-notifications'
5import { ServerService } from 'app/core'
6import { VideoEdit } from 'app/shared/video/video-edit.model'
7import 'rxjs/add/observable/forkJoin'
8import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
9import {
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
26export 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
6import { MarkdownService, VideoDescriptionComponent } from '../../shared' 6import { MarkdownService, VideoDescriptionComponent } from '../../shared'
7import { SharedModule } from '../../../shared' 7import { SharedModule } from '../../../shared'
8import { 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'
18import { ValidatorMessage } from '../../shared/forms/form-validators'
18import { VideoService } from '../../shared/video/video.service' 19import { VideoService } from '../../shared/video/video.service'
19import { VideoEdit } from '../../shared/video/video-edit.model' 20import { 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
27export class VideoUpdateComponent extends FormReactive implements OnInit { 28export 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'
11import { AuthService, ConfirmService } from '../../core' 11import { AuthService, ConfirmService } from '../../core'
12import { VideoBlacklistService } from '../../shared' 12import { VideoBlacklistService } from '../../shared'
13import { Account } from '../../shared/account/account.model' 13import { Account } from '../../shared/account/account.model'
14import { VideoDetails } from '../../shared/video/video-details.model'
14import { Video } from '../../shared/video/video.model' 15import { Video } from '../../shared/video/video.model'
15import { MarkdownService } from '../shared' 16import { MarkdownService } from '../shared'
16import { VideoDownloadComponent } from './video-download.component' 17import { VideoDownloadComponent } from './video-download.component'
17import { VideoReportComponent } from './video-report.component' 18import { VideoReportComponent } from './video-report.component'
18import { VideoShareComponent } from './video-share.component' 19import { VideoShareComponent } from './video-share.component'
19import { 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 }