client/src/app/app.component.ts

   1 import { Component, OnInit } from '@angular/core'
   2 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
   3 import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
   4 import { AuthService, RedirectService, ServerService } from '@app/core'
   5 import { is18nPath } from '../../../shared/models/i18n'
   6 import { ScreenService } from '@app/shared/misc/screen.service'
   7 import { skip } from 'rxjs/operators'
   8
   9 @Component({
  10   selector: 'my-app',
  11   templateUrl: './app.component.html',
  12   styleUrls: [ './app.component.scss' ]
  13 })
  14 export class AppComponent implements OnInit {
  15   notificationOptions = {
  16     timeOut: 5000,
  17     lastOnBottom: true,
  18     clickToClose: true,
  19     maxLength: 0,
  20     maxStack: 7,
  21     showProgressBar: false,
  22     pauseOnHover: false,
  23     preventDuplicates: false,
  24     preventLastDuplicates: 'visible',
  25     rtl: false
  26   }
  27
  28   isMenuDisplayed = true
  29
  30   customCSS: SafeHtml
  31
  32   constructor (
  33     private router: Router,
  34     private authService: AuthService,
  35     private serverService: ServerService,
  36     private domSanitizer: DomSanitizer,
  37     private redirectService: RedirectService,
  38     private screenService: ScreenService
  39   ) { }
  40
  41   get serverVersion () {
  42     return this.serverService.getConfig().serverVersion
  43   }
  44
  45   get instanceName () {
  46     return this.serverService.getConfig().instance.name
  47   }
  48
  49   get defaultRoute () {
  50     return RedirectService.DEFAULT_ROUTE
  51   }
  52
  53   ngOnInit () {
  54     document.getElementById('incompatible-browser').className += ' browser-ok'
  55
  56     this.router.events.subscribe(e => {
  57       if (e instanceof NavigationEnd) {
  58         const pathname = window.location.pathname
  59         if (!pathname || pathname === '/' || is18nPath(pathname)) {
  60           this.redirectService.redirectToHomepage(true)
  61         }
  62       }
  63     })
  64
  65     this.authService.loadClientCredentials()
  66
  67     if (this.isUserLoggedIn()) {
  68       // The service will automatically redirect to the login page if the token is not valid anymore
  69       this.authService.refreshUserInformation()
  70     }
  71
  72     // Load custom data from server
  73     this.serverService.loadConfig()
  74     this.serverService.loadVideoCategories()
  75     this.serverService.loadVideoLanguages()
  76     this.serverService.loadVideoLicences()
  77     this.serverService.loadVideoPrivacies()
  78
  79     // Do not display menu on small screens
  80     if (this.screenService.isInSmallView()) {
  81       this.isMenuDisplayed = false
  82     }
  83
  84     this.router.events.subscribe(
  85       e => {
  86         // User clicked on a link in the menu, change the page
  87         if (e instanceof GuardsCheckStart && this.screenService.isInSmallView()) {
  88           this.isMenuDisplayed = false
  89         }
  90       }
  91     )
  92
  93     // Inject JS
  94     this.serverService.configLoaded
  95         .subscribe(() => {
  96           const config = this.serverService.getConfig()
  97
  98           if (config.instance.customizations.javascript) {
  99             try {
 100               // tslint:disable:no-eval
 101               eval(config.instance.customizations.javascript)
 102             } catch (err) {
 103               console.error('Cannot eval custom JavaScript.', err)
 104             }
 105           }
 106         })
 107
 108     // Inject CSS if modified (admin config settings)
 109     this.serverService.configLoaded
 110         .pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
 111         .subscribe(() => {
 112           const headStyle = document.querySelector('style.custom-css-style')
 113           if (headStyle) headStyle.parentNode.removeChild(headStyle)
 114
 115           const config = this.serverService.getConfig()
 116
 117           // We test customCSS if the admin removed the css
 118           if (this.customCSS || config.instance.customizations.css) {
 119             const styleTag = '<style>' + config.instance.customizations.css + '</style>'
 120             this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
 121           }
 122         })
 123   }
 124
 125   isUserLoggedIn () {
 126     return this.authService.isLoggedIn()
 127   }
 128
 129   toggleMenu () {
 130     this.isMenuDisplayed = !this.isMenuDisplayed
 131   }
 132 }