X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.ts;h=5d8e8badf757bf6692384301d994d838a5c2fab7;hb=73e09f270660c78e50e86921a5ca6b356f760c7c;hp=3c06b320e03a873b1eb94f974026e58f56f513cd;hpb=92fb909c9b4a92a00b0d0da7629e6fb003de281b;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 3c06b320e..5d8e8badf 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,9 +1,8 @@ -import { Component, OnInit, ViewContainerRef } from '@angular/core'; -import { Router } from '@angular/router'; - -import { AuthService, ConfigService } from './core'; -import { VideoService } from './videos'; -import { UserService } from './shared'; +import { Component, OnInit } from '@angular/core' +import { DomSanitizer, SafeHtml } from '@angular/platform-browser' +import { GuardsCheckStart, Router } from '@angular/router' +import { AuthService, RedirectService, ServerService } from '@app/core' +import { isInSmallView } from '@app/shared/misc/utils' @Component({ selector: 'my-app', @@ -12,7 +11,7 @@ import { UserService } from './shared'; }) export class AppComponent implements OnInit { notificationOptions = { - timeOut: 3000, + timeOut: 5000, lastOnBottom: true, clickToClose: true, maxLength: 0, @@ -22,29 +21,94 @@ export class AppComponent implements OnInit { preventDuplicates: false, preventLastDuplicates: 'visible', rtl: false - }; + } + + isMenuDisplayed = true - constructor( + customCSS: SafeHtml + + constructor ( private router: Router, private authService: AuthService, - private configService: ConfigService, - private userService: UserService, - private videoService: VideoService, - viewContainerRef: ViewContainerRef + private serverService: ServerService, + private domSanitizer: DomSanitizer, + private redirectService: RedirectService ) {} - ngOnInit() { + get serverVersion () { + return this.serverService.getConfig().serverVersion + } + + get instanceName () { + return this.serverService.getConfig().instance.name + } + + ngOnInit () { + document.getElementById('incompatible-browser').className += 'browser-ok' + + const pathname = window.location.pathname + if (!pathname || pathname === '/') { + this.redirectService.redirectToHomepage() + } + + this.authService.loadClientCredentials() + if (this.authService.isLoggedIn()) { // The service will automatically redirect to the login page if the token is not valid anymore - this.userService.checkTokenValidity(); + this.authService.refreshUserInformation() } - this.configService.loadConfig(); - this.videoService.loadVideoCategories(); - this.videoService.loadVideoLicences(); + // Load custom data from server + this.serverService.loadConfig() + this.serverService.loadVideoCategories() + this.serverService.loadVideoLanguages() + this.serverService.loadVideoLicences() + this.serverService.loadVideoPrivacies() + + // Do not display menu on small screens + if (isInSmallView()) { + this.isMenuDisplayed = false + } + + this.router.events.subscribe( + e => { + // User clicked on a link in the menu, change the page + if (e instanceof GuardsCheckStart && isInSmallView()) { + this.isMenuDisplayed = false + } + } + ) + + this.serverService.configLoaded + .subscribe(() => { + const config = this.serverService.getConfig() + + // We test customCSS in case or the admin removed the css + if (this.customCSS || config.instance.customizations.css) { + const styleTag = '' + this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag) + } + + if (config.instance.customizations.javascript) { + try { + // tslint:disable:no-eval + eval(config.instance.customizations.javascript) + } catch (err) { + console.error('Cannot eval custom JavaScript.', err) + } + } + }) } - isInAdmin() { - return this.router.url.indexOf('/admin/') !== -1; + toggleMenu () { + window.scrollTo(0, 0) + this.isMenuDisplayed = !this.isMenuDisplayed + } + + getMainColClasses () { + // Take all width is the menu is not displayed + if (this.isMenuDisplayed === false) return [ 'expanded' ] + + return [] } }