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     this.serverService.loadVideoPlaylistPrivacies()
  78
  79     // Do not display menu on small screens
  80     if (this.screenService.isInSmallView()) {
  81       this.isMenuDisplayed = false
  82     }
  83
  84     this.router.events.subscribe(
  85       e => {
  86         // User clicked on a link in the menu, change the page
  87         if (e instanceof GuardsCheckStart && this.screenService.isInSmallView()) {
  88           this.isMenuDisplayed = false
  89         }
  90       }
  91     )
  92
  93     // Inject JS
  94     this.serverService.configLoaded
  95         .subscribe(() => {
  96           const config = this.serverService.getConfig()
  97
  98           if (config.instance.customizations.javascript) {
  99             try {
 100               // tslint:disable:no-eval
 101               eval(config.instance.customizations.javascript)
 102             } catch (err) {
 103               console.error('Cannot eval custom JavaScript.', err)
 104             }
 105           }
 106         })
 107
 108     // Inject CSS if modified (admin config settings)
 109     this.serverService.configLoaded
 110         .pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
 111         .subscribe(() => {
 112           const headStyle = document.querySelector('style.custom-css-style')
 113           if (headStyle) headStyle.parentNode.removeChild(headStyle)
 114
 115           const config = this.serverService.getConfig()
 116
 117           // We test customCSS if the admin removed the css
 118           if (this.customCSS || config.instance.customizations.css) {
 119             const styleTag = '<style>' + config.instance.customizations.css + '</style>'
 120             this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
 121           }
 122         })
 123
 124     this.hotkeysService.add([
 125       new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => {
 126         document.getElementById('search-video').focus()
 127         return false
 128       }, undefined, this.i18n('Focus the search bar')),
 129       new Hotkey('b', (event: KeyboardEvent): boolean => {
 130         this.toggleMenu()
 131         return false
 132       }, undefined, this.i18n('Toggle the left menu')),
 133       new Hotkey('g o', (event: KeyboardEvent): boolean => {
 134         this.router.navigate([ '/videos/overview' ])
 135         return false
 136       }, undefined, this.i18n('Go to the videos overview page')),
 137       new Hotkey('g t', (event: KeyboardEvent): boolean => {
 138         this.router.navigate([ '/videos/trending' ])
 139         return false
 140       }, undefined, this.i18n('Go to the trending videos page')),
 141       new Hotkey('g r', (event: KeyboardEvent): boolean => {
 142         this.router.navigate([ '/videos/recently-added' ])
 143         return false
 144       }, undefined, this.i18n('Go to the recently added videos page')),
 145       new Hotkey('g l', (event: KeyboardEvent): boolean => {
 146         this.router.navigate([ '/videos/local' ])
 147         return false
 148       }, undefined, this.i18n('Go to the local videos page')),
 149       new Hotkey('g u', (event: KeyboardEvent): boolean => {
 150         this.router.navigate([ '/videos/upload' ])
 151         return false
 152       }, undefined, this.i18n('Go to the videos upload page')),
 153       new Hotkey('shift+t', (event: KeyboardEvent): boolean => {
 154         this.themeService.toggleDarkTheme()
 155         return false
 156       }, undefined, this.i18n('Toggle Dark theme'))
 157     ])
 158
 159     fromEvent(window, 'resize')
 160       .pipe(debounceTime(200))
 161       .subscribe(() => this.onResize())
 162   }
 163
 164   isUserLoggedIn () {
 165     return this.authService.isLoggedIn()
 166   }
 167
 168   toggleMenu () {
 169     this.isMenuDisplayed = !this.isMenuDisplayed
 170     this.isMenuChangedByUser = true
 171   }
 172
 173   onResize () {
 174     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
 175   }
 176 }