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