aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-08 08:39:15 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-08 09:57:29 +0100
commitcadb46d832724ea1a17b085b992142aa32e212be (patch)
treedf1972470ab022e95ff5dc7866c78174c36bfa37 /client
parentc182778e26b8478fae9d7dd0bf0687baf7b72fd1 (diff)
downloadPeerTube-cadb46d832724ea1a17b085b992142aa32e212be.tar.gz
PeerTube-cadb46d832724ea1a17b085b992142aa32e212be.tar.zst
PeerTube-cadb46d832724ea1a17b085b992142aa32e212be.zip
Design second video upload step
Diffstat (limited to 'client')
-rw-r--r--client/src/app/core/auth/auth.service.ts3
-rw-r--r--client/src/app/core/server/server.service.ts3
-rw-r--r--client/src/app/menu/menu.component.scss4
-rw-r--r--client/src/app/shared/forms/form-validators/video.ts22
-rw-r--r--client/src/app/shared/video/video-edit.model.ts26
-rw-r--r--client/src/app/shared/video/video.service.ts11
-rw-r--r--client/src/app/videos/+video-edit/shared/video-description.component.html (renamed from client/src/app/videos/shared/video-description.component.html)0
-rw-r--r--client/src/app/videos/+video-edit/shared/video-description.component.scss41
-rw-r--r--client/src/app/videos/+video-edit/shared/video-description.component.ts (renamed from client/src/app/videos/shared/video-description.component.ts)8
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss9
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.module.ts3
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html16
-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.ts30
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.html4
-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.ts5
-rw-r--r--client/src/app/videos/shared/index.ts1
-rw-r--r--client/src/app/videos/shared/video-description.component.scss19
-rw-r--r--client/src/sass/_mixins.scss6
-rw-r--r--client/src/sass/application.scss4
21 files changed, 152 insertions, 84 deletions
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index fd2708c11..0db197f02 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -194,7 +194,6 @@ export class AuthService {
194 } 194 }
195 195
196 this.mergeUserInformation(obj) 196 this.mergeUserInformation(obj)
197 .do(() => this.userInformationLoaded.next(true))
198 .subscribe( 197 .subscribe(
199 res => { 198 res => {
200 this.user.displayNSFW = res.displayNSFW 199 this.user.displayNSFW = res.displayNSFW
@@ -203,6 +202,8 @@ export class AuthService {
203 this.user.account = res.account 202 this.user.account = res.account
204 203
205 this.user.save() 204 this.user.save()
205
206 this.userInformationLoaded.next(true)
206 } 207 }
207 ) 208 )
208 } 209 }
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 43a836c5a..16e0595b6 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -77,7 +77,6 @@ export class ServerService {
77 notifier: ReplaySubject<boolean> 77 notifier: ReplaySubject<boolean>
78 ) { 78 ) {
79 return this.http.get(ServerService.BASE_VIDEO_URL + attributeName) 79 return this.http.get(ServerService.BASE_VIDEO_URL + attributeName)
80 .do(() => notifier.next(true))
81 .subscribe(data => { 80 .subscribe(data => {
82 Object.keys(data) 81 Object.keys(data)
83 .forEach(dataKey => { 82 .forEach(dataKey => {
@@ -86,6 +85,8 @@ export class ServerService {
86 label: data[dataKey] 85 label: data[dataKey]
87 }) 86 })
88 }) 87 })
88
89 notifier.next(true)
89 }) 90 })
90 } 91 }
91} 92}
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index eda3e1a85..63d63d287 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -43,6 +43,10 @@ menu {
43 .logged-in-email { 43 .logged-in-email {
44 font-size: 13px; 44 font-size: 13px;
45 color: #C6C6C6; 45 color: #C6C6C6;
46 white-space: nowrap;
47 overflow: hidden;
48 text-overflow: ellipsis;
49 max-width: 140px;
46 } 50 }
47 } 51 }
48 52
diff --git a/client/src/app/shared/forms/form-validators/video.ts b/client/src/app/shared/forms/form-validators/video.ts
index 8e512e8c8..45da7df4a 100644
--- a/client/src/app/shared/forms/form-validators/video.ts
+++ b/client/src/app/shared/forms/form-validators/video.ts
@@ -23,17 +23,13 @@ export const VIDEO_PRIVACY = {
23} 23}
24 24
25export const VIDEO_CATEGORY = { 25export const VIDEO_CATEGORY = {
26 VALIDATORS: [ Validators.required ], 26 VALIDATORS: [ ],
27 MESSAGES: { 27 MESSAGES: {}
28 'required': 'Video category is required.'
29 }
30} 28}
31 29
32export const VIDEO_LICENCE = { 30export const VIDEO_LICENCE = {
33 VALIDATORS: [ Validators.required ], 31 VALIDATORS: [ ],
34 MESSAGES: { 32 MESSAGES: {}
35 'required': 'Video licence is required.'
36 }
37} 33}
38 34
39export const VIDEO_LANGUAGE = { 35export const VIDEO_LANGUAGE = {
@@ -49,9 +45,8 @@ export const VIDEO_CHANNEL = {
49} 45}
50 46
51export const VIDEO_DESCRIPTION = { 47export const VIDEO_DESCRIPTION = {
52 VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(3000) ], 48 VALIDATORS: [ Validators.minLength(3), Validators.maxLength(3000) ],
53 MESSAGES: { 49 MESSAGES: {
54 'required': 'Video description is required.',
55 'minlength': 'Video description must be at least 3 characters long.', 50 'minlength': 'Video description must be at least 3 characters long.',
56 'maxlength': 'Video description cannot be more than 3000 characters long.' 51 'maxlength': 'Video description cannot be more than 3000 characters long.'
57 } 52 }
@@ -64,10 +59,3 @@ export const VIDEO_TAGS = {
64 'maxlength': 'A tag should be less than 30 characters long.' 59 'maxlength': 'A tag should be less than 30 characters long.'
65 } 60 }
66} 61}
67
68export const VIDEO_FILE = {
69 VALIDATORS: [ Validators.required ],
70 MESSAGES: {
71 'required': 'Video file is required.'
72 }
73}
diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts
index 88d23a59f..955255bfa 100644
--- a/client/src/app/shared/video/video-edit.model.ts
+++ b/client/src/app/shared/video/video-edit.model.ts
@@ -14,18 +14,20 @@ export class VideoEdit {
14 uuid?: string 14 uuid?: string
15 id?: number 15 id?: number
16 16
17 constructor (videoDetails: VideoDetails) { 17 constructor (videoDetails?: VideoDetails) {
18 this.id = videoDetails.id 18 if (videoDetails) {
19 this.uuid = videoDetails.uuid 19 this.id = videoDetails.id
20 this.category = videoDetails.category 20 this.uuid = videoDetails.uuid
21 this.licence = videoDetails.licence 21 this.category = videoDetails.category
22 this.language = videoDetails.language 22 this.licence = videoDetails.licence
23 this.description = videoDetails.description 23 this.language = videoDetails.language
24 this.name = videoDetails.name 24 this.description = videoDetails.description
25 this.tags = videoDetails.tags 25 this.name = videoDetails.name
26 this.nsfw = videoDetails.nsfw 26 this.tags = videoDetails.tags
27 this.channel = videoDetails.channel.id 27 this.nsfw = videoDetails.nsfw
28 this.privacy = videoDetails.privacy 28 this.channel = videoDetails.channel.id
29 this.privacy = videoDetails.privacy
30 }
29 } 31 }
30 32
31 patch (values: Object) { 33 patch (values: Object) {
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 3f35b67c4..1a0644c3d 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -42,14 +42,17 @@ export class VideoService {
42 } 42 }
43 43
44 updateVideo (video: VideoEdit) { 44 updateVideo (video: VideoEdit) {
45 const language = video.language ? video.language : null 45 const language = video.language || undefined
46 const licence = video.licence || undefined
47 const category = video.category || undefined
48 const description = video.description || undefined
46 49
47 const body: VideoUpdate = { 50 const body: VideoUpdate = {
48 name: video.name, 51 name: video.name,
49 category: video.category, 52 category,
50 licence: video.licence, 53 licence,
51 language, 54 language,
52 description: video.description, 55 description,
53 privacy: video.privacy, 56 privacy: video.privacy,
54 tags: video.tags, 57 tags: video.tags,
55 nsfw: video.nsfw 58 nsfw: video.nsfw
diff --git a/client/src/app/videos/shared/video-description.component.html b/client/src/app/videos/+video-edit/shared/video-description.component.html
index da66a9753..da66a9753 100644
--- a/client/src/app/videos/shared/video-description.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.html
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
new file mode 100644
index 000000000..38506bb46
--- /dev/null
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -0,0 +1,41 @@
1textarea {
2 @include peertube-input-text(100%);
3
4 padding: 5px 15px;
5 font-size: 15px;
6 height: 150px;
7}
8
9.previews /deep/ {
10 font-size: 15px !important;
11
12 .nav {
13 margin-top: 10px;
14 font-size: 16px !important;
15 border: none !important;
16
17 .nav-item .nav-link {
18 color: #000 !important;
19 height: 30px !important;
20 margin-right: 30px;
21 padding: 0 15px;
22 display: flex;
23 align-items: center;
24 border-radius: 3px;
25 border: none !important;
26
27 &.active, &:hover {
28 background-color: #F0F0F0;
29 }
30
31 &.active {
32 font-weight: $font-semibold !important;
33 }
34 }
35 }
36
37 .tab-content {
38 min-height: 75px;
39 padding: 15px;
40 }
41}
diff --git a/client/src/app/videos/shared/video-description.component.ts b/client/src/app/videos/+video-edit/shared/video-description.component.ts
index d9ffb7800..8dfb74b2a 100644
--- a/client/src/app/videos/shared/video-description.component.ts
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.ts
@@ -1,12 +1,10 @@
1import { Component, forwardRef, Input, OnInit } from '@angular/core' 1import { Component, forwardRef, Input, OnInit } from '@angular/core'
2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' 2import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3import { Subject } from 'rxjs/Subject' 3import { truncate } from 'lodash'
4import 'rxjs/add/operator/debounceTime' 4import 'rxjs/add/operator/debounceTime'
5import 'rxjs/add/operator/distinctUntilChanged' 5import 'rxjs/add/operator/distinctUntilChanged'
6 6import { Subject } from 'rxjs/Subject'
7import { truncate } from 'lodash' 7import { MarkdownService } from '../../shared'
8
9import { MarkdownService } from './markdown.service'
10 8
11@Component({ 9@Component({
12 selector: 'my-video-description', 10 selector: 'my-video-description',
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 2d0bfc36e..d363499ce 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
@@ -43,6 +43,14 @@
43 position: relative; 43 position: relative;
44 bottom: $button-height; 44 bottom: $button-height;
45 45
46 .message-submit {
47 display: inline-block;
48 margin-right: 25px;
49
50 color: #585858;
51 font-size: 15px;
52 }
53
46 .submit-button { 54 .submit-button {
47 @include peertube-button; 55 @include peertube-button;
48 @include orange-button; 56 @include orange-button;
@@ -54,6 +62,7 @@
54 background-color: inherit; 62 background-color: inherit;
55 border: none; 63 border: none;
56 padding: 0; 64 padding: 0;
65 outline: 0;
57 } 66 }
58 67
59 .icon.icon-validate { 68 .icon.icon-validate {
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 c7ed8c351..ce106d82f 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
@@ -3,8 +3,9 @@ import { NgModule } from '@angular/core'
3import { TagInputModule } from 'ngx-chips' 3import { TagInputModule } from 'ngx-chips'
4import { TabsModule } from 'ngx-bootstrap/tabs' 4import { TabsModule } from 'ngx-bootstrap/tabs'
5 5
6import { MarkdownService, VideoDescriptionComponent } from '../../shared' 6import { MarkdownService } from '../../shared'
7import { SharedModule } from '../../../shared' 7import { SharedModule } from '../../../shared'
8import { VideoDescriptionComponent } from './video-description.component'
8import { VideoEditComponent } from './video-edit.component' 9import { VideoEditComponent } from './video-edit.component'
9 10
10@NgModule({ 11@NgModule({
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 6883f8280..a6f2bf6f2 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -15,20 +15,23 @@
15 </div> 15 </div>
16 16
17 <div class="form-group"> 17 <div class="form-group">
18 <select [(ngModel)]="firstStepPrivacy"> 18 <select [(ngModel)]="firstStepPrivacyId">
19 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 19 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
20 </select> 20 </select>
21 </div> 21 </div>
22 22
23 <div class="form-group"> 23 <div class="form-group">
24 <select [(ngModel)]="firstStepChannel"> 24 <select [(ngModel)]="firstStepChannelId">
25 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> 25 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
26 </select> 26 </select>
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 <p-progressBar *ngIf="isUploadingVideo" [value]="videoUploadPercents"></p-progressBar> 31 <p-progressBar
32 *ngIf="isUploadingVideo" [value]="videoUploadPercents"
33 [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
34 ></p-progressBar>
32 35
33 <!-- Hidden because we need to load the component --> 36 <!-- Hidden because we need to load the component -->
34 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 37 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
@@ -37,10 +40,13 @@
37 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" 40 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
38 ></my-video-edit> 41 ></my-video-edit>
39 42
43
40 <div class="submit-container"> 44 <div class="submit-container">
41 <div class="submit-button" [ngClass]="{ disabled: !form.valid }"> 45 <div *ngIf="videoUploaded === false" class="message-submit">Publish will be available when upload is finished</div>
46
47 <div class="submit-button" (click)="updateSecondStep()" [ngClass]="{ disabled: !form.valid || videoUploaded !== true }">
42 <span class="icon icon-validate"></span> 48 <span class="icon icon-validate"></span>
43 <input type="button" value="Publish" (click)="upload()" /> 49 <input type="button" value="Publish" />
44 </div> 50 </div>
45 </div> 51 </div>
46 </form> 52 </form>
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 dfdf7ff73..39673b4b7 100644
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -18,6 +18,7 @@
18 .icon.icon-upload { 18 .icon.icon-upload {
19 @include icon(90px); 19 @include icon(90px);
20 margin-bottom: 25px; 20 margin-bottom: 25px;
21 cursor: default;
21 22
22 background-image: url('../../../assets/images/video/upload.svg'); 23 background-image: url('../../../assets/images/video/upload.svg');
23 } 24 }
@@ -58,10 +59,9 @@
58} 59}
59 60
60p-progressBar { 61p-progressBar {
61 margin-top: 50px;
62 margin-bottom: 40px;
63
64 /deep/ .ui-progressbar { 62 /deep/ .ui-progressbar {
63 margin-top: 25px !important;
64 margin-bottom: 40px !important;
65 font-size: 15px !important; 65 font-size: 15px !important;
66 color: #fff !important; 66 color: #fff !important;
67 height: 30px !important; 67 height: 30px !important;
@@ -76,6 +76,19 @@ p-progressBar {
76 .ui-progressbar-label { 76 .ui-progressbar-label {
77 text-align: left; 77 text-align: left;
78 padding-left: 18px; 78 padding-left: 18px;
79 margin-top: 0 !important;
80 }
81 }
82
83 &.processing {
84 /deep/ .ui-progressbar-label {
85 // Same color as background to hide "100%"
86 color: rgba(11, 204, 41, 0.16) !important;
87
88 &::before {
89 content: 'Processing...';
90 color: #fff;
91 }
79 } 92 }
80 } 93 }
81} 94}
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 2409acfda..2bbc3de17 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -5,6 +5,7 @@ import { Router } from '@angular/router'
5import { NotificationsService } from 'angular2-notifications' 5import { NotificationsService } from 'angular2-notifications'
6import { VideoService } from 'app/shared/video/video.service' 6import { VideoService } from 'app/shared/video/video.service'
7import { VideoCreate } from '../../../../../shared' 7import { VideoCreate } from '../../../../../shared'
8import { VideoPrivacy } from '../../../../../shared/models/videos'
8import { AuthService, ServerService } from '../../core' 9import { AuthService, ServerService } from '../../core'
9import { FormReactive } from '../../shared' 10import { FormReactive } from '../../shared'
10import { ValidatorMessage } from '../../shared/forms/form-validators' 11import { ValidatorMessage } from '../../shared/forms/form-validators'
@@ -25,6 +26,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
25 isUploadingVideo = false 26 isUploadingVideo = false
26 videoUploaded = false 27 videoUploaded = false
27 videoUploadPercents = 0 28 videoUploadPercents = 0
29 videoUploadedId = 0
28 30
29 error: string = null 31 error: string = null
30 form: FormGroup 32 form: FormGroup
@@ -33,8 +35,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
33 35
34 userVideoChannels = [] 36 userVideoChannels = []
35 videoPrivacies = [] 37 videoPrivacies = []
36 firstStepPrivacy = 0 38 firstStepPrivacyId = 0
37 firstStepChannel = 0 39 firstStepChannelId = 0
38 40
39 constructor ( 41 constructor (
40 private formBuilder: FormBuilder, 42 private formBuilder: FormBuilder,
@@ -59,7 +61,9 @@ export class VideoAddComponent extends FormReactive implements OnInit {
59 .subscribe( 61 .subscribe(
60 () => { 62 () => {
61 this.videoPrivacies = this.serverService.getVideoPrivacies() 63 this.videoPrivacies = this.serverService.getVideoPrivacies()
62 this.firstStepPrivacy = this.videoPrivacies[0].id 64
65 // Public by default
66 this.firstStepPrivacyId = VideoPrivacy.PUBLIC
63 }) 67 })
64 68
65 this.authService.userInformationLoaded 69 this.authService.userInformationLoaded
@@ -72,7 +76,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
72 if (Array.isArray(videoChannels) === false) return 76 if (Array.isArray(videoChannels) === false) return
73 77
74 this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name })) 78 this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
75 this.firstStepChannel = this.userVideoChannels[0].id 79 this.firstStepChannelId = this.userVideoChannels[0].id
76 } 80 }
77 ) 81 )
78 } 82 }
@@ -89,14 +93,15 @@ export class VideoAddComponent extends FormReactive implements OnInit {
89 93
90 uploadFirstStep () { 94 uploadFirstStep () {
91 const videofile = this.videofileInput.nativeElement.files[0] 95 const videofile = this.videofileInput.nativeElement.files[0]
92 const name = videofile.name 96 const name = videofile.name.replace(/\.[^/.]+$/, '')
93 const privacy = this.firstStepPrivacy.toString() 97 const privacy = this.firstStepPrivacyId.toString()
94 const nsfw = false 98 const nsfw = false
95 const channelId = this.firstStepChannel.toString() 99 const channelId = this.firstStepChannelId.toString()
96 100
97 const formData = new FormData() 101 const formData = new FormData()
98 formData.append('name', name) 102 formData.append('name', name)
99 formData.append('privacy', privacy.toString()) 103 // Put the video "private" -> we wait he validates the second step
104 formData.append('privacy', VideoPrivacy.PRIVATE.toString())
100 formData.append('nsfw', '' + nsfw) 105 formData.append('nsfw', '' + nsfw)
101 formData.append('channelId', '' + channelId) 106 formData.append('channelId', '' + channelId)
102 formData.append('videofile', videofile) 107 formData.append('videofile', videofile)
@@ -117,6 +122,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
117 console.log('Video uploaded.') 122 console.log('Video uploaded.')
118 123
119 this.videoUploaded = true 124 this.videoUploaded = true
125
126 this.videoUploadedId = event.body.video.id
120 } 127 }
121 }, 128 },
122 129
@@ -133,13 +140,16 @@ export class VideoAddComponent extends FormReactive implements OnInit {
133 return 140 return
134 } 141 }
135 142
136 const video = new VideoEdit(this.form.value) 143 const video = new VideoEdit()
144 video.patch(this.form.value)
145 video.channel = this.firstStepChannelId
146 video.id = this.videoUploadedId
137 147
138 this.videoService.updateVideo(video) 148 this.videoService.updateVideo(video)
139 .subscribe( 149 .subscribe(
140 () => { 150 () => {
141 this.notificationsService.success('Success', 'Video published.') 151 this.notificationsService.success('Success', 'Video published.')
142 this.router.navigate([ '/videos/watch', video.uuid ]) 152 this.router.navigate([ '/videos/watch', video.id ])
143 }, 153 },
144 154
145 err => { 155 err => {
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 3163495bf..261b8a130 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -11,9 +11,9 @@
11 ></my-video-edit> 11 ></my-video-edit>
12 12
13 <div class="submit-container"> 13 <div class="submit-container">
14 <div class="submit-button" [ngClass]="{ disabled: !form.valid }"> 14 <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid }">
15 <span class="icon icon-validate"></span> 15 <span class="icon icon-validate"></span>
16 <input type="button" value="Update" (click)="update()" /> 16 <input type="button" value="Update" />
17 </div> 17 </div>
18 </div> 18 </div>
19 </form> 19 </form>
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 583da4685..dfed4768c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -78,7 +78,7 @@
78 <div class="video-info-description"> 78 <div class="video-info-description">
79 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div> 79 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
80 80
81 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()"> 81 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length === 250" (click)="showMoreDescription()">
82 Show more 82 Show more
83 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> 83 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
84 <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader> 84 <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
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 87db023bf..d4e3ec014 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -219,6 +219,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
219 } 219 }
220 220
221 private setVideoDescriptionHTML () { 221 private setVideoDescriptionHTML () {
222 if (!this.video.description) {
223 this.videoHTMLDescription = ''
224 return
225 }
226
222 this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description) 227 this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
223 } 228 }
224 229
diff --git a/client/src/app/videos/shared/index.ts b/client/src/app/videos/shared/index.ts
index 3c72ed895..7a66944b9 100644
--- a/client/src/app/videos/shared/index.ts
+++ b/client/src/app/videos/shared/index.ts
@@ -1,2 +1 @@
1export * from './markdown.service' export * from './markdown.service'
2export * from './video-description.component'
diff --git a/client/src/app/videos/shared/video-description.component.scss b/client/src/app/videos/shared/video-description.component.scss
deleted file mode 100644
index 6ef81ae58..000000000
--- a/client/src/app/videos/shared/video-description.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
1textarea {
2 @include peertube-input-text(100%);
3
4 font-size: 15px;
5 height: 150px;
6}
7
8.previews /deep/ {
9 font-size: 15px !important;
10
11 .nav {
12 margin-top: 10px;
13 }
14
15 .tab-content {
16 min-height: 75px;
17 padding: 5px;
18 }
19}
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index 121e16e10..d9c9e45ec 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -1,5 +1,5 @@
1@mixin disable-default-a-behaviour { 1@mixin disable-default-a-behaviour {
2 &:hover, &:focus { 2 &:hover, &:focus, &:active {
3 text-decoration: none !important; 3 text-decoration: none !important;
4 outline: none !important; 4 outline: none !important;
5 } 5 }
@@ -23,13 +23,15 @@
23 color: #fff; 23 color: #fff;
24 background-color: $orange-color; 24 background-color: $orange-color;
25 25
26 &:hover, &:active, &:focus, &[disabled], &.disabled { 26 &:hover, &:active, &:focus {
27 color: #fff; 27 color: #fff;
28 background-color: $orange-hoover-color; 28 background-color: $orange-hoover-color;
29 } 29 }
30 30
31 &[disabled], &.disabled { 31 &[disabled], &.disabled {
32 cursor: default; 32 cursor: default;
33 color: #fff;
34 background-color: #C6C6C6;
33 } 35 }
34} 36}
35 37
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 0c999d659..3c5a00309 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -86,6 +86,10 @@ label {
86 margin-top: 30px; 86 margin-top: 30px;
87 margin-bottom: 25px; 87 margin-bottom: 25px;
88 } 88 }
89
90 &:hover, &:active, &:focus {
91 color: #000;
92}
89} 93}
90 94
91// On small screen, menu is absolute and displayed over the page 95// On small screen, menu is absolute and displayed over the page