From 155fc34522626205f27e8803a527793fe72d3145 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Wed, 5 Aug 2020 00:50:07 +0200 Subject: [PATCH] add ng-select for templatable select options --- client/package.json | 4 +- .../video-caption-add-modal.component.html | 10 +-- .../video-caption-add-modal.component.scss | 5 +- .../shared/video-edit.component.html | 67 ++++++++----------- .../shared/video-edit.component.ts | 36 ++++++++-- .../video-import-torrent.component.html | 16 ++--- .../video-import-url.component.html | 16 ++--- .../video-add-components/video-send.scss | 7 ++ .../video-add-components/video-send.ts | 4 +- .../video-upload.component.html | 17 ++--- .../+video-edit/video-update.component.ts | 2 +- .../+video-edit/video-update.resolver.ts | 7 +- client/src/app/helpers/utils.ts | 7 +- .../select-channel.component.html | 18 +++++ .../shared-forms/select-channel.component.ts | 50 ++++++++++++++ .../select-options.component.html | 18 +++++ .../shared-forms/select-options.component.ts | 48 +++++++++++++ .../shared-forms/select-shared.component.scss | 18 +++++ .../shared/shared-forms/shared-form.module.ts | 10 ++- .../shared/shared-main/shared-main.module.ts | 7 +- .../shared/shared-main/video/video.service.ts | 12 ++-- client/src/sass/application.scss | 1 + client/src/sass/ng-select.scss | 29 ++++++++ client/yarn.lock | 7 ++ shared/models/videos/video-constant.model.ts | 1 + 25 files changed, 321 insertions(+), 96 deletions(-) create mode 100644 client/src/app/shared/shared-forms/select-channel.component.html create mode 100644 client/src/app/shared/shared-forms/select-channel.component.ts create mode 100644 client/src/app/shared/shared-forms/select-options.component.html create mode 100644 client/src/app/shared/shared-forms/select-options.component.ts create mode 100644 client/src/app/shared/shared-forms/select-shared.component.scss create mode 100644 client/src/sass/ng-select.scss diff --git a/client/package.json b/client/package.json index 946cd109c3b8..649df902089f 100644 --- a/client/package.json +++ b/client/package.json @@ -44,6 +44,7 @@ "@angularclass/hmr": "^2.1.3", "@neos21/bootstrap3-glyphicons": "^1.0.1", "@ng-bootstrap/ng-bootstrap": "^7.0.0", + "@ng-select/ng-select": "^5.0.0", "@ngx-i18nsupport/ngx-i18nsupport": "^1.1.6", "@ngx-i18nsupport/tooling": "^8.0.3", "@ngx-loading-bar/core": "^5.0.0", @@ -133,6 +134,5 @@ "webtorrent": "^0.108.1", "whatwg-fetch": "^3.0.0", "zone.js": "~0.10.2" - }, - "dependencies": {} + } } diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html index 6a9e31b5ac12..6a07dafa7b62 100644 --- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html +++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html @@ -8,11 +8,11 @@

Add caption

-
- +
+
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss index b257a16a9402..0958b5f80837 100644 --- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss +++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss @@ -1,8 +1,9 @@ @import '_variables'; @import '_mixins'; -.peertube-select-container { - @include peertube-select-container(auto); +label { + font-weight: $font-regular; + font-size: 100%; } .caption-file { 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 4d3b84626f7c..f6f13f707548 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 @@ -28,11 +28,18 @@ - + + +
+ {{ formErrors.tags }} +
@@ -56,22 +63,15 @@
- -
- -
+ +
-
- -
+
{{ formErrors.category }} @@ -80,12 +80,9 @@
-
- -
+
{{ formErrors.licence }} @@ -94,12 +91,10 @@
-
- -
+
{{ formErrors.language }} @@ -108,13 +103,9 @@
-
- -
+
{{ formErrors.privacy }} @@ -136,7 +127,7 @@ - This video contains mature or explicit content + Contains sensitive content @@ -146,7 +137,7 @@ - Wait transcoding before publishing the video + Publish after transcoding 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 239e453ada3d..d95e67f89671 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 @@ -8,6 +8,11 @@ import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-ma import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models' import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service' import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { forkJoin } from 'rxjs' +import { InstanceService } from '@app/shared/shared-instance' + +type VideoLanguages = VideoConstant & { group?: string } @Component({ selector: 'my-video-edit', @@ -31,7 +36,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { videoPrivacies: VideoConstant[] = [] videoCategories: VideoConstant[] = [] videoLicences: VideoConstant[] = [] - videoLanguages: VideoConstant[] = [] + videoLanguages: VideoLanguages[] = [] tagValidators: ValidatorFn[] tagValidatorsMessages: { [ name: string ]: string } @@ -56,7 +61,9 @@ export class VideoEditComponent implements OnInit, OnDestroy { private videoValidatorsService: VideoValidatorsService, private videoService: VideoService, private serverService: ServerService, + private instanceService: InstanceService, private i18nPrimengCalendarService: I18nPrimengCalendarService, + private i18n: I18n, private ngZone: NgZone ) { this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS @@ -126,11 +133,32 @@ export class VideoEditComponent implements OnInit, OnDestroy { .subscribe(res => this.videoCategories = res) this.serverService.getVideoLicences() .subscribe(res => this.videoLicences = res) - this.serverService.getVideoLanguages() - .subscribe(res => this.videoLanguages = res) + forkJoin([ + this.instanceService.getAbout(), + this.serverService.getVideoLanguages() + ]).pipe(map(([ about, languages ]) => ({ about, languages }))) + .subscribe(res => { + this.videoLanguages = res.languages + .map(l => { + if (res.about.instance.languages.includes(l.id)) { + return { ...l, group: this.i18n('Instance languages'), groupOrder: 0 } + } + return { ...l, group: this.i18n('All languages'), groupOrder: 1 } + }) + .sort((a, b) => a.groupOrder - b.groupOrder) + }) this.serverService.getVideoPrivacies() - .subscribe(privacies => this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies)) + .subscribe(privacies => { + this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies) + if (this.schedulePublicationPossible) { + this.videoPrivacies.push({ + id: this.SPECIAL_SCHEDULED_PRIVACY, + label: this.i18n('Scheduled'), + description: this.i18n('Hide the video until a specific date') + }) + } + }) this.serverConfig = this.serverService.getTmpConfig() this.serverService.getConfig() diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html index 5678f548f1e3..876955f23ac8 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html @@ -25,20 +25,16 @@
-
- -
+
-
- -
+
-
- -
+
-
- -
+
[] = [] videoCaptions: VideoCaptionEdit[] = [] @@ -44,7 +44,7 @@ export abstract class VideoSend extends FormReactive implements OnInit { this.serverService.getVideoPrivacies() .subscribe( privacies => { - this.videoPrivacies = privacies + this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies) this.firstStepPrivacyId = this.DEFAULT_VIDEO_PRIVACY }) diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html index 95b6628f6c74..49327b8e38dd 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html @@ -9,21 +9,16 @@
-
- -
+
-
- -
+
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 581199d651d1..de4f65df3ee5 100644 --- a/client/src/app/+videos/+video-edit/video-update.component.ts +++ b/client/src/app/+videos/+video-edit/video-update.component.ts @@ -17,7 +17,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { video: VideoEdit isUpdatingVideo = false - userVideoChannels: { id: number, label: string, support: string }[] = [] + userVideoChannels: { id: number, label: string, support: string, avatar?: string }[] = [] schedulePublicationPossible = false videoCaptions: VideoCaptionEdit[] = [] waitTranscodingEnabled = true diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts index 30bcf4d74535..a391913d82df 100644 --- a/client/src/app/+videos/+video-edit/video-update.resolver.ts +++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts @@ -28,7 +28,12 @@ export class VideoUpdateResolver implements Resolve { .listAccountVideoChannels(video.account) .pipe( map(result => result.data), - map(videoChannels => videoChannels.map(c => ({ id: c.id, label: c.displayName, support: c.support }))) + map(videoChannels => videoChannels.map(c => ({ + id: c.id, + label: c.displayName, + support: c.support, + avatarPath: c.avatar?.path + }))) ), this.videoCaptionService diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts index 825b6ca9620e..6e6ea91c6b19 100644 --- a/client/src/app/helpers/utils.ts +++ b/client/src/app/helpers/utils.ts @@ -16,7 +16,10 @@ function getParameterByName (name: string, url: string) { return decodeURIComponent(results[2].replace(/\+/g, ' ')) } -function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support?: string }[]) { +function populateAsyncUserVideoChannels ( + authService: AuthService, + channel: { id: number, label: string, support?: string, avatarPath?: string, recent?: boolean }[] +) { return new Promise(res => { authService.userInformationLoaded .subscribe( @@ -27,7 +30,7 @@ function populateAsyncUserVideoChannels (authService: AuthService, channel: { id const videoChannels = user.videoChannels if (Array.isArray(videoChannels) === false) return - videoChannels.forEach(c => channel.push({ id: c.id, label: c.displayName, support: c.support })) + videoChannels.forEach(c => channel.push({ id: c.id, label: c.displayName, support: c.support, avatarPath: c.avatar?.path })) return res() } diff --git a/client/src/app/shared/shared-forms/select-channel.component.html b/client/src/app/shared/shared-forms/select-channel.component.html new file mode 100644 index 000000000000..f8cab567d869 --- /dev/null +++ b/client/src/app/shared/shared-forms/select-channel.component.html @@ -0,0 +1,18 @@ + + + + {{ channel.label }} + + \ No newline at end of file diff --git a/client/src/app/shared/shared-forms/select-channel.component.ts b/client/src/app/shared/shared-forms/select-channel.component.ts new file mode 100644 index 000000000000..f12fa6d996a7 --- /dev/null +++ b/client/src/app/shared/shared-forms/select-channel.component.ts @@ -0,0 +1,50 @@ +import { NgSelectComponent } from '@ng-select/ng-select' +import { Component, Input, forwardRef } from '@angular/core' +import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms' +import { Actor } from '../shared-main' + +@Component({ + selector: 'select-channel', + styleUrls: [ './select-shared.component.scss' ], + templateUrl: './select-channel.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SelectChannelComponent), + multi: true + } + ] +}) +export class SelectChannelComponent extends NgSelectComponent implements ControlValueAccessor { + @Input() videoChannels: { id: number, label: string, support: string, avatarPath?: string }[] = [] + + selectedId: number + + // ng-select options + bindLabel = 'label' + bindValue = 'id' + clearable = false + searchable = false + + propagateChange = (_: any) => { /* empty */ } + + writeValue (id: number) { + this.selectedId = id + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + onModelChange () { + this.propagateChange(this.selectedId) + } + + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() + } +} diff --git a/client/src/app/shared/shared-forms/select-options.component.html b/client/src/app/shared/shared-forms/select-options.component.html new file mode 100644 index 000000000000..108cfa512353 --- /dev/null +++ b/client/src/app/shared/shared-forms/select-options.component.html @@ -0,0 +1,18 @@ + + + {{ item.label }} + +
+ {{ item.description }} + + + \ No newline at end of file diff --git a/client/src/app/shared/shared-forms/select-options.component.ts b/client/src/app/shared/shared-forms/select-options.component.ts new file mode 100644 index 000000000000..8280ff3aca0b --- /dev/null +++ b/client/src/app/shared/shared-forms/select-options.component.ts @@ -0,0 +1,48 @@ +import { NgSelectComponent } from '@ng-select/ng-select' +import { Component, Input, forwardRef } from '@angular/core' +import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms' + +type Item = { id: number | string, label: string, description?: string } + +@Component({ + selector: 'select-options', + styleUrls: [ './select-shared.component.scss' ], + templateUrl: './select-options.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SelectOptionsComponent), + multi: true + } + ] +}) +export class SelectOptionsComponent extends NgSelectComponent implements ControlValueAccessor { + @Input() items: Item[] = [] + @Input() clearable = false + @Input() bindValue = 'id' + @Input() groupBy: string + + selectedId: number | string + + // ng-select options + bindLabel = 'label' + searchable = false + + propagateChange = (_: any) => { /* empty */ } + + writeValue (id: number | string) { + this.selectedId = id + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + onModelChange () { + this.propagateChange(this.selectedId) + } +} diff --git a/client/src/app/shared/shared-forms/select-shared.component.scss b/client/src/app/shared/shared-forms/select-shared.component.scss new file mode 100644 index 000000000000..37325cb8df02 --- /dev/null +++ b/client/src/app/shared/shared-forms/select-shared.component.scss @@ -0,0 +1,18 @@ +$width-size: auto; + +ng-select { + width: $width-size; + @media screen and (max-width: $width-size) { + width: 100%; + } +} + +// make sure the image is vertically adjusted +ng-select ::ng-deep .ng-value-label img { + position: relative; + top: -1px; +} + +ng-select ::ng-deep img { + border-radius: 50%; +} diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts index ba33704cf23c..d94506a3f636 100644 --- a/client/src/app/shared/shared-forms/shared-form.module.ts +++ b/client/src/app/shared/shared-forms/shared-form.module.ts @@ -28,6 +28,8 @@ import { PreviewUploadComponent } from './preview-upload.component' import { ReactiveFileComponent } from './reactive-file.component' import { TextareaAutoResizeDirective } from './textarea-autoresize.directive' import { TimestampInputComponent } from './timestamp-input.component' +import { SelectChannelComponent } from './select-channel.component' +import { SelectOptionsComponent } from './select-options.component' @NgModule({ imports: [ @@ -45,7 +47,9 @@ import { TimestampInputComponent } from './timestamp-input.component' PreviewUploadComponent, ReactiveFileComponent, TextareaAutoResizeDirective, - TimestampInputComponent + TimestampInputComponent, + SelectChannelComponent, + SelectOptionsComponent ], exports: [ @@ -58,7 +62,9 @@ import { TimestampInputComponent } from './timestamp-input.component' PreviewUploadComponent, ReactiveFileComponent, TextareaAutoResizeDirective, - TimestampInputComponent + TimestampInputComponent, + SelectChannelComponent, + SelectOptionsComponent ], providers: [ diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index 22a207e51009..a4d18d562a14 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts @@ -17,6 +17,7 @@ import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' +import { NgSelectModule } from '@ng-select/ng-select' import { I18n } from '@ngx-translate/i18n-polyfill' import { SharedGlobalIconModule } from '../shared-icons' import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account' @@ -55,6 +56,8 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth' MultiSelectModule, InputSwitchModule, + NgSelectModule, + SharedGlobalIconModule ], @@ -134,7 +137,9 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth' TopMenuDropdownComponent, UserQuotaComponent, - UserNotificationsComponent + UserNotificationsComponent, + + NgSelectModule ], providers: [ diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts index edaefa9f21c2..978f775bf9af 100644 --- a/client/src/app/shared/shared-main/video/video.service.ts +++ b/client/src/app/shared/shared-main/video/video.service.ts @@ -339,23 +339,25 @@ export class VideoService implements VideosProvider { const base = [ { id: VideoPrivacy.PRIVATE, - label: this.i18n('Only I can see this video') + description: this.i18n('Only I can see this video') }, { id: VideoPrivacy.UNLISTED, - label: this.i18n('Only people with the private link can see this video') + description: this.i18n('Only shareable via a private link') }, { id: VideoPrivacy.PUBLIC, - label: this.i18n('Anyone can see this video') + description: this.i18n('Anyone can see this video') }, { id: VideoPrivacy.INTERNAL, - label: this.i18n('Only users of this instance can see this video') + description: this.i18n('Only users of this instance can see this video') } ] - return base.filter(o => !!privacies.find(p => p.id === o.id)) + return base + .filter(o => !!privacies.find(p => p.id === o.id)) // filter down to privacies that where in the input + .map(o => ({ ...privacies[o.id - 1], ...o })) // merge the input privacies that contain a label, and extend them with a description } nsfwPolicyToParam (nsfwPolicy: NSFWPolicyType) { diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index eacfad30bc93..6f8f9998121c 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -14,6 +14,7 @@ $assets-path: '../../assets/'; @import './bootstrap'; @import './primeng-custom'; +@import './ng-select.scss'; [hidden] { display: none !important; diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss new file mode 100644 index 000000000000..f836e203c9e5 --- /dev/null +++ b/client/src/sass/ng-select.scss @@ -0,0 +1,29 @@ +@import '_variables'; + +$ng-select-highlight: #f2690d; +// $ng-select-primary-text: #333 !default; +// $ng-select-disabled-text: #f9f9f9 !default; +// $ng-select-border: #ccc !default; +// $ng-select-border-radius: 4px !default; +// $ng-select-bg: #ffffff !default; +// $ng-select-selected: lighten($ng-select-highlight, 46) !default; +// $ng-select-marke d: lighten($ng-select-highlight, 48) !default; +$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); +// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default; +$ng-select-height: 30px; +// $ng-select-value-padding-left: 10px !default; +// $ng-select-value-font-size: 0.9em !default; + +@import "~@ng-select/ng-select/scss/default.theme.scss"; + +.ng-input { + font-size: .9em; +} + +.ng-select { + &.ng-select-focused { + &:not(.ng-select-opened) > .ng-select-container { + border-color: #ccc !important; + } + } +} diff --git a/client/yarn.lock b/client/yarn.lock index 843ca4f104e6..2ed5d09b719e 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1344,6 +1344,13 @@ dependencies: tslib "^2.0.0" +"@ng-select/ng-select@^5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@ng-select/ng-select/-/ng-select-5.0.0.tgz#db021e5ca7be3fe6be346c3b63b3f2e109afa0f0" + integrity sha512-1mdGNh5xGriSnCLcLF/GWxqCgCehB3Stu7mxhB9K/+BxNCRE365Q1MgpzO61XQBgL0L6ktxiXRhCQWXXtFoq9w== + dependencies: + tslib "^2.0.0" + "@ngtools/webpack@10.1.0-next.4": version "10.1.0-next.4" resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-10.1.0-next.4.tgz#5397417820d110e29c7dc99db8adb538de98676e" diff --git a/shared/models/videos/video-constant.model.ts b/shared/models/videos/video-constant.model.ts index 342a7c0cf641..353a2953548a 100644 --- a/shared/models/videos/video-constant.model.ts +++ b/shared/models/videos/video-constant.model.ts @@ -1,4 +1,5 @@ export interface VideoConstant { id: T label: string + description?: string }