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
  13 const logger = debug('peertube:menu:MenuComponent')
  14
  15 @Component({
  16   selector: 'my-menu',
  17   templateUrl: './menu.component.html',
  18   styleUrls: ['./menu.component.scss']
  19 })
  20 export class MenuComponent implements OnInit {
  21   @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
  22   @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent
  23
  24   user: AuthUser
  25   isLoggedIn: boolean
  26
  27   userHasAdminAccess = false
  28   helpVisible = false
  29
  30   videoLanguages: string[] = []
  31
  32   private languages: VideoConstant<string>[] = []
  33   private serverConfig: ServerConfig
  34   private routesPerRight: { [role in UserRight]?: string } = {
  35     [UserRight.MANAGE_USERS]: '/admin/users',
  36     [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends',
  37     [UserRight.MANAGE_ABUSES]: '/admin/moderation/abuses',
  38     [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/moderation/video-blocks',
  39     [UserRight.MANAGE_JOBS]: '/admin/jobs',
  40     [UserRight.MANAGE_CONFIGURATION]: '/admin/config'
  41   }
  42
  43   constructor (
  44     private viewportScroller: ViewportScroller,
  45     private authService: AuthService,
  46     private userService: UserService,
  47     private serverService: ServerService,
  48     private redirectService: RedirectService,
  49     private hotkeysService: HotkeysService,
  50     private screenService: ScreenService,
  51     private menuService: MenuService,
  52     private router: Router
  53   ) { }
  54
  55   get isInMobileView () {
  56     return this.screenService.isInMobileView()
  57   }
  58
  59   get placement () {
  60     if (this.isInMobileView) {
  61       return 'left-top auto'
  62     } else {
  63       return 'right-top auto'
  64     }
  65   }
  66
  67   get language () {
  68     return this.languageChooserModal.getCurrentLanguage()
  69   }
  70
  71   get nsfwPolicy () {
  72     if (!this.user) return
  73
  74     switch (this.user.nsfwPolicy) {
  75       case 'do_not_list':
  76         return $localize`hide`
  77
  78       case 'blur':
  79         return $localize`blur`
  80
  81       case 'display':
  82         return $localize`display`
  83     }
  84   }
  85
  86   get instanceName () {
  87     return this.serverConfig.instance.name
  88   }
  89
  90   ngOnInit () {
  91     this.serverConfig = this.serverService.getTmpConfig()
  92     this.serverService.getConfig()
  93       .subscribe(config => this.serverConfig = config)
  94
  95     this.isLoggedIn = this.authService.isLoggedIn()
  96     if (this.isLoggedIn === true) {
  97       this.user = this.authService.getUser()
  98       this.computeVideosLink()
  99     }
 100
 101     this.computeAdminAccess()
 102
 103     this.authService.loginChangedSource.subscribe(
 104       status => {
 105         if (status === AuthStatus.LoggedIn) {
 106           this.isLoggedIn = true
 107           this.user = this.authService.getUser()
 108
 109           this.computeAdminAccess()
 110           this.computeVideosLink()
 111
 112           logger('Logged in.')
 113         } else if (status === AuthStatus.LoggedOut) {
 114           this.isLoggedIn = false
 115           this.user = undefined
 116
 117           this.computeAdminAccess()
 118
 119           logger('Logged out.')
 120         } else {
 121           console.error('Unknown auth status: ' + status)
 122         }
 123       }
 124     )
 125
 126     this.hotkeysService.cheatSheetToggle
 127       .subscribe(isOpen => this.helpVisible = isOpen)
 128
 129     this.serverService.getVideoLanguages()
 130       .subscribe(languages => {
 131         this.languages = languages
 132
 133         this.authService.userInformationLoaded
 134           .subscribe(() => this.buildUserLanguages())
 135       })
 136   }
 137
 138   isRegistrationAllowed () {
 139     return this.serverConfig.signup.allowed &&
 140       this.serverConfig.signup.allowedForCurrentIP
 141   }
 142
 143   getFirstAdminRightAvailable () {
 144     const user = this.authService.getUser()
 145     if (!user) return undefined
 146
 147     const adminRights = [
 148       UserRight.MANAGE_USERS,
 149       UserRight.MANAGE_SERVER_FOLLOW,
 150       UserRight.MANAGE_ABUSES,
 151       UserRight.MANAGE_VIDEO_BLACKLIST,
 152       UserRight.MANAGE_JOBS,
 153       UserRight.MANAGE_CONFIGURATION
 154     ]
 155
 156     for (const adminRight of adminRights) {
 157       if (user.hasRight(adminRight)) {
 158         return adminRight
 159       }
 160     }
 161
 162     return undefined
 163   }
 164
 165   getFirstAdminRouteAvailable () {
 166     const right = this.getFirstAdminRightAvailable()
 167
 168     return this.routesPerRight[right]
 169   }
 170
 171   logout (event: Event) {
 172     event.preventDefault()
 173
 174     this.authService.logout()
 175     // Redirect to home page
 176     this.redirectService.redirectToHomepage()
 177   }
 178
 179   openLanguageChooser () {
 180     this.languageChooserModal.show()
 181   }
 182
 183   openHotkeysCheatSheet () {
 184     this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
 185   }
 186
 187   openQuickSettings () {
 188     this.quickSettingsModal.show()
 189   }
 190
 191   toggleUseP2P () {
 192     if (!this.user) return
 193     this.user.webTorrentEnabled = !this.user.webTorrentEnabled
 194
 195     this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled })
 196       .subscribe(() => this.authService.refreshUserInformation())
 197   }
 198
 199   langForLocale (localeId: string) {
 200     if (localeId === '_unknown') return $localize`Unknown`
 201
 202     return this.languages.find(lang => lang.id === localeId).label
 203   }
 204
 205   onActiveLinkScrollToAnchor (link: HTMLAnchorElement) {
 206     const linkURL = link.getAttribute('href')
 207     const linkHash = link.getAttribute('fragment')
 208
 209     // On same url without fragment restore top scroll position
 210     if (!linkHash && this.router.url.includes(linkURL)) {
 211       scrollToTop('smooth')
 212     }
 213
 214     // On same url with fragment restore anchor scroll position
 215     if (linkHash && this.router.url === linkURL) {
 216       this.viewportScroller.scrollToAnchor(linkHash)
 217     }
 218
 219     if (this.screenService.isInSmallView()) {
 220       this.menuService.toggleMenu()
 221     }
 222   }
 223
 224   private buildUserLanguages () {
 225     if (!this.user) {
 226       this.videoLanguages = []
 227       return
 228     }
 229
 230     if (!this.user.videoLanguages) {
 231       this.videoLanguages = [$localize`any language`]
 232       return
 233     }
 234
 235     this.videoLanguages = this.user.videoLanguages
 236       .map(locale => this.langForLocale(locale))
 237       .map(value => value === undefined ? '?' : value)
 238   }
 239
 240   private computeAdminAccess () {
 241     const right = this.getFirstAdminRightAvailable()
 242
 243     this.userHasAdminAccess = right !== undefined
 244   }
 245
 246   private computeVideosLink () {
 247     this.authService.userInformationLoaded
 248       .pipe(
 249         switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed()))
 250       ).subscribe(res => {
 251         if (res === true) logger('User can see videos link.')
 252         else logger('User cannot see videos link.')
 253       })
 254   }
 255 }