From 7b364074abe9c15253869828d720a8551499b596 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 17 Dec 2021 13:44:20 +0100
Subject: [PATCH] [player] Use fixed size property for video and spelling
components
---
docs/release-notes-player.txt | 3 +-
.../spell-correct/spell-correct.component.ts | 74 ++++++++++---------
.../ui-elements/video/video.component.ts | 5 +-
3 files changed, 45 insertions(+), 37 deletions(-)
diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 558d191b8..b322dc2c3 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -2,9 +2,10 @@ Player
======
1.13.0
- Improve page snapping when scrolling when concat-scroll-snap property is selected
+ - Use fixed size property for video and spelling components
1.12.0
-- Use fixed size property dynamic button, drop-list and text-field components
+- Use fixed size property for dynamic button, drop-list and text-field components
- Prevent scrollbars for static buttons with images
- Fix the playability of dependent audios and videos
- Fix storing/restoring of the playback time of audios and videos
diff --git a/projects/common/ui-elements/spell-correct/spell-correct.component.ts b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
index 4db5c1dbc..7a758cb17 100644
--- a/projects/common/ui-elements/spell-correct/spell-correct.component.ts
+++ b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
@@ -6,49 +6,53 @@ import { SpellCorrectElement } from './spell-correct-element';
@Component({
selector: 'app-spell-correct',
template: `
- <div fxFlex
- fxLayout="column"
- appInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [style.width.%]="100"
- [style.height.%]="100">
- <mat-form-field class="small-input">
- <input matInput type="text"
- [style.text-align]="'center'"
- autocomplete="off"
- [readonly]="elementModel.readOnly"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [value]="elementModel.value"
- [formControl]="elementFormControl">
- </mat-form-field>
- <button #buttonElement
- mat-button
- type="button"
- [disabled]="elementModel.readOnly"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : '400'"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [style.width.%]="100"
- [style.margin-top]="'-20px'"
- [style.text-decoration-line]=
- "(inputElement && inputElement.focused) ||
+ <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize">
+ <div fxFlex
+ fxLayout="column"
+ appInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [style.width.%]="100"
+ [style.height.%]="100">
+ <mat-form-field class="small-input">
+ <input matInput type="text"
+ [style.text-align]="'center'"
+ autocomplete="off"
+ [readonly]="elementModel.readOnly"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [value]="elementModel.value"
+ [formControl]="elementFormControl">
+ </mat-form-field>
+ <button #buttonElement
+ mat-button
+ type="button"
+ [disabled]="elementModel.readOnly"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : '400'"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [style.width.%]="100"
+ [style.margin-top]="'-20px'"
+ [style.text-decoration-line]=
+ "(inputElement && inputElement.focused) ||
(inputElement && !!inputElement.value) ||
(elementFormControl && elementFormControl.value === '') ? 'line-through' : ''"
- (click)="
+ (click)="
elementFormControl.value === null ?
inputElement.focus() :
buttonElement.focus();
elementFormControl.value === null ?
(elementFormControl.setValue('')) :
elementFormControl.setValue(null)">{{elementModel.label}}
- </button>
+ </button>
+ </div>
</div>
`,
styles: [
diff --git a/projects/common/ui-elements/video/video.component.ts b/projects/common/ui-elements/video/video.component.ts
index 95d0e86f5..5518d8efd 100644
--- a/projects/common/ui-elements/video/video.component.ts
+++ b/projects/common/ui-elements/video/video.component.ts
@@ -5,7 +5,10 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'app-video',
template: `
- <div [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
+ <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize"
+ [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
<video #player
(playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
(pause)="onMediaPlayStatusChanged.emit(null)"
--
GitLab