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

-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;
 

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;

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"

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",