aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html50
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss12
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.ts5
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html22
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss19
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts18
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.html2
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts13
8 files changed, 86 insertions, 55 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 8c071ce12..e728d8ea2 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
@@ -29,11 +29,22 @@
29 29
30 <div class="col-md-4"> 30 <div class="col-md-4">
31 <div class="form-group"> 31 <div class="form-group">
32 <label>Channel</label>
33 <div class="peertube-select-disabled-container">
34 <select formControlName="channelId">
35 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
36 </select>
37 </div>
38 </div>
39
40 <div class="form-group">
32 <label for="category">Category</label> 41 <label for="category">Category</label>
33 <select id="category" formControlName="category"> 42 <div class="peertube-select-container">
34 <option></option> 43 <select id="category" formControlName="category">
35 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> 44 <option></option>
36 </select> 45 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
46 </select>
47 </div>
37 48
38 <div *ngIf="formErrors.category" class="form-error"> 49 <div *ngIf="formErrors.category" class="form-error">
39 {{ formErrors.category }} 50 {{ formErrors.category }}
@@ -42,10 +53,12 @@
42 53
43 <div class="form-group"> 54 <div class="form-group">
44 <label for="licence">Licence</label> 55 <label for="licence">Licence</label>
45 <select id="licence" formControlName="licence"> 56 <div class="peertube-select-container">
46 <option></option> 57 <select id="licence" formControlName="licence">
47 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> 58 <option></option>
48 </select> 59 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
60 </select>
61 </div>
49 62
50 <div *ngIf="formErrors.licence" class="form-error"> 63 <div *ngIf="formErrors.licence" class="form-error">
51 {{ formErrors.licence }} 64 {{ formErrors.licence }}
@@ -54,10 +67,12 @@
54 67
55 <div class="form-group"> 68 <div class="form-group">
56 <label for="language">Language</label> 69 <label for="language">Language</label>
57 <select id="language" formControlName="language"> 70 <div class="peertube-select-container">
58 <option></option> 71 <select id="language" formControlName="language">
59 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> 72 <option></option>
60 </select> 73 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
74 </select>
75 </div>
61 76
62 <div *ngIf="formErrors.language" class="form-error"> 77 <div *ngIf="formErrors.language" class="form-error">
63 {{ formErrors.language }} 78 {{ formErrors.language }}
@@ -66,11 +81,12 @@
66 81
67 <div class="form-group"> 82 <div class="form-group">
68 <label for="privacy">Privacy</label> 83 <label for="privacy">Privacy</label>
69 <select id="privacy" formControlName="privacy"> 84 <div class="peertube-select-container">
70 85 <select id="privacy" formControlName="privacy">
71 <option></option> 86 <option></option>
72 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 87 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
73 </select> 88 </select>
89 </div>
74 90
75 <div *ngIf="formErrors.privacy" class="form-error"> 91 <div *ngIf="formErrors.privacy" class="form-error">
76 {{ formErrors.privacy }} 92 {{ formErrors.privacy }}
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 f4466bdde..ba0ca1e21 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
@@ -1,6 +1,14 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.peertube-select-container {
5 @include peertube-select-container(auto);
6}
7
8.peertube-select-disabled-container {
9 @include peertube-select-disabled-container(auto);
10}
11
4.video-edit { 12.video-edit {
5 height: 100%; 13 height: 100%;
6 14
@@ -17,10 +25,6 @@
17 } 25 }
18 } 26 }
19 27
20 select {
21 @include peertube-select(100%);
22 }
23
24 input, select { 28 input, select {
25 font-size: 15px 29 font-size: 15px
26 } 30 }
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 28c9134a7..7fe265284 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
@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router'
4import { NotificationsService } from 'angular2-notifications' 4import { NotificationsService } from 'angular2-notifications'
5import 'rxjs/add/observable/forkJoin' 5import 'rxjs/add/observable/forkJoin'
6import { ServerService } from '../../../core/server' 6import { ServerService } from '../../../core/server'
7import { VIDEO_CHANNEL } from '../../../shared/forms/form-validators'
7import { ValidatorMessage } from '../../../shared/forms/form-validators/validator-message' 8import { ValidatorMessage } from '../../../shared/forms/form-validators/validator-message'
8import { 9import {
9 VIDEO_CATEGORY, 10 VIDEO_CATEGORY,
@@ -27,6 +28,7 @@ export class VideoEditComponent implements OnInit {
27 @Input() formErrors: { [ id: string ]: string } = {} 28 @Input() formErrors: { [ id: string ]: string } = {}
28 @Input() validationMessages: ValidatorMessage = {} 29 @Input() validationMessages: ValidatorMessage = {}
29 @Input() videoPrivacies = [] 30 @Input() videoPrivacies = []
31 @Input() userVideoChannels = []
30 32
31 tags: string[] = [] 33 tags: string[] = []
32 videoCategories = [] 34 videoCategories = []
@@ -50,6 +52,7 @@ export class VideoEditComponent implements OnInit {
50 updateForm () { 52 updateForm () {
51 this.formErrors['name'] = '' 53 this.formErrors['name'] = ''
52 this.formErrors['privacy'] = '' 54 this.formErrors['privacy'] = ''
55 this.formErrors['channelId'] = ''
53 this.formErrors['category'] = '' 56 this.formErrors['category'] = ''
54 this.formErrors['licence'] = '' 57 this.formErrors['licence'] = ''
55 this.formErrors['language'] = '' 58 this.formErrors['language'] = ''
@@ -57,6 +60,7 @@ export class VideoEditComponent implements OnInit {
57 60
58 this.validationMessages['name'] = VIDEO_NAME.MESSAGES 61 this.validationMessages['name'] = VIDEO_NAME.MESSAGES
59 this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES 62 this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
63 this.validationMessages['channelId'] = VIDEO_CHANNEL.MESSAGES
60 this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES 64 this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES
61 this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES 65 this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
62 this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES 66 this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
@@ -64,6 +68,7 @@ export class VideoEditComponent implements OnInit {
64 68
65 this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS)) 69 this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
66 this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS)) 70 this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
71 this.form.addControl('channelId', new FormControl({ value: '', disabled: true }))
67 this.form.addControl('nsfw', new FormControl(false)) 72 this.form.addControl('nsfw', new FormControl(false))
68 this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS)) 73 this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS))
69 this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS)) 74 this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS))
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 a6f2bf6f2..20277423c 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -14,16 +14,22 @@
14 <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange()" /> 14 <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange()" />
15 </div> 15 </div>
16 16
17 <div class="form-group"> 17 <div class="form-group form-group-channel">
18 <select [(ngModel)]="firstStepPrivacyId"> 18 <label for="first-step-channel">Channel</label>
19 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 19 <div class="peertube-select-container">
20 </select> 20 <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
21 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
22 </select>
23 </div>
21 </div> 24 </div>
22 25
23 <div class="form-group"> 26 <div class="form-group">
24 <select [(ngModel)]="firstStepChannelId"> 27 <label for="first-step-privacy">Privacy</label>
25 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> 28 <div class="peertube-select-container">
26 </select> 29 <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
30 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
31 </select>
32 </div>
27 </div> 33 </div>
28 </div> 34 </div>
29 </div> 35 </div>
@@ -37,7 +43,7 @@
37 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 43 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
38 <my-video-edit 44 <my-video-edit
39 [form]="form" [formErrors]="formErrors" 45 [form]="form" [formErrors]="formErrors"
40 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" 46 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
41 ></my-video-edit> 47 ></my-video-edit>
42 48
43 49
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 78140e0e9..891f38819 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -7,17 +7,24 @@
7 border: 3px solid #EAEAEA; 7 border: 3px solid #EAEAEA;
8 width: 100%; 8 width: 100%;
9 height: 440px; 9 height: 440px;
10 text-align: center;
11 margin-top: 40px; 10 margin-top: 40px;
12 display: flex; 11 display: flex;
13 justify-content: center; 12 justify-content: center;
14 align-items: center; 13 align-items: center;
15 14
15 .peertube-select-container {
16 @include peertube-select-container(190px);
17 }
18
16 .upload-video { 19 .upload-video {
17 display: flex; 20 display: flex;
18 flex-direction: column; 21 flex-direction: column;
19 align-items: center; 22 align-items: center;
20 23
24 .form-group-channel {
25 margin-bottom: 20px;
26 }
27
21 .icon.icon-upload { 28 .icon.icon-upload {
22 @include icon(90px); 29 @include icon(90px);
23 margin-bottom: 25px; 30 margin-bottom: 25px;
@@ -30,7 +37,8 @@
30 position: relative; 37 position: relative;
31 overflow: hidden; 38 overflow: hidden;
32 display: inline-block; 39 display: inline-block;
33 margin-bottom: 70px; 40 margin-bottom: 45px;
41 width: 190px;
34 42
35 @include peertube-button; 43 @include peertube-button;
36 @include orange-button; 44 @include orange-button;
@@ -51,13 +59,6 @@
51 display: block; 59 display: block;
52 } 60 }
53 } 61 }
54
55 select {
56 @include peertube-select(auto);
57
58 display: inline-block;
59 font-size: 15px
60 }
61 } 62 }
62} 63}
63 64
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 90510d0dc..9bbee58d8 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -7,6 +7,7 @@ import { VideoPrivacy } from '../../../../../shared/models/videos'
7import { AuthService, ServerService } from '../../core' 7import { AuthService, ServerService } from '../../core'
8import { FormReactive } from '../../shared' 8import { FormReactive } from '../../shared'
9import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' 9import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
10import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
10import { VideoEdit } from '../../shared/video/video-edit.model' 11import { VideoEdit } from '../../shared/video/video-edit.model'
11import { VideoService } from '../../shared/video/video.service' 12import { VideoService } from '../../shared/video/video.service'
12 13
@@ -59,6 +60,9 @@ export class VideoAddComponent extends FormReactive implements OnInit {
59 ngOnInit () { 60 ngOnInit () {
60 this.buildForm() 61 this.buildForm()
61 62
63 populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
64 .then(() => this.firstStepChannelId = this.userVideoChannels[0].id)
65
62 this.serverService.videoPrivaciesLoaded 66 this.serverService.videoPrivaciesLoaded
63 .subscribe( 67 .subscribe(
64 () => { 68 () => {
@@ -67,20 +71,6 @@ export class VideoAddComponent extends FormReactive implements OnInit {
67 // Public by default 71 // Public by default
68 this.firstStepPrivacyId = VideoPrivacy.PUBLIC 72 this.firstStepPrivacyId = VideoPrivacy.PUBLIC
69 }) 73 })
70
71 this.authService.userInformationLoaded
72 .subscribe(
73 () => {
74 const user = this.authService.getUser()
75 if (!user) return
76
77 const videoChannels = user.videoChannels
78 if (Array.isArray(videoChannels) === false) return
79
80 this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
81 this.firstStepChannelId = this.userVideoChannels[0].id
82 }
83 )
84 } 74 }
85 75
86 fileChange () { 76 fileChange () {
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 261b8a130..158138bb3 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -7,7 +7,7 @@
7 7
8 <my-video-edit 8 <my-video-edit
9 [form]="form" [formErrors]="formErrors" 9 [form]="form" [formErrors]="formErrors"
10 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" 10 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
11 ></my-video-edit> 11 ></my-video-edit>
12 12
13 <div class="submit-container"> 13 <div class="submit-container">
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 08b74f4c3..941ef2478 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -5,8 +5,10 @@ import { NotificationsService } from 'angular2-notifications'
5import 'rxjs/add/observable/forkJoin' 5import 'rxjs/add/observable/forkJoin'
6import { VideoPrivacy } from '../../../../../shared/models/videos' 6import { VideoPrivacy } from '../../../../../shared/models/videos'
7import { ServerService } from '../../core' 7import { ServerService } from '../../core'
8import { AuthService } from '../../core/auth'
8import { FormReactive } from '../../shared' 9import { FormReactive } from '../../shared'
9import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' 10import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
11import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
10import { VideoEdit } from '../../shared/video/video-edit.model' 12import { VideoEdit } from '../../shared/video/video-edit.model'
11import { VideoService } from '../../shared/video/video.service' 13import { VideoService } from '../../shared/video/video.service'
12 14
@@ -24,6 +26,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
24 formErrors: { [ id: string ]: string } = {} 26 formErrors: { [ id: string ]: string } = {}
25 validationMessages: ValidatorMessage = {} 27 validationMessages: ValidatorMessage = {}
26 videoPrivacies = [] 28 videoPrivacies = []
29 userVideoChannels = []
27 30
28 constructor ( 31 constructor (
29 private formBuilder: FormBuilder, 32 private formBuilder: FormBuilder,
@@ -31,7 +34,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
31 private router: Router, 34 private router: Router,
32 private notificationsService: NotificationsService, 35 private notificationsService: NotificationsService,
33 private serverService: ServerService, 36 private serverService: ServerService,
34 private videoService: VideoService 37 private videoService: VideoService,
38 private authService: AuthService
35 ) { 39 ) {
36 super() 40 super()
37 } 41 }
@@ -44,7 +48,12 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
44 ngOnInit () { 48 ngOnInit () {
45 this.buildForm() 49 this.buildForm()
46 50
47 this.videoPrivacies = this.serverService.getVideoPrivacies() 51 this.serverService.videoPrivaciesLoaded
52 .subscribe(
53 () => this.videoPrivacies = this.serverService.getVideoPrivacies()
54 )
55
56 populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
48 57
49 const uuid: string = this.route.snapshot.params['uuid'] 58 const uuid: string = this.route.snapshot.params['uuid']
50 this.videoService.getVideo(uuid) 59 this.videoService.getVideo(uuid)