diff options
Diffstat (limited to 'client/src/app/app.component.ts')
-rw-r--r-- | client/src/app/app.component.ts | 71 |
1 files changed, 59 insertions, 12 deletions
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 12c0efd8a..a464e90fa 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts | |||
@@ -4,7 +4,7 @@ import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular | |||
4 | import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core' | 4 | import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core' |
5 | import { is18nPath } from '../../../shared/models/i18n' | 5 | import { is18nPath } from '../../../shared/models/i18n' |
6 | import { ScreenService } from '@app/shared/misc/screen.service' | 6 | import { ScreenService } from '@app/shared/misc/screen.service' |
7 | import { filter, map, pairwise } from 'rxjs/operators' | 7 | import { filter, map, pairwise, first } from 'rxjs/operators' |
8 | import { Hotkey, HotkeysService } from 'angular2-hotkeys' | 8 | import { Hotkey, HotkeysService } from 'angular2-hotkeys' |
9 | import { I18n } from '@ngx-translate/i18n-polyfill' | 9 | import { I18n } from '@ngx-translate/i18n-polyfill' |
10 | import { PlatformLocation, ViewportScroller } from '@angular/common' | 10 | import { PlatformLocation, ViewportScroller } from '@angular/common' |
@@ -19,6 +19,10 @@ import { ServerConfig, UserRole } from '@shared/models' | |||
19 | import { User } from '@app/shared' | 19 | import { User } from '@app/shared' |
20 | import { InstanceService } from '@app/shared/instance/instance.service' | 20 | import { InstanceService } from '@app/shared/instance/instance.service' |
21 | import { MenuService } from './core/menu/menu.service' | 21 | import { MenuService } from './core/menu/menu.service' |
22 | import { BroadcastMessageLevel } from '@shared/models/server' | ||
23 | import { MarkdownService } from './shared/renderer' | ||
24 | import { concat } from 'rxjs' | ||
25 | import { peertubeLocalStorage } from './shared/misc/peertube-web-storage' | ||
22 | 26 | ||
23 | @Component({ | 27 | @Component({ |
24 | selector: 'my-app', | 28 | selector: 'my-app', |
@@ -26,11 +30,14 @@ import { MenuService } from './core/menu/menu.service' | |||
26 | styleUrls: [ './app.component.scss' ] | 30 | styleUrls: [ './app.component.scss' ] |
27 | }) | 31 | }) |
28 | export class AppComponent implements OnInit, AfterViewInit { | 32 | export class AppComponent implements OnInit, AfterViewInit { |
33 | private static BROADCAST_MESSAGE_KEY = 'app-broadcast-message-dismissed' | ||
34 | |||
29 | @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent | 35 | @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent |
30 | @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent | 36 | @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent |
31 | @ViewChild('customModal') customModal: CustomModalComponent | 37 | @ViewChild('customModal') customModal: CustomModalComponent |
32 | 38 | ||
33 | customCSS: SafeHtml | 39 | customCSS: SafeHtml |
40 | broadcastMessage: { message: string, dismissable: boolean, class: string } | null = null | ||
34 | 41 | ||
35 | private serverConfig: ServerConfig | 42 | private serverConfig: ServerConfig |
36 | 43 | ||
@@ -50,6 +57,7 @@ export class AppComponent implements OnInit, AfterViewInit { | |||
50 | private hooks: HooksService, | 57 | private hooks: HooksService, |
51 | private location: PlatformLocation, | 58 | private location: PlatformLocation, |
52 | private modalService: NgbModal, | 59 | private modalService: NgbModal, |
60 | private markdownService: MarkdownService, | ||
53 | public menu: MenuService | 61 | public menu: MenuService |
54 | ) { } | 62 | ) { } |
55 | 63 | ||
@@ -81,6 +89,7 @@ export class AppComponent implements OnInit, AfterViewInit { | |||
81 | this.initRouteEvents() | 89 | this.initRouteEvents() |
82 | this.injectJS() | 90 | this.injectJS() |
83 | this.injectCSS() | 91 | this.injectCSS() |
92 | this.injectBroadcastMessage() | ||
84 | 93 | ||
85 | this.initHotkeys() | 94 | this.initHotkeys() |
86 | 95 | ||
@@ -97,6 +106,12 @@ export class AppComponent implements OnInit, AfterViewInit { | |||
97 | return this.authService.isLoggedIn() | 106 | return this.authService.isLoggedIn() |
98 | } | 107 | } |
99 | 108 | ||
109 | hideBroadcastMessage () { | ||
110 | peertubeLocalStorage.setItem(AppComponent.BROADCAST_MESSAGE_KEY, this.serverConfig.broadcastMessage.message) | ||
111 | |||
112 | this.broadcastMessage = null | ||
113 | } | ||
114 | |||
100 | private initRouteEvents () { | 115 | private initRouteEvents () { |
101 | let resetScroll = true | 116 | let resetScroll = true |
102 | const eventsObs = this.router.events | 117 | const eventsObs = this.router.events |
@@ -165,6 +180,36 @@ export class AppComponent implements OnInit, AfterViewInit { | |||
165 | ).subscribe(() => this.menu.isMenuDisplayed = false) // User clicked on a link in the menu, change the page | 180 | ).subscribe(() => this.menu.isMenuDisplayed = false) // User clicked on a link in the menu, change the page |
166 | } | 181 | } |
167 | 182 | ||
183 | private injectBroadcastMessage () { | ||
184 | concat( | ||
185 | this.serverService.getConfig().pipe(first()), | ||
186 | this.serverService.configReloaded | ||
187 | ).subscribe(async config => { | ||
188 | this.broadcastMessage = null | ||
189 | |||
190 | const messageConfig = config.broadcastMessage | ||
191 | |||
192 | if (messageConfig.enabled) { | ||
193 | // Already dismissed this message? | ||
194 | if (messageConfig.dismissable && localStorage.getItem(AppComponent.BROADCAST_MESSAGE_KEY) === messageConfig.message) { | ||
195 | return | ||
196 | } | ||
197 | |||
198 | const classes: { [id in BroadcastMessageLevel]: string } = { | ||
199 | info: 'alert-info', | ||
200 | warning: 'alert-warning', | ||
201 | error: 'alert-danger' | ||
202 | } | ||
203 | |||
204 | this.broadcastMessage = { | ||
205 | message: await this.markdownService.completeMarkdownToHTML(messageConfig.message), | ||
206 | dismissable: messageConfig.dismissable, | ||
207 | class: classes[messageConfig.level] | ||
208 | } | ||
209 | } | ||
210 | }) | ||
211 | } | ||
212 | |||
168 | private injectJS () { | 213 | private injectJS () { |
169 | // Inject JS | 214 | // Inject JS |
170 | this.serverService.getConfig() | 215 | this.serverService.getConfig() |
@@ -182,17 +227,19 @@ export class AppComponent implements OnInit, AfterViewInit { | |||
182 | 227 | ||
183 | private injectCSS () { | 228 | private injectCSS () { |
184 | // Inject CSS if modified (admin config settings) | 229 | // Inject CSS if modified (admin config settings) |
185 | this.serverService.configReloaded | 230 | concat( |
186 | .subscribe(() => { | 231 | this.serverService.getConfig().pipe(first()), |
187 | const headStyle = document.querySelector('style.custom-css-style') | 232 | this.serverService.configReloaded |
188 | if (headStyle) headStyle.parentNode.removeChild(headStyle) | 233 | ).subscribe(config => { |
189 | 234 | const headStyle = document.querySelector('style.custom-css-style') | |
190 | // We test customCSS if the admin removed the css | 235 | if (headStyle) headStyle.parentNode.removeChild(headStyle) |
191 | if (this.customCSS || this.serverConfig.instance.customizations.css) { | 236 | |
192 | const styleTag = '<style>' + this.serverConfig.instance.customizations.css + '</style>' | 237 | // We test customCSS if the admin removed the css |
193 | this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag) | 238 | if (this.customCSS || config.instance.customizations.css) { |
194 | } | 239 | const styleTag = '<style>' + config.instance.customizations.css + '</style>' |
195 | }) | 240 | this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag) |
241 | } | ||
242 | }) | ||
196 | } | 243 | } |
197 | 244 | ||
198 | private async loadPlugins () { | 245 | private async loadPlugins () { |