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