wrap the hotkeys component to allow templating 🎨

client/src/app/app.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="customCSS" [innerHTML]="customCSS"></div>
 
-<hotkeys-cheatsheet></hotkeys-cheatsheet>
+<my-hotkeys-cheatsheet></my-hotkeys-cheatsheet>
 
 <div [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
   <div class="header">

client/src/app/app.module.ts

@@ -5,7 +5,8 @@ import { ResetPasswordModule } from '@app/reset-password'
 
 import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
 import { ClipboardModule } from 'ngx-clipboard'
-import { HotkeyModule, IHotkeyOptions } from 'angular2-hotkeys'
+import { HotkeyModule } from '@app/core/hotkeys'
+import { IHotkeyOptions } from 'angular2-hotkeys'
 import 'focus-visible'
 
 import { AppRoutingModule } from './app-routing.module'

client/src/app/core/hotkeys/hotkeys.component.html

@@ -0,0 +1,18 @@
+<div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible}">
+  <div class="cfp-hotkeys">
+    <h4 class="cfp-hotkeys-title">{{ title }}</h4>
+    <div class="cfp-hotkeys-table">
+      <table>
+        <tbody>
+          <tr *ngFor="let hotkey of hotkeys">
+            <td class="cfp-hotkeys-keys">
+              <span *ngFor="let key of hotkey.formatted" class="cfp-hotkeys-key">{{ key }}</span>
+            </td>
+            <td class="cfp-hotkeys-text">{{ hotkey.description }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="cfp-hotkeys-close" (click)="toggleCheatSheet()">&#215;</div>
+  </div>
+</div>

client/src/app/core/hotkeys/hotkeys.component.scss

@@ -0,0 +1,105 @@
+.cfp-hotkeys-container {
+  display: table !important;
+  position: fixed;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  color: #333;
+  font-size: 1em;
+  background-color: rgba(255,255,255,0.9);
+}
+
+.cfp-hotkeys-container.fade {
+  z-index: -1024;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -moz-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+
+.cfp-hotkeys-container.fade.in {
+  z-index: 10002;
+  visibility: visible;
+  opacity: 1;
+}
+
+.cfp-hotkeys-title {
+  font-weight: bold;
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.cfp-hotkeys {
+  width: 100%;
+  height: 100%;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.cfp-hotkeys table {
+  margin: auto;
+  color: #333;
+}
+
+.cfp-content {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.cfp-hotkeys-keys {
+  padding: 5px;
+  text-align: right;
+}
+
+.cfp-hotkeys-key {
+  display: inline-block;
+  color: #fff;
+  background-color: #333;
+  border: 1px solid #333;
+  border-radius: 5px;
+  text-align: center;
+  margin-right: 5px;
+  box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
+  padding: 5px 9px;
+  font-size: 1em;
+}
+
+.cfp-hotkeys-text {
+  padding-left: 10px;
+  font-size: 1em;
+}
+
+.cfp-hotkeys-close {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  font-size: 2em;
+  font-weight: bold;
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  min-height: 45px;
+  min-width: 45px;
+  text-align: center;
+}
+
+.cfp-hotkeys-close:hover {
+  background-color: #fff;
+  cursor: pointer;
+}
+
+@media all and (max-width: 500px) {
+  .cfp-hotkeys {
+    font-size: 0.8em;
+  }
+}
+
+@media all and (min-width: 750px) {
+  .cfp-hotkeys {
+    font-size: 1.2em;
+  }
+}

client/src/app/core/hotkeys/hotkeys.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, OnDestroy, Input } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { HotkeysService, Hotkey } from 'angular2-hotkeys'
+
+@Component({
+  selector : 'my-hotkeys-cheatsheet',
+  templateUrl : './hotkeys.component.html',
+  styleUrls: [ './hotkeys.component.scss' ]
+})
+export class CheatSheetComponent implements OnInit, OnDestroy {
+  helpVisible = false
+  @Input() title = this.i18n('Keyboard Shortcuts:')
+  subscription: Subscription
+
+  hotkeys: Hotkey[]
+
+  constructor (
+    private hotkeysService: HotkeysService,
+    private i18n: I18n
+  ) {}
+
+  public ngOnInit (): void {
+    this.subscription = this.hotkeysService.cheatSheetToggle.subscribe((isOpen) => {
+      if (isOpen !== false) {
+        this.hotkeys = this.hotkeysService.hotkeys.filter(hotkey => hotkey.description)
+      }
+
+      if (isOpen === false) {
+        this.helpVisible = false
+      } else {
+        this.toggleCheatSheet()
+      }
+    })
+  }
+
+  public ngOnDestroy (): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+  }
+
+  public toggleCheatSheet (): void {
+    this.helpVisible = !this.helpVisible
+  }
+}

client/src/app/core/hotkeys/hotkeys.module.ts

@@ -0,0 +1,23 @@
+import { NgModule, ModuleWithProviders } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { HotkeysDirective, IHotkeyOptions, HotkeyOptions, HotkeysService } from 'angular2-hotkeys'
+import { CheatSheetComponent } from './hotkeys.component'
+
+export * from './hotkeys.component'
+
+@NgModule({
+  imports : [CommonModule],
+  exports : [HotkeysDirective, CheatSheetComponent],
+  declarations : [HotkeysDirective, CheatSheetComponent]
+})
+export class HotkeyModule {
+  static forRoot (options: IHotkeyOptions = {}): ModuleWithProviders {
+    return {
+      ngModule : HotkeyModule,
+      providers : [
+        HotkeysService,
+        { provide : HotkeyOptions, useValue : options }
+      ]
+    }
+  }
+}

client/src/app/core/hotkeys/index.ts

@@ -0,0 +1 @@
+export * from './hotkeys.module'

client/src/app/core/index.ts

@@ -1,6 +1,7 @@
 export * from './auth'
-export * from './server'
 export * from './confirm'
 export * from './routing'
+export * from './server'
 export * from './theme'
+
 export * from './core.module'

client/src/app/core/theme/theme.service.ts

@@ -16,7 +16,6 @@ export class ThemeService {
     this.previousTheme['inputPlaceholderColor'] = '#fff'
 
     this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark')
-    console.log(this.darkTheme)
     if (this.darkTheme) this.toggleDarkTheme(false)
   }