aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-02-16 16:35:32 +0100
committerChocobozzz <me@florianbigard.com>2018-02-16 16:35:32 +0100
commit6de36768980ef6063b8fcd730b59fa685dd2b99c (patch)
treea8e5a87b14013b33bf2d306552a380c407a1551d /client/src/app/videos
parentb6a4fd6b099b3363ac59c06cfd81b54e1356d8bc (diff)
downloadPeerTube-6de36768980ef6063b8fcd730b59fa685dd2b99c.tar.gz
PeerTube-6de36768980ef6063b8fcd730b59fa685dd2b99c.tar.zst
PeerTube-6de36768980ef6063b8fcd730b59fa685dd2b99c.zip
Add ability to update thumbnail and preview on client
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html224
-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.ts7
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.module.ts4
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts26
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts6
7 files changed, 176 insertions, 105 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 d031825bd..899249778 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
@@ -1,109 +1,133 @@
1<div class="video-edit row" [formGroup]="form"> 1<div class="video-edit row" [formGroup]="form">
2 2 <tabset class="root-tabset bootstrap">
3 <div class="col-md-8"> 3
4 <div class="form-group"> 4 <tab heading="Basic info">
5 <label for="name">Title</label> 5 <div class="col-md-8">
6 <input type="text" id="name" formControlName="name" /> 6 <div class="form-group">
7 <div *ngIf="formErrors.name" class="form-error"> 7 <label for="name">Title</label>
8 {{ formErrors.name }} 8 <input type="text" id="name" formControlName="name" />
9 </div> 9 <div *ngIf="formErrors.name" class="form-error">
10 </div> 10 {{ formErrors.name }}
11 11 </div>
12 <div class="form-group"> 12 </div>
13 <label class="label-tags">Tags</label> <span>(press Enter to add)</span> 13
14 <tag-input 14 <div class="form-group">
15 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages" 15 <label class="label-tags">Tags</label> <span>(press Enter to add)</span>
16 formControlName="tags" maxItems="5" modelAsStrings="true" 16 <tag-input
17 ></tag-input> 17 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
18 </div> 18 formControlName="tags" maxItems="5" modelAsStrings="true"
19 19 ></tag-input>
20 <div class="form-group"> 20 </div>
21 <label for="description">Description</label> 21
22 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea> 22 <div class="form-group">
23 23 <label for="description">Description</label>
24 <div *ngIf="formErrors.description" class="form-error"> 24 <my-markdown-textarea truncate="250" formControlName="description"></my-markdown-textarea>
25 {{ formErrors.description }} 25
26 </div> 26 <div *ngIf="formErrors.description" class="form-error">
27 </div> 27 {{ formErrors.description }}
28 </div> 28 </div>
29 29 </div>
30 <div class="col-md-4">
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">
41 <label for="category">Category</label>
42 <div class="peertube-select-container">
43 <select id="category" formControlName="category">
44 <option></option>
45 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
46 </select>
47 </div>
48
49 <div *ngIf="formErrors.category" class="form-error">
50 {{ formErrors.category }}
51 </div>
52 </div>
53
54 <div class="form-group">
55 <label for="licence">Licence</label>
56 <div class="peertube-select-container">
57 <select id="licence" formControlName="licence">
58 <option></option>
59 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
60 </select>
61 </div> 30 </div>
62 31
63 <div *ngIf="formErrors.licence" class="form-error"> 32 <div class="col-md-4">
64 {{ formErrors.licence }} 33 <div class="form-group">
65 </div> 34 <label>Channel</label>
66 </div> 35 <div class="peertube-select-disabled-container">
67 36 <select formControlName="channelId">
68 <div class="form-group"> 37 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
69 <label for="language">Language</label> 38 </select>
70 <div class="peertube-select-container"> 39 </div>
71 <select id="language" formControlName="language"> 40 </div>
72 <option></option> 41
73 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> 42 <div class="form-group">
74 </select> 43 <label for="category">Category</label>
75 </div> 44 <div class="peertube-select-container">
45 <select id="category" formControlName="category">
46 <option></option>
47 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
48 </select>
49 </div>
50
51 <div *ngIf="formErrors.category" class="form-error">
52 {{ formErrors.category }}
53 </div>
54 </div>
55
56 <div class="form-group">
57 <label for="licence">Licence</label>
58 <div class="peertube-select-container">
59 <select id="licence" formControlName="licence">
60 <option></option>
61 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
62 </select>
63 </div>
64
65 <div *ngIf="formErrors.licence" class="form-error">
66 {{ formErrors.licence }}
67 </div>
68 </div>
69
70 <div class="form-group">
71 <label for="language">Language</label>
72 <div class="peertube-select-container">
73 <select id="language" formControlName="language">
74 <option></option>
75 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
76 </select>
77 </div>
78
79 <div *ngIf="formErrors.language" class="form-error">
80 {{ formErrors.language }}
81 </div>
82 </div>
83
84 <div class="form-group">
85 <label for="privacy">Privacy</label>
86 <div class="peertube-select-container">
87 <select id="privacy" formControlName="privacy">
88 <option></option>
89 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
90 </select>
91 </div>
92
93 <div *ngIf="formErrors.privacy" class="form-error">
94 {{ formErrors.privacy }}
95 </div>
96 </div>
97
98 <div class="form-group form-group-checkbox">
99 <input type="checkbox" id="nsfw" formControlName="nsfw" />
100 <label for="nsfw"></label>
101 <label for="nsfw">This video contains mature or explicit content</label>
102 </div>
103
104 <div class="form-group form-group-checkbox">
105 <input type="checkbox" id="commentsEnabled" formControlName="commentsEnabled" />
106 <label for="commentsEnabled"></label>
107 <label for="commentsEnabled">Enable video comments</label>
108 </div>
76 109
77 <div *ngIf="formErrors.language" class="form-error">
78 {{ formErrors.language }}
79 </div> 110 </div>
80 </div> 111 </tab>
81 112
82 <div class="form-group"> 113 <tab heading="Advanced settings">
83 <label for="privacy">Privacy</label> 114 <div class="col-md-12">
84 <div class="peertube-select-container"> 115 <div class="form-group">
85 <select id="privacy" formControlName="privacy"> 116 <my-video-image
86 <option></option> 117 inputLabel="Upload thumbnail" inputName="thumbnailfile" formControlName="thumbnailfile"
87 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 118 previewWidth="200px" previewHeight="110px"
88 </select> 119 ></my-video-image>
120 </div>
121
122 <div class="form-group">
123 <my-video-image
124 inputLabel="Upload preview" inputName="previewfile" formControlName="previewfile"
125 previewWidth="360px" previewHeight="200px"
126 ></my-video-image>
127 </div>
89 </div> 128 </div>
129 </tab>
90 130
91 <div *ngIf="formErrors.privacy" class="form-error"> 131 </tabset>
92 {{ formErrors.privacy }}
93 </div>
94 </div>
95
96 <div class="form-group form-group-checkbox">
97 <input type="checkbox" id="nsfw" formControlName="nsfw" />
98 <label for="nsfw"></label>
99 <label for="nsfw">This video contains mature or explicit content</label>
100 </div>
101
102 <div class="form-group form-group-checkbox">
103 <input type="checkbox" id="commentsEnabled" formControlName="commentsEnabled" />
104 <label for="commentsEnabled"></label>
105 <label for="commentsEnabled">Enable video comments</label>
106 </div>
107 132
108 </div>
109</div> 133</div>
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 1df9d4006..f78336fa8 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
@@ -47,6 +47,18 @@
47 .label-tags + span { 47 .label-tags + span {
48 font-size: 15px; 48 font-size: 15px;
49 } 49 }
50
51 .root-tabset /deep/ > .nav {
52 margin-left: 15px;
53 margin-bottom: 15px;
54
55 .nav-link {
56 display: flex !important;
57 align-items: center;
58 height: 30px !important;
59 padding: 0 15px !important;
60 }
61 }
50} 62}
51 63
52.submit-container { 64.submit-container {
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 2b307d5fa..85e5cc3f5 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,6 +1,7 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { FormBuilder, FormControl, FormGroup } from '@angular/forms' 2import { FormBuilder, FormControl, FormGroup } from '@angular/forms'
3import { ActivatedRoute, Router } from '@angular/router' 3import { ActivatedRoute, Router } from '@angular/router'
4import { VIDEO_IMAGE } from '@app/shared'
4import { NotificationsService } from 'angular2-notifications' 5import { NotificationsService } from 'angular2-notifications'
5import 'rxjs/add/observable/forkJoin' 6import 'rxjs/add/observable/forkJoin'
6import { ServerService } from '../../../core/server' 7import { ServerService } from '../../../core/server'
@@ -57,6 +58,8 @@ export class VideoEditComponent implements OnInit {
57 this.formErrors['licence'] = '' 58 this.formErrors['licence'] = ''
58 this.formErrors['language'] = '' 59 this.formErrors['language'] = ''
59 this.formErrors['description'] = '' 60 this.formErrors['description'] = ''
61 this.formErrors['thumbnailfile'] = ''
62 this.formErrors['previewfile'] = ''
60 63
61 this.validationMessages['name'] = VIDEO_NAME.MESSAGES 64 this.validationMessages['name'] = VIDEO_NAME.MESSAGES
62 this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES 65 this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
@@ -65,6 +68,8 @@ export class VideoEditComponent implements OnInit {
65 this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES 68 this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
66 this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES 69 this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
67 this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES 70 this.validationMessages['description'] = VIDEO_DESCRIPTION.MESSAGES
71 this.validationMessages['thumbnailfile'] = VIDEO_IMAGE.MESSAGES
72 this.validationMessages['previewfile'] = VIDEO_IMAGE.MESSAGES
68 73
69 this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS)) 74 this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
70 this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS)) 75 this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
@@ -76,6 +81,8 @@ export class VideoEditComponent implements OnInit {
76 this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS)) 81 this.form.addControl('language', new FormControl('', VIDEO_LANGUAGE.VALIDATORS))
77 this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS)) 82 this.form.addControl('description', new FormControl('', VIDEO_DESCRIPTION.VALIDATORS))
78 this.form.addControl('tags', new FormControl('')) 83 this.form.addControl('tags', new FormControl(''))
84 this.form.addControl('thumbnailfile', new FormControl(''))
85 this.form.addControl('previewfile', new FormControl(''))
79 } 86 }
80 87
81 ngOnInit () { 88 ngOnInit () {
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 098a71ae6..1b82281bf 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
@@ -1,4 +1,5 @@
1import { NgModule } from '@angular/core' 1import { NgModule } from '@angular/core'
2import { VideoImageComponent } from '@app/videos/+video-edit/shared/video-image.component'
2import { TabsModule } from 'ngx-bootstrap/tabs' 3import { TabsModule } from 'ngx-bootstrap/tabs'
3import { TagInputModule } from 'ngx-chips' 4import { TagInputModule } from 'ngx-chips'
4import { SharedModule } from '../../../shared' 5import { SharedModule } from '../../../shared'
@@ -12,7 +13,8 @@ import { VideoEditComponent } from './video-edit.component'
12 ], 13 ],
13 14
14 declarations: [ 15 declarations: [
15 VideoEditComponent 16 VideoEditComponent,
17 VideoImageComponent
16 ], 18 ],
17 19
18 exports: [ 20 exports: [
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 7f41b56d8..ad6452835 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -48,11 +48,10 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
48 this.buildForm() 48 this.buildForm()
49 49
50 this.serverService.videoPrivaciesLoaded 50 this.serverService.videoPrivaciesLoaded
51 .subscribe( 51 .subscribe(() => this.videoPrivacies = this.serverService.getVideoPrivacies())
52 () => this.videoPrivacies = this.serverService.getVideoPrivacies()
53 )
54 52
55 populateAsyncUserVideoChannels(this.authService, this.userVideoChannels) 53 populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
54 .catch(err => console.error('Cannot populate async user video channels.', err))
56 55
57 const uuid: string = this.route.snapshot.params['uuid'] 56 const uuid: string = this.route.snapshot.params['uuid']
58 this.videoService.getVideo(uuid) 57 this.videoService.getVideo(uuid)
@@ -116,5 +115,26 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
116 115
117 private hydrateFormFromVideo () { 116 private hydrateFormFromVideo () {
118 this.form.patchValue(this.video.toJSON()) 117 this.form.patchValue(this.video.toJSON())
118
119 const objects = [
120 {
121 url: 'thumbnailUrl',
122 name: 'thumbnailfile'
123 },
124 {
125 url: 'previewUrl',
126 name: 'previewfile'
127 }
128 ]
129
130 for (const obj of objects) {
131 fetch(this.video[obj.url])
132 .then(response => response.blob())
133 .then(data => {
134 this.form.patchValue({
135 [ obj.name ]: data
136 })
137 })
138 }
119 } 139 }
120} 140}
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index af90e22a1..8c173d6b3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,7 +1,7 @@
1<div class="row"> 1<div class="row">
2 <!-- We need the video container for videojs so we just hide it --> 2 <!-- We need the video container for videojs so we just hide it -->
3 <div [hidden]="videoNotFound" id="video-container"> 3 <div [hidden]="videoNotFound" id="video-container">
4 <video id="video-element" class="video-js vjs-peertube-skin"></video> 4 <video [poster]="getVideoPoster()" id="video-element" class="video-js vjs-peertube-skin"></video>
5 </div> 5 </div>
6 6
7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div> 7 <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
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 7a64406e6..7c97f0964 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -211,6 +211,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
211 return Account.GET_ACCOUNT_AVATAR_URL(this.video.account) 211 return Account.GET_ACCOUNT_AVATAR_URL(this.video.account)
212 } 212 }
213 213
214 getVideoPoster () {
215 if (!this.video) return ''
216
217 return this.video.previewUrl
218 }
219
214 getVideoTags () { 220 getVideoTags () {
215 if (!this.video || Array.isArray(this.video.tags) === false) return [] 221 if (!this.video || Array.isArray(this.video.tags) === false) return []
216 222