2 files changed, 35 insertions, 21 deletions
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index fc4d6c6a2..2149768a2 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -4,6 +4,7 @@ import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
 import { AuthService, RedirectService, ServerService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { skip } from 'rxjs/operators'
 @Component({
  selector: 'my-app',
@@ -89,25 +90,36 @@ export class AppComponent implements OnInit {
      }
    )
+    // Inject JS
    this.serverService.configLoaded
-      .subscribe(() => {
+        .subscribe(() => {
-        const config = this.serverService.getConfig()
+          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)
+            }
+          }
+        })
-        // We test customCSS if the admin removed the css
+    // Inject CSS if modified (admin config settings)
-        if (this.customCSS || config.instance.customizations.css) {
+    this.serverService.configLoaded
-          const styleTag = '<style>' + config.instance.customizations.css + '</style>'
+        .pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
-          this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
+        .subscribe(() => {
-        }
+          const headStyle = document.querySelector('style.custom-css-style')
+          if (headStyle) headStyle.parentNode.removeChild(headStyle)
-        if (config.instance.customizations.javascript) {
+          const config = this.serverService.getConfig()
-          try {
-            // tslint:disable:no-eval
+          // We test customCSS if the admin removed the css
-            eval(config.instance.customizations.javascript)
+          if (this.customCSS || config.instance.customizations.css) {
-          } catch (err) {
+            const styleTag = '<style>' + config.instance.customizations.css + '</style>'
-            console.error('Cannot eval custom JavaScript.', err)
+            this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
          }
-        }
+        })
-      })
  }
  isUserLoggedIn () {
diff --git a/client/src/index.html b/client/src/index.html
index a57df3a93..f00af8bff 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -1,20 +1,22 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <title>PeerTube</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="PeerTube, a decentralized video streaming platform using P2P (BitTorrent) directly in the web browser" />
    <meta name="theme-color" content="#fff" />
    <!-- Web Manifest file -->
    <link rel="manifest" href="/manifest.json">
-    <!-- The following comment is used by the server to prerender OpenGraph and oEmbed tags -->
+    <!-- /!\ The following comment is used by the server to prerender some tags /!\ -->
-    <!-- open graph and oembed tags -->
-    <!-- Do not remove it! -->
+      <!-- title tag -->
+      <!-- description tag -->
+      <!-- custom css tag -->
+      <!-- open graph and oembed tags -->
+    <!-- /!\ Do not remove it /!\ -->
    <link rel="icon" type="image/png" href="/client/assets/images/favicon.png" />

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index fc4d6c6a2..2149768a2 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts
@@ -4,6 +4,7 @@ import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
4	import { AuthService, RedirectService, ServerService } from '@app/core'	4	import { AuthService, RedirectService, ServerService } 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 { skip } from 'rxjs/operators'
7		8
8	@Component({	9	@Component({
9	selector: 'my-app',	10	selector: 'my-app',
@@ -89,25 +90,36 @@ export class AppComponent implements OnInit {
89	}	90	}
90	)	91	)
91		92
		93	// Inject JS
92	this.serverService.configLoaded	94	this.serverService.configLoaded
93	.subscribe(() => {	95	.subscribe(() => {
94	const config = this.serverService.getConfig()	96	const config = this.serverService.getConfig()
		97
		98	if (config.instance.customizations.javascript) {
		99	try {
		100	// tslint:disable:no-eval
		101	eval(config.instance.customizations.javascript)
		102	} catch (err) {
		103	console.error('Cannot eval custom JavaScript.', err)
		104	}
		105	}
		106	})
95		107
96	// We test customCSS if the admin removed the css	108	// Inject CSS if modified (admin config settings)
97	if (this.customCSS \|\| config.instance.customizations.css) {	109	this.serverService.configLoaded
98	const styleTag = '<style>' + config.instance.customizations.css + '</style>'	110	.pipe(skip(1)) // We only want to subscribe to reloads, because the CSS is already injected by the server
99	this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)	111	.subscribe(() => {
100	}	112	const headStyle = document.querySelector('style.custom-css-style')
		113	if (headStyle) headStyle.parentNode.removeChild(headStyle)
101		114
102	if (config.instance.customizations.javascript) {	115	const config = this.serverService.getConfig()
103	try {	116
104	// tslint:disable:no-eval	117	// We test customCSS if the admin removed the css
105	eval(config.instance.customizations.javascript)	118	if (this.customCSS \|\| config.instance.customizations.css) {
106	} catch (err) {	119	const styleTag = '<style>' + config.instance.customizations.css + '</style>'
107	console.error('Cannot eval custom JavaScript.', err)	120	this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
108	}	121	}
109	}	122	})
110	})
111	}	123	}
112		124
113	isUserLoggedIn () {	125	isUserLoggedIn () {


diff --git a/client/src/index.html b/client/src/index.html index a57df3a93..f00af8bff 100644 --- a/client/src/index.html +++ b/client/src/index.html
@@ -1,20 +1,22 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<html>	2	<html>
3	<head>	3	<head>
4	<title>PeerTube</title>
5
6	<meta charset="UTF-8">	4	<meta charset="UTF-8">
7	<meta name="viewport" content="width=device-width, initial-scale=1">	5	<meta name="viewport" content="width=device-width, initial-scale=1">
8	<meta name="description" content="PeerTube, a decentralized video streaming platform using P2P (BitTorrent) directly in the web browser" />
9		6
10	<meta name="theme-color" content="#fff" />	7	<meta name="theme-color" content="#fff" />
11		8
12	<!-- Web Manifest file -->	9	<!-- Web Manifest file -->
13	<link rel="manifest" href="/manifest.json">	10	<link rel="manifest" href="/manifest.json">
14		11
15	<!-- The following comment is used by the server to prerender OpenGraph and oEmbed tags -->	12	<!-- /!\ The following comment is used by the server to prerender some tags /!\ -->
16	<!-- open graph and oembed tags -->	13
17	<!-- Do not remove it! -->	14	<!-- title tag -->
		15	<!-- description tag -->
		16	<!-- custom css tag -->
		17	<!-- open graph and oembed tags -->
		18
		19	<!-- /!\ Do not remove it /!\ -->
18		20
19	<link rel="icon" type="image/png" href="/client/assets/images/favicon.png" />	21	<link rel="icon" type="image/png" href="/client/assets/images/favicon.png" />
20		22