Fix Safari aspect ratio for videos

[Ticket: #624]

src/app/components/shared/view-comment-data/view-comment-data.component.html

@@ -3,7 +3,8 @@
   <quill-editor #editor
                 placeholder="{{ placeHolderText | translate }}"
                 [modules]="quillModules"
-                (document:click)="onDocumentClick($event)">
+                (document:click)="onDocumentClick($event)"
+                (window:resize)="recalcAspectRatio()">
   </quill-editor>
   <div #tooltipContainer></div>
   <div fxLayout="row" style="justify-content: flex-end; padding: 0 5px">
@@ -13,6 +14,6 @@
   </div>
 </ars-row>
 <div *ngIf="!isEditor">
-  <quill-view #quillView [modules]="quillModules">
+  <quill-view #quillView [modules]="quillModules" (window:resize)="recalcAspectRatio()">
   </quill-view>
 </div>

src/app/components/shared/view-comment-data/view-comment-data.component.ts

@@ -217,6 +217,16 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
     } else {
       this.quillView.quillEditor.setContents(delta);
     }
+    this.recalcAspectRatio();
+  }
+
+  recalcAspectRatio() {
+    const elem = this.isEditor ? this.editor.editorElem.firstElementChild : this.quillView.editorElem.firstElementChild;
+    elem.querySelectorAll('.images .ql-video').forEach((e: HTMLElement) => {
+      e.addEventListener('resize', () => console.log(e));
+      const width = parseFloat(window.getComputedStyle(e).width);
+      e.style.height = (width * 9 / 16) + 'px';
+    });
   }
 
   private syncErrorLayer(): void {