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 { HTMLServerConfig } from '@shared/models/server'
6 import { ScreenService } from '../wrappers'
8 export type MenuLink = {
13 // Used by the left menu for example
19 export type MenuSection = {
26 export class MenuService {
27 isMenuDisplayed = true
28 isMenuChangedByUser = false
29 menuWidth = 240 // should be kept equal to $menu-width
32 private screenService: ScreenService
34 // Do not display menu on small or touch screens
35 if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) {
36 this.setMenuDisplay(false)
39 this.handleWindowResize()
43 this.setMenuDisplay(!this.isMenuDisplayed)
44 this.isMenuChangedByUser = true
48 return this.isMenuDisplayed
51 setMenuDisplay (display: boolean) {
52 this.isMenuDisplayed = display
54 if (!this.screenService.isInTouchScreen()) return
56 // On touch screens, lock body scroll and display content overlay when memu is opened
57 if (this.isMenuDisplayed) {
58 document.body.classList.add('menu-open')
59 this.screenService.onFingerSwipe('left', () => this.setMenuDisplay(false))
63 document.body.classList.remove('menu-open')
67 this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
70 buildLibraryLinks (userCanSeeVideosLink: boolean): MenuSection {
71 let links: MenuLink[] = []
73 if (userCanSeeVideosLink) {
75 path: '/my-library/video-channels',
76 icon: 'channel' as GlobalIconName,
77 iconClass: 'channel-icon',
78 shortLabel: $localize`Channels`,
79 label: $localize`My channels`
83 path: '/my-library/videos',
84 icon: 'videos' as GlobalIconName,
85 shortLabel: $localize`Videos`,
86 label: $localize`My videos`
90 links = links.concat([
92 path: '/my-library/video-playlists',
93 icon: 'playlists' as GlobalIconName,
94 shortLabel: $localize`Playlists`,
95 label: $localize`My playlists`
98 path: '/videos/subscriptions',
99 icon: 'subscriptions' as GlobalIconName,
100 shortLabel: $localize`Subscriptions`,
101 label: $localize`My subscriptions`
104 path: '/my-library/history/videos',
105 icon: 'history' as GlobalIconName,
106 shortLabel: $localize`History`,
107 label: $localize`My history`
112 key: 'in-my-library',
113 title: $localize`In my library`,
118 buildCommonLinks (config: HTMLServerConfig): MenuSection {
119 let links: MenuLink[] = []
121 if (config.homepage.enabled) {
123 icon: 'home' as 'home',
124 label: $localize`Home`,
125 shortLabel: $localize`Home`,
130 links = links.concat([
132 icon: 'globe' as 'globe',
133 label: $localize`Discover videos`,
134 shortLabel: $localize`Discover`,
135 path: '/videos/overview'
138 icon: 'trending' as 'trending',
139 label: $localize`Trending videos`,
140 shortLabel: $localize`Trending`,
141 path: '/videos/trending'
144 icon: 'add' as 'add',
145 label: $localize`Recently added videos`,
146 shortLabel: $localize`Recently added`,
147 path: '/videos/recently-added'
150 icon: 'local' as 'local',
151 label: $localize`Local videos`,
152 shortLabel: $localize`Local videos`,
153 path: '/videos/local'
159 title: $localize`ON ${config.instance.name}`,
164 private handleWindowResize () {
165 // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
166 if (this.screenService.isInTouchScreen()) return
168 fromEvent(window, 'resize')
169 .pipe(debounceTime(200))
170 .subscribe(() => this.onResize())