Set scroll position at top of the textarea when opening the subtitle editor.

## Description

This set the position of the scrollbar at the top of the textarea when opening the __subtitle editor__.
Previously the textarea scroll position was at the bottom of the textarea which doesn't make much sense when you want to edit a subtitle : you most likely want to edit the beginning of the subtitle first.

This also set the caret position on the first character.

## Design decision

I had to use a *component approach* instead of an `<ng-template>` for the edition modal because the `@viewChild` directive doesn't work for elements __inside__ an `<ng-template>`.
I needed the `viewChild` directive to get an `ElementRef` of the `textarea`.

> See the following issue and its workaround :
> - https://github.com/valor-software/ngx-bootstrap/issues/3825
> - https://stackblitz.com/edit/angular-t5dfp7
> - https://medium.com/@izzatnadiri/how-to-pass-data-to-and-receive-from-ng-bootstrap-modals-916f2ad5d66e

## Related issues
Closes [peertube-plugin-transcription/#39](https://gitlab.com/apps_education/peertube/plugin-transcription/-/issues/39)

1 files changed, 34 insertions, 0 deletions

diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html
new file mode 100644
index 000000000..e8079c74e
--- /dev/null
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-edit-modal-content/video-caption-edit-modal-content.component.html
@@ -0,0 +1,34 @@
+<ng-container [formGroup]="form">
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Edit caption</h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <label i18n for="captionFileContent">Caption</label>
+    <textarea
+      id="captionFileContent"
+      formControlName="captionFileContent"
+      class="form-control caption-textarea"
+      [ngClass]="{ 'input-error': formErrors['captionFileContent'] }"
+      #textarea
+    >
+    </textarea>
+
+    <div *ngIf="formErrors.captionFileContent" class="form-error">
+      {{ formErrors.captionFileContent }}
+    </div>
+  </div>
+
+  <div class="modal-footer inputs">
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
+      (click)="cancel()" (key.enter)="cancel()"
+    >
+
+    <input
+      type="submit" i18n-value value="Edit this caption" class="peertube-button orange-button"
+      [disabled]="!form.valid" (click)="updateCaption()"
+    >
+  </div>
+</ng-container>