From 7211b92b2ce8d45e26e959547202fd7caf82e22c Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Mon, 6 Sep 2021 12:04:34 +0200
Subject: [PATCH] Fix Safari aspect ratio for videos
[Ticket: #624]
---
.../view-comment-data/view-comment-data.component.html | 5 +++--
.../view-comment-data/view-comment-data.component.ts | 10 ++++++++++
2 files changed, 13 insertions(+), 2 deletions(-)
diff --git a/src/app/components/shared/view-comment-data/view-comment-data.component.html b/src/app/components/shared/view-comment-data/view-comment-data.component.html
index df7e8b0c5..75dd3999e 100644
--- a/src/app/components/shared/view-comment-data/view-comment-data.component.html
+++ b/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>
diff --git a/src/app/components/shared/view-comment-data/view-comment-data.component.ts b/src/app/components/shared/view-comment-data/view-comment-data.component.ts
index fddb06655..88bae55aa 100644
--- a/src/app/components/shared/view-comment-data/view-comment-data.component.ts
+++ b/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 {
--
GitLab