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