Add ability to add custom css/javascript

6 files changed, 82 insertions, 7 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 0fe2aa203..8dca9bc04 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -128,5 +128,29 @@
     </div>
   </ng-template>
 
+  <div class="inner-form-title">Customizations</div>
+
+  <div class="form-group">
+    <label for="customizationJavascript">JavaScript</label>
+    <textarea
+        id="customizationJavascript" formControlName="customizationJavascript"
+        [ngClass]="{ 'input-error': formErrors['customizationJavascript'] }"
+    ></textarea>
+    <div *ngIf="formErrors.customizationJavascript" class="form-error">
+      {{ formErrors.customizationJavascript }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="customizationCSS">CSS</label>
+    <textarea
+        id="customizationCSS" formControlName="customizationCSS"
+        [ngClass]="{ 'input-error': formErrors['customizationCSS'] }"
+    ></textarea>
+    <div *ngIf="formErrors.customizationCSS" class="form-error">
+      {{ formErrors.customizationCSS }}
+    </div>
+  </div>
+
   <input type="submit" value="Update configuration" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 0195f44eb..e72f30c69 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -29,3 +29,9 @@ input[type=submit] {
   margin-top: 30px;
   margin-bottom: 10px;
 }
+
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index cd8c926f7..027268536 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -49,7 +49,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     signupLimit: '',
     adminEmail: '',
     userVideoQuota: '',
-    transcodingThreads: ''
+    transcodingThreads: '',
+    customizationJavascript: '',
+    customizationCSS: ''
   }
   validationMessages = {
     instanceName: INSTANCE_NAME.MESSAGES,
@@ -84,7 +86,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
       adminEmail: [ '', ADMIN_EMAIL.VALIDATORS ],
       userVideoQuota: [ '', USER_VIDEO_QUOTA.VALIDATORS ],
       transcodingThreads: [ '', TRANSCODING_THREADS.VALIDATORS ],
-      transcodingEnabled: [ ]
+      transcodingEnabled: [ ],
+      customizationJavascript: [ '' ],
+      customizationCSS: [ '' ]
     }
 
     for (const resolution of this.resolutions) {
@@ -125,7 +129,11 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
       instance: {
         name: this.form.value['instanceName'],
         description: this.form.value['instanceDescription'],
-        terms: this.form.value['instanceTerms']
+        terms: this.form.value['instanceTerms'],
+        customizations: {
+          javascript: this.form.value['customizationJavascript'],
+          css: this.form.value['customizationCSS']
+        }
       },
       cache: {
         previews: {
@@ -183,7 +191,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
       adminEmail: this.customConfig.admin.email,
       userVideoQuota: this.customConfig.user.videoQuota,
       transcodingThreads: this.customConfig.transcoding.threads,
-      transcodingEnabled: this.customConfig.transcoding.enabled
+      transcodingEnabled: this.customConfig.transcoding.enabled,
+      customizationJavascript: this.customConfig.instance.customizations.javascript,
+      customizationCSS: this.customConfig.instance.customizations.css
     }
 
     for (const resolution of this.resolutions) {
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index dafc45266..0e1882ad3 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,3 +1,5 @@
+<div *ngIf="customCSS" [innerHTML]="customCSS"></div>
+
 <div>
   <div class="header">
 
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 3af33ba2b..25936146c 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { GuardsCheckStart, Router } from '@angular/router'
 import { AuthService, ServerService } from '@app/core'
 import { isInSmallView } from '@app/shared/misc/utils'
@@ -24,10 +25,13 @@ export class AppComponent implements OnInit {
 
   isMenuDisplayed = true
 
+  customCSS: SafeHtml
+
   constructor (
     private router: Router,
     private authService: AuthService,
-    private serverService: ServerService
+    private serverService: ServerService,
+    private domSanitizer: DomSanitizer
   ) {}
 
   get serverVersion () {
@@ -66,6 +70,26 @@ export class AppComponent implements OnInit {
         }
       }
     )
+
+    this.serverService.configLoaded
+      .subscribe(() => {
+        const config = this.serverService.getConfig()
+
+        // We test customCSS in case or the admin removed the css
+        if (this.customCSS || config.instance.customizations.css) {
+          const styleTag = '<style>' + config.instance.customizations.css + '</style>'
+          this.customCSS = this.domSanitizer.bypassSecurityTrustHtml(styleTag)
+        }
+
+        if (config.instance.customizations.javascript) {
+          try {
+            // tslint:disable:no-eval
+            eval(config.instance.customizations.javascript)
+          } catch (err) {
+            console.error('Cannot eval custom JavaScript.', err)
+          }
+        }
+      })
   }
 
   toggleMenu () {
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index f54e63efd..3c94f09c6 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -12,6 +12,7 @@ export class ServerService {
   private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
   private static CONFIG_LOCAL_STORAGE_KEY = 'server-config'
 
+  configLoaded = new ReplaySubject<boolean>(1)
   videoPrivaciesLoaded = new ReplaySubject<boolean>(1)
   videoCategoriesLoaded = new ReplaySubject<boolean>(1)
   videoLicencesLoaded = new ReplaySubject<boolean>(1)
@@ -19,7 +20,11 @@ export class ServerService {
 
   private config: ServerConfig = {
     instance: {
-      name: 'PeerTube'
+      name: 'PeerTube',
+      customizations: {
+        javascript: '',
+        css: ''
+      }
     },
     serverVersion: 'Unknown',
     signup: {
@@ -56,7 +61,11 @@ export class ServerService {
   loadConfig () {
     this.http.get<ServerConfig>(ServerService.BASE_CONFIG_URL)
       .do(this.saveConfigLocally)
-      .subscribe(data => this.config = data)
+      .subscribe(data => {
+        this.config = data
+
+        this.configLoaded.next(true)
+      })
   }
 
   loadVideoCategories () {