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 { sortObjectComparator } from '@shared/core-utils/miscs/miscs'
   6 import { ServerConfig } from '@shared/models/server'
   7 import { ScreenService } from '../wrappers'
   8
   9 export type MenuLink = {
  10   icon: GlobalIconName
  11   label: string
  12   menuLabel: string
  13   path: string
  14   priority: number
  15 }
  16
  17 @Injectable()
  18 export class MenuService {
  19   isMenuDisplayed = true
  20   isMenuChangedByUser = false
  21   menuWidth = 240  // should be kept equal to $menu-width
  22
  23   constructor (
  24     private screenService: ScreenService
  25   ) {
  26     // Do not display menu on small or touch screens
  27     if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) {
  28       this.setMenuDisplay(false)
  29     }
  30
  31     this.handleWindowResize()
  32   }
  33
  34   toggleMenu () {
  35     this.setMenuDisplay(!this.isMenuDisplayed)
  36     this.isMenuChangedByUser = true
  37   }
  38
  39   isDisplayed () {
  40     return this.isMenuDisplayed
  41   }
  42
  43   setMenuDisplay (display: boolean) {
  44     this.isMenuDisplayed = display
  45
  46     if (!this.screenService.isInTouchScreen()) return
  47
  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) })
  52       return
  53     }
  54
  55     document.body.classList.remove('menu-open')
  56   }
  57
  58   onResize () {
  59     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
  60   }
  61
  62   buildCommonLinks (config: ServerConfig) {
  63     let entries: MenuLink[] = [
  64       {
  65         icon: 'globe' as 'globe',
  66         label: $localize`Discover videos`,
  67         menuLabel: $localize`Discover`,
  68         path: '/videos/overview',
  69         priority: 150
  70       },
  71       {
  72         icon: 'trending' as 'trending',
  73         label: $localize`Trending videos`,
  74         menuLabel: $localize`Trending`,
  75         path: '/videos/trending',
  76         priority: 140
  77       },
  78       {
  79         icon: 'recently-added' as 'recently-added',
  80         label: $localize`Recently added videos`,
  81         menuLabel: $localize`Recently added`,
  82         path: '/videos/recently-added',
  83         priority: 130
  84       },
  85       {
  86         icon: 'local' as 'local',
  87         label: $localize`Local videos`,
  88         menuLabel: $localize`Local videos`,
  89         path: '/videos/local',
  90         priority: 120
  91       }
  92     ]
  93
  94     if (config.homepage.enabled) {
  95       entries.push({
  96         icon: 'home' as 'home',
  97         label: $localize`Home`,
  98         menuLabel: $localize`Home`,
  99         path: '/home',
 100         priority: 160
 101       })
 102     }
 103
 104     entries = entries.sort(sortObjectComparator('priority', 'desc'))
 105
 106     return entries
 107   }
 108
 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
 112
 113     fromEvent(window, 'resize')
 114       .pipe(debounceTime(200))
 115       .subscribe(() => this.onResize())
 116   }
 117 }