From 8beea2d37d90e9a12d895f4a9eebc1e532313d8c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 7 Jun 2021 13:16:50 +0200 Subject: Add ability to filter menu links --- .../edit-basic-configuration.component.ts | 1 + client/src/app/core/menu/menu.service.ts | 106 +++++++++++++++------ client/src/app/menu/menu.component.html | 41 ++------ client/src/app/menu/menu.component.scss | 3 +- client/src/app/menu/menu.component.ts | 73 +++++++------- 5 files changed, 125 insertions(+), 99 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts index bac1015fc..671e734ac 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts +++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.ts @@ -82,6 +82,7 @@ export class EditBasicConfigurationComponent implements OnInit, OnChanges { buildLandingPageOptions () { this.defaultLandingPageOptions = this.menuService.buildCommonLinks(this.serverConfig) + .links .map(o => ({ id: o.path, label: o.label, diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts index a30766b29..60130382f 100644 --- a/client/src/app/core/menu/menu.service.ts +++ b/client/src/app/core/menu/menu.service.ts @@ -2,16 +2,23 @@ import { fromEvent } from 'rxjs' import { debounceTime } from 'rxjs/operators' import { Injectable } from '@angular/core' import { GlobalIconName } from '@app/shared/shared-icons' -import { sortObjectComparator } from '@shared/core-utils/miscs/miscs' import { HTMLServerConfig } from '@shared/models/server' import { ScreenService } from '../wrappers' export type MenuLink = { icon: GlobalIconName + label: string - menuLabel: string + // Used by the left menu for example + shortLabel: string + path: string - priority: number +} + +export type MenuSection = { + key: string + title: string + links: MenuLink[] } @Injectable() @@ -59,51 +66,90 @@ export class MenuService { this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser } - buildCommonLinks (config: HTMLServerConfig) { - let entries: MenuLink[] = [ + buildLibraryLinks (userCanSeeVideosLink: boolean): MenuSection { + let links: MenuLink[] = [] + + if (userCanSeeVideosLink) { + links.push({ + path: '/my-library/videos', + icon: 'videos' as GlobalIconName, + shortLabel: $localize`Videos`, + label: $localize`My videos` + }) + } + + links = links.concat([ + { + path: '/my-library/video-playlists', + icon: 'playlists' as GlobalIconName, + shortLabel: $localize`Playlists`, + label: $localize`My playlists` + }, + { + path: '/videos/subscriptions', + icon: 'subscriptions' as GlobalIconName, + shortLabel: $localize`Subscriptions`, + label: $localize`My subscriptions` + }, + { + path: '/my-library/history/videos', + icon: 'history' as GlobalIconName, + shortLabel: $localize`History`, + label: $localize`My history` + } + ]) + + return { + key: 'in-my-library', + title: 'In my library', + links + } + } + + buildCommonLinks (config: HTMLServerConfig): MenuSection { + let links: MenuLink[] = [] + + if (config.homepage.enabled) { + links.push({ + icon: 'home' as 'home', + label: $localize`Home`, + shortLabel: $localize`Home`, + path: '/home' + }) + } + + links = links.concat([ { icon: 'globe' as 'globe', label: $localize`Discover videos`, - menuLabel: $localize`Discover`, - path: '/videos/overview', - priority: 150 + shortLabel: $localize`Discover`, + path: '/videos/overview' }, { icon: 'trending' as 'trending', label: $localize`Trending videos`, - menuLabel: $localize`Trending`, - path: '/videos/trending', - priority: 140 + shortLabel: $localize`Trending`, + path: '/videos/trending' }, { icon: 'recently-added' as 'recently-added', label: $localize`Recently added videos`, - menuLabel: $localize`Recently added`, - path: '/videos/recently-added', - priority: 130 + shortLabel: $localize`Recently added`, + path: '/videos/recently-added' }, { icon: 'local' as 'local', label: $localize`Local videos`, - menuLabel: $localize`Local videos`, - path: '/videos/local', - priority: 120 + shortLabel: $localize`Local videos`, + path: '/videos/local' } - ] + ]) - if (config.homepage.enabled) { - entries.push({ - icon: 'home' as 'home', - label: $localize`Home`, - menuLabel: $localize`Home`, - path: '/home', - priority: 160 - }) + return { + key: 'on-instance', + title: $localize`ON ${config.instance.name}`, + links } - - entries = entries.sort(sortObjectComparator('priority', 'desc')) - - return entries } private handleWindowResize () { diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 099ee8f36..16c79efc1 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -95,39 +95,16 @@ Create an account -
-
IN MY LIBRARY
+ +
+
{{ menuSection.title }}
- - - Videos - - - - - Playlists - - - - - Subscriptions - - - - - History - - -
- -
-
ON {{instanceName}}
- - - - {{ commonLink.menuLabel }} - -
+ + + {{ link.shortLabel }} + +
+