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 import { HotkeysService, Hotkey } from 'angular2-hotkeys'
   9
  10 @Component({
  11   selector: 'my-app',
  12   templateUrl: './app.component.html',
  13   styleUrls: [ './app.component.scss' ]
  14 })
  15 export class AppComponent implements OnInit {
  16   notificationOptions = {
  17     timeOut: 5000,
  18     lastOnBottom: true,
  19     clickToClose: true,
  20     maxLength: 0,
  21     maxStack: 7,
  22     showProgressBar: false,
  23     pauseOnHover: false,
  24     preventDuplicates: false,
  25     preventLastDuplicates: 'visible',
  26     rtl: false
  27   }
  28
  29   isMenuDisplayed = true
  30
  31   customCSS: SafeHtml
  32
  33   constructor (
  34     private router: Router,
  35     private authService: AuthService,
  36     private serverService: ServerService,
  37     private domSanitizer: DomSanitizer,
  38     private redirectService: RedirectService,
  39     private screenService: ScreenService,
  40     private hotkeysService: HotkeysService
  41   ) { }
  42
  43   get serverVersion () {
  44     return this.serverService.getConfig().serverVersion
  45   }
  46
  47   get instanceName () {
  48     return this.serverService.getConfig().instance.name
  49   }
  50
  51   get defaultRoute () {
  52     return RedirectService.DEFAULT_ROUTE
  53   }
  54
  55   ngOnInit () {
  56     document.getElementById('incompatible-browser').className += ' browser-ok'
  57
  58     this.router.events.subscribe(e => {
  59       if (e instanceof NavigationEnd) {
  60         const pathname = window.location.pathname
  61         if (!pathname || pathname === '/' || is18nPath(pathname)) {
  62           this.redirectService.redirectToHomepage(true)
  63         }
  64       }
  65     })
  66
  67     this.authService.loadClientCredentials()
  68
  69     if (this.isUserLoggedIn()) {
  70       // The service will automatically redirect to the login page if the token is not valid anymore
  71       this.authService.refreshUserInformation()
  72     }
  73
  74     // Load custom data from server
  75     this.serverService.loadConfig()
  76     this.serverService.loadVideoCategories()
  77     this.serverService.loadVideoLanguages()
  78     this.serverService.loadVideoLicences()
  79     this.serverService.loadVideoPrivacies()
  80
  81     // Do not display menu on small screens
  82     if (this.screenService.isInSmallView()) {
  83       this.isMenuDisplayed = false
  84     }
  85
  86     this.router.events.subscribe(
  87       e => {
  88         // User clicked on a link in the menu, change the page
  89         if (e instanceof GuardsCheckStart && this.screenService.isInSmallView()) {
  90           this.isMenuDisplayed = false
  91         }
  92       }
  93     )
  94
  95     // Inject JS
  96     this.serverService.configLoaded
  97         .subscribe(() => {
  98           const config = this.serverService.getConfig()
  99
 100           if (config.instance.customizations.javascript) {
 101             try {
 102               // tslint:disable:no-eval
 103               eval(config.instance.customizations.javascript)
 104             } catch (err) {
 105               console.error('Cannot eval custom JavaScript.', err)
 106             }
 107           }
 108         })
 109
 110     // Inject CSS if modified (admin config settings)
 111     this.serverService.configLoaded
 112         .pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
 113         .subscribe(() => {
 114           const headStyle = document.querySelector('style.custom-css-style')
 115           if (headStyle) headStyle.parentNode.removeChild(headStyle)
 116
 117           const config = this.serverService.getConfig()
 118
 119           // We test customCSS if the admin removed the css
 120           if (this.customCSS || config.instance.customizations.css) {
 121             const styleTag = '<style>' + config.instance.customizations.css + '</style>'
 122             this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
 123           }
 124         })
 125
 126     this.hotkeysService.add([
 127       new Hotkey('/', (event: KeyboardEvent): boolean => {
 128         document.getElementById('search-video').focus()
 129         return false // Prevent bubbling
 130       }, undefined, 'Focus the search bar'),
 131       new Hotkey('g+s', (event: KeyboardEvent): boolean => {
 132         this.router.navigate([ '/videos/subscriptions' ])
 133         return false
 134       }, undefined, 'Go to the subscriptions videos page'),
 135       new Hotkey('g+t', (event: KeyboardEvent): boolean => {
 136         this.router.navigate([ '/videos/trending' ])
 137         return false
 138       }, undefined, 'Go to the trending videos page'),
 139       new Hotkey('g+r', (event: KeyboardEvent): boolean => {
 140         this.router.navigate([ '/videos/recently-added' ])
 141         return false
 142       }, undefined, 'Go to the recently added videos page'),
 143       new Hotkey('g+l', (event: KeyboardEvent): boolean => {
 144         this.router.navigate([ '/videos/local' ])
 145         return false
 146       }, undefined, 'Go to the local videos page'),
 147       new Hotkey('g+u', (event: KeyboardEvent): boolean => {
 148         this.router.navigate([ '/videos/upload' ])
 149         return false
 150       }, undefined, 'Go to the videos upload page')
 151     ])
 152   }
 153
 154   isUserLoggedIn () {
 155     return this.authService.isLoggedIn()
 156   }
 157
 158   toggleMenu () {
 159     this.isMenuDisplayed = !this.isMenuDisplayed
 160   }
 161 }