[player] Fix scroll position of input element when opening keyboard

- Use done event of keyboard animation to set the scroll position
of the element
- In small browser views elements are scrolled to the top of the view
instead of the middle of the view

projects/player/src/app/components/layouts/player-layout/player-layout.component.html

@@ -20,6 +20,7 @@
   <aspect-keyboard
       *ngIf="keyboardService.isOpen"
       @keyboardSlideInOut
+      (@keyboardSlideInOut.done)="keyboardService.scrollElement()"
       [showFrenchCharacters]="keyboardService.elementComponent.elementModel.softwareKeyboardShowFrench"
       (keyClicked)="keyboardService.enterKey($event)"
       (backspaceClicked)="keyboardService.deleteCharacters(true)">

projects/player/src/app/services/keyboard.service.ts

@@ -27,20 +27,26 @@ export class KeyboardService extends InputService {
         elementComponent: TextAreaComponent | TextFieldComponent | TextFieldSimpleComponent | SpellCorrectComponent):
     void {
     this.alternativeKeyboardShowFrench = elementComponent.elementModel.softwareKeyboardShowFrench;
-    this.scrollElement(inputElement);
     this.setCurrentKeyInputElement(inputElement, elementComponent);
     this.isOpen = true;
   }
 
-  private scrollElement = (element: HTMLElement): void => {
-    if (this.isHiddenByKeyboard(element)) {
-      setTimeout(() => {
-        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }, 200);
+  scrollElement(): void {
+    if (this.isOpen && this.isElementHiddenByKeyboard()) {
+      const scrollPositionTarget = this.isViewHighEnoughToCenterElement() ? 'start' : 'center';
+      this.elementComponent.domElement.scrollIntoView({ block: scrollPositionTarget });
     }
-  };
+  }
+
+  private isViewHighEnoughToCenterElement(): boolean {
+    return  window.innerHeight < this.getKeyboardHeight() * 2;
+  }
 
-  private isHiddenByKeyboard = (element: HTMLElement): boolean => (
-    window.innerHeight - element.getBoundingClientRect().top < 300
-  );
+  private isElementHiddenByKeyboard(): boolean {
+    return window.innerHeight - this.elementComponent.domElement.getBoundingClientRect().top < this.getKeyboardHeight();
+  }
+
+  private getKeyboardHeight(): number {
+    return this.alternativeKeyboardShowFrench ? 400 : 350;
+  }
 }