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