From 68f6c87a27bd3616644368154914a683001f8aa6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 27 Nov 2020 15:31:09 +0100 Subject: Various front optimizations --- client/src/app/app.component.ts | 2 +- client/src/app/app.module.ts | 3 +- client/src/app/core/routing/redirect.service.ts | 9 +++ client/src/app/menu/menu.component.html | 6 +- client/src/app/menu/menu.component.ts | 65 +++++++++++----------- .../shared-main/date/date-toggle.component.html | 5 +- .../shared-main/date/date-toggle.component.ts | 16 +++--- client/src/main.ts | 12 +++- 8 files changed, 69 insertions(+), 49 deletions(-) (limited to 'client') diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 75f4bdfe6..c5cb54ddd 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Hotkey, HotkeysService } from 'angular2-hotkeys' import { concat } from 'rxjs' -import { filter, first, map, pairwise } from 'rxjs/operators' +import { filter, first, map, pairwise, tap } 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' diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 5c4616153..3f874856d 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -1,11 +1,10 @@ import 'focus-visible' import { APP_BASE_HREF, registerLocaleData } from '@angular/common' -import { LOCALE_ID, NgModule, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core' +import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { ServerService } from '@app/core' import localeOc from '@app/helpers/locales/oc' import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core' -import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '@shared/core-utils/i18n' import { AppRoutingModule } from './app-routing.module' import { AppComponent } from './app.component' import { CoreModule } from './core' diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts index 3982cf36f..4f4b346e2 100644 --- a/client/src/app/core/routing/redirect.service.ts +++ b/client/src/app/core/routing/redirect.service.ts @@ -11,6 +11,8 @@ export class RedirectService { private previousUrl: string private currentUrl: string + private redirectingToHomepage = false + constructor ( private router: Router, private serverService: ServerService @@ -56,10 +58,17 @@ export class RedirectService { } redirectToHomepage (skipLocationChange = false) { + if (this.redirectingToHomepage) return + + this.redirectingToHomepage = true + console.log('Redirecting to %s...', RedirectService.DEFAULT_ROUTE) this.router.navigate([ RedirectService.DEFAULT_ROUTE ], { skipLocationChange }) + .then(() => this.redirectingToHomepage = false) .catch(() => { + this.redirectingToHomepage = false + console.error( 'Cannot navigate to %s, resetting default route to %s.', RedirectService.DEFAULT_ROUTE, diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 810466a72..bba5fdadf 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -12,7 +12,7 @@
@{{ user.username }}
-
+
@@ -32,7 +32,7 @@ Interface: - {{ language }} + {{ currentInterfaceLanguage }}
- Interface: {{ language }} + Interface: {{ currentInterfaceLanguage }}
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index 97a3b6d24..bdc95127b 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -28,6 +28,11 @@ export class MenuComponent implements OnInit { helpVisible = false videoLanguages: string[] = [] + nsfwPolicy: string + + loggedInMorePlacement: string + + currentInterfaceLanguage: string private languages: VideoConstant[] = [] private serverConfig: ServerConfig @@ -52,37 +57,6 @@ export class MenuComponent implements OnInit { private router: Router ) { } - get isInMobileView () { - return this.screenService.isInMobileView() - } - - get placement () { - if (this.isInMobileView) { - return 'left-top auto' - } else { - return 'right-top auto' - } - } - - get language () { - return this.languageChooserModal.getCurrentLanguage() - } - - get nsfwPolicy () { - if (!this.user) return - - switch (this.user.nsfwPolicy) { - case 'do_not_list': - return $localize`hide` - - case 'blur': - return $localize`blur` - - case 'display': - return $localize`display` - } - } - get instanceName () { return this.serverConfig.instance.name } @@ -95,11 +69,19 @@ export class MenuComponent implements OnInit { this.isLoggedIn = this.authService.isLoggedIn() if (this.isLoggedIn === true) { this.user = this.authService.getUser() + + this.computeNSFWPolicy() this.computeVideosLink() } this.computeAdminAccess() + this.loggedInMorePlacement = this.screenService.isInMobileView() + ? 'left-top auto' + : 'right-top auto' + + this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage() + this.authService.loginChangedSource.subscribe( status => { if (status === AuthStatus.LoggedIn) { @@ -252,4 +234,25 @@ export class MenuComponent implements OnInit { 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 + } + } } diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.html b/client/src/app/shared/shared-main/date/date-toggle.component.html index ebd4ce442..14b6e7d7a 100644 --- a/client/src/app/shared/shared-main/date/date-toggle.component.html +++ b/client/src/app/shared/shared-main/date/date-toggle.component.html @@ -1,6 +1,7 @@ +> + {{ getContent() }} + diff --git a/client/src/app/shared/shared-main/date/date-toggle.component.ts b/client/src/app/shared/shared-main/date/date-toggle.component.ts index bedf0ba4e..53f25f0ad 100644 --- a/client/src/app/shared/shared-main/date/date-toggle.component.ts +++ b/client/src/app/shared/shared-main/date/date-toggle.component.ts @@ -7,7 +7,7 @@ import { FromNowPipe } from '../angular/from-now.pipe' templateUrl: './date-toggle.component.html', styleUrls: [ './date-toggle.component.scss' ] }) -export class DateToggleComponent implements OnInit, OnChanges { +export class DateToggleComponent implements OnChanges { @Input() date: Date @Input() toggled = false @@ -19,10 +19,6 @@ export class DateToggleComponent implements OnInit, OnChanges { private fromNowPipe: FromNowPipe ) { } - ngOnInit () { - this.updateDates() - } - ngOnChanges () { this.updateDates() } @@ -32,15 +28,19 @@ export class DateToggleComponent implements OnInit, OnChanges { } getTitle () { - return this.toggled ? this.dateRelative : this.dateAbsolute + return this.toggled + ? this.dateRelative + : this.dateAbsolute } getContent () { - return this.toggled ? this.dateAbsolute : this.dateRelative + return this.toggled + ? this.dateAbsolute + : this.dateRelative } private updateDates () { this.dateRelative = this.fromNowPipe.transform(this.date) - this.dateAbsolute = this.datePipe.transform(this.date, 'long') + this.dateAbsolute = this.date.toLocaleDateString() } } diff --git a/client/src/main.ts b/client/src/main.ts index 2d1749c42..0fddf3aac 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -1,6 +1,6 @@ -import { enableProdMode } from '@angular/core' +import { ApplicationRef, enableProdMode } from '@angular/core' +import { enableDebugTools } from '@angular/platform-browser' import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' - import { AppModule } from './app/app.module' import { environment } from './environments/environment' @@ -27,6 +27,14 @@ const bootstrap = () => platformBrowserDynamic() }) } + if (!environment.production) { + const applicationRef = bootstrapModule.injector.get(ApplicationRef) + const componentRef = applicationRef.components[0] + + // allows to run `ng.profiler.timeChangeDetection();` + enableDebugTools(componentRef) + } + return bootstrapModule }) .catch(err => { -- cgit v1.2.3