2017-10-31 10:52:52 +00:00
|
|
|
import { Component, OnInit } from '@angular/core'
|
2018-02-22 09:22:53 +00:00
|
|
|
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
|
2019-03-21 15:49:46 +00:00
|
|
|
import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
|
2018-09-06 10:00:53 +00:00
|
|
|
import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
|
2018-05-31 16:12:15 +00:00
|
|
|
import { is18nPath } from '../../../shared/models/i18n'
|
2018-06-15 14:52:15 +00:00
|
|
|
import { ScreenService } from '@app/shared/misc/screen.service'
|
2019-03-21 15:49:46 +00:00
|
|
|
import { debounceTime, filter, map, pairwise, skip } from 'rxjs/operators'
|
|
|
|
import { Hotkey, HotkeysService } from 'angular2-hotkeys'
|
2018-10-03 08:11:26 +00:00
|
|
|
import { I18n } from '@ngx-translate/i18n-polyfill'
|
2018-10-05 09:22:24 +00:00
|
|
|
import { fromEvent } from 'rxjs'
|
2019-03-21 15:49:46 +00:00
|
|
|
import { ViewportScroller } from '@angular/common'
|
2019-07-08 13:54:08 +00:00
|
|
|
import { PluginService } from '@app/core/plugins/plugin.service'
|
2019-07-22 13:40:13 +00:00
|
|
|
import { HooksService } from '@app/core/plugins/hooks.service'
|
2017-03-04 10:45:47 +00:00
|
|
|
|
2016-03-14 12:50:19 +00:00
|
|
|
@Component({
|
2016-11-04 15:23:18 +00:00
|
|
|
selector: 'my-app',
|
|
|
|
templateUrl: './app.component.html',
|
|
|
|
styleUrls: [ './app.component.scss' ]
|
2016-03-14 12:50:19 +00:00
|
|
|
})
|
2017-03-04 10:45:47 +00:00
|
|
|
export class AppComponent implements OnInit {
|
2017-06-16 12:32:15 +00:00
|
|
|
isMenuDisplayed = true
|
2018-10-05 09:22:24 +00:00
|
|
|
isMenuChangedByUser = false
|
2017-04-26 19:22:00 +00:00
|
|
|
|
2018-02-22 09:22:53 +00:00
|
|
|
customCSS: SafeHtml
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
constructor (
|
2018-10-03 08:11:26 +00:00
|
|
|
private i18n: I18n,
|
2019-03-21 15:49:46 +00:00
|
|
|
private viewportScroller: ViewportScroller,
|
2016-11-04 15:23:18 +00:00
|
|
|
private router: Router,
|
2017-03-04 10:45:47 +00:00
|
|
|
private authService: AuthService,
|
2018-02-22 09:22:53 +00:00
|
|
|
private serverService: ServerService,
|
2019-07-08 13:54:08 +00:00
|
|
|
private pluginService: PluginService,
|
2018-03-01 12:57:29 +00:00
|
|
|
private domSanitizer: DomSanitizer,
|
2018-06-15 14:52:15 +00:00
|
|
|
private redirectService: RedirectService,
|
2018-08-28 07:32:03 +00:00
|
|
|
private screenService: ScreenService,
|
2018-09-06 10:00:53 +00:00
|
|
|
private hotkeysService: HotkeysService,
|
2019-07-22 13:40:13 +00:00
|
|
|
private themeService: ThemeService,
|
|
|
|
private hooks: HooksService
|
2018-05-31 16:12:15 +00:00
|
|
|
) { }
|
2016-05-24 21:00:58 +00:00
|
|
|
|
2018-01-31 09:19:34 +00:00
|
|
|
get serverVersion () {
|
|
|
|
return this.serverService.getConfig().serverVersion
|
|
|
|
}
|
|
|
|
|
2018-09-29 17:53:49 +00:00
|
|
|
get serverCommit () {
|
|
|
|
const commit = this.serverService.getConfig().serverCommit || ''
|
|
|
|
return (commit !== '') ? '...' + commit : commit
|
|
|
|
}
|
|
|
|
|
2018-01-31 16:47:36 +00:00
|
|
|
get instanceName () {
|
|
|
|
return this.serverService.getConfig().instance.name
|
|
|
|
}
|
|
|
|
|
2018-03-21 08:40:57 +00:00
|
|
|
get defaultRoute () {
|
|
|
|
return RedirectService.DEFAULT_ROUTE
|
|
|
|
}
|
|
|
|
|
2017-06-16 12:32:15 +00:00
|
|
|
ngOnInit () {
|
2018-03-08 11:04:10 +00:00
|
|
|
document.getElementById('incompatible-browser').className += ' browser-ok'
|
2018-03-08 11:01:55 +00:00
|
|
|
|
2017-09-14 09:57:49 +00:00
|
|
|
this.authService.loadClientCredentials()
|
|
|
|
|
2018-03-27 14:18:25 +00:00
|
|
|
if (this.isUserLoggedIn()) {
|
2017-03-04 10:45:47 +00:00
|
|
|
// The service will automatically redirect to the login page if the token is not valid anymore
|
2017-10-25 15:31:11 +00:00
|
|
|
this.authService.refreshUserInformation()
|
2017-03-04 10:45:47 +00:00
|
|
|
}
|
2017-03-22 20:15:55 +00:00
|
|
|
|
2017-10-09 17:12:40 +00:00
|
|
|
// Load custom data from server
|
|
|
|
this.serverService.loadConfig()
|
|
|
|
this.serverService.loadVideoCategories()
|
|
|
|
this.serverService.loadVideoLanguages()
|
|
|
|
this.serverService.loadVideoLicences()
|
2017-10-31 10:52:52 +00:00
|
|
|
this.serverService.loadVideoPrivacies()
|
2019-03-06 14:36:44 +00:00
|
|
|
this.serverService.loadVideoPlaylistPrivacies()
|
2017-05-01 16:05:28 +00:00
|
|
|
|
2019-07-08 13:54:08 +00:00
|
|
|
this.loadPlugins()
|
2019-07-10 12:06:19 +00:00
|
|
|
this.themeService.initialize()
|
2019-07-08 13:54:08 +00:00
|
|
|
|
2017-05-01 16:05:28 +00:00
|
|
|
// Do not display menu on small screens
|
2018-06-15 14:52:15 +00:00
|
|
|
if (this.screenService.isInSmallView()) {
|
2017-06-16 12:32:15 +00:00
|
|
|
this.isMenuDisplayed = false
|
2017-05-01 16:05:28 +00:00
|
|
|
}
|
2018-01-31 09:08:05 +00:00
|
|
|
|
2019-03-21 15:49:46 +00:00
|
|
|
this.initRouteEvents()
|
|
|
|
this.injectJS()
|
|
|
|
this.injectCSS()
|
|
|
|
|
|
|
|
this.initHotkeys()
|
|
|
|
|
|
|
|
fromEvent(window, 'resize')
|
|
|
|
.pipe(debounceTime(200))
|
|
|
|
.subscribe(() => this.onResize())
|
|
|
|
}
|
|
|
|
|
|
|
|
isUserLoggedIn () {
|
|
|
|
return this.authService.isLoggedIn()
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleMenu () {
|
|
|
|
this.isMenuDisplayed = !this.isMenuDisplayed
|
|
|
|
this.isMenuChangedByUser = true
|
|
|
|
}
|
|
|
|
|
|
|
|
onResize () {
|
|
|
|
this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
|
|
|
|
}
|
|
|
|
|
|
|
|
private initRouteEvents () {
|
|
|
|
let resetScroll = true
|
|
|
|
const eventsObs = this.router.events
|
|
|
|
|
|
|
|
const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
|
|
|
|
const navigationEndEvent = eventsObs.pipe(filter((e: Event): e is NavigationEnd => e instanceof NavigationEnd))
|
|
|
|
|
|
|
|
scrollEvent.subscribe(e => {
|
|
|
|
if (e.position) {
|
|
|
|
return this.viewportScroller.scrollToPosition(e.position)
|
2018-01-31 09:08:05 +00:00
|
|
|
}
|
2018-02-22 09:22:53 +00:00
|
|
|
|
2019-03-21 15:49:46 +00:00
|
|
|
if (e.anchor) {
|
|
|
|
return this.viewportScroller.scrollToAnchor(e.anchor)
|
|
|
|
}
|
|
|
|
|
|
|
|
if (resetScroll) {
|
|
|
|
return this.viewportScroller.scrollToPosition([ 0, 0 ])
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
// When we add the a-state parameter, we don't want to alter the scroll
|
|
|
|
navigationEndEvent.pipe(pairwise())
|
|
|
|
.subscribe(([ e1, e2 ]) => {
|
|
|
|
try {
|
|
|
|
resetScroll = false
|
|
|
|
|
2019-05-13 08:37:55 +00:00
|
|
|
const previousUrl = new URL(window.location.origin + e1.urlAfterRedirects)
|
|
|
|
const nextUrl = new URL(window.location.origin + e2.urlAfterRedirects)
|
2019-03-21 15:49:46 +00:00
|
|
|
|
|
|
|
if (previousUrl.pathname !== nextUrl.pathname) {
|
|
|
|
resetScroll = true
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const nextSearchParams = nextUrl.searchParams
|
|
|
|
nextSearchParams.delete('a-state')
|
|
|
|
|
|
|
|
const previousSearchParams = previousUrl.searchParams
|
|
|
|
|
|
|
|
nextSearchParams.sort()
|
|
|
|
previousSearchParams.sort()
|
|
|
|
|
|
|
|
if (nextSearchParams.toString() !== previousSearchParams.toString()) {
|
|
|
|
resetScroll = true
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
console.error('Cannot parse URL to check next scroll.', e)
|
|
|
|
resetScroll = true
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
navigationEndEvent.pipe(
|
|
|
|
map(() => window.location.pathname),
|
|
|
|
filter(pathname => !pathname || pathname === '/' || is18nPath(pathname))
|
|
|
|
).subscribe(() => this.redirectService.redirectToHomepage(true))
|
|
|
|
|
2019-07-25 17:02:54 +00:00
|
|
|
navigationEndEvent.subscribe(e => {
|
|
|
|
this.hooks.runAction('action:router.navigation-end', 'common', { path: e.url })
|
|
|
|
})
|
|
|
|
|
2019-03-21 15:49:46 +00:00
|
|
|
eventsObs.pipe(
|
|
|
|
filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
|
|
|
|
filter(() => this.screenService.isInSmallView())
|
|
|
|
).subscribe(() => this.isMenuDisplayed = false) // User clicked on a link in the menu, change the page
|
|
|
|
}
|
|
|
|
|
|
|
|
private injectJS () {
|
2018-07-18 07:52:46 +00:00
|
|
|
// Inject JS
|
2018-02-22 09:22:53 +00:00
|
|
|
this.serverService.configLoaded
|
2018-07-18 07:52:46 +00:00
|
|
|
.subscribe(() => {
|
|
|
|
const config = this.serverService.getConfig()
|
|
|
|
|
|
|
|
if (config.instance.customizations.javascript) {
|
|
|
|
try {
|
|
|
|
// tslint:disable:no-eval
|
|
|
|
eval(config.instance.customizations.javascript)
|
|
|
|
} catch (err) {
|
|
|
|
console.error('Cannot eval custom JavaScript.', err)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
2019-03-21 15:49:46 +00:00
|
|
|
}
|
2018-02-22 09:22:53 +00:00
|
|
|
|
2019-03-21 15:49:46 +00:00
|
|
|
private injectCSS () {
|
2018-07-18 07:52:46 +00:00
|
|
|
// Inject CSS if modified (admin config settings)
|
|
|
|
this.serverService.configLoaded
|
|
|
|
.pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
|
|
|
|
.subscribe(() => {
|
|
|
|
const headStyle = document.querySelector('style.custom-css-style')
|
|
|
|
if (headStyle) headStyle.parentNode.removeChild(headStyle)
|
2018-02-22 09:22:53 +00:00
|
|
|
|
2018-07-18 07:52:46 +00:00
|
|
|
const config = this.serverService.getConfig()
|
|
|
|
|
|
|
|
// We test customCSS if the admin removed the css
|
|
|
|
if (this.customCSS || config.instance.customizations.css) {
|
|
|
|
const styleTag = '<style>' + config.instance.customizations.css + '</style>'
|
|
|
|
this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
|
2018-02-22 09:22:53 +00:00
|
|
|
}
|
2018-07-18 07:52:46 +00:00
|
|
|
})
|
2019-03-21 15:49:46 +00:00
|
|
|
}
|
2018-08-28 07:32:03 +00:00
|
|
|
|
2019-07-08 13:54:08 +00:00
|
|
|
private async loadPlugins () {
|
|
|
|
this.pluginService.initializePlugins()
|
|
|
|
|
2019-07-23 10:16:34 +00:00
|
|
|
this.hooks.runAction('action:application.init', 'common')
|
2019-07-08 13:54:08 +00:00
|
|
|
}
|
|
|
|
|
2019-03-21 15:49:46 +00:00
|
|
|
private initHotkeys () {
|
2018-08-28 07:32:03 +00:00
|
|
|
this.hotkeysService.add([
|
2018-09-02 19:46:43 +00:00
|
|
|
new Hotkey(['/', 's'], (event: KeyboardEvent): boolean => {
|
2018-08-28 07:32:03 +00:00
|
|
|
document.getElementById('search-video').focus()
|
2018-09-02 19:46:43 +00:00
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Focus the search bar')),
|
2018-09-02 19:46:43 +00:00
|
|
|
new Hotkey('b', (event: KeyboardEvent): boolean => {
|
|
|
|
this.toggleMenu()
|
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Toggle the left menu')),
|
2018-09-02 18:54:23 +00:00
|
|
|
new Hotkey('g o', (event: KeyboardEvent): boolean => {
|
2018-09-02 17:22:34 +00:00
|
|
|
this.router.navigate([ '/videos/overview' ])
|
|
|
|
return false
|
2019-08-22 08:02:32 +00:00
|
|
|
}, undefined, this.i18n('Go to the discover videos page')),
|
2018-09-02 18:54:23 +00:00
|
|
|
new Hotkey('g t', (event: KeyboardEvent): boolean => {
|
2018-08-28 07:32:03 +00:00
|
|
|
this.router.navigate([ '/videos/trending' ])
|
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Go to the trending videos page')),
|
2018-09-02 18:54:23 +00:00
|
|
|
new Hotkey('g r', (event: KeyboardEvent): boolean => {
|
2018-08-28 07:32:03 +00:00
|
|
|
this.router.navigate([ '/videos/recently-added' ])
|
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Go to the recently added videos page')),
|
2018-09-02 18:54:23 +00:00
|
|
|
new Hotkey('g l', (event: KeyboardEvent): boolean => {
|
2018-08-28 07:32:03 +00:00
|
|
|
this.router.navigate([ '/videos/local' ])
|
|
|
|
return false
|
2018-10-03 08:11:26 +00:00
|
|
|
}, undefined, this.i18n('Go to the local videos page')),
|
2018-09-02 18:54:23 +00:00
|
|
|
new Hotkey('g u', (event: KeyboardEvent): boolean => {
|
2018-08-28 07:32:03 +00:00
|
|
|
this.router.navigate([ '/videos/upload' ])
|
|
|
|
return false
|
2019-07-10 12:06:19 +00:00
|
|
|
}, undefined, this.i18n('Go to the videos upload page'))
|
2018-08-28 07:32:03 +00:00
|
|
|
])
|
2017-04-26 19:22:00 +00:00
|
|
|
}
|
2016-03-14 12:50:19 +00:00
|
|
|
}
|