aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-07-17 14:44:19 +0200
committerChocobozzz <me@florianbigard.com>2018-07-17 14:56:15 +0200
commit0f7fedc39857ebc0eb29182c1588a92b9adfb75a (patch)
treef1516e93a93d1042bbc4d14d10575b88cae6bba1 /client/src/app/videos
parent4bdd9473fdecfa7e309e3c59b05b29d0a20ac397 (diff)
downloadPeerTube-0f7fedc39857ebc0eb29182c1588a92b9adfb75a.tar.gz
PeerTube-0f7fedc39857ebc0eb29182c1588a92b9adfb75a.tar.zst
PeerTube-0f7fedc39857ebc0eb29182c1588a92b9adfb75a.zip
Improve frontend accessibility
In particular checkboxes, likes/dislikes, share button, video thumbnails and help buttons
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html41
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss19
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.ts11
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts1
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html12
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.ts2
6 files changed, 34 insertions, 52 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 4675cb827..16dbf5cfc 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
@@ -110,31 +110,22 @@
110 </div> 110 </div>
111 </div> 111 </div>
112 112
113 <div class="form-group form-group-checkbox"> 113 <my-peertube-checkbox
114 <input type="checkbox" id="nsfw" formControlName="nsfw" /> 114 inputName="nsfw" formControlName="nsfw"
115 <label for="nsfw"></label> 115 i18n-labelText labelText="This video contains mature or explicit content"
116 <label i18n for="nsfw">This video contains mature or explicit content</label> 116 i18n-helpHtml helpHtml="Some instances do not list videos containing mature or explicit content by default."
117 <my-help 117 ></my-peertube-checkbox>
118 tooltipPlacement="top" helpType="custom" i18n-customHtml 118
119 customHtml="Some instances do not list videos containing mature or explicit content by default." 119 <my-peertube-checkbox
120 ></my-help> 120 inputName="commentsEnabled" formControlName="commentsEnabled"
121 </div> 121 i18n-labelText labelText="Enable video comments"
122 122 ></my-peertube-checkbox>
123 <div class="form-group form-group-checkbox"> 123
124 <input type="checkbox" id="commentsEnabled" formControlName="commentsEnabled" /> 124 <my-peertube-checkbox
125 <label for="commentsEnabled"></label> 125 inputName="waitTranscoding" formControlName="waitTranscoding"
126 <label i18n for="commentsEnabled">Enable video comments</label> 126 i18n-labelText labelText="Wait transcoding before publishing the video"
127 </div> 127 i18n-helpHtml helpHtml="If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends."
128 128 ></my-peertube-checkbox>
129 <div class="form-group form-group-checkbox">
130 <input type="checkbox" id="waitTranscoding" formControlName="waitTranscoding" />
131 <label for="waitTranscoding"></label>
132 <label i18n for="waitTranscoding">Wait transcoding before publishing the video</label>
133 <my-help
134 tooltipPlacement="top" helpType="custom" i18n-customHtml
135 customHtml="If you decide not to wait for transcoding before publishing the video, it could be unplayable until transcoding ends."
136 ></my-help>
137 </div>
138 129
139 </div> 130 </div>
140 </tab> 131 </tab>
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 03b8359de..058ccba36 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
@@ -16,31 +16,12 @@
16 input { 16 input {
17 @include peertube-input-text(100%); 17 @include peertube-input-text(100%);
18 display: block; 18 display: block;
19
20 &[type=checkbox] {
21 @include peertube-checkbox(1px);
22 }
23 } 19 }
24 20
25 input, select { 21 input, select {
26 font-size: 15px 22 font-size: 15px
27 } 23 }
28 24
29 .form-group-checkbox {
30 display: flex;
31 align-items: center;
32
33 label {
34 font-weight: $font-regular;
35 margin: 0;
36 }
37
38 input {
39 width: 10px;
40 margin-right: 10px;
41 }
42 }
43
44 .label-tags + span { 25 .label-tags + span {
45 font-size: 15px; 26 font-size: 15px;
46 } 27 }
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 743c015cb..00c7bc41d 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
@@ -49,6 +49,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
49 calendarDateFormat: string 49 calendarDateFormat: string
50 50
51 private schedulerInterval 51 private schedulerInterval
52 private firstPatchDone = false
52 53
53 constructor ( 54 constructor (
54 private formValidatorService: FormValidatorService, 55 private formValidatorService: FormValidatorService,
@@ -167,6 +168,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
167 .pipe(map(res => parseInt(res.toString(), 10))) 168 .pipe(map(res => parseInt(res.toString(), 10)))
168 .subscribe( 169 .subscribe(
169 newPrivacyId => { 170 newPrivacyId => {
171
170 this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY 172 this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY
171 173
172 // Value changed 174 // Value changed
@@ -182,11 +184,18 @@ export class VideoEditComponent implements OnInit, OnDestroy {
182 scheduleControl.clearValidators() 184 scheduleControl.clearValidators()
183 185
184 waitTranscodingControl.enable() 186 waitTranscodingControl.enable()
185 waitTranscodingControl.setValue(true) 187
188 // Do not update the control value on first patch (values come from the server)
189 if (this.firstPatchDone === true) {
190 waitTranscodingControl.setValue(true)
191 }
186 } 192 }
187 193
188 scheduleControl.updateValueAndValidity() 194 scheduleControl.updateValueAndValidity()
189 waitTranscodingControl.updateValueAndValidity() 195 waitTranscodingControl.updateValueAndValidity()
196
197 this.firstPatchDone = true
198
190 } 199 }
191 ) 200 )
192 } 201 }
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 774772e14..952fe0293 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -107,6 +107,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
107 }, 107 },
108 108
109 err => { 109 err => {
110 this.loadingBar.complete()
110 this.isUpdatingVideo = false 111 this.isUpdatingVideo = false
111 this.notificationsService.error(this.i18n('Error'), err.message) 112 this.notificationsService.error(this.i18n('Error'), err.message)
112 console.error(err) 113 console.error(err)
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 21f8f5534..e7e9f367c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -48,15 +48,15 @@
48 <div class="video-actions-rates"> 48 <div class="video-actions-rates">
49 <div class="video-actions"> 49 <div class="video-actions">
50 <div 50 <div
51 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()" 51 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
52 class="action-button action-button-like" 52 class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
53 > 53 >
54 <span class="icon icon-like" i18n-title title="Like this video" ></span> 54 <span class="icon icon-like" i18n-title title="Like this video" ></span>
55 </div> 55 </div>
56 56
57 <div 57 <div
58 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()" 58 *ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'dislike' }" (click)="setDislike()"
59 class="action-button action-button-dislike" 59 class="action-button action-button-dislike" role="button" [attr.aria-pressed]="userRating === 'dislike'"
60 > 60 >
61 <span class="icon icon-dislike" i18n-title title="Dislike this video"></span> 61 <span class="icon icon-dislike" i18n-title title="Dislike this video"></span>
62 </div> 62 </div>
@@ -66,12 +66,12 @@
66 <span class="icon-text" i18n>Support</span> 66 <span class="icon-text" i18n>Support</span>
67 </div> 67 </div>
68 68
69 <div (click)="showShareModal()" class="action-button action-button-share"> 69 <div (click)="showShareModal()" class="action-button action-button-share" role="button">
70 <span class="icon icon-share"></span> 70 <span class="icon icon-share"></span>
71 <span class="icon-text" i18n>Share</span> 71 <span class="icon-text" i18n>Share</span>
72 </div> 72 </div>
73 73
74 <div class="action-more" dropdown dropup="true" placement="right"> 74 <div class="action-more" dropdown dropup="true" placement="right" role="button">
75 <div class="action-button" dropdownToggle> 75 <div class="action-button" dropdownToggle>
76 <span class="icon icon-more"></span> 76 <span class="icon icon-more"></span>
77 </div> 77 </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 43afbae1a..4f8549e8f 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -314,7 +314,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
314 if (!errorMessage) return 314 if (!errorMessage) return
315 315
316 // Display a message in the video player instead of a notification 316 // Display a message in the video player instead of a notification
317 if (errorMessage.indexOf('http error') !== -1) { 317 if (errorMessage.indexOf('from xs param') !== -1) {
318 this.flushPlayer() 318 this.flushPlayer()
319 this.remoteServerDown = true 319 this.remoteServerDown = true
320 return 320 return