add label to active filters, move scope to checkboxes

Chocobozzz · Dec 20, 2023 · 0cbd9c4 · 0cbd9c4
1 parent 8d1f085
commit 0cbd9c4
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 34 deletions.
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
@@ -1,10 +1,10 @@
 <ng-template #updateSettings let-fragment>
   <div class="label-description muted" i18n>
-    Update
+    Updates
     <a routerLink="/my-account/settings" [fragment]="fragment">
       <button class="button-unstyle" (click)="onAccountSettingsClick($event)">your settings</button>
-    </a
-  ></div>
+    </a>
+  </div>
 </ng-template>
 
 
@@ -28,7 +28,7 @@
         class="active-filter pastille button-unstyle" [ngClass]="{ 'can-remove': activeFilter.canRemove }" [title]="getFilterTitle(activeFilter.canRemove)"
       >
         <span>
-          {{ activeFilter.label }}
+          <span class="muted">{{ activeFilter.label }}</span>
 
           <ng-container *ngIf="activeFilter.value">: {{ activeFilter.value }}</ng-container>
         </span>
@@ -42,16 +42,22 @@
       formControlName="sort"
       [clearable]="false"
       [searchable]="false"
-      [bindValue]="null"
+      [items]="getSortOptions()"
+      bindLabel="label"
+      bindValue="value"
+      groupBy="group"
     >
-      <ng-option i18n value="-publishedAt">Sort by <strong>"Recently Added"</strong></ng-option>
-      <ng-option i18n value="-originallyPublishedAt">Sort by <strong>"Original Publication Date"</strong></ng-option>
-
-      <ng-option i18n value="name">Sort by <strong>"Name"</strong></ng-option>
-      <ng-option i18n *ngIf="isTrendingSortEnabled('most-viewed')" value="-trending">Sort by <strong>"Recent Views"</strong></ng-option>
-      <ng-option i18n *ngIf="isTrendingSortEnabled('hot')" value="-hot">Sort by <strong>"Hot"</strong></ng-option>
-      <ng-option i18n *ngIf="isTrendingSortEnabled('most-liked')" value="-likes">Sort by <strong>"Likes"</strong></ng-option>
-      <ng-option i18n value="-views">Sort by <strong>"Global Views"</strong></ng-option>
+      <ng-template ng-optgroup-tmp let-item="item" i18n>
+        {{ "Sort by " + item.group || 'Unnamed group'}}
+      </ng-template>
+      <ng-template ng-label-tmp let-item="item" i18n>
+        Sort by <strong>"{{item.label}}"</strong>
+      </ng-template>
+      <ng-template ng-option-tmp let-item="item" i18n>
+        Sort by <strong>"{{item.label}}"</strong>
+        <br/>
+        <span class="muted">{{item.description}}</span>
+      </ng-template>
     </ng-select>
 
   </div>
@@ -83,12 +89,24 @@
       <div class="form-group" *ngIf="!hideScope" role="radiogroup">
         <label for="scope" i18n>Scope:</label>
 
-        <div class="peertube-radio-container">
+        <my-peertube-checkbox i18n-labelText labelText="Local" [disabled]="true" [checked]="true">
+          <ng-container ngProjectAs="description">
+            <span i18n>Videos from this instance.</span>
+          </ng-container>
+        </my-peertube-checkbox>
+
+        <my-peertube-checkbox inputName="scopeFederatedToggle" formControlName="scopeToggle" i18n-labelText labelText="Federated">
+          <ng-container ngProjectAs="description">
+            <span i18n>Videos from servers followed by this instance.</span>
+          </ng-container>
+        </my-peertube-checkbox>
+
+        <div class="peertube-radio-container" [hidden]="true">
           <input formControlName="scope" type="radio" name="scope" id="scopeLocal" value="local" />
           <label for="scopeLocal" i18n>Local videos (this instance)</label>
         </div>
 
-        <div class="peertube-radio-container">
+        <div class="peertube-radio-container" [hidden]="true">
           <input formControlName="scope" type="radio" name="scope" id="scopeFederated" value="federated" />
           <label for="scopeFederated" i18n>Federated videos (this instance + followed instances)</label>
         </div>
@@ -122,13 +140,13 @@
       <div class="form-group" *ngIf="canSeeAllVideos()">
         <label for="allVideos" i18n>Moderation:</label>
 
-        <my-peertube-checkbox
-          formControlName="allVideos"
-          inputName="allVideos"
-          i18n-labelText labelText="Display all videos (private, unlisted, password protected or not yet published)"
-        ></my-peertube-checkbox>
+        <my-peertube-checkbox formControlName="allVideos" inputName="allVideos" i18n-labelText labelText="Display all videos">
+          <ng-container ngProjectAs="description">
+            <span i18n>Even private, unlisted, password protected or not yet published.</span>
+          </ng-container>
+        </my-peertube-checkbox>
       </div>
     </div>
   </div>
 
-</div>
+</div>
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts b/client/src/app/shared/shared-video-miniature/video-filters-header.component.ts
@@ -32,7 +32,8 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
     private auth: AuthService,
     private serverService: ServerService,
     private fb: FormBuilder,
-    private modalService: PeertubeModalService
+    private modalService: PeertubeModalService,
+    private server: ServerService
   ) {
   }
 
@@ -42,6 +43,7 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
       nsfw: [ '' ],
       languageOneOf: [ '' ],
       categoryOneOf: [ '' ],
+      scopeToggle: [ '' ],
       scope: [ '' ],
       allVideos: [ '' ],
       live: [ '' ]
@@ -53,12 +55,37 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
       this.patchForm(false)
     })
 
+    this.form.controls.scopeToggle.valueChanges.subscribe(value => {
+      this.form.controls.scope.setValue(value ? 'federated' : 'local', { emitEvent: false })
+    })
+    this.form.controls.scope.valueChanges.subscribe(value => {
+      this.form.controls.scopeToggle.setValue(value === 'federated' ? true : false, { emitEvent: false })
+    })
+
     this.form.valueChanges.subscribe(values => {
       debugLogger('Loading values from form: %O', values)
 
       this.filters.load(values)
       this.filtersChanged.emit()
     })
+
+    this.server.getVideoLanguages()
+      .subscribe(
+        languages => {
+          this.filters.availableLanguages = languages.map(l => {
+            if (l.id === 'zxx') return { label: l.label, id: l.id }
+            return { label: l.label, id: l.id }
+          })
+          this.filters.buildActiveFilters()
+        }
+      )
+    this.server.getVideoCategories()
+      .subscribe(
+        categories => {
+          this.filters.availableCategories = categories.map(c => ({ label: c.label, id: c.id + '' }))
+          this.filters.buildActiveFilters()
+        }
+      )
   }
 
   ngOnDestroy () {
@@ -92,6 +119,22 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
     return ''
   }
 
+  getSortOptions () {
+    let options: { label: string, value: string, group: string, description?: string }[] = [
+      { label: $localize`Recently Added`, value: "-publishedAt", group: $localize`date`, description: $localize`Uses the effective publication date` },
+      { label: $localize`Original Publication`, value: "-orginallyPublishedAt", group: $localize`date`, description: $localize`Uses the original publication date` },
+      { label: $localize`Name`, value: "name", group: $localize`text`, description: $localize`Alphabetical order` },
+    ]
+
+    if (this.isTrendingSortEnabled('hot')) options.push({ label: $localize`Hot`, value: "-hot", group: $localize`interactions`, description: $localize`Most recent interactions` })
+    if (this.isTrendingSortEnabled('most-liked')) options.push({ label: $localize`Likes`, value: "-likes", group: $localize`interactions`, description: $localize`Most recent likes` })
+    if (this.isTrendingSortEnabled('most-viewed')) options.push({ label: $localize`Recent Views`, value: "-trending", group: $localize`interactions`, description: $localize`Most recent views over 7 days` })
+
+    options.push({ label: $localize`Global Views`, value: "-views", group: $localize`interactions`, description: $localize`Most absolute views` })
+
+    return options
+  }
+
   onAccountSettingsClick (event: Event) {
     if (this.auth.isLoggedIn()) return
 
@@ -102,7 +145,10 @@ export class VideoFiltersHeaderComponent implements OnInit, OnDestroy {
   }
 
   private patchForm (emitEvent: boolean) {
-    const defaultValues = this.filters.toFormObject()
+    let defaultValues = {
+      ...this.filters.toFormObject(),
+      scopeToggle: this.filters.scope === 'federated' ? true : false
+    }
     this.form.patchValue(defaultValues, { emitEvent })
 
     debugLogger('Patched form: %O', defaultValues)

diff --git a/client/src/app/shared/shared-video-miniature/video-filters.model.ts b/client/src/app/shared/shared-video-miniature/video-filters.model.ts
@@ -9,6 +9,7 @@ import {
   VideoSortField
 } from '@peertube/peertube-models'
 import { AttributesOnly } from '@peertube/peertube-typescript-utils'
+import { SelectOptionsItem } from 'src/types'
 
 type VideoFiltersKeys = {
   [ id in keyof AttributesOnly<VideoFilters> ]: any
@@ -30,14 +31,17 @@ export class VideoFilters {
 
   search: string
 
+  availableLanguages: {id: string, label: string}[] = []
+  availableCategories: {id: string, label: string}[] = []
+
   private defaultValues = new Map<keyof VideoFilters, any>([
-    [ 'sort', '-publishedAt' ],
-    [ 'nsfw', 'false' ],
-    [ 'languageOneOf', undefined ],
-    [ 'categoryOneOf', undefined ],
-    [ 'scope', 'federated' ],
-    [ 'allVideos', false ],
-    [ 'live', 'both' ]
+    ['sort', '-publishedAt'],
+    ['nsfw', 'false'],
+    ['languageOneOf', undefined],
+    ['categoryOneOf', undefined],
+    ['scope', 'federated'],
+    ['allVideos', false],
+    ['live', 'both']
   ])
 
   private activeFilters: { key: string, canRemove: boolean, label: string, value?: string }[] = []
@@ -146,7 +150,9 @@ export class VideoFilters {
         key: 'languageOneOf',
         canRemove: true,
         label: $localize`Languages`,
-        value: this.languageOneOf.map(l => l.toUpperCase()).join(', ')
+        value: this.languageOneOf.map(
+          l => this.availableLanguages.find(lang => lang.id == l)?.label || l.toUpperCase()
+        ).join(', ')
       })
     }
 
@@ -155,7 +161,9 @@ export class VideoFilters {
         key: 'categoryOneOf',
         canRemove: true,
         label: $localize`Categories`,
-        value: this.categoryOneOf.join(', ')
+        value: this.categoryOneOf.map(
+          c => this.availableCategories.find(cat => cat.id == c + '')?.label || c
+        ).join(', ')
       })
     }
 
@@ -243,9 +251,9 @@ export class VideoFilters {
   }
 
   getNSFWDisplayLabel () {
-    if (this.defaultNSFWPolicy === 'blur') return $localize`Blurred`
+    if (this.defaultNSFWPolicy === 'blur') return $localize`Blur`
 
-    return $localize`Displayed`
+    return $localize`Display`
   }
 
   private getNSFWValue () {