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

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