client/src/app/core/theme/theme.service.ts

   1 import { Injectable } from '@angular/core'
   2 import { AuthService } from '@app/core/auth'
   3 import { ServerService } from '@app/core/server'
   4 import { environment } from '../../../environments/environment'
   5 import { PluginService } from '@app/core/plugins/plugin.service'
   6 import { ServerConfigTheme } from '@shared/models'
   7 import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
   8 import { first } from 'rxjs/operators'
   9
  10 @Injectable()
  11 export class ThemeService {
  12
  13   private static KEYS = {
  14     LAST_ACTIVE_THEME: 'last_active_theme'
  15   }
  16
  17   private oldThemeName: string
  18   private themes: ServerConfigTheme[] = []
  19
  20   private themeFromLocalStorage: ServerConfigTheme
  21   private themeDOMLinksFromLocalStorage: HTMLLinkElement[] = []
  22
  23   constructor (
  24     private auth: AuthService,
  25     private pluginService: PluginService,
  26     private server: ServerService
  27   ) {}
  28
  29   initialize () {
  30     // Try to load from local storage first, so we don't have to wait network requests
  31     this.loadAndSetFromLocalStorage()
  32
  33     this.server.configLoaded
  34         .subscribe(() => {
  35           const themes = this.server.getConfig().theme.registered
  36
  37           this.removeThemeFromLocalStorageIfNeeded(themes)
  38           this.injectThemes(themes)
  39
  40           this.listenUserTheme()
  41         })
  42   }
  43
  44   private injectThemes (themes: ServerConfigTheme[], fromLocalStorage = false) {
  45     this.themes = themes
  46
  47     console.log('Injecting %d themes.', this.themes.length)
  48
  49     const head = this.getHeadElement()
  50
  51     for (const theme of this.themes) {
  52       // Already added this theme?
  53       if (fromLocalStorage === false && this.themeFromLocalStorage && this.themeFromLocalStorage.name === theme.name) continue
  54
  55       for (const css of theme.css) {
  56         const link = document.createElement('link')
  57
  58         const href = environment.apiUrl + `/themes/${theme.name}/${theme.version}/css/${css}`
  59         link.setAttribute('href', href)
  60         link.setAttribute('rel', 'alternate stylesheet')
  61         link.setAttribute('type', 'text/css')
  62         link.setAttribute('title', theme.name)
  63         link.setAttribute('disabled', '')
  64
  65         if (fromLocalStorage === true) this.themeDOMLinksFromLocalStorage.push(link)
  66
  67         head.appendChild(link)
  68       }
  69     }
  70   }
  71
  72   private getCurrentTheme () {
  73     if (this.themeFromLocalStorage) return this.themeFromLocalStorage.name
  74
  75     if (this.auth.isLoggedIn()) {
  76       const theme = this.auth.getUser().theme
  77       if (theme !== 'instance-default') return theme
  78     }
  79
  80     return this.server.getConfig().theme.default
  81   }
  82
  83   private loadTheme (name: string) {
  84     const links = document.getElementsByTagName('link')
  85     for (let i = 0; i < links.length; i++) {
  86       const link = links[ i ]
  87       if (link.getAttribute('rel').indexOf('style') !== -1 && link.getAttribute('title')) {
  88         link.disabled = link.getAttribute('title') !== name
  89       }
  90     }
  91   }
  92
  93   private updateCurrentTheme () {
  94     if (this.oldThemeName) this.removeThemePlugins(this.oldThemeName)
  95
  96     const currentTheme = this.getCurrentTheme()
  97
  98     console.log('Enabling %s theme.', currentTheme)
  99
 100     this.loadTheme(currentTheme)
 101
 102     const theme = this.getTheme(currentTheme)
 103     if (theme) {
 104       console.log('Adding scripts of theme %s.', currentTheme)
 105       this.pluginService.addPlugin(theme, true)
 106
 107       this.pluginService.reloadLoadedScopes()
 108
 109       peertubeLocalStorage.setItem(ThemeService.KEYS.LAST_ACTIVE_THEME, JSON.stringify(theme))
 110     } else {
 111       peertubeLocalStorage.removeItem(ThemeService.KEYS.LAST_ACTIVE_THEME)
 112     }
 113
 114     this.oldThemeName = currentTheme
 115   }
 116
 117   private listenUserTheme () {
 118     // We don't need them anymore
 119     this.themeFromLocalStorage = undefined
 120     this.themeDOMLinksFromLocalStorage = []
 121
 122     if (!this.auth.isLoggedIn()) {
 123       this.updateCurrentTheme()
 124     }
 125
 126     this.auth.userInformationLoaded
 127       .pipe(first())
 128       .subscribe(() => this.updateCurrentTheme())
 129   }
 130
 131   private loadAndSetFromLocalStorage () {
 132     const lastActiveThemeString = peertubeLocalStorage.getItem(ThemeService.KEYS.LAST_ACTIVE_THEME)
 133     if (!lastActiveThemeString) return
 134
 135     try {
 136       const lastActiveTheme = JSON.parse(lastActiveThemeString)
 137       this.themeFromLocalStorage = lastActiveTheme
 138
 139       this.injectThemes([ lastActiveTheme ], true)
 140       this.updateCurrentTheme()
 141     } catch (err) {
 142       console.error('Cannot parse last active theme.', err)
 143       return
 144     }
 145   }
 146
 147   private removeThemePlugins (themeName: string) {
 148     const oldTheme = this.getTheme(themeName)
 149     if (oldTheme) {
 150       console.log('Removing scripts of old theme %s.', themeName)
 151       this.pluginService.removePlugin(oldTheme)
 152     }
 153   }
 154
 155   private removeThemeFromLocalStorageIfNeeded (themes: ServerConfigTheme[]) {
 156     if (!this.themeFromLocalStorage) return
 157
 158     const loadedTheme = themes.find(t => t.name === this.themeFromLocalStorage.name)
 159     if (!loadedTheme || loadedTheme.version !== this.themeFromLocalStorage.version) {
 160       // Need to remove this theme: we loaded an old version or a theme that does not exist anymore
 161       this.removeThemePlugins(this.themeFromLocalStorage.name)
 162       this.oldThemeName = undefined
 163
 164       const head = this.getHeadElement()
 165       for (const htmlLinkElement of this.themeDOMLinksFromLocalStorage) {
 166         head.removeChild(htmlLinkElement)
 167       }
 168
 169       this.themeFromLocalStorage = undefined
 170       this.themeDOMLinksFromLocalStorage = []
 171     }
 172   }
 173
 174   private getHeadElement () {
 175     return document.getElementsByTagName('head')[0]
 176   }
 177
 178   private getTheme (name: string) {
 179     return this.themes.find(t => t.name === name)
 180   }
 181 }