X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fmenu%2Fmenu.component.ts;h=2c55b9a8482f8cfaecf6bf7ed56117a93527fe3c;hb=4a53fc8204d5a3a3d5a77b3dfe128f0985153bf8;hp=3de4a78aff67ece86da9a413fd2f81be08117fe8;hpb=9a0fc8409c7a783348ec212fa9f38d0a98413467;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 3de4a78af..2c55b9a84 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -1,70 +1,135 @@ +import { HotkeysService } from 'angular2-hotkeys' +import * as debug from 'debug' +import { switchMap } from 'rxjs/operators' 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 '../shared/users/user.model' +import { AuthService, AuthStatus, AuthUser, RedirectService, ScreenService, ServerService, UserService } from '@app/core' import { LanguageChooserComponent } from '@app/menu/language-chooser.component' +import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component' +import { I18n } from '@ngx-translate/i18n-polyfill' +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') languageChooserModal: LanguageChooserComponent + @ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent + @ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent - user: User + user: AuthUser isLoggedIn: boolean + userHasAdminAccess = false + helpVisible = false + + videoLanguages: string[] = [] - private routesPerRight = { + private languages: VideoConstant[] = [] + private serverConfig: ServerConfig + private routesPerRight: { [role in UserRight]?: string } = { [UserRight.MANAGE_USERS]: '/admin/users', [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends', - [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', - [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/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' } - private theme = document.querySelector('body') - private previousTheme = { } constructor ( private authService: AuthService, + private userService: UserService, private serverService: ServerService, - private redirectService: RedirectService - ) {} + private redirectService: RedirectService, + private hotkeysService: HotkeysService, + private screenService: ScreenService, + private i18n: I18n + ) { } + + get isInMobileView () { + return this.screenService.isInMobileView() + } + + get placement () { + if (this.isInMobileView) { + return 'left-top auto' + } else { + return 'right-top auto' + } + } ngOnInit () { + 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() - this.computeIsUserHasAdminAccess() + if (this.isLoggedIn === true) { + this.user = this.authService.getUser() + this.computeVideosLink() + } + + this.computeAdminAccess() 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) } } ) - // initialise the alternative theme with dark theme colors - this.previousTheme['mainBackgroundColor'] = '#111111' - this.previousTheme['mainForegroundColor'] = '#fff' - this.previousTheme['submenuColor'] = 'rgb(32,32,32)' - this.previousTheme['inputColor'] = 'gray' - this.previousTheme['inputPlaceholderColor'] = '#fff' + this.hotkeysService.cheatSheetToggle + .subscribe(isOpen => this.helpVisible = isOpen) + + this.serverService.getVideoLanguages() + .subscribe(languages => { + this.languages = languages + + this.authService.userInformationLoaded + .subscribe(() => this.buildUserLanguages()) + }) + } + + get language () { + return this.languageChooserModal.getCurrentLanguage() + } + + 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') + } } isRegistrationAllowed () { - return this.serverService.getConfig().signup.allowed && - this.serverService.getConfig().signup.allowedForCurrentIP + return this.serverConfig.signup.allowed && + this.serverConfig.signup.allowedForCurrentIP } getFirstAdminRightAvailable () { @@ -74,8 +139,10 @@ export class MenuComponent implements OnInit { const adminRights = [ UserRight.MANAGE_USERS, UserRight.MANAGE_SERVER_FOLLOW, - UserRight.MANAGE_VIDEO_ABUSES, - UserRight.MANAGE_VIDEO_BLACKLIST + UserRight.MANAGE_ABUSES, + UserRight.MANAGE_VIDEO_BLACKLIST, + UserRight.MANAGE_JOBS, + UserRight.MANAGE_CONFIGURATION ] for (const adminRight of adminRights) { @@ -105,24 +172,57 @@ export class MenuComponent implements OnInit { this.languageChooserModal.show() } - toggleDarkTheme () { - // switch properties - this.switchProperty('mainBackgroundColor') - this.switchProperty('mainForegroundColor') - this.switchProperty('submenuColor') - this.switchProperty('inputColor') - this.switchProperty('inputPlaceholderColor') + openHotkeysCheatSheet () { + this.hotkeysService.cheatSheetToggle.next(!this.helpVisible) } - private switchProperty (property, newValue?) { - const propertyOldvalue = window.getComputedStyle(this.theme).getPropertyValue('--' + property) - this.theme.style.setProperty('--' + property, (newValue) ? newValue : this.previousTheme[property]) - this.previousTheme[property] = propertyOldvalue + openQuickSettings () { + this.quickSettingsModal.show() } - private computeIsUserHasAdminAccess () { + toggleUseP2P () { + if (!this.user) return + this.user.webTorrentEnabled = !this.user.webTorrentEnabled + + this.userService.updateMyProfile({ webTorrentEnabled: this.user.webTorrentEnabled }) + .subscribe(() => this.authService.refreshUserInformation()) + } + + langForLocale (localeId: string) { + if (localeId === '_unknown') return this.i18n('Unknown') + + return this.languages.find(lang => lang.id === localeId).label + } + + private buildUserLanguages () { + if (!this.user) { + this.videoLanguages = [] + return + } + + if (!this.user.videoLanguages) { + this.videoLanguages = [this.i18n('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.') + }) + } }