X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fmenu%2Fmenu.component.ts;h=8fa1de3264baeeabbf26c89a4b5b50a8feb9db20;hb=746018f6b81b40e8858303662ac9ec5ce59ac6eb;hp=5f3dfc52a599acd87ebfb5faecd751090405326b;hpb=d3217560a611b94f888ecf3de93b428a7521d4de;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 5f3dfc52a..8fa1de326 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -1,48 +1,81 @@ +import { HotkeysService } from 'angular2-hotkeys' +import * as debug from 'debug' +import { switchMap } from 'rxjs/operators' +import { ViewportScroller } from '@angular/common' import { Component, OnInit, ViewChild } from '@angular/core' -import { UserRight } from '../../../../shared/models/users/user-right.enum' -import { AuthService, AuthStatus, RedirectService, ServerService } from '../core' -import { User } from '@app/shared/users/user.model' -import { UserService } from '@app/shared/users/user.service' +import { Router } from '@angular/router' +import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core' +import { scrollToTop } from '@app/helpers' import { LanguageChooserComponent } from '@app/menu/language-chooser.component' -import { HotkeysService } from 'angular2-hotkeys' -import { ServerConfig, VideoConstant } from '@shared/models' import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component' -import { I18n } from '@ngx-translate/i18n-polyfill' +import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service' +import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' +import { ServerConfig, UserRight, VideoConstant } from '@shared/models' + +const logger = debug('peertube:menu:MenuComponent') @Component({ selector: 'my-menu', templateUrl: './menu.component.html', - styleUrls: [ './menu.component.scss' ] + styleUrls: ['./menu.component.scss'] }) export class MenuComponent implements OnInit { @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent + @ViewChild('dropdown') dropdown: NgbDropdown - user: User + user: AuthUser isLoggedIn: boolean userHasAdminAccess = false helpVisible = false - languages: VideoConstant[] = [] + videoLanguages: string[] = [] + nsfwPolicy: string + + currentInterfaceLanguage: string + + private languages: VideoConstant[] = [] private serverConfig: ServerConfig - private routesPerRight: { [ role in UserRight ]?: string } = { + private routesPerRight: { [role in UserRight]?: string } = { [UserRight.MANAGE_USERS]: '/admin/users', [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends', - [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/moderation/video-abuses', - [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/moderation/video-blacklist', + [UserRight.MANAGE_ABUSES]: '/admin/moderation/abuses', + [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/moderation/video-blocks', [UserRight.MANAGE_JOBS]: '/admin/jobs', [UserRight.MANAGE_CONFIGURATION]: '/admin/config' } constructor ( + private viewportScroller: ViewportScroller, private authService: AuthService, private userService: UserService, private serverService: ServerService, private redirectService: RedirectService, private hotkeysService: HotkeysService, - private i18n: I18n - ) {} + private screenService: ScreenService, + private menuService: MenuService, + private modalService: PeertubeModalService, + private router: Router + ) { } + + get isInMobileView () { + return this.screenService.isInMobileView() + } + + get dropdownContainer () { + if (this.isInMobileView) return null + + return 'body' as 'body' + } + + get language () { + return this.languageChooserModal.getCurrentLanguage() + } + + get instanceName () { + return this.serverConfig.instance.name + } ngOnInit () { this.serverConfig = this.serverService.getTmpConfig() @@ -50,59 +83,58 @@ export class MenuComponent implements OnInit { .subscribe(config => this.serverConfig = config) this.isLoggedIn = this.authService.isLoggedIn() - if (this.isLoggedIn === true) this.user = this.authService.getUser() - this.computeIsUserHasAdminAccess() + if (this.isLoggedIn === true) { + this.user = this.authService.getUser() + + this.computeNSFWPolicy() + this.computeVideosLink() + } + + this.computeAdminAccess() + + this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage() this.authService.loginChangedSource.subscribe( status => { if (status === AuthStatus.LoggedIn) { this.isLoggedIn = true this.user = this.authService.getUser() - this.computeIsUserHasAdminAccess() - console.log('Logged in.') + + this.computeAdminAccess() + this.computeVideosLink() + + logger('Logged in.') } else if (status === AuthStatus.LoggedOut) { this.isLoggedIn = false this.user = undefined - this.computeIsUserHasAdminAccess() - console.log('Logged out.') + + this.computeAdminAccess() + + logger('Logged out.') } else { console.error('Unknown auth status: ' + status) } } ) - this.hotkeysService.cheatSheetToggle.subscribe(isOpen => this.helpVisible = isOpen) + this.hotkeysService.cheatSheetToggle + .subscribe(isOpen => this.helpVisible = isOpen) - this.serverService.getVideoLanguages().subscribe(languages => this.languages = languages) - } + this.serverService.getVideoLanguages() + .subscribe(languages => { + this.languages = languages - get language () { - return this.languageChooserModal.getCurrentLanguage() - } + this.authService.userInformationLoaded + .subscribe(() => this.buildUserLanguages()) + }) - get videoLanguages (): string[] { - if (!this.user) return - if (!this.user.videoLanguages) return [this.i18n('any language')] - return this.user.videoLanguages - .map(locale => this.langForLocale(locale)) - .map(value => value === undefined ? '?' : value) - } - - get nsfwPolicy () { - if (!this.user) return - switch (this.user.nsfwPolicy) { - case 'do_not_list': - return this.i18n('hide') - case 'blur': - return this.i18n('blur') - case 'display': - return this.i18n('display') - } + this.modalService.openQuickSettingsSubject + .subscribe(() => this.openQuickSettings()) } isRegistrationAllowed () { return this.serverConfig.signup.allowed && - this.serverConfig.signup.allowedForCurrentIP + this.serverConfig.signup.allowedForCurrentIP } getFirstAdminRightAvailable () { @@ -112,7 +144,7 @@ export class MenuComponent implements OnInit { const adminRights = [ UserRight.MANAGE_USERS, UserRight.MANAGE_SERVER_FOLLOW, - UserRight.MANAGE_VIDEO_ABUSES, + UserRight.MANAGE_ABUSES, UserRight.MANAGE_VIDEO_BLACKLIST, UserRight.MANAGE_JOBS, UserRight.MANAGE_CONFIGURATION @@ -156,18 +188,109 @@ export class MenuComponent implements OnInit { toggleUseP2P () { if (!this.user) return this.user.webTorrentEnabled = !this.user.webTorrentEnabled - this.userService.updateMyProfile({ - webTorrentEnabled: this.user.webTorrentEnabled - }).subscribe(() => this.authService.refreshUserInformation()) + + this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled }) + .subscribe(() => this.authService.refreshUserInformation()) + } + + langForLocale (localeId: string) { + if (localeId === '_unknown') return $localize`Unknown` + + 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() + } } - langForLocale(localeId: string) { - return this.languages.find(lang => lang.id = localeId).label + // 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 = () => { + 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) + } } - private computeIsUserHasAdminAccess () { + private buildUserLanguages () { + if (!this.user) { + this.videoLanguages = [] + return + } + + if (!this.user.videoLanguages) { + this.videoLanguages = [$localize`any language`] + 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.') + }) + } + + 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 + } + } }