Use h1 for hotkeys modal

And so hide what's behind the modal

client/src/app/app.component.html

@@ -1,8 +1,11 @@
 <div *ngIf="customCSS" [innerHTML]="customCSS"></div>
 
-<my-hotkeys-cheatsheet></my-hotkeys-cheatsheet>
+<my-hotkeys-cheatsheet (hotkeysModalStateChange)="onHotkeysModalStateChange($event)"></my-hotkeys-cheatsheet>
 
-<div class="peertube-container" [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
+<div
+  class="peertube-container"
+  [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn(), 'hotkeys-modal-opened': hotkeysModalOpened }"
+>
   <div class="root-header">
 
     <div class="top-left-block">

client/src/app/app.component.scss

@@ -3,6 +3,10 @@
 
 .peertube-container {
   padding-bottom: 20px;
+
+  &.hotkeys-modal-opened {
+    display: none;
+  }
 }
 
 .main-row {

client/src/app/app.component.ts

@@ -49,6 +49,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   customCSS: SafeHtml
   broadcastMessage: { message: string, dismissable: boolean, class: string } | null = null
+  hotkeysModalOpened = false
 
   private serverConfig: HTMLServerConfig
 
@@ -308,6 +309,8 @@ export class AppComponent implements OnInit, AfterViewInit {
     }
   }
 
+  // ---------------------------------------------------------------------------
+
   private initHotkeys () {
     this.hotkeysService.add([
       new Hotkey([ '/', 's' ], (event: KeyboardEvent): boolean => {
@@ -347,6 +350,12 @@ export class AppComponent implements OnInit, AfterViewInit {
     ])
   }
 
+  onHotkeysModalStateChange (opened: boolean) {
+    this.hotkeysModalOpened = opened
+  }
+
+  // ---------------------------------------------------------------------------
+
   private loadUser () {
     const tokens = this.userLocalStorage.getTokens()
     if (!tokens) return

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

@@ -1,6 +1,6 @@
 <div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible}">
   <div class="cfp-hotkeys">
-    <h4 class="cfp-hotkeys-title">{{ title }}</h4>
+    <h1 class="cfp-hotkeys-title">{{ title }}</h1>
 
     <ul role="presentation">
       <li *ngFor="let hotkey of hotkeys">

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

@@ -1,6 +1,6 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { Subscription } from 'rxjs'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 
 @Component({
   selector: 'my-hotkeys-cheatsheet',
@@ -9,6 +9,9 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 })
 export class CheatSheetComponent implements OnInit, OnDestroy {
   @Input() title = $localize`Keyboard Shortcuts:`
+
+  @Output() hotkeysModalStateChange = new EventEmitter<boolean>()
+
   helpVisible = false
   subscription: Subscription
 
@@ -29,6 +32,8 @@ export class CheatSheetComponent implements OnInit, OnDestroy {
       } else {
         this.toggleHelpVisible()
       }
+
+      this.hotkeysModalStateChange.emit(this.helpVisible)
     })
   }