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, ThemeService } 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     private themeService: ThemeService
  42   ) { }
  43
  44   get serverVersion () {
  45     return this.serverService.getConfig().serverVersion
  46   }
  47
  48   get instanceName () {
  49     return this.serverService.getConfig().instance.name
  50   }
  51
  52   get defaultRoute () {
  53     return RedirectService.DEFAULT_ROUTE
  54   }
  55
  56   ngOnInit () {
  57     document.getElementById('incompatible-browser').className += ' browser-ok'
  58
  59     this.router.events.subscribe(e => {
  60       if (e instanceof NavigationEnd) {
  61         const pathname = window.location.pathname
  62         if (!pathname || pathname === '/' || is18nPath(pathname)) {
  63           this.redirectService.redirectToHomepage(true)
  64         }
  65       }
  66     })
  67
  68     this.authService.loadClientCredentials()
  69
  70     if (this.isUserLoggedIn()) {
  71       // The service will automatically redirect to the login page if the token is not valid anymore
  72       this.authService.refreshUserInformation()
  73     }
  74
  75     // Load custom data from server
  76     this.serverService.loadConfig()
  77     this.serverService.loadVideoCategories()
  78     this.serverService.loadVideoLanguages()
  79     this.serverService.loadVideoLicences()
  80     this.serverService.loadVideoPrivacies()
  81
  82     // Do not display menu on small screens
  83     if (this.screenService.isInSmallView()) {
  84       this.isMenuDisplayed = false
  85     }
  86
  87     this.router.events.subscribe(
  88       e => {
  89         // User clicked on a link in the menu, change the page
  90         if (e instanceof GuardsCheckStart && this.screenService.isInSmallView()) {
  91           this.isMenuDisplayed = false
  92         }
  93       }
  94     )
  95
  96     // Inject JS
  97     this.serverService.configLoaded
  98         .subscribe(() => {
  99           const config = this.serverService.getConfig()
 100
 101           if (config.instance.customizations.javascript) {
 102             try {
 103               // tslint:disable:no-eval
 104               eval(config.instance.customizations.javascript)
 105             } catch (err) {
 106               console.error('Cannot eval custom JavaScript.', err)
 107             }
 108           }
 109         })
 110
 111     // Inject CSS if modified (admin config settings)
 112     this.serverService.configLoaded
 113         .pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
 114         .subscribe(() => {
 115           const headStyle = document.querySelector('style.custom-css-style')
 116           if (headStyle) headStyle.parentNode.removeChild(headStyle)
 117
 118           const config = this.serverService.getConfig()
 119
 120           // We test customCSS if the admin removed the css
 121           if (this.customCSS || config.instance.customizations.css) {
 122             const styleTag = '<style>' + config.instance.customizations.css + '</style>'
 123             this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
 124           }
 125         })
 126
 127     this.hotkeysService.add([
 128       new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => {
 129         document.getElementById('search-video').focus()
 130         return false
 131       }, undefined, 'Focus the search bar'),
 132       new Hotkey('b', (event: KeyboardEvent): boolean => {
 133         this.toggleMenu()
 134         return false
 135       }, undefined, 'Toggle the left menu'),
 136       new Hotkey('g o', (event: KeyboardEvent): boolean => {
 137         this.router.navigate([ '/videos/overview' ])
 138         return false
 139       }, undefined, 'Go to the videos overview page'),
 140       new Hotkey('g t', (event: KeyboardEvent): boolean => {
 141         this.router.navigate([ '/videos/trending' ])
 142         return false
 143       }, undefined, 'Go to the trending videos page'),
 144       new Hotkey('g r', (event: KeyboardEvent): boolean => {
 145         this.router.navigate([ '/videos/recently-added' ])
 146         return false
 147       }, undefined, 'Go to the recently added videos page'),
 148       new Hotkey('g l', (event: KeyboardEvent): boolean => {
 149         this.router.navigate([ '/videos/local' ])
 150         return false
 151       }, undefined, 'Go to the local videos page'),
 152       new Hotkey('g u', (event: KeyboardEvent): boolean => {
 153         this.router.navigate([ '/videos/upload' ])
 154         return false
 155       }, undefined, 'Go to the videos upload page'),
 156       new Hotkey('shift+t', (event: KeyboardEvent): boolean => {
 157         this.themeService.toggleDarkTheme()
 158         return false
 159       }, undefined, 'Toggle Dark theme')
 160     ])
 161   }
 162
 163   isUserLoggedIn () {
 164     return this.authService.isLoggedIn()
 165   }
 166
 167   toggleMenu () {
 168     this.isMenuDisplayed = !this.isMenuDisplayed
 169   }
 170 }