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