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   ngOnInit () {
  65     this.serverConfig = this.serverService.getTmpConfig()
  66     this.serverService.getConfig()
  67       .subscribe(config => this.serverConfig = config)
  68
  69     this.isLoggedIn = this.authService.isLoggedIn()
  70     if (this.isLoggedIn === true) {
  71       this.user = this.authService.getUser()
  72       this.computeVideosLink()
  73     }
  74
  75     this.computeAdminAccess()
  76
  77     this.authService.loginChangedSource.subscribe(
  78       status => {
  79         if (status === AuthStatus.LoggedIn) {
  80           this.isLoggedIn = true
  81           this.user = this.authService.getUser()
  82
  83           this.computeAdminAccess()
  84           this.computeVideosLink()
  85
  86           logger('Logged in.')
  87         } else if (status === AuthStatus.LoggedOut) {
  88           this.isLoggedIn = false
  89           this.user = undefined
  90
  91           this.computeAdminAccess()
  92
  93           logger('Logged out.')
  94         } else {
  95           console.error('Unknown auth status: ' + status)
  96         }
  97       }
  98     )
  99
 100     this.hotkeysService.cheatSheetToggle
 101       .subscribe(isOpen => this.helpVisible = isOpen)
 102
 103     this.serverService.getVideoLanguages()
 104       .subscribe(languages => {
 105         this.languages = languages
 106
 107         this.authService.userInformationLoaded
 108           .subscribe(() => this.buildUserLanguages())
 109       })
 110   }
 111
 112   get language () {
 113     return this.languageChooserModal.getCurrentLanguage()
 114   }
 115
 116   get nsfwPolicy () {
 117     if (!this.user) return
 118
 119     switch (this.user.nsfwPolicy) {
 120       case 'do_not_list':
 121         return $localize`hide`
 122
 123       case 'blur':
 124         return $localize`blur`
 125
 126       case 'display':
 127         return $localize`display`
 128     }
 129   }
 130
 131   isRegistrationAllowed () {
 132     return this.serverConfig.signup.allowed &&
 133       this.serverConfig.signup.allowedForCurrentIP
 134   }
 135
 136   getFirstAdminRightAvailable () {
 137     const user = this.authService.getUser()
 138     if (!user) return undefined
 139
 140     const adminRights = [
 141       UserRight.MANAGE_USERS,
 142       UserRight.MANAGE_SERVER_FOLLOW,
 143       UserRight.MANAGE_ABUSES,
 144       UserRight.MANAGE_VIDEO_BLACKLIST,
 145       UserRight.MANAGE_JOBS,
 146       UserRight.MANAGE_CONFIGURATION
 147     ]
 148
 149     for (const adminRight of adminRights) {
 150       if (user.hasRight(adminRight)) {
 151         return adminRight
 152       }
 153     }
 154
 155     return undefined
 156   }
 157
 158   getFirstAdminRouteAvailable () {
 159     const right = this.getFirstAdminRightAvailable()
 160
 161     return this.routesPerRight[right]
 162   }
 163
 164   logout (event: Event) {
 165     event.preventDefault()
 166
 167     this.authService.logout()
 168     // Redirect to home page
 169     this.redirectService.redirectToHomepage()
 170   }
 171
 172   openLanguageChooser () {
 173     this.languageChooserModal.show()
 174   }
 175
 176   openHotkeysCheatSheet () {
 177     this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
 178   }
 179
 180   openQuickSettings () {
 181     this.quickSettingsModal.show()
 182   }
 183
 184   toggleUseP2P () {
 185     if (!this.user) return
 186     this.user.webTorrentEnabled = !this.user.webTorrentEnabled
 187
 188     this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled })
 189       .subscribe(() => this.authService.refreshUserInformation())
 190   }
 191
 192   langForLocale (localeId: string) {
 193     if (localeId === '_unknown') return $localize`Unknown`
 194
 195     return this.languages.find(lang => lang.id === localeId).label
 196   }
 197
 198   onSameUrlRestoreScrollPosition (link: HTMLAnchorElement) {
 199     const linkURL = link.getAttribute('href')
 200     const linkHash = link.getAttribute('fragment')
 201
 202     // On same url without fragment restore top scroll position
 203     if (!linkHash && this.router.url.includes(linkURL)) {
 204       window.scrollTo({
 205         left: 0,
 206         top: 0,
 207         behavior: 'smooth'
 208       })
 209     }
 210
 211     // On same url with fragment restore anchor scroll position
 212     if (linkHash && this.router.url === linkURL) {
 213       const anchor = document.getElementById(link.getAttribute('fragment'))
 214       anchor.scrollIntoView({ behavior: 'smooth', inline: 'nearest' })
 215     }
 216
 217     if (this.screenService.isInSmallView()) {
 218       this.menuService.toggleMenu()
 219     }
 220   }
 221
 222   private buildUserLanguages () {
 223     if (!this.user) {
 224       this.videoLanguages = []
 225       return
 226     }
 227
 228     if (!this.user.videoLanguages) {
 229       this.videoLanguages = [$localize`any language`]
 230       return
 231     }
 232
 233     this.videoLanguages = this.user.videoLanguages
 234       .map(locale => this.langForLocale(locale))
 235       .map(value => value === undefined ? '?' : value)
 236   }
 237
 238   private computeAdminAccess () {
 239     const right = this.getFirstAdminRightAvailable()
 240
 241     this.userHasAdminAccess = right !== undefined
 242   }
 243
 244   private computeVideosLink () {
 245     this.authService.userInformationLoaded
 246       .pipe(
 247         switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed()))
 248       ).subscribe(res => {
 249         if (res === true) logger('User can see videos link.')
 250         else logger('User cannot see videos link.')
 251       })
 252   }
 253 }