add ng-select for templatable select options

Chocobozzz · Aug 4, 2020 · 79d866e · 79d866e
1 parent 830c762
commit 79d866e
Show file tree

Hide file tree

Showing 19 changed files with 154 additions and 62 deletions.
diff --git a/client/package.json b/client/package.json
@@ -135,5 +135,7 @@
     "whatwg-fetch": "^3.0.0",
     "zone.js": "~0.10.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@ng-select/ng-select": "^5.0.0"
+  }
 }
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
@@ -8,11 +8,11 @@ <h4 i18n class="modal-title">Add caption</h4>
 
     <div class="modal-body">
       <label i18n for="language">Language</label>
-      <div class="peertube-select-container">
-        <select id="language" formControlName="language" class="form-control">
-          <option></option>
-          <option *ngFor="let language of videoCaptionLanguages" [value]="language.id">{{ language.label }}</option>
-        </select>
+      <div class="peertube-ng-select-container">
+        <ng-select
+          labelForId="language" [items]="videoCaptionLanguages" formControlName="language"
+          bindLabel="label" bindValue="id"
+        ></ng-select>
       </div>
 
       <div *ngIf="formErrors.language" class="form-error">

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
@@ -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
@@ -56,21 +56,27 @@
 
           <div class="col-video-edit">
             <div class="form-group">
-              <label i18n>Channel</label>
-              <div class="peertube-select-container">
-                <select formControlName="channelId" class="form-control">
-                  <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
-                </select>
+              <label i18n for="channel">Channel</label>
+              <div class="peertube-ng-select-container">
+                <ng-select
+                  labelForId="channel" [items]="userVideoChannels" formControlName="channelId"
+                  bindLabel="label" bindValue="id" [clearable]="false"
+                >
+                  <ng-template ng-option-tmp let-item="item" let-index="index">
+                    <img class="mr-2" [src]="item.avatar" height="20px" width="20px"/>
+                    {{ item.label }}
+                  </ng-template>
+                </ng-select>
               </div>
             </div>
 
             <div class="form-group">
               <label i18n for="category">Category</label>
-              <div class="peertube-select-container">
-                <select id="category" formControlName="category" class="form-control">
-                  <option></option>
-                  <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-                </select>
+              <div class="peertube-ng-select-container">
+                <ng-select
+                  labelForId="category" [items]="videoCategories" formControlName="category"
+                  bindLabel="label" bindValue="id"
+                ></ng-select>
               </div>
 
               <div *ngIf="formErrors.category" class="form-error">
@@ -80,11 +86,11 @@
 
             <div class="form-group">
               <label i18n for="licence">Licence</label>
-              <div class="peertube-select-container">
-                <select id="licence" formControlName="licence" class="form-control">
-                  <option></option>
-                  <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-                </select>
+              <div class="peertube-ng-select-container">
+                <ng-select
+                  labelForId="licence" [items]="videoLicences" formControlName="licence"
+                  bindLabel="label" bindValue="id"
+                ></ng-select>
               </div>
 
               <div *ngIf="formErrors.licence" class="form-error">
@@ -94,11 +100,11 @@
 
             <div class="form-group">
               <label i18n for="language">Language</label>
-              <div class="peertube-select-container">
-                <select id="language" formControlName="language" class="form-control">
-                  <option></option>
-                  <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-                </select>
+              <div class="peertube-ng-select-container">
+                <ng-select
+                  labelForId="language" [items]="videoLanguages" formControlName="language"
+                  bindLabel="label" bindValue="id"
+                ></ng-select>
               </div>
 
               <div *ngIf="formErrors.language" class="form-error">
@@ -108,12 +114,15 @@
 
             <div class="form-group">
               <label i18n for="privacy">Privacy</label>
-              <div class="peertube-select-container">
-                <select id="privacy" formControlName="privacy" class="form-control">
-                  <option></option>
-                  <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-                  <option *ngIf="schedulePublicationPossible" [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
-                </select>
+              <div class="peertube-ng-select-container">
+                <ng-select
+                  labelForId="privacy" [items]="videoPrivacies" formControlName="privacy"
+                  bindLabel="label" bindValue="id" [clearable]="false" [searchable]="false"
+                >
+                  <ng-template ng-option-tmp let-item="item" let-index="index">
+                    {{ item.label }}<br/><span class="text-muted">{{ item.description }}</span>
+                  </ng-template>
+                </ng-select>
               </div>
 
               <div *ngIf="formErrors.privacy" class="form-error">
@@ -136,7 +145,7 @@
 
             <my-peertube-checkbox inputName="nsfw" formControlName="nsfw" helpPlacement="bottom-right">
               <ng-template ptTemplate="label">
-                <ng-container i18n>This video contains mature or explicit content</ng-container>
+                <ng-container i18n>Contains sensitive content</ng-container>
               </ng-template>
 
               <ng-template ptTemplate="help">
@@ -146,7 +155,7 @@
 
             <my-peertube-checkbox *ngIf="waitTranscodingEnabled" inputName="waitTranscoding" formControlName="waitTranscoding" helpPlacement="bottom-right">
               <ng-template ptTemplate="label">
-                <ng-container i18n>Wait transcoding before publishing the video</ng-container>
+                <ng-container i18n>Publish after transcoding</ng-container>
               </ng-template>
 
               <ng-template ptTemplate="help">

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
@@ -8,6 +8,7 @@ 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'
 
 @Component({
   selector: 'my-video-edit',
@@ -57,6 +58,7 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     private videoService: VideoService,
     private serverService: ServerService,
     private i18nPrimengCalendarService: I18nPrimengCalendarService,
+    private i18n: I18n,
     private ngZone: NgZone
   ) {
     this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS
@@ -130,7 +132,16 @@ export class VideoEditComponent implements OnInit, OnDestroy {
       .subscribe(res => this.videoLanguages = res)
 
     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
@@ -34,10 +34,15 @@
 
     <div class="form-group">
       <label i18n for="first-step-privacy">Privacy</label>
-      <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
-          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-        </select>
+      <div class="peertube-ng-select-container">
+        <ng-select
+          id="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId"
+          bindLabel="label" bindValue="id" [clearable]="false" [searchable]="false"
+        >
+          <ng-template ng-option-tmp let-item="item" let-index="index">
+            {{ item.label }}<br/><span class="text-muted">{{ item.description }}</span>
+          </ng-template>
+        </ng-select>
       </div>
     </div>
 

diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
@@ -29,10 +29,15 @@
 
     <div class="form-group">
       <label i18n for="first-step-privacy">Privacy</label>
-      <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
-          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-        </select>
+      <div class="peertube-ng-select-container">
+        <ng-select
+          id="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId"
+          bindLabel="label" bindValue="id" [clearable]="false" [searchable]="false"
+        >
+          <ng-template ng-option-tmp let-item="item" let-index="index">
+            {{ item.label }}<br/><span class="text-muted">{{ item.description }}</span>
+          </ng-template>
+        </ng-select>
       </div>
     </div>
 

diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -26,6 +26,12 @@ $width-size: 190px;
   .peertube-select-container {
     @include peertube-select-container($width-size);
   }
+  .peertube-ng-select-container {
+    width: $width-size;
+    @media screen and (max-width: $width-size) {
+      width: 100%;
+    }
+  }
 
   input[type=text] {
     @include peertube-input-text($width-size);

diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts
@@ -8,7 +8,7 @@ import { LoadingBarService } from '@ngx-loading-bar/core'
 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
 
 export abstract class VideoSend extends FormReactive implements OnInit {
-  userVideoChannels: { id: number, label: string, support: string }[] = []
+  userVideoChannels: { id: number, label: string, support: string, avatar?: string }[] = []
   videoPrivacies: VideoConstant<VideoPrivacy>[] = []
   videoCaptions: VideoCaptionEdit[] = []
 
@@ -42,7 +42,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
@@ -18,11 +18,15 @@
 
     <div class="form-group">
       <label i18n for="first-step-privacy">Privacy</label>
-      <div class="peertube-select-container">
-        <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control">
-          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-          <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option>
-        </select>
+      <div class="peertube-ng-select-container">
+        <ng-select
+          id="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId"
+          bindLabel="label" bindValue="id" [clearable]="false" [searchable]="false"
+        >
+          <ng-template ng-option-tmp let-item="item" let-index="index">
+            {{ item.label }}<br/><span class="text-muted">{{ item.description }}</span>
+          </ng-template>
+        </ng-select>
       </div>
     </div>
 

diff --git 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
@@ -28,7 +28,12 @@ export class VideoUpdateResolver implements Resolve<any> {
                          .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,
+                             avatar: c.avatar.path
+                           })))
                          ),
 
                      this.videoCaptionService

diff --git 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, avatar?: string }[]
+) {
   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, avatar: c.avatar?.path }))
 
           return res()
         }

diff --git 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
@@ -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 people with the private link can see this video')
       },
       {
         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))
+      .map(o => ({ ...privacies[o.id - 1], ...o }))
   }
 
   nsfwPolicyToParam (nsfwPolicy: NSFWPolicyType) {

diff --git 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;