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 }} + +
+
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 6da80191a..daaed2d32 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -274,8 +274,7 @@ my-actor-avatar { } } -.in-my-library, -.on-instance, +.menu-block, .footer-block { margin-bottom: 15px; diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index c767f19b2..fa104cc43 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -8,7 +8,8 @@ import { AuthService, AuthStatus, AuthUser, - MenuLink, + HooksService, + MenuSection, MenuService, RedirectService, ScreenService, @@ -45,7 +46,7 @@ export class MenuComponent implements OnInit { currentInterfaceLanguage: string - commonMenuLinks: MenuLink[] = [] + menuSections: MenuSection[] = [] private languages: VideoConstant[] = [] @@ -71,7 +72,8 @@ export class MenuComponent implements OnInit { private screenService: ScreenService, private menuService: MenuService, private modalService: PeertubeModalService, - private router: Router + private router: Router, + private hooks: HooksService ) { } get isInMobileView () { @@ -88,46 +90,23 @@ export class MenuComponent implements OnInit { return this.languageChooserModal.getCurrentLanguage() } - get instanceName () { - return this.htmlServerConfig.instance.name - } - ngOnInit () { this.htmlServerConfig = this.serverService.getHTMLConfig() - this.buildMenuLinks() - - this.isLoggedIn = this.authService.isLoggedIn() - if (this.isLoggedIn === true) { - this.user = this.authService.getUser() - - this.computeNSFWPolicy() - this.computeVideosLink() - } - - this.computeAdminAccess() - this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage() + this.updateUserState() + this.buildMenuSections() + this.authService.loginChangedSource.subscribe( status => { if (status === AuthStatus.LoggedIn) { this.isLoggedIn = true - this.user = this.authService.getUser() - - this.computeAdminAccess() - this.computeVideosLink() - - logger('Logged in.') } else if (status === AuthStatus.LoggedOut) { this.isLoggedIn = false - this.user = undefined - - this.computeAdminAccess() - - logger('Logged out.') - } else { - console.error('Unknown auth status: ' + status) } + + this.updateUserState() + this.buildMenuSections() } ) @@ -257,8 +236,20 @@ export class MenuComponent implements OnInit { } } - private buildMenuLinks () { - this.commonMenuLinks = this.menuService.buildCommonLinks(this.htmlServerConfig) + private async buildMenuSections () { + const menuSections = [] + + if (this.isLoggedIn) { + menuSections.push( + this.menuService.buildLibraryLinks(this.user?.canSeeVideosLink) + ) + } + + menuSections.push( + this.menuService.buildCommonLinks(this.htmlServerConfig) + ) + + this.menuSections = await this.hooks.wrapObject(menuSections, 'common', 'filter:left-menu.links.create.result') } private buildUserLanguages () { @@ -268,7 +259,7 @@ export class MenuComponent implements OnInit { } if (!this.user.videoLanguages) { - this.videoLanguages = [$localize`any language`] + this.videoLanguages = [ $localize`any language` ] return } @@ -284,6 +275,8 @@ export class MenuComponent implements OnInit { } private computeVideosLink () { + if (!this.isLoggedIn) return + this.authService.userInformationLoaded .pipe( switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed())) @@ -313,4 +306,14 @@ export class MenuComponent implements OnInit { break } } + + private updateUserState () { + this.user = this.isLoggedIn + ? this.authService.getUser() + : undefined + + this.computeAdminAccess() + this.computeNSFWPolicy() + this.computeVideosLink() + } } -- cgit v1.2.3