From df7248c6aff559cb1b83d271aaa10f88e0c37493 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Mon, 20 Sep 2021 16:57:40 +0200
Subject: [PATCH] [player] Improve styles for images and videos
Consider the available space for width and height
Increase their default heights
---
projects/common/element-components/image.component.ts | 2 ++
projects/common/element-components/video.component.ts | 2 ++
projects/editor/src/app/UnitFactory.ts | 6 ++++--
3 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index 8b2db7cc3..da5a0cb92 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -7,6 +7,8 @@ import { ElementComponent } from '../element-component.directive';
template: `
<img [src]="elementModel.src | safeResourceUrl"
alt="Image Placeholder"
+ [style.object-fit]="'contain'"
+ [style.height.%]="100"
[style.width.%]="100">
`
})
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index 4a29a5fa9..f403af3c3 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -6,6 +6,8 @@ import { ElementComponent } from '../element-component.directive';
selector: 'app-video',
template: `
<video controls [src]="elementModel.src | safeResourceUrl"
+ [style.object-fit]="'contain'"
+ [style.height.%]="100"
[style.width.%]="100">
</video>
`
diff --git a/projects/editor/src/app/UnitFactory.ts b/projects/editor/src/app/UnitFactory.ts
index 64370dc55..0724cd6ac 100644
--- a/projects/editor/src/app/UnitFactory.ts
+++ b/projects/editor/src/app/UnitFactory.ts
@@ -175,7 +175,8 @@ export function createRadioButtonGroupElement(): RadioButtonGroupElement {
export function createImageElement(imageSrc: string): ImageElement {
return {
src: imageSrc,
- ...createUnitUIElement('image')
+ ...createUnitUIElement('image'),
+ height: 100
};
}
@@ -189,7 +190,8 @@ export function createAudioElement(audioSrc: string): AudioElement {
export function createVideoElement(videoSrc: string): VideoElement {
return {
src: videoSrc,
- ...createUnitUIElement('video')
+ ...createUnitUIElement('video'),
+ height: 100
};
}
--
GitLab