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