mirror of
https://github.com/Chocobozzz/PeerTube.git
synced 2024-10-30 11:52:24 +03:00
Speedup theme injection
This commit is contained in:
parent
ce78f1f6f0
commit
a2ffd046d6
@ -71,6 +71,9 @@ export class AppComponent implements OnInit {
|
||||
ngOnInit () {
|
||||
document.getElementById('incompatible-browser').className += ' browser-ok'
|
||||
|
||||
this.loadPlugins()
|
||||
this.themeService.initialize()
|
||||
|
||||
this.authService.loadClientCredentials()
|
||||
|
||||
if (this.isUserLoggedIn()) {
|
||||
@ -86,9 +89,6 @@ export class AppComponent implements OnInit {
|
||||
this.serverService.loadVideoPrivacies()
|
||||
this.serverService.loadVideoPlaylistPrivacies()
|
||||
|
||||
this.loadPlugins()
|
||||
this.themeService.initialize()
|
||||
|
||||
// Do not display menu on small screens
|
||||
if (this.screenService.isInSmallView()) {
|
||||
this.isMenuDisplayed = false
|
||||
|
@ -4,13 +4,21 @@ import { ServerService } from '@app/core/server'
|
||||
import { environment } from '../../../environments/environment'
|
||||
import { PluginService } from '@app/core/plugins/plugin.service'
|
||||
import { ServerConfigTheme } from '@shared/models'
|
||||
import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
|
||||
|
||||
@Injectable()
|
||||
export class ThemeService {
|
||||
|
||||
private static KEYS = {
|
||||
LAST_ACTIVE_THEME: 'last_active_theme'
|
||||
}
|
||||
|
||||
private oldThemeName: string
|
||||
private themes: ServerConfigTheme[] = []
|
||||
|
||||
private themeFromLocalStorage: ServerConfigTheme
|
||||
private themeDOMLinksFromLocalStorage: HTMLLinkElement[] = []
|
||||
|
||||
constructor (
|
||||
private auth: AuthService,
|
||||
private pluginService: PluginService,
|
||||
@ -18,22 +26,30 @@ export class ThemeService {
|
||||
) {}
|
||||
|
||||
initialize () {
|
||||
// Try to load from local storage first, so we don't have to wait network requests
|
||||
this.loadAndSetFromLocalStorage()
|
||||
|
||||
this.server.configLoaded
|
||||
.subscribe(() => {
|
||||
this.injectThemes()
|
||||
const themes = this.server.getConfig().theme.registered
|
||||
|
||||
this.removeThemeFromLocalStorageIfNeeded(themes)
|
||||
this.injectThemes(themes)
|
||||
|
||||
this.listenUserTheme()
|
||||
})
|
||||
}
|
||||
|
||||
private injectThemes () {
|
||||
this.themes = this.server.getConfig().theme.registered
|
||||
private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {
|
||||
this.themes = themes
|
||||
|
||||
console.log('Injecting %d themes.', this.themes.length)
|
||||
|
||||
const head = document.getElementsByTagName('head')[0]
|
||||
const head = this.getHeadElement()
|
||||
|
||||
for (const theme of this.themes) {
|
||||
// Already added this theme?
|
||||
if (fromLocalStorage === false && this.themeFromLocalStorage && this.themeFromLocalStorage.name === theme.name) continue
|
||||
|
||||
for (const css of theme.css) {
|
||||
const link = document.createElement('link')
|
||||
@ -45,12 +61,16 @@ export class ThemeService {
|
||||
link.setAttribute('title', theme.name)
|
||||
link.setAttribute('disabled', '')
|
||||
|
||||
if (fromLocalStorage === true) this.themeDOMLinksFromLocalStorage.push(link)
|
||||
|
||||
head.appendChild(link)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private getCurrentTheme () {
|
||||
if (this.themeFromLocalStorage) return this.themeFromLocalStorage.name
|
||||
|
||||
if (this.auth.isLoggedIn()) {
|
||||
const theme = this.auth.getUser().theme
|
||||
if (theme !== 'instance-default') return theme
|
||||
@ -70,13 +90,7 @@ export class ThemeService {
|
||||
}
|
||||
|
||||
private updateCurrentTheme () {
|
||||
if (this.oldThemeName) {
|
||||
const oldTheme = this.getTheme(this.oldThemeName)
|
||||
if (oldTheme) {
|
||||
console.log('Removing scripts of old theme %s.', this.oldThemeName)
|
||||
this.pluginService.removePlugin(oldTheme)
|
||||
}
|
||||
}
|
||||
if (this.oldThemeName) this.removeThemePlugins(this.oldThemeName)
|
||||
|
||||
const currentTheme = this.getCurrentTheme()
|
||||
|
||||
@ -90,12 +104,20 @@ export class ThemeService {
|
||||
this.pluginService.addPlugin(theme, true)
|
||||
|
||||
this.pluginService.reloadLoadedScopes()
|
||||
|
||||
peertubeLocalStorage.setItem(ThemeService.KEYS.LAST_ACTIVE_THEME, JSON.stringify(theme))
|
||||
} else {
|
||||
peertubeLocalStorage.removeItem(ThemeService.KEYS.LAST_ACTIVE_THEME)
|
||||
}
|
||||
|
||||
this.oldThemeName = currentTheme
|
||||
}
|
||||
|
||||
private listenUserTheme () {
|
||||
// We don't need them anymore
|
||||
this.themeFromLocalStorage = undefined
|
||||
this.themeDOMLinksFromLocalStorage = []
|
||||
|
||||
if (!this.auth.isLoggedIn()) {
|
||||
this.updateCurrentTheme()
|
||||
}
|
||||
@ -104,6 +126,53 @@ export class ThemeService {
|
||||
.subscribe(() => this.updateCurrentTheme())
|
||||
}
|
||||
|
||||
private loadAndSetFromLocalStorage () {
|
||||
const lastActiveThemeString = peertubeLocalStorage.getItem(ThemeService.KEYS.LAST_ACTIVE_THEME)
|
||||
if (!lastActiveThemeString) return
|
||||
|
||||
try {
|
||||
const lastActiveTheme = JSON.parse(lastActiveThemeString)
|
||||
this.themeFromLocalStorage = lastActiveTheme
|
||||
|
||||
this.injectThemes([ lastActiveTheme ], true)
|
||||
this.updateCurrentTheme()
|
||||
} catch (err) {
|
||||
console.error('Cannot parse last active theme.', err)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
private removeThemePlugins (themeName: string) {
|
||||
const oldTheme = this.getTheme(themeName)
|
||||
if (oldTheme) {
|
||||
console.log('Removing scripts of old theme %s.', themeName)
|
||||
this.pluginService.removePlugin(oldTheme)
|
||||
}
|
||||
}
|
||||
|
||||
private removeThemeFromLocalStorageIfNeeded (themes: ServerConfigTheme[]) {
|
||||
if (!this.themeFromLocalStorage) return
|
||||
|
||||
const loadedTheme = themes.find(t => t.name === this.themeFromLocalStorage.name)
|
||||
if (!loadedTheme || loadedTheme.version !== this.themeFromLocalStorage.version) {
|
||||
// Need to remove this theme: we loaded an old version or a theme that does not exist anymore
|
||||
this.removeThemePlugins(this.themeFromLocalStorage.name)
|
||||
this.oldThemeName = undefined
|
||||
|
||||
const head = this.getHeadElement()
|
||||
for (const htmlLinkElement of this.themeDOMLinksFromLocalStorage) {
|
||||
head.removeChild(htmlLinkElement)
|
||||
}
|
||||
|
||||
this.themeFromLocalStorage = undefined
|
||||
this.themeDOMLinksFromLocalStorage = []
|
||||
}
|
||||
}
|
||||
|
||||
private getHeadElement () {
|
||||
return document.getElementsByTagName('head')[0]
|
||||
}
|
||||
|
||||
private getTheme (name: string) {
|
||||
return this.themes.find(t => t.name === name)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user