X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.ts;h=dc4d0bf6a39b94685ebbe418533c2755ab9cf137;hb=14d1b7b95a096b933ea353a715f4868a89dc5822;hp=d4841a69b0d9fcff5d10f803d99d14813c01b509;hpb=1a00c5619f11c5faecd384b011e037a8ed5fde46;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index d4841a69b..dc4d0bf6a 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -4,8 +4,10 @@ import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router' import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core' import { is18nPath } from '../../../shared/models/i18n' import { ScreenService } from '@app/shared/misc/screen.service' -import { skip } from 'rxjs/operators' +import { skip, debounceTime } from 'rxjs/operators' import { HotkeysService, Hotkey } from 'angular2-hotkeys' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { fromEvent } from 'rxjs' @Component({ selector: 'my-app', @@ -27,10 +29,12 @@ export class AppComponent implements OnInit { } isMenuDisplayed = true + isMenuChangedByUser = false customCSS: SafeHtml constructor ( + private i18n: I18n, private router: Router, private authService: AuthService, private serverService: ServerService, @@ -45,6 +49,11 @@ export class AppComponent implements OnInit { return this.serverService.getConfig().serverVersion } + get serverCommit () { + const commit = this.serverService.getConfig().serverCommit || '' + return (commit !== '') ? '...' + commit : commit + } + get instanceName () { return this.serverService.getConfig().instance.name } @@ -128,40 +137,40 @@ export class AppComponent implements OnInit { new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => { document.getElementById('search-video').focus() return false - }, undefined, 'Focus the search bar'), + }, undefined, this.i18n('Focus the search bar')), new Hotkey('b', (event: KeyboardEvent): boolean => { this.toggleMenu() return false - }, undefined, 'Toggle the left menu'), - new Hotkey('g s', (event: KeyboardEvent): boolean => { - this.router.navigate([ '/videos/subscriptions' ]) - return false - }, undefined, 'Go to the subscriptions videos page'), + }, undefined, this.i18n('Toggle the left menu')), new Hotkey('g o', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/overview' ]) return false - }, undefined, 'Go to the videos overview page'), + }, undefined, this.i18n('Go to the videos overview page')), new Hotkey('g t', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/trending' ]) return false - }, undefined, 'Go to the trending videos page'), + }, undefined, this.i18n('Go to the trending videos page')), new Hotkey('g r', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/recently-added' ]) return false - }, undefined, 'Go to the recently added videos page'), + }, undefined, this.i18n('Go to the recently added videos page')), new Hotkey('g l', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/local' ]) return false - }, undefined, 'Go to the local videos page'), + }, undefined, this.i18n('Go to the local videos page')), new Hotkey('g u', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/upload' ]) return false - }, undefined, 'Go to the videos upload page'), - new Hotkey('T', (event: KeyboardEvent): boolean => { + }, undefined, this.i18n('Go to the videos upload page')), + new Hotkey('shift+t', (event: KeyboardEvent): boolean => { this.themeService.toggleDarkTheme() return false - }, undefined, 'Toggle Dark theme') + }, undefined, this.i18n('Toggle Dark theme')) ]) + + fromEvent(window, 'resize') + .pipe(debounceTime(200)) + .subscribe(() => this.onResize()) } isUserLoggedIn () { @@ -170,5 +179,10 @@ export class AppComponent implements OnInit { toggleMenu () { this.isMenuDisplayed = !this.isMenuDisplayed + this.isMenuChangedByUser = true + } + + onResize () { + this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser } }