X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.ts;h=75f4bdfe62d9b8c1e10dcf09dfb0649b58013675;hb=07098c33df3f5e00c2a150d3025abb779d0edb6c;hp=a464e90fac65fee5d3c711025b9eea93b75cac0f;hpb=b763f88dd0f455ce0ccae9cb81182c985a47c101;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index a464e90fa..75f4bdfe6 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,28 +1,23 @@ -import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core' +import { Hotkey, HotkeysService } from 'angular2-hotkeys' +import { concat } from 'rxjs' +import { filter, first, map, pairwise } from 'rxjs/operators' +import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common' +import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core' import { DomSanitizer, SafeHtml } from '@angular/platform-browser' import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } 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 { filter, map, pairwise, first } from 'rxjs/operators' -import { Hotkey, HotkeysService } from 'angular2-hotkeys' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { PlatformLocation, ViewportScroller } from '@angular/common' -import { PluginService } from '@app/core/plugins/plugin.service' +import { AuthService, MarkdownService, RedirectService, ScreenService, ServerService, ThemeService, User } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { POP_STATE_MODAL_DISMISS } from '@app/shared/misc/constants' -import { WelcomeModalComponent } from '@app/modal/welcome-modal.component' -import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component' +import { PluginService } from '@app/core/plugins/plugin.service' import { CustomModalComponent } from '@app/modal/custom-modal.component' -import { ServerConfig, UserRole } from '@shared/models' -import { User } from '@app/shared' -import { InstanceService } from '@app/shared/instance/instance.service' +import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component' +import { WelcomeModalComponent } from '@app/modal/welcome-modal.component' +import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' +import { getShortLocale, is18nPath } from '@shared/core-utils/i18n' +import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models' import { MenuService } from './core/menu/menu.service' -import { BroadcastMessageLevel } from '@shared/models/server' -import { MarkdownService } from './shared/renderer' -import { concat } from 'rxjs' -import { peertubeLocalStorage } from './shared/misc/peertube-web-storage' +import { POP_STATE_MODAL_DISMISS } from './helpers' +import { InstanceService } from './shared/shared-instance' @Component({ selector: 'my-app', @@ -42,7 +37,8 @@ export class AppComponent implements OnInit, AfterViewInit { private serverConfig: ServerConfig constructor ( - private i18n: I18n, + @Inject(DOCUMENT) private document: Document, + @Inject(LOCALE_ID) private localeId: string, private viewportScroller: ViewportScroller, private router: Router, private authService: AuthService, @@ -58,8 +54,11 @@ export class AppComponent implements OnInit, AfterViewInit { private location: PlatformLocation, private modalService: NgbModal, private markdownService: MarkdownService, + private ngbConfig: NgbConfig, public menu: MenuService - ) { } + ) { + this.ngbConfig.animation = false + } get instanceName () { return this.serverConfig.instance.name @@ -96,6 +95,8 @@ export class AppComponent implements OnInit, AfterViewInit { this.location.onPopState(() => this.modalService.dismissAll(POP_STATE_MODAL_DISMISS)) this.openModalsIfNeeded() + + this.document.documentElement.lang = getShortLocale(this.localeId) } ngAfterViewInit () { @@ -110,6 +111,7 @@ export class AppComponent implements OnInit, AfterViewInit { peertubeLocalStorage.setItem(AppComponent.BROADCAST_MESSAGE_KEY, this.serverConfig.broadcastMessage.message) this.broadcastMessage = null + this.screenService.isBroadcastMessageDisplayed = false } private initRouteEvents () { @@ -119,12 +121,17 @@ export class AppComponent implements OnInit, AfterViewInit { const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll)) scrollEvent.subscribe(e => { - if (e.position) { - return this.viewportScroller.scrollToPosition(e.position) + // scrollToAnchor first to preserve anchor position when using history navigation + if (e.anchor) { + setTimeout(() => { + this.viewportScroller.scrollToAnchor(e.anchor) + }) + + return } - if (e.anchor) { - return this.viewportScroller.scrollToAnchor(e.anchor) + if (e.position) { + return this.viewportScroller.scrollToPosition(e.position) } if (resetScroll) { @@ -176,8 +183,8 @@ export class AppComponent implements OnInit, AfterViewInit { eventsObs.pipe( filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart), - filter(() => this.screenService.isInSmallView()) - ).subscribe(() => this.menu.isMenuDisplayed = false) // User clicked on a link in the menu, change the page + filter(() => this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) + ).subscribe(() => this.menu.setMenuDisplay(false)) // User clicked on a link in the menu, change the page } private injectBroadcastMessage () { @@ -186,6 +193,7 @@ export class AppComponent implements OnInit, AfterViewInit { this.serverService.configReloaded ).subscribe(async config => { this.broadcastMessage = null + this.screenService.isBroadcastMessageDisplayed = false const messageConfig = config.broadcastMessage @@ -206,6 +214,8 @@ export class AppComponent implements OnInit, AfterViewInit { dismissable: messageConfig.dismissable, class: classes[messageConfig.level] } + + this.screenService.isBroadcastMessageDisplayed = true } }) } @@ -279,37 +289,37 @@ export class AppComponent implements OnInit, AfterViewInit { new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => { document.getElementById('search-video').focus() return false - }, undefined, this.i18n('Focus the search bar')), + }, undefined, $localize`Focus the search bar`), new Hotkey('b', (event: KeyboardEvent): boolean => { this.menu.toggleMenu() return false - }, undefined, this.i18n('Toggle the left menu')), + }, undefined, $localize`Toggle the left menu`), new Hotkey('g o', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/overview' ]) return false - }, undefined, this.i18n('Go to the discover videos page')), + }, undefined, $localize`Go to the discover videos page`), new Hotkey('g t', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/trending' ]) return false - }, undefined, this.i18n('Go to the trending videos page')), + }, undefined, $localize`Go to the trending videos page`), new Hotkey('g r', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/recently-added' ]) return false - }, undefined, this.i18n('Go to the recently added videos page')), + }, undefined, $localize`Go to the recently added videos page`), new Hotkey('g l', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/local' ]) return false - }, undefined, this.i18n('Go to the local videos page')), + }, undefined, $localize`Go to the local videos page`), new Hotkey('g u', (event: KeyboardEvent): boolean => { this.router.navigate([ '/videos/upload' ]) return false - }, undefined, this.i18n('Go to the videos upload page')) + }, undefined, $localize`Go to the videos upload page`) ]) } }