diff --git a/projects/common/ui-elements/video/video-element.ts b/projects/common/ui-elements/video/video-element.ts index 784ee7c0e7e6e75fb6f173c128160261caf862e1..55f0752a4ce4bf3c8add3f2fed5e587ec0619f04 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 6a72d35b827b500ea62c87ea77af930223c6ceac..95d0e86f578d30cd4fa847b03b1c30e3d37efac1 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 bf6a04be1283f38bce869ffee1fa471c38fcd5d7..9cbd76b92fb5a8464bf53ff66bd5b11fc2b4c370 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 9a10f7be8b4a8e31ba32b354115c32ee681c9a6d..54a515a64eaf40548b4a36dd5a6de5e997ba32a3 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",