1
0
Fork 0
peertube/client/src/app/menu/menu.component.ts

297 lines
8.2 KiB
TypeScript
Raw Normal View History

import { ViewportScroller } from '@angular/common'
2020-06-23 08:10:17 -04:00
import { HotkeysService } from 'angular2-hotkeys'
import * as debug from 'debug'
import { switchMap } from 'rxjs/operators'
2018-06-28 07:59:48 -04:00
import { Component, OnInit, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
import { scrollToTop } from '@app/helpers'
import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
2018-06-28 07:59:48 -04:00
import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
2020-06-23 08:10:17 -04:00
import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
import { NgbDropdown, NgbDropdownConfig } from '@ng-bootstrap/ng-bootstrap'
const logger = debug('peertube:menu:MenuComponent')
@Component({
selector: 'my-menu',
2017-04-21 05:06:33 -04:00
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
2019-07-24 10:05:59 -04:00
@ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
@ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent
@ViewChild('dropdown') dropdown: NgbDropdown
2018-06-28 07:59:48 -04:00
user: AuthUser
isLoggedIn: boolean
userHasAdminAccess = false
2018-09-26 08:23:10 -04:00
helpVisible = false
2020-03-11 11:41:38 -04:00
videoLanguages: string[] = []
2020-11-27 09:31:09 -05:00
nsfwPolicy: string
currentInterfaceLanguage: string
2020-03-11 11:41:38 -04:00
private languages: VideoConstant<string>[] = []
2019-12-18 09:31:54 -05:00
private serverConfig: ServerConfig
private routesPerRight: { [role in UserRight]?: string } = {
[UserRight.MANAGE_USERS]: '/admin/users',
2017-11-16 11:16:42 -05:00
[UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends',
2020-07-01 10:05:30 -04:00
[UserRight.MANAGE_ABUSES]: '/admin/moderation/abuses',
[UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/moderation/video-blocks',
2018-09-19 03:53:49 -04:00
[UserRight.MANAGE_JOBS]: '/admin/jobs',
[UserRight.MANAGE_CONFIGURATION]: '/admin/config'
}
constructor (
private viewportScroller: ViewportScroller,
private authService: AuthService,
private userService: UserService,
private serverService: ServerService,
2018-09-04 17:14:31 -04:00
private redirectService: RedirectService,
private hotkeysService: HotkeysService,
private screenService: ScreenService,
private menuService: MenuService,
private dropdownConfig: NgbDropdownConfig,
private router: Router
) {
this.dropdownConfig.container = 'body'
}
get isInMobileView () {
return this.screenService.isInMobileView()
}
get dropdownContainer () {
if (this.isInMobileView) {
return null
} else {
return this.dropdownConfig.container
}
}
get language () {
return this.languageChooserModal.getCurrentLanguage()
}
get instanceName () {
return this.serverConfig.instance.name
}
ngOnInit () {
2019-12-18 09:31:54 -05:00
this.serverConfig = this.serverService.getTmpConfig()
this.serverService.getConfig()
.subscribe(config => this.serverConfig = config)
this.isLoggedIn = this.authService.isLoggedIn()
if (this.isLoggedIn === true) {
this.user = this.authService.getUser()
2020-11-27 09:31:09 -05:00
this.computeNSFWPolicy()
this.computeVideosLink()
}
this.computeAdminAccess()
2020-11-27 09:31:09 -05:00
this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
this.authService.loginChangedSource.subscribe(
status => {
if (status === AuthStatus.LoggedIn) {
this.isLoggedIn = true
2017-12-01 03:20:19 -05:00
this.user = this.authService.getUser()
this.computeAdminAccess()
this.computeVideosLink()
logger('Logged in.')
} else if (status === AuthStatus.LoggedOut) {
this.isLoggedIn = false
2017-12-01 03:20:19 -05:00
this.user = undefined
this.computeAdminAccess()
logger('Logged out.')
} else {
console.error('Unknown auth status: ' + status)
}
}
)
2018-09-26 08:23:10 -04:00
2020-03-11 11:41:38 -04:00
this.hotkeysService.cheatSheetToggle
.subscribe(isOpen => this.helpVisible = isOpen)
2020-03-11 11:41:38 -04:00
this.serverService.getVideoLanguages()
.subscribe(languages => {
this.languages = languages
this.authService.userInformationLoaded
.subscribe(() => this.buildUserLanguages())
})
}
isRegistrationAllowed () {
2019-12-18 09:31:54 -05:00
return this.serverConfig.signup.allowed &&
this.serverConfig.signup.allowedForCurrentIP
2017-04-10 14:29:33 -04:00
}
getFirstAdminRightAvailable () {
const user = this.authService.getUser()
if (!user) return undefined
const adminRights = [
UserRight.MANAGE_USERS,
2017-11-16 11:16:42 -05:00
UserRight.MANAGE_SERVER_FOLLOW,
2020-07-01 10:05:30 -04:00
UserRight.MANAGE_ABUSES,
UserRight.MANAGE_VIDEO_BLACKLIST,
2018-09-19 03:53:49 -04:00
UserRight.MANAGE_JOBS,
UserRight.MANAGE_CONFIGURATION
]
for (const adminRight of adminRights) {
if (user.hasRight(adminRight)) {
return adminRight
}
}
return undefined
}
getFirstAdminRouteAvailable () {
const right = this.getFirstAdminRightAvailable()
return this.routesPerRight[right]
}
2017-12-01 03:20:19 -05:00
logout (event: Event) {
event.preventDefault()
this.authService.logout()
// Redirect to home page
2018-06-04 10:21:17 -04:00
this.redirectService.redirectToHomepage()
}
2018-06-28 07:59:48 -04:00
openLanguageChooser () {
this.languageChooserModal.show()
}
2018-09-26 08:23:10 -04:00
openHotkeysCheatSheet () {
this.hotkeysService.cheatSheetToggle.next(!this.helpVisible)
}
openQuickSettings () {
this.quickSettingsModal.show()
}
toggleUseP2P () {
if (!this.user) return
this.user.webTorrentEnabled = !this.user.webTorrentEnabled
2020-03-11 11:41:38 -04:00
this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled })
.subscribe(() => this.authService.refreshUserInformation())
}
2020-02-28 07:54:31 -05:00
langForLocale (localeId: string) {
if (localeId === '_unknown') return $localize`Unknown`
2020-04-16 11:04:02 -04:00
2020-03-11 11:41:38 -04:00
return this.languages.find(lang => lang.id === localeId).label
}
onActiveLinkScrollToAnchor (link: HTMLAnchorElement) {
const linkURL = link.getAttribute('href')
const linkHash = link.getAttribute('fragment')
// On same url without fragment restore top scroll position
if (!linkHash && this.router.url.includes(linkURL)) {
scrollToTop('smooth')
}
// On same url with fragment restore anchor scroll position
if (linkHash && this.router.url === linkURL) {
this.viewportScroller.scrollToAnchor(linkHash)
}
if (this.screenService.isInSmallView()) {
this.menuService.toggleMenu()
}
}
// Lock menu scroll when menu scroll to avoid fleeing / detached dropdown
onMenuScrollEvent () {
document.querySelector('menu').scrollTo(0, 0)
}
onDropdownOpenChange (opened: boolean) {
if (this.screenService.isInMobileView()) return
// Close dropdown when window scroll to avoid dropdown quick jump for re-position
const onWindowScroll = () => {
2021-01-14 09:35:03 -05:00
this.dropdown?.close()
window.removeEventListener('scroll', onWindowScroll)
}
if (opened) {
window.addEventListener('scroll', onWindowScroll)
document.querySelector('menu').scrollTo(0, 0) // Reset menu scroll to easy lock
document.querySelector('menu').addEventListener('scroll', this.onMenuScrollEvent)
} else {
document.querySelector('menu').removeEventListener('scroll', this.onMenuScrollEvent)
}
}
2020-03-11 11:41:38 -04:00
private buildUserLanguages () {
if (!this.user) {
this.videoLanguages = []
return
}
if (!this.user.videoLanguages) {
this.videoLanguages = [$localize`any language`]
2020-03-11 11:41:38 -04:00
return
}
this.videoLanguages = this.user.videoLanguages
.map(locale => this.langForLocale(locale))
.map(value => value === undefined ? '?' : value)
}
private computeAdminAccess () {
const right = this.getFirstAdminRightAvailable()
this.userHasAdminAccess = right !== undefined
}
private computeVideosLink () {
this.authService.userInformationLoaded
.pipe(
switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed()))
).subscribe(res => {
if (res === true) logger('User can see videos link.')
else logger('User cannot see videos link.')
})
}
2020-11-27 09:31:09 -05:00
private computeNSFWPolicy () {
if (!this.user) {
this.nsfwPolicy = null
return
}
switch (this.user.nsfwPolicy) {
case 'do_not_list':
this.nsfwPolicy = $localize`hide`
break
case 'blur':
this.nsfwPolicy = $localize`blur`
break
case 'display':
this.nsfwPolicy = $localize`display`
break
}
}
}