From f0844d0b606b65ee1f6e3f4aadfdf750ab8235ee Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 30 Nov 2021 11:37:41 +0100
Subject: [PATCH] Add property scale for video elements

If the property is set, the video will be scaled as far as its
container (static element or grid) allows, otherwise only up to its
maximum native size.
---
 projects/common/ui-elements/video/video-element.ts     |  6 ++++--
 projects/common/ui-elements/video/video.component.ts   | 10 ++++++----
 .../element-model-properties.component.html            |  2 +-
 projects/editor/src/assets/i18n/de.json                |  2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/projects/common/ui-elements/video/video-element.ts b/projects/common/ui-elements/video/video-element.ts
index 784ee7c0e..55f0752a4 100644
--- a/projects/common/ui-elements/video/video-element.ts
+++ b/projects/common/ui-elements/video/video-element.ts
@@ -1,9 +1,11 @@
-import { PlayerElement, PlayerProperties, PositionedElement, PositionProperties, UIElement } from '../../models/uI-element';
+import {
+  PlayerElement, PlayerProperties, PositionedElement, PositionProperties, UIElement
+} from '../../models/uI-element';
 import { initPlayerElement, initPositionedElement } from '../../util/unit-interface-initializer';
 
 export class VideoElement extends UIElement implements PositionedElement, PlayerElement {
   src: string = '';
-
+  scale: boolean = false;
   positionProps: PositionProperties;
   playerProps: PlayerProperties;
 
diff --git a/projects/common/ui-elements/video/video.component.ts b/projects/common/ui-elements/video/video.component.ts
index 6a72d35b8..95d0e86f5 100644
--- a/projects/common/ui-elements/video/video.component.ts
+++ b/projects/common/ui-elements/video/video.component.ts
@@ -5,9 +5,7 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
 @Component({
   selector: 'app-video',
   template: `
-    <div [style.object-fit]="'contain'"
-         [style.height.%]="100"
-         [style.width.%]="100">
+    <div [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
       <video #player
              (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
              (pause)="onMediaPlayStatusChanged.emit(null)"
@@ -26,7 +24,11 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
       </app-control-bar>
     </div>
   `,
-  styles: ['.correct-position{ display: block; margin-top: -4px; }']
+  styles: [
+    '.correct-position{ display: block; margin-top: -4px; }',
+    '.max-size-video{ width: fit-content; max-height: fit-content }',
+    '.fit-video{ width: 100%; height: 100%; object-fit: contain}'
+  ]
 })
 export class VideoComponent extends MediaPlayerElementComponent {
   @Input() elementModel!: VideoElement;
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
index bf6a04be1..9cbd76b92 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
@@ -400,7 +400,7 @@
   <mat-checkbox *ngIf="combinedProperties.scale !== undefined"
                 [checked]="$any(combinedProperties.scale)"
                 (change)="updateModel.emit({ property: 'scale', value: $event.checked })">
-    {{'propertiesPanel.imageScale' | translate }}
+    {{'propertiesPanel.scale' | translate }}
   </mat-checkbox>
 
   <mat-checkbox *ngIf="combinedProperties.magnifier !== undefined"
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 9a10f7be8..54a515a64 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -108,7 +108,7 @@
     "floating": "schwebend",
     "lineColoring": "Zeilenfärbung",
     "lineColoringColor": "Zeilenfarbe",
-    "imageScale": "Bild skalieren",
+    "scale": "Skalieren",
     "magnifier": "Lupe",
     "magnifierSize": "Größe der Lupe",
     "magnifierZoom": "Vergrößerungsfaktor",
-- 
GitLab