[player] Allow moving the keyboard only at its header

projects/player/src/app/components/french-keyboard/french-keyboard.component.ts

@@ -31,5 +31,6 @@ export class FrenchKeyboardComponent implements OnInit {
       this.rows = this.upperCharacterRows;
     }
     event.preventDefault();
+    event.stopPropagation();
   }
 }

projects/player/src/app/components/key/key.component.html

-<button mat-mini-fab class="key"
-     (mousedown)="onMouseDown($event)">{{key}}
+<button mat-mini-fab
+        class="key"
+        (mousedown)="onMouseDown($event)">{{key}}
 </button>

projects/player/src/app/components/key/key.component.ts

@@ -14,5 +14,6 @@ export class KeyComponent {
   onMouseDown(event: MouseEvent): void {
     this.keyboardService.enterKey(this.key);
     event.preventDefault();
+    event.stopPropagation();
   }
 }

projects/player/src/app/components/keyboard/keyboard.component.html

-<div class="keyboard-container" (mousedown)="onMouseDown($event)">
+<div class="keyboard-container"
+     (mousedown)="onMouseDown($event, false)">
   <div class="keyboard-header"></div>
-  <div class="keyboard-inner-container">
+  <div class="keyboard-inner-container"
+       (mousedown)="onMouseDown($event, true)">
     <app-french-keyboard *ngIf="preset === 'french'">
     </app-french-keyboard>
   </div>

projects/player/src/app/components/keyboard/keyboard.component.ts

@@ -8,7 +8,10 @@ import { Component, Input } from '@angular/core';
 export class KeyboardComponent {
   @Input() preset!: 'french' | 'numbers' | 'numbersAndOperators' | 'none';
 
-  onMouseDown = (event: MouseEvent): void => {
+  onMouseDown = (event: MouseEvent, stopPropagation: boolean): void => {
     event.preventDefault();
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
   };
 }