client/src/app/menu/menu.component.ts

   1 import { HotkeysService } from 'angular2-hotkeys'
   2 import * as debug from 'debug'
   3 import { switchMap } from 'rxjs/operators'
   4 import { ViewportScroller } from '@angular/common'
   5 import { Component, OnInit, ViewChild } from '@angular/core'
   6 import { Router } from '@angular/router'
   7 import {
   8   AuthService,
   9   AuthStatus,
  10   AuthUser,
  11   HooksService,
  12   MenuSection,
  13   MenuService,
  14   RedirectService,
  15   ScreenService,
  16   ServerService,
  17   UserService
  18 } from '@app/core'
  19 import { scrollToTop } from '@app/helpers'
  20 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
  21 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
  22 import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
  23 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
  24 import { HTMLServerConfig, ServerConfig, UserRight, VideoConstant } from '@shared/models'
  25
  26 const logger = debug('peertube:menu:MenuComponent')
  27
  28 @Component({
  29   selector: 'my-menu',
  30   templateUrl: './menu.component.html',
  31   styleUrls: [ './menu.component.scss' ]
  32 })
  33 export class MenuComponent implements OnInit {
  34   @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
  35   @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent
  36   @ViewChild('dropdown') dropdown: NgbDropdown
  37
  38   user: AuthUser
  39   isLoggedIn: boolean
  40
  41   userHasAdminAccess = false
  42   helpVisible = false
  43
  44   videoLanguages: string[] = []
  45   nsfwPolicy: string
  46
  47   currentInterfaceLanguage: string
  48
  49   menuSections: MenuSection[] = []
  50
  51   private languages: VideoConstant<string>[] = []
  52
  53   private htmlServerConfig: HTMLServerConfig
  54   private serverConfig: ServerConfig
  55
  56   private routesPerRight: { [role in UserRight]?: string } = {
  57     [UserRight.MANAGE_USERS]: '/admin/users',
  58     [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends',
  59     [UserRight.MANAGE_ABUSES]: '/admin/moderation/abuses',
  60     [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/moderation/video-blocks',
  61     [UserRight.MANAGE_JOBS]: '/admin/jobs',
  62     [UserRight.MANAGE_CONFIGURATION]: '/admin/config'
  63   }
  64
  65   constructor (
  66     private viewportScroller: ViewportScroller,
  67     private authService: AuthService,
  68     private userService: UserService,
  69     private serverService: ServerService,
  70     private redirectService: RedirectService,
  71     private hotkeysService: HotkeysService,
  72     private screenService: ScreenService,
  73     private menuService: MenuService,
  74     private modalService: PeertubeModalService,
  75     private router: Router,
  76     private hooks: HooksService
  77   ) { }
  78
  79   get isInMobileView () {
  80     return this.screenService.isInMobileView()
  81   }
  82
  83   get dropdownContainer () {
  84     if (this.isInMobileView) return null
  85
  86     return 'body' as 'body'
  87   }
  88
  89   get language () {
  90     return this.languageChooserModal.getCurrentLanguage()
  91   }
  92
  93   ngOnInit () {
  94     this.htmlServerConfig = this.serverService.getHTMLConfig()
  95     this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
  96
  97     this.isLoggedIn = this.authService.isLoggedIn()
  98     this.updateUserState()
  99     this.buildMenuSections()
 100
 101     this.authService.loginChangedSource.subscribe(
 102       status => {
 103         if (status === AuthStatus.LoggedIn) {
 104           this.isLoggedIn = true
 105         } else if (status === AuthStatus.LoggedOut) {
 106           this.isLoggedIn = false
 107         }
 108
 109         this.updateUserState()
 110         this.buildMenuSections()
 111       }
 112     )
 113
 114     this.hotkeysService.cheatSheetToggle
 115       .subscribe(isOpen => this.helpVisible = isOpen)
 116
 117     this.serverService.getVideoLanguages()
 118       .subscribe(languages => {
 119         this.languages = languages
 120
 121         this.authService.userInformationLoaded
 122           .subscribe(() => this.buildUserLanguages())
 123       })
 124
 125     this.serverService.getConfig()
 126       .subscribe(config => this.serverConfig = config)
 127
 128     this.modalService.openQuickSettingsSubject
 129       .subscribe(() => this.openQuickSettings())
 130   }
 131
 132   isRegistrationAllowed () {
 133     if (!this.serverConfig) return false
 134
 135     return this.serverConfig.signup.allowed &&
 136       this.serverConfig.signup.allowedForCurrentIP
 137   }
 138
 139   getFirstAdminRightAvailable () {
 140     const user = this.authService.getUser()
 141     if (!user) return undefined
 142
 143     const adminRights = [
 144       UserRight.MANAGE_USERS,
 145       UserRight.MANAGE_SERVER_FOLLOW,
 146       UserRight.MANAGE_ABUSES,
 147       UserRight.MANAGE_VIDEO_BLACKLIST,
 148       UserRight.MANAGE_JOBS,
 149       UserRight.MANAGE_CONFIGURATION
 150     ]
 151
 152     for (const adminRight of adminRights) {
 153       if (user.hasRight(adminRight)) {
 154         return adminRight
 155       }
 156     }
 157
 158     return undefined
 159   }
 160
 161   getFirstAdminRouteAvailable () {
 162     const right = this.getFirstAdminRightAvailable()
 163
 164     return this.routesPerRight[right]
 165   }
 166
 167   logout (event: Event) {
 168     event.preventDefault()
 169
 170     this.authService.logout()
 171     // Redirect to home page
 172     this.redirectService.redirectToHomepage()
 173   }
 174
 175   openLanguageChooser () {
 176     this.languageChooserModal.show()
 177   }
 178
 179   openHotkeysCheatSheet () {
 180     this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
 181   }
 182
 183   openQuickSettings () {
 184     this.quickSettingsModal.show()
 185   }
 186
 187   toggleUseP2P () {
 188     if (!this.user) return
 189     this.user.webTorrentEnabled = !this.user.webTorrentEnabled
 190
 191     this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled })
 192       .subscribe(() => this.authService.refreshUserInformation())
 193   }
 194
 195   langForLocale (localeId: string) {
 196     if (localeId === '_unknown') return $localize`Unknown`
 197
 198     return this.languages.find(lang => lang.id === localeId).label
 199   }
 200
 201   onActiveLinkScrollToAnchor (link: HTMLAnchorElement) {
 202     const linkURL = link.getAttribute('href')
 203     const linkHash = link.getAttribute('fragment')
 204
 205     // On same url without fragment restore top scroll position
 206     if (!linkHash && this.router.url.includes(linkURL)) {
 207       scrollToTop('smooth')
 208     }
 209
 210     // On same url with fragment restore anchor scroll position
 211     if (linkHash && this.router.url === linkURL) {
 212       this.viewportScroller.scrollToAnchor(linkHash)
 213     }
 214
 215     if (this.screenService.isInSmallView()) {
 216       this.menuService.toggleMenu()
 217     }
 218   }
 219
 220   // Lock menu scroll when menu scroll to avoid fleeing / detached dropdown
 221   onMenuScrollEvent () {
 222     document.querySelector('menu').scrollTo(0, 0)
 223   }
 224
 225   onDropdownOpenChange (opened: boolean) {
 226     if (this.screenService.isInMobileView()) return
 227
 228     // Close dropdown when window scroll to avoid dropdown quick jump for re-position
 229     const onWindowScroll = () => {
 230       this.dropdown?.close()
 231       window.removeEventListener('scroll', onWindowScroll)
 232     }
 233
 234     if (opened) {
 235       window.addEventListener('scroll', onWindowScroll)
 236       document.querySelector('menu').scrollTo(0, 0) // Reset menu scroll to easy lock
 237       document.querySelector('menu').addEventListener('scroll', this.onMenuScrollEvent)
 238     } else {
 239       document.querySelector('menu').removeEventListener('scroll', this.onMenuScrollEvent)
 240     }
 241   }
 242
 243   private async buildMenuSections () {
 244     const menuSections = []
 245
 246     if (this.isLoggedIn) {
 247       menuSections.push(
 248         this.menuService.buildLibraryLinks(this.user?.canSeeVideosLink)
 249       )
 250     }
 251
 252     menuSections.push(
 253       this.menuService.buildCommonLinks(this.htmlServerConfig)
 254     )
 255
 256     this.menuSections = await this.hooks.wrapObject(menuSections, 'common', 'filter:left-menu.links.create.result')
 257   }
 258
 259   private buildUserLanguages () {
 260     if (!this.user) {
 261       this.videoLanguages = []
 262       return
 263     }
 264
 265     if (!this.user.videoLanguages) {
 266       this.videoLanguages = [ $localize`any language` ]
 267       return
 268     }
 269
 270     this.videoLanguages = this.user.videoLanguages
 271       .map(locale => this.langForLocale(locale))
 272       .map(value => value === undefined ? '?' : value)
 273   }
 274
 275   private computeAdminAccess () {
 276     const right = this.getFirstAdminRightAvailable()
 277
 278     this.userHasAdminAccess = right !== undefined
 279   }
 280
 281   private computeVideosLink () {
 282     if (!this.isLoggedIn) return
 283
 284     this.authService.userInformationLoaded
 285       .pipe(
 286         switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed()))
 287       ).subscribe(res => {
 288         if (res === true) logger('User can see videos link.')
 289         else logger('User cannot see videos link.')
 290       })
 291   }
 292
 293   private computeNSFWPolicy () {
 294     if (!this.user) {
 295       this.nsfwPolicy = null
 296       return
 297     }
 298
 299     switch (this.user.nsfwPolicy) {
 300       case 'do_not_list':
 301         this.nsfwPolicy = $localize`hide`
 302         break
 303
 304       case 'blur':
 305         this.nsfwPolicy = $localize`blur`
 306         break
 307
 308       case 'display':
 309         this.nsfwPolicy = $localize`display`
 310         break
 311     }
 312   }
 313
 314   private updateUserState () {
 315     this.user = this.isLoggedIn
 316       ? this.authService.getUser()
 317       : undefined
 318
 319     this.computeAdminAccess()
 320     this.computeNSFWPolicy()
 321     this.computeVideosLink()
 322   }
 323 }