WIP plugins: add theme support

12 files changed, 140 insertions, 13 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 d5b625d9c..fe9d856d0 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
@@ -85,6 +85,23 @@
         </ng-container>
 
 
+        <div i18n class="inner-form-title">Theme</div>
+
+        <ng-container formGroupName="theme">
+          <div class="form-group">
+            <label i18n for="themeDefault">Global theme</label>
+
+            <div class="peertube-select-container">
+              <select formControlName="default" id="themeDefault">
+                <option i18n value="default">default</option>
+
+                <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
+              </select>
+            </div>
+          </div>
+        </ng-container>
+
+
         <div i18n class="inner-form-title">Signup</div>
 
         <ng-container formGroupName="signup">
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 055bae851..19a408425 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
@@ -73,6 +73,10 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
     return this.configService.videoQuotaDailyOptions
   }
 
+  get availableThemes () {
+    return this.serverService.getConfig().theme.registered
+  }
+
   getResolutionKey (resolution: string) {
     return 'transcoding.resolutions.' + resolution
   }
@@ -92,6 +96,9 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit {
           css: null
         }
       },
+      theme: {
+        default: null
+      },
       services: {
         twitter: {
           username: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME,
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/index.ts b/client/src/app/+my-account/my-account-settings/my-account-interface/index.ts
new file mode 100644
index 000000000..62fce79a8
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/index.ts
@@ -0,0 +1 @@
+export * from './my-account-interface-settings.component'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
new file mode 100644
index 000000000..f34e77f6a
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.html
@@ -0,0 +1,13 @@
+<form role="form" (ngSubmit)="updateInterfaceSettings()" [formGroup]="form">
+  <div class="form-group">
+    <label i18n for="theme">Theme</label>
+
+    <div class="peertube-select-container">
+      <select formControlName="theme" id="theme">
+        <option i18n value="default">default</option>
+
+        <option *ngFor="let theme of availableThemes" [value]="theme">{{ theme }}</option>
+      </select>
+    </div>
+  </div>
+</form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
new file mode 100644
index 000000000..629f01733
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
@@ -0,0 +1,16 @@
+@import '_variables';
+@import '_mixins';
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+
+  display: block;
+  margin-top: 15px;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+
+  margin-bottom: 30px;
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts
new file mode 100644
index 000000000..f7055072f
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.ts
@@ -0,0 +1,64 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { UserUpdateMe } from '../../../../../../shared'
+import { AuthService } from '../../../core'
+import { FormReactive, User, UserService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { Subject } from 'rxjs'
+
+@Component({
+  selector: 'my-account-interface-settings',
+  templateUrl: './my-account-interface-settings.component.html',
+  styleUrls: [ './my-account-interface-settings.component.scss' ]
+})
+export class MyAccountInterfaceSettingsComponent extends FormReactive implements OnInit {
+  @Input() user: User = null
+  @Input() userInformationLoaded: Subject<any>
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private authService: AuthService,
+    private notifier: Notifier,
+    private userService: UserService,
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  get availableThemes () {
+    return this.serverService.getConfig().theme.registered
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      theme: null
+    })
+
+    this.userInformationLoaded
+      .subscribe(() => {
+        this.form.patchValue({
+          theme: this.user.theme
+        })
+      })
+  }
+
+  updateInterfaceSettings () {
+    const theme = this.form.value['theme']
+
+    const details: UserUpdateMe = {
+      theme
+    }
+
+    this.userService.updateMyProfile(details).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Interface settings updated.'))
+
+        window.location.reload()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index e51302f7c..eb9367d1f 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -10,9 +10,12 @@
 <div i18n class="account-title">Video settings</div>
 <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
 
-<div i18n class="account-title" id="notifications">Notifications</div>
+<div i18n class="account-title">Notifications</div>
 <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
 
+<div i18n class="account-title">Interface</div>
+<my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
+
 <div i18n class="account-title">Password</div>
 <my-account-change-password></my-account-change-password>
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
index f4b954e54..95fd2a3db 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { BytesPipe } from 'ngx-pipes'
 import { AuthService } from '../../core'
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index a1b198e3e..5be1b0d05 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -25,19 +25,14 @@ import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-b
 import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
 import { MyAccountNotificationsComponent } from '@app/+my-account/my-account-notifications/my-account-notifications.component'
 import { MyAccountNotificationPreferencesComponent } from '@app/+my-account/my-account-settings/my-account-notification-preferences'
-import {
-  MyAccountVideoPlaylistCreateComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
-import {
-  MyAccountVideoPlaylistUpdateComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
+import { MyAccountVideoPlaylistCreateComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component'
+import { MyAccountVideoPlaylistUpdateComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component'
 import { MyAccountVideoPlaylistsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlists.component'
-import {
-  MyAccountVideoPlaylistElementsComponent
-} from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
+import { MyAccountVideoPlaylistElementsComponent } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email'
 import { MultiSelectModule } from 'primeng/primeng'
+import { MyAccountInterfaceSettingsComponent } from '@app/+my-account/my-account-settings/my-account-interface'
 
 @NgModule({
   imports: [
@@ -58,6 +53,7 @@ import { MultiSelectModule } from 'primeng/primeng'
     MyAccountVideoSettingsComponent,
     MyAccountProfileComponent,
     MyAccountChangeEmailComponent,
+    MyAccountInterfaceSettingsComponent,
 
     MyAccountVideosComponent,
 
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index 6c567d3ca..7f751f479 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -33,7 +33,7 @@ export class PluginService {
   initializePlugins () {
     this.server.configLoaded
       .subscribe(() => {
-        this.plugins = this.server.getConfig().plugins
+        this.plugins = this.server.getConfig().plugin.registered
 
         this.buildScopeStruct()
 
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 80c52164d..7fb95fe4e 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -42,7 +42,13 @@ export class ServerService {
         css: ''
       }
     },
-    plugins: [],
+    plugin: {
+      registered: []
+    },
+    theme: {
+      registered: [],
+      default: 'default'
+    },
     email: {
       enabled: false
     },
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index 95a6ce9f9..53809f82c 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -26,6 +26,8 @@ export class User implements UserServerModel {
   videoChannels: VideoChannel[]
   createdAt: Date
 
+  theme: string
+
   adminFlags?: UserAdminFlag
 
   blocked: boolean
@@ -49,6 +51,8 @@ export class User implements UserServerModel {
     this.autoPlayVideo = hash.autoPlayVideo
     this.createdAt = hash.createdAt
 
+    this.theme = hash.theme
+
     this.adminFlags = hash.adminFlags
 
     this.blocked = hash.blocked