[player] Use fixed size property for video and spelling components

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

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: [

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