Upgrade client dependencies

Migrate removed primeng theme to custom CSS

24 files changed, 190 insertions, 149 deletions

diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index aca4d9b0c..f1531f3ef 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="root">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss
index 61a2744ba..c98cc9be5 100644
--- a/client/src/app/+admin/admin.component.scss
+++ b/client/src/app/+admin/admin.component.scss
@@ -5,4 +5,6 @@ my-top-menu-dropdown {
   flex-grow: 1;
 }
 
-@include sub-menu-h1;
+.root {
+  @include sub-menu-h1;
+}
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 5f71f1238..f34490cc8 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -6,7 +6,6 @@ import { BatchDomainsModalComponent } from '@app/shared/shared-moderation'
 import { ActorFollow } from '@shared/models'
 
 @Component({
-  selector: 'my-followers-list',
   templateUrl: './following-list.component.html',
   styleUrls: [ '../follows.component.scss', './following-list.component.scss' ]
 })
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
index b653abfaa..9e98fcd34 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -5,32 +5,4 @@
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
-
-  p-selectButton {
-    ::ng-deep {
-      .ui-button-text {
-        font-size: 15px;
-        font-weight: 600;
-      }
-
-      .ui-button.ui-state-default {
-        background-color: #f0f0f0;
-        border: 1px solid #f0f0f0;
-      }
-
-      .ui-button.ui-state-active {
-        background-color: pvar(--mainColor);
-        border-color: pvar(--mainColor);
-
-        &:hover {
-          background-color: pvar(--mainHoverColor);
-          border-color: pvar(--mainHoverColor);
-        }
-      }
-
-      .ui-button:not(.ui-state-active).ui-state-focus {
-        box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
-      }
-    }
-  }
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index 93e294a96..75951006d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -9,11 +9,17 @@
     <div>{{ labelNotifications[notificationType] }}</div>
 
     <div>
-      <p-inputSwitch [(ngModel)]="webNotifications[notificationType]" (onChange)="updateWebSetting(notificationType, $event.checked)"></p-inputSwitch>
+      <my-input-switch
+        [(ngModel)]="webNotifications[notificationType]"
+        (ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
+      ></my-input-switch>
     </div>
 
     <div *ngIf="emailEnabled">
-      <p-inputSwitch [(ngModel)]="emailNotifications[notificationType]" (onChange)="updateEmailSetting(notificationType, $event.checked)"></p-inputSwitch>
+      <my-input-switch
+        [(ngModel)]="emailNotifications[notificationType]"
+        (ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
+      ></my-input-switch>
     </div>
   </div>
 </ng-container>
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index d3b6a9fa3..9e3fbcf65 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -1,5 +1,4 @@
 import { AutoCompleteModule } from 'primeng/autocomplete'
-import { InputSwitchModule } from 'primeng/inputswitch'
 import { TableModule } from 'primeng/table'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { NgModule } from '@angular/core'
@@ -29,7 +28,6 @@ import { MyAccountComponent } from './my-account.component'
 
     AutoCompleteModule,
     TableModule,
-    InputSwitchModule,
     DragDropModule,
 
     SharedMainModule,
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index 205d23cd5..b704a1cc6 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -42,7 +42,7 @@
       </div>
 
       <div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
-        <p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
+        <p-chart *ngIf="chartOptions && videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
       </div>
     </div>
   </div>
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index a63e98a51..f6ba50a48 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -21,6 +21,8 @@ export class MyVideoChannelsComponent implements OnInit {
   channelsSearch: string
   channelsSearchChanged = new Subject<string>()
 
+  chartOptions: any
+
   private user: User
 
   constructor (
@@ -47,55 +49,6 @@ export class MyVideoChannelsComponent implements OnInit {
     return this.screenService.isInSmallView()
   }
 
-  get chartOptions () {
-    return {
-      legend: {
-        display: false
-      },
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
-          display: false,
-          ticks: {
-            min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
-            max: Math.max(1, this.videoChannelsMaximumDailyViews)
-          }
-        }]
-      },
-      layout: {
-        padding: {
-          left: 15,
-          right: 15,
-          top: 10,
-          bottom: 0
-        }
-      },
-      elements: {
-        point: {
-          radius: 0
-        }
-      },
-      tooltips: {
-        mode: 'index',
-        intersect: false,
-        custom: function (tooltip: any) {
-          if (!tooltip) return
-          // disable displaying the color box
-          tooltip.displayColors = false
-        },
-        callbacks: {
-          label: (tooltip: any, data: any) => `${tooltip.value} views`
-        }
-      },
-      hover: {
-        mode: 'index',
-        intersect: false
-      }
-    }
-  }
-
   resetSearch () {
     this.channelsSearch = ''
     this.onChannelsSearchChanged()
@@ -159,6 +112,7 @@ channel with the same name (${videoChannel.name})!`,
               day => day.views
             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
           )
+
           this.videoChannelsMaximumDailyViews = max(
             // compute local maximum daily views for each channel, by their "views" attribute
             this.videoChannels.map(v => maxBy(
@@ -166,6 +120,57 @@ channel with the same name (${videoChannel.name})!`,
               day => day.views
             ).views) // the object returned is a ViewPerDate, so we still need to get the views attribute
           )
+
+          this.buildChartOptions()
         })
   }
+
+  private buildChartOptions () {
+    this.chartOptions = {
+      legend: {
+        display: false
+      },
+      scales: {
+        xAxes: [{
+          display: false
+        }],
+        yAxes: [{
+          display: false,
+          ticks: {
+            min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
+            max: Math.max(1, this.videoChannelsMaximumDailyViews)
+          }
+        }]
+      },
+      layout: {
+        padding: {
+          left: 15,
+          right: 15,
+          top: 10,
+          bottom: 0
+        }
+      },
+      elements: {
+        point: {
+          radius: 0
+        }
+      },
+      tooltips: {
+        mode: 'index',
+        intersect: false,
+        custom: function (tooltip: any) {
+          if (!tooltip) return
+          // disable displaying the color box
+          tooltip.displayColors = false
+        },
+        callbacks: {
+          label: (tooltip: any, data: any) => `${tooltip.value} views`
+        }
+      },
+      hover: {
+        mode: 'index',
+        intersect: false
+      }
+    }
+  }
 }
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index cff46a41d..05e016e55 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -5,7 +5,7 @@
 
 <div class="top-buttons">
   <div class="history-switch">
-    <p-inputSwitch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></p-inputSwitch>
+    <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
     <label i18n>Video history</label>
   </div>
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts
index e11f05c47..4ba95124d 100644
--- a/client/src/app/+my-library/my-history/my-history.component.ts
+++ b/client/src/app/+my-library/my-history/my-history.component.ts
@@ -47,7 +47,11 @@ export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnD
   ngOnInit () {
     super.ngOnInit()
 
-    this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
+    this.authService.userInformationLoaded
+      .subscribe(() => {
+        this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled
+      })
+
   }
 
   ngOnDestroy () {
diff --git a/client/src/app/+my-library/my-library.module.ts b/client/src/app/+my-library/my-library.module.ts
index bf791952c..5518cfd98 100644
--- a/client/src/app/+my-library/my-library.module.ts
+++ b/client/src/app/+my-library/my-library.module.ts
@@ -1,5 +1,4 @@
 import { AutoCompleteModule } from 'primeng/autocomplete'
-import { InputSwitchModule } from 'primeng/inputswitch'
 import { TableModule } from 'primeng/table'
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { NgModule } from '@angular/core'
@@ -34,7 +33,6 @@ import { MyVideosComponent } from './my-videos/my-videos.component'
 
     AutoCompleteModule,
     TableModule,
-    InputSwitchModule,
     DragDropModule,
 
     SharedMainModule,
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 3082a4f72..c2fbb46f9 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -150,12 +150,11 @@ p-calendar {
   display: block;
 
   ::ng-deep {
-    input,
-    .ui-calendar {
+    .p-calendar {
       width: 100%;
     }
 
-    input {
+    .p-inputtext {
       @include peertube-input-text(100%);
       color: #000;
     }
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommendations.module.ts b/client/src/app/+videos/+video-watch/recommendations/recommendations.module.ts
index 259afb196..1417f3e2a 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommendations.module.ts
+++ b/client/src/app/+videos/+video-watch/recommendations/recommendations.module.ts
@@ -1,6 +1,7 @@
-import { InputSwitchModule } from 'primeng/inputswitch'
+
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
+import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedSearchModule } from '@app/shared/shared-search'
 import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature'
@@ -12,12 +13,12 @@ import { RecommendedVideosStore } from './recommended-videos.store'
 @NgModule({
   imports: [
     CommonModule,
-    InputSwitchModule,
 
     SharedMainModule,
     SharedSearchModule,
     SharedVideoPlaylistModule,
-    SharedVideoMiniatureModule
+    SharedVideoMiniatureModule,
+    SharedFormModule
   ],
   declarations: [
     RecommendedVideosComponent
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index 1ab1b7343..3c7c679b8 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -8,7 +8,7 @@
         [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
       >
         <span i18n>AUTOPLAY</span>
-        <p-inputSwitch class="small" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
+        <my-input-switch  class="small" [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></my-input-switch>
       </div>
     </div>
 
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index da51040ad..75f4bdfe6 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -11,7 +11,7 @@ import { PluginService } from '@app/core/plugins/plugin.service'
 import { CustomModalComponent } from '@app/modal/custom-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
 import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
 import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
@@ -54,8 +54,11 @@ export class AppComponent implements OnInit, AfterViewInit {
     private location: PlatformLocation,
     private modalService: NgbModal,
     private markdownService: MarkdownService,
+    private ngbConfig: NgbConfig,
     public menu: MenuService
-  ) { }
+  ) {
+    this.ngbConfig.animation = false
+  }
 
   get instanceName () {
     return this.serverConfig.instance.name
diff --git a/client/src/app/core/notification/peertube-socket.service.ts b/client/src/app/core/notification/peertube-socket.service.ts
index 8668c44a8..2f17fd709 100644
--- a/client/src/app/core/notification/peertube-socket.service.ts
+++ b/client/src/app/core/notification/peertube-socket.service.ts
@@ -3,18 +3,19 @@ import { Injectable, NgZone } from '@angular/core'
 import { LiveVideoEventPayload, LiveVideoEventType, UserNotification as UserNotificationServer } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { AuthService } from '../auth'
+import { io, Socket } from 'socket.io-client'
 
 export type NotificationEvent = 'new' | 'read' | 'read-all'
 
 @Injectable()
 export class PeerTubeSocket {
-  private io: typeof import ('socket.io-client')
+  private io: typeof io
 
   private notificationSubject = new Subject<{ type: NotificationEvent, notification?: UserNotificationServer }>()
   private liveVideosSubject = new Subject<{ type: LiveVideoEventType, payload: LiveVideoEventPayload }>()
 
-  private notificationSocket: SocketIOClient.Socket
-  private liveVideosSocket: SocketIOClient.Socket
+  private notificationSocket: Socket
+  private liveVideosSocket: Socket
 
   constructor (
     private auth: AuthService,
@@ -77,7 +78,7 @@ export class PeerTubeSocket {
   private async importIOIfNeeded () {
     if (this.io) return
 
-    this.io = (await import('socket.io-client') as any).default
+    this.io = (await import('socket.io-client')).io
   }
 
   private dispatchLiveVideoEvent (type: LiveVideoEventType, payload: LiveVideoEventPayload) {
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 88e3d60db..810466a72 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -54,7 +54,8 @@
               <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
                 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Help share videos</ng-container>
-                <input type="checkbox" [checked]="user.webTorrentEnabled"/><label class="ml-auto" for="switch">Toggle p2p</label>
+
+                <my-input-switch class="ml-auto" [checked]="user.webTorrentEnabled"></my-input-switch>
               </a>
 
               <div class="dropdown-divider"></div>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 3ca4e47a1..8a8094fbb 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -352,48 +352,6 @@ menu {
   color: #6c757d;
 }
 
-input[type=checkbox]{
-  position: absolute;
-  visibility: hidden;
-}
-
-label {
-  cursor: pointer;
-  text-indent: -9999px;
-  width: 35px;
-  height: 20px;
-  background: #cccccc;
-  display: block;
-  border-radius: 100px;
-  position: relative;
-  margin: 0;
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 14px;
-    height: 14px;
-    background: pvar(--mainBackgroundColor);
-    border-radius: 50%;
-    transition: 0.3s ease-out;
-  }
-
-  &:active:after {
-    width: 40px;
-  }
-}
-
-input:checked + label {
-  background: pvar(--mainColor);
-
-  &:after {
-    left: calc(100% - 3px);
-    transform: translateX(-100%);
-  }
-}
-
 @media screen and (max-width: $mobile-view) {
   .menu-wrapper {
     width: 100% !important;
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index b2c7fa9ba..66b426191 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -2,6 +2,7 @@ export * from './form-validator.service'
 export * from './form-reactive'
 export * from './select'
 export * from './input-readonly-copy.component'
+export * from './input-switch.component'
 export * from './markdown-textarea.component'
 export * from './peertube-checkbox.component'
 export * from './preview-upload.component'
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
new file mode 100644
index 000000000..ce1dee470
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -0,0 +1,4 @@
+<div (click)="update()">
+  <input type="checkbox" [checked]="checked"/>
+  <label class="ml-auto">Toggle</label>
+</div>
diff --git a/client/src/app/shared/shared-forms/input-switch.component.scss b/client/src/app/shared/shared-forms/input-switch.component.scss
new file mode 100644
index 000000000..c14950bd7
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.scss
@@ -0,0 +1,44 @@
+@import '_variables';
+@import '_mixins';
+
+input {
+  position: absolute;
+  visibility: hidden;
+
+  & + label {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 35px;
+    height: 20px;
+    background: #cccccc;
+    display: block;
+    border-radius: 100px;
+    position: relative;
+    margin: 0;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 14px;
+      height: 14px;
+      background: pvar(--mainBackgroundColor);
+      border-radius: 50%;
+      transition: 0.3s ease-out;
+    }
+
+    &:active:after {
+      width: 40px;
+    }
+  }
+
+  &:checked + label {
+    background: pvar(--mainColor);
+
+    &:after {
+      left: calc(100% - 3px);
+      transform: translateX(-100%);
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-forms/input-switch.component.ts b/client/src/app/shared/shared-forms/input-switch.component.ts
new file mode 100644
index 000000000..abb96de62
--- /dev/null
+++ b/client/src/app/shared/shared-forms/input-switch.component.ts
@@ -0,0 +1,38 @@
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+  selector: 'my-input-switch',
+  styleUrls: [ './input-switch.component.scss' ],
+  templateUrl: './input-switch.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputSwitchComponent),
+      multi: true
+    }
+  ]
+})
+export class InputSwitchComponent implements ControlValueAccessor {
+  @Input() checked = false
+  @Input() inputName: string
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (checked: boolean) {
+    this.checked = checked
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  update () {
+    this.checked = !this.checked
+    this.propagateChange(this.checked)
+  }
+}
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index a28988f87..060abc995 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -1,13 +1,14 @@
 
 import { InputMaskModule } from 'primeng/inputmask'
-import { InputSwitchModule } from 'primeng/inputswitch'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
+import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 import { FormValidatorService } from './form-validator.service'
 import { InputReadonlyCopyComponent } from './input-readonly-copy.component'
+import { InputSwitchComponent } from './input-switch.component'
 import { MarkdownTextareaComponent } from './markdown-textarea.component'
 import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
 import { PreviewUploadComponent } from './preview-upload.component'
@@ -15,7 +16,6 @@ import { ReactiveFileComponent } from './reactive-file.component'
 import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
 import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
 import { TimestampInputComponent } from './timestamp-input.component'
-import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 
 @NgModule({
   imports: [
@@ -23,7 +23,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     ReactiveFormsModule,
 
     InputMaskModule,
-    InputSwitchModule,
     NgSelectModule,
 
     SharedMainModule,
@@ -39,6 +38,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     TextareaAutoResizeDirective,
     TimestampInputComponent,
 
+    InputSwitchComponent,
+
     SelectChannelComponent,
     SelectOptionsComponent,
     SelectTagsComponent,
@@ -52,7 +53,6 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     ReactiveFormsModule,
 
     InputMaskModule,
-    InputSwitchModule,
     NgSelectModule,
 
     InputReadonlyCopyComponent,
@@ -63,6 +63,8 @@ import { DynamicFormFieldComponent } from './dynamic-form-field.component'
     TextareaAutoResizeDirective,
     TimestampInputComponent,
 
+    InputSwitchComponent,
+
     SelectChannelComponent,
     SelectOptionsComponent,
     SelectTagsComponent,
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss
index 8092b095b..66e9aa032 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.scss
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss
@@ -11,5 +11,10 @@ p-inputmask {
     &:focus {
       box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
     }
+
+    &:disabled {
+      background: pvar(--mainBackgroundColor);
+      opacity: 0.5;
+    }
   }
 }