1 import { fromEvent } from 'rxjs'
2 import { debounceTime } from 'rxjs/operators'
3 import { Injectable } from '@angular/core'
4 import { GlobalIconName } from '@app/shared/shared-icons'
5 import { sortObjectComparator } from '@shared/core-utils/miscs/miscs'
6 import { ServerConfig } from '@shared/models/server'
7 import { ScreenService } from '../wrappers'
9 export type MenuLink = {
18 export class MenuService {
19 isMenuDisplayed = true
20 isMenuChangedByUser = false
21 menuWidth = 240 // should be kept equal to $menu-width
24 private screenService: ScreenService
26 // Do not display menu on small or touch screens
27 if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) {
28 this.setMenuDisplay(false)
31 this.handleWindowResize()
35 this.setMenuDisplay(!this.isMenuDisplayed)
36 this.isMenuChangedByUser = true
40 return this.isMenuDisplayed
43 setMenuDisplay (display: boolean) {
44 this.isMenuDisplayed = display
46 if (!this.screenService.isInTouchScreen()) return
48 // On touch screens, lock body scroll and display content overlay when memu is opened
49 if (this.isMenuDisplayed) {
50 document.body.classList.add('menu-open')
51 this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
55 document.body.classList.remove('menu-open')
59 this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
62 buildCommonLinks (config: ServerConfig) {
63 let entries: MenuLink[] = [
65 icon: 'globe' as 'globe',
66 label: $localize`Discover videos`,
67 menuLabel: $localize`Discover`,
68 path: '/videos/overview',
72 icon: 'trending' as 'trending',
73 label: $localize`Trending videos`,
74 menuLabel: $localize`Trending`,
75 path: '/videos/trending',
79 icon: 'recently-added' as 'recently-added',
80 label: $localize`Recently added videos`,
81 menuLabel: $localize`Recently added`,
82 path: '/videos/recently-added',
86 icon: 'octagon' as 'octagon',
87 label: $localize`Local videos`,
88 menuLabel: $localize`Local videos`,
89 path: '/videos/local',
94 if (config.homepage.enabled) {
96 icon: 'home' as 'home',
97 label: $localize`Home`,
98 menuLabel: $localize`Home`,
104 entries = entries.sort(sortObjectComparator('priority', 'desc'))
109 private handleWindowResize () {
110 // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
111 if (this.screenService.isInTouchScreen()) return
113 fromEvent(window, 'resize')
114 .pipe(debounceTime(200))
115 .subscribe(() => this.onResize())