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