client/src/app/core/menu/menu.service.ts

   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'
   7
   8 export type MenuLink = {
   9   icon: GlobalIconName
  10   iconClass?: string
  11
  12   label: string
  13   // Used by the left menu for example
  14   shortLabel: string
  15
  16   path: string
  17 }
  18
  19 export type MenuSection = {
  20   key: string
  21   title: string
  22   links: MenuLink[]
  23 }
  24
  25 @Injectable()
  26 export class MenuService {
  27   isMenuDisplayed = true
  28   isMenuChangedByUser = false
  29   menuWidth = 240 // should be kept equal to $menu-width
  30
  31   constructor (
  32     private screenService: ScreenService
  33   ) {
  34     // Do not display menu on small or touch screens
  35     if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) {
  36       this.setMenuDisplay(false)
  37     }
  38
  39     this.handleWindowResize()
  40   }
  41
  42   toggleMenu () {
  43     this.setMenuDisplay(!this.isMenuDisplayed)
  44     this.isMenuChangedByUser = true
  45   }
  46
  47   isDisplayed () {
  48     return this.isMenuDisplayed
  49   }
  50
  51   setMenuDisplay (display: boolean) {
  52     this.isMenuDisplayed = display
  53
  54     if (!this.screenService.isInTouchScreen()) return
  55
  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))
  60       return
  61     }
  62
  63     document.body.classList.remove('menu-open')
  64   }
  65
  66   onResize () {
  67     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
  68   }
  69
  70   buildLibraryLinks (userCanSeeVideosLink: boolean): MenuSection {
  71     let links: MenuLink[] = []
  72
  73     if (userCanSeeVideosLink) {
  74       links.push({
  75         path: '/my-library/video-channels',
  76         icon: 'channel' as GlobalIconName,
  77         iconClass: 'channel-icon',
  78         shortLabel: $localize`Channels`,
  79         label: $localize`My channels`
  80       })
  81
  82       links.push({
  83         path: '/my-library/videos',
  84         icon: 'videos' as GlobalIconName,
  85         shortLabel: $localize`Videos`,
  86         label: $localize`My videos`
  87       })
  88     }
  89
  90     links = links.concat([
  91       {
  92         path: '/my-library/video-playlists',
  93         icon: 'playlists' as GlobalIconName,
  94         shortLabel: $localize`Playlists`,
  95         label: $localize`My playlists`
  96       },
  97       {
  98         path: '/videos/subscriptions',
  99         icon: 'subscriptions' as GlobalIconName,
 100         shortLabel: $localize`Subscriptions`,
 101         label: $localize`My subscriptions`
 102       },
 103       {
 104         path: '/my-library/history/videos',
 105         icon: 'history' as GlobalIconName,
 106         shortLabel: $localize`History`,
 107         label: $localize`My history`
 108       }
 109     ])
 110
 111     return {
 112       key: 'in-my-library',
 113       title: $localize`In my library`,
 114       links
 115     }
 116   }
 117
 118   buildCommonLinks (config: HTMLServerConfig): MenuSection {
 119     let links: MenuLink[] = []
 120
 121     if (config.homepage.enabled) {
 122       links.push({
 123         icon: 'home' as 'home',
 124         label: $localize`Home`,
 125         shortLabel: $localize`Home`,
 126         path: '/home'
 127       })
 128     }
 129
 130     links = links.concat([
 131       {
 132         icon: 'globe' as 'globe',
 133         label: $localize`Discover videos`,
 134         shortLabel: $localize`Discover`,
 135         path: '/videos/overview'
 136       },
 137       {
 138         icon: 'trending' as 'trending',
 139         label: $localize`Trending videos`,
 140         shortLabel: $localize`Trending`,
 141         path: '/videos/trending'
 142       },
 143       {
 144         icon: 'add' as 'add',
 145         label: $localize`Recently added videos`,
 146         shortLabel: $localize`Recently added`,
 147         path: '/videos/recently-added'
 148       },
 149       {
 150         icon: 'local' as 'local',
 151         label: $localize`Local videos`,
 152         shortLabel: $localize`Local videos`,
 153         path: '/videos/local'
 154       }
 155     ])
 156
 157     return {
 158       key: 'on-instance',
 159       title: $localize`ON ${config.instance.name}`,
 160       links
 161     }
 162   }
 163
 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
 167
 168     fromEvent(window, 'resize')
 169       .pipe(debounceTime(200))
 170       .subscribe(() => this.onResize())
 171   }
 172 }