From 0f7fedc39857ebc0eb29182c1588a92b9adfb75a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 17 Jul 2018 14:44:19 +0200 Subject: [PATCH] Improve frontend accessibility In particular checkboxes, likes/dislikes, share button, video thumbnails and help buttons --- .../edit-custom-config.component.html | 50 +++++++------------ .../my-account-video-settings.component.html | 12 ++--- .../my-account-video-settings.component.scss | 4 -- .../my-account-videos.component.html | 3 +- .../my-account-videos.component.scss | 11 ---- .../forms/peertube-checkbox.component.html | 9 ++++ .../forms/peertube-checkbox.component.scss | 23 +++++++++ .../forms/peertube-checkbox.component.ts | 45 +++++++++++++++++ .../src/app/shared/misc/help.component.html | 4 ++ client/src/app/shared/misc/help.component.ts | 9 ++++ client/src/app/shared/shared.module.ts | 5 +- .../video-caption/video-caption.service.ts | 4 +- .../video/video-miniature.component.html | 2 +- .../shared/video-edit.component.html | 37 ++++++-------- .../shared/video-edit.component.scss | 19 ------- .../shared/video-edit.component.ts | 11 +++- .../+video-edit/video-update.component.ts | 1 + .../+video-watch/video-watch.component.html | 12 ++--- .../+video-watch/video-watch.component.ts | 2 +- .../assets/player/peertube-videojs-plugin.ts | 2 +- client/src/sass/include/_mixins.scss | 10 ++-- client/src/standalone/videos/embed.ts | 2 +- 22 files changed, 160 insertions(+), 117 deletions(-) create mode 100644 client/src/app/shared/forms/peertube-checkbox.component.html create mode 100644 client/src/app/shared/forms/peertube-checkbox.component.scss create mode 100644 client/src/app/shared/forms/peertube-checkbox.component.ts diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index 97900e523..6e3f83ccf 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -85,12 +85,10 @@
Signup
-
- - - - -
+
@@ -152,33 +150,24 @@
-
- - - - - - -
+ >
Transcoding
-
- - - - - - -
+ @@ -197,12 +186,11 @@ Check this checkbox, save the configuration and test with a video URL of your in
- - - + +
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html index 98587eb18..96629940f 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html @@ -15,14 +15,10 @@ -
- - - -
+ diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss index ed59e4689..1881be762 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss @@ -1,10 +1,6 @@ @import '_variables'; @import '_mixins'; -input[type=checkbox] { - @include peertube-checkbox(1px); -} - input[type=submit] { @include peertube-button; @include orange-button; diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index 7ac6371db..4823e2db9 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -9,8 +9,7 @@
- - +
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index 65c0c8bb2..9cd985273 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -52,17 +52,6 @@ margin-top: 47px; } - .checkbox-container { - display: flex; - align-items: center; - margin-right: 20px; - margin-left: 12px; - - input[type=checkbox] { - @include peertube-checkbox(2px); - } - } - my-video-thumbnail { margin-right: 10px; } diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html new file mode 100644 index 000000000..820e7a621 --- /dev/null +++ b/client/src/app/shared/forms/peertube-checkbox.component.html @@ -0,0 +1,9 @@ +
+ + + +
\ No newline at end of file diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss new file mode 100644 index 000000000..cbc50dc96 --- /dev/null +++ b/client/src/app/shared/forms/peertube-checkbox.component.scss @@ -0,0 +1,23 @@ +@import '_variables'; +@import '_mixins'; + +.form-group { + display: flex; + align-items: center; + + .form-group-checkbox { + display: flex; + + span { + font-weight: $font-regular; + margin: 0; + } + + input { + @include peertube-checkbox(1px); + + width: 10px; + margin-right: 10px; + } + } +} \ No newline at end of file diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts new file mode 100644 index 000000000..c626c4c5d --- /dev/null +++ b/client/src/app/shared/forms/peertube-checkbox.component.ts @@ -0,0 +1,45 @@ +import { Component, forwardRef, Input } from '@angular/core' +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' + +@Component({ + selector: 'my-peertube-checkbox', + styleUrls: [ './peertube-checkbox.component.scss' ], + templateUrl: './peertube-checkbox.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => PeertubeCheckboxComponent), + multi: true + } + ] +}) +export class PeertubeCheckboxComponent implements ControlValueAccessor { + @Input() checked = false + @Input() inputName: string + @Input() labelText: string + @Input() helpHtml: string + + isDisabled = false + + propagateChange = (_: any) => { /* empty */ } + + writeValue (checked: boolean) { + this.checked = checked + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + onModelChange () { + this.propagateChange(this.checked) + } + + setDisabledState (isDisabled: boolean) { + this.isDisabled = isDisabled + } +} diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html index f2b6eca33..1c3863e52 100644 --- a/client/src/app/shared/misc/help.component.html +++ b/client/src/app/shared/misc/help.component.html @@ -13,10 +13,14 @@ diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts index e7af61b4a..ba0452e77 100644 --- a/client/src/app/shared/misc/help.component.ts +++ b/client/src/app/shared/misc/help.component.ts @@ -15,6 +15,7 @@ export class HelpComponent implements OnInit, OnChanges { @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom' @Input() tooltipPlacement = 'right' + isPopoverOpened = false mainHtml = '' constructor (private i18n: I18n) { } @@ -27,6 +28,14 @@ export class HelpComponent implements OnInit, OnChanges { this.init() } + onPopoverHidden () { + this.isPopoverOpened = false + } + + onPopoverShown () { + this.isPopoverOpened = true + } + private init () { if (this.helpType === 'custom') { this.mainHtml = this.customHtml diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index c3f4bf88b..fdfb90600 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -45,6 +45,7 @@ import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calend import { ScreenService } from '@app/shared/misc/screen.service' import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service' import { VideoCaptionService } from '@app/shared/video-caption' +import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component' @NgModule({ imports: [ @@ -77,7 +78,8 @@ import { VideoCaptionService } from '@app/shared/video-caption' MarkdownTextareaComponent, InfiniteScrollerDirective, HelpComponent, - ReactiveFileComponent + ReactiveFileComponent, + PeertubeCheckboxComponent ], exports: [ @@ -106,6 +108,7 @@ import { VideoCaptionService } from '@app/shared/video-caption' InfiniteScrollerDirective, HelpComponent, ReactiveFileComponent, + PeertubeCheckboxComponent, NumberFormatterPipe, ObjectLengthPipe, diff --git a/client/src/app/shared/video-caption/video-caption.service.ts b/client/src/app/shared/video-caption/video-caption.service.ts index d1444902d..e835981dd 100644 --- a/client/src/app/shared/video-caption/video-caption.service.ts +++ b/client/src/app/shared/video-caption/video-caption.service.ts @@ -42,8 +42,6 @@ export class VideoCaptionService { } updateCaptions (videoId: number | string, videoCaptions: VideoCaptionEdit[]) { - if (videoCaptions.length === 0) return of(true) - const observables: Observable[] = [] for (const videoCaption of videoCaptions) { @@ -58,6 +56,8 @@ export class VideoCaptionService { } } + if (observables.length === 0) return of(true) + return forkJoin(observables) } } diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index 3010e5ccc..20020e2a8 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html @@ -3,7 +3,7 @@
-
- - - - -
+ -
- - - -
+ -
- - - - -
+
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 @@ input { @include peertube-input-text(100%); display: block; - - &[type=checkbox] { - @include peertube-checkbox(1px); - } } input, select { font-size: 15px } - .form-group-checkbox { - display: flex; - align-items: center; - - label { - font-weight: $font-regular; - margin: 0; - } - - input { - width: 10px; - margin-right: 10px; - } - } - .label-tags + span { font-size: 15px; } 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 { calendarDateFormat: string private schedulerInterval + private firstPatchDone = false constructor ( private formValidatorService: FormValidatorService, @@ -167,6 +168,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { .pipe(map(res => parseInt(res.toString(), 10))) .subscribe( newPrivacyId => { + this.schedulePublicationEnabled = newPrivacyId === this.SPECIAL_SCHEDULED_PRIVACY // Value changed @@ -182,11 +184,18 @@ export class VideoEditComponent implements OnInit, OnDestroy { scheduleControl.clearValidators() waitTranscodingControl.enable() - waitTranscodingControl.setValue(true) + + // Do not update the control value on first patch (values come from the server) + if (this.firstPatchDone === true) { + waitTranscodingControl.setValue(true) + } } scheduleControl.updateValueAndValidity() waitTranscodingControl.updateValueAndValidity() + + this.firstPatchDone = true + } ) } 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 { }, err => { + this.loadingBar.complete() this.isUpdatingVideo = false this.notificationsService.error(this.i18n('Error'), err.message) 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 @@
@@ -66,12 +66,12 @@ Support
-
+
Share
-
+
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 { if (!errorMessage) return // Display a message in the video player instead of a notification - if (errorMessage.indexOf('http error') !== -1) { + if (errorMessage.indexOf('from xs param') !== -1) { this.flushPlayer() this.remoteServerDown = true return diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 6d96e1c0b..b02f4373a 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -269,7 +269,7 @@ class PeerTubePlugin extends Plugin { } // Remote instance is down - if (err.message.indexOf('http error from xs param') !== -1) { + if (err.message.indexOf('from xs param') !== -1) { this.handleError(err) } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 9f8346950..3d518394a 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -240,7 +240,7 @@ @mixin peertube-checkbox ($border-width) { display: none; - & + label { + & + span { position: relative; width: 18px; height: 18px; @@ -263,7 +263,7 @@ } } - &:checked + label { + &:checked + span { border-color: transparent; background: $orange-color; animation: jelly 0.6s ease; @@ -274,7 +274,7 @@ } } - & + label + label { + & + span + span { font-size: 15px; font-weight: $font-regular; margin-left: 5px; @@ -282,8 +282,8 @@ display: inline; } - &[disabled] + label, - &[disabled] + label + label{ + &[disabled] + span, + &[disabled] + span + span{ opacity: 0.5; cursor: default; } diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index cb05ec2b5..98ce73257 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -321,7 +321,7 @@ class PeerTubeEmbed { } private handleError (err: Error) { - if (err.message.indexOf('http error') !== -1) { + if (err.message.indexOf('from xs param') !== -1) { this.player.dispose() this.videoElement = null this.displayError('This video is not available because the remote instance is not responding.')