X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.ts;h=66d871b4a502f896bb96ed1170cce642ffba685d;hb=900f7820814b95b07ef0bcac04036a95abfbe060;hp=5541f555822d2fcf4ea495ac632959c42e48106b;hpb=64e0f8cf12c804a7a2fa582fd954f686cea9a45b;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 5541f5558..66d871b4a 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,28 +1,24 @@ -import { Component, OnInit, ViewChild, AfterViewInit, Inject, LOCALE_ID } 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, getShortLocale } 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, DOCUMENT } from '@angular/common' -import { PluginService } from '@app/core/plugins/plugin.service' +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, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router' +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 { LoadingBarService } from '@ngx-loading-bar/core' +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', @@ -44,7 +40,6 @@ export class AppComponent implements OnInit, AfterViewInit { constructor ( @Inject(DOCUMENT) private document: Document, @Inject(LOCALE_ID) private localeId: string, - private i18n: I18n, private viewportScroller: ViewportScroller, private router: Router, private authService: AuthService, @@ -60,15 +55,19 @@ export class AppComponent implements OnInit, AfterViewInit { private location: PlatformLocation, private modalService: NgbModal, private markdownService: MarkdownService, + private ngbConfig: NgbConfig, + private loadingBar: LoadingBarService, public menu: MenuService - ) { } + ) { + this.ngbConfig.animation = false + } get instanceName () { return this.serverConfig.instance.name } - get defaultRoute () { - return RedirectService.DEFAULT_ROUTE + goToDefaultRoute () { + return this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE) } ngOnInit () { @@ -106,6 +105,12 @@ export class AppComponent implements OnInit, AfterViewInit { this.pluginService.initializeCustomModal(this.customModal) } + getToggleTitle () { + if (this.menu.isDisplayed()) return $localize`Close the left menu` + + return $localize`Open the left menu` + } + isUserLoggedIn () { return this.authService.isLoggedIn() } @@ -114,6 +119,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 () { @@ -122,14 +128,19 @@ export class AppComponent implements OnInit, AfterViewInit { const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll)) + // Handle anchors/restore position scrollEvent.subscribe(e => { - console.log(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) { @@ -170,19 +181,31 @@ export class AppComponent implements OnInit, AfterViewInit { } }) + // Homepage redirection navigationEndEvent.pipe( map(() => window.location.pathname), filter(pathname => !pathname || pathname === '/' || is18nPath(pathname)) ).subscribe(() => this.redirectService.redirectToHomepage(true)) + // Plugin hooks navigationEndEvent.subscribe(e => { this.hooks.runAction('action:router.navigation-end', 'common', { path: e.url }) }) + // Automatically hide/display the menu 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 + + // Handle lazy loaded module + eventsObs.pipe( + filter((e: Event): e is RouteConfigLoadStart => e instanceof RouteConfigLoadStart) + ).subscribe(() => this.loadingBar.useRef().start()) + + eventsObs.pipe( + filter((e: Event): e is RouteConfigLoadEnd => e instanceof RouteConfigLoadEnd) + ).subscribe(() => this.loadingBar.useRef().complete()) } private injectBroadcastMessage () { @@ -191,6 +214,7 @@ export class AppComponent implements OnInit, AfterViewInit { this.serverService.configReloaded ).subscribe(async config => { this.broadcastMessage = null + this.screenService.isBroadcastMessageDisplayed = false const messageConfig = config.broadcastMessage @@ -211,6 +235,8 @@ export class AppComponent implements OnInit, AfterViewInit { dismissable: messageConfig.dismissable, class: classes[messageConfig.level] } + + this.screenService.isBroadcastMessageDisplayed = true } }) } @@ -284,37 +310,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`) ]) } }