From 00b5556c182fa70dfca17c517488b8afae6257c9 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 22 Feb 2018 10:22:53 +0100 Subject: Add ability to add custom css/javascript --- .../edit-custom-config.component.html | 24 ++++++++++++++++++++ .../edit-custom-config.component.scss | 6 +++++ .../edit-custom-config.component.ts | 18 +++++++++++---- client/src/app/app.component.html | 2 ++ client/src/app/app.component.ts | 26 +++++++++++++++++++++- client/src/app/core/server/server.service.ts | 13 +++++++++-- 6 files changed, 82 insertions(+), 7 deletions(-) (limited to 'client/src') 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 @@ +
Customizations
+ +
+ + +
+ {{ formErrors.customizationJavascript }} +
+
+ +
+ + +
+ {{ formErrors.customizationCSS }} +
+
+ 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 @@ +
+
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 = '' + 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(1) videoPrivaciesLoaded = new ReplaySubject(1) videoCategoriesLoaded = new ReplaySubject(1) videoLicencesLoaded = new ReplaySubject(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(ServerService.BASE_CONFIG_URL) .do(this.saveConfigLocally) - .subscribe(data => this.config = data) + .subscribe(data => { + this.config = data + + this.configLoaded.next(true) + }) } loadVideoCategories () { -- cgit v1.2.3