@vectoriox/iox-ui 5.73.0 → 5.73.3

package/index.d.ts

@@ -957,6 +957,12 @@ declare class IoxVideoComponent implements AfterViewInit, OnDestroy {
     set frames(v: unknown);
     get frames(): unknown;
     private root?;
+    /**
+     * A Video the scroll plays usually fills its stage with height: 100%, which is a percent of this host. The host stays a
+     * box, because a node's width and margin live on it, so it passes the height down. Where a Scene flows, 100% of an
+     * auto stage is auto. An ordinary Video keeps its own height, so what stands beside it stays put.
+     */
+    get hostHeight(): string | null;
     plan: VideoPlan;
     attrs: Record<string, string>;
     html: SafeHtml;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.73.0",
+  "version": "5.73.3",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/scene-core/index.d.ts

@@ -130,7 +130,7 @@ declare function applySceneFirstFrame(el: HTMLElement | null | undefined, node:
  */
 declare const SCENE_FLOW_RULES: string;
 /** Under reduced motion the driver never starts, so the same rules hold for the whole visit. */
-declare const SCENE_REDUCED_MOTION_CSS = "@media (prefers-reduced-motion: reduce){.iox-role-scene{height:auto!important}.iox-role-scene-stage{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;container-type:normal!important}[data-iox-tracks]{transform:none!important;opacity:1!important;clip-path:none!important;pointer-events:auto!important}}";
+declare const SCENE_REDUCED_MOTION_CSS = "@media (prefers-reduced-motion: reduce){.iox-role-scene{height:auto!important}.iox-role-scene-stage{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;container-type:normal!important}[data-iox-tracks]{transform:none!important;opacity:1!important;clip-path:none!important;pointer-events:auto!important}[data-iox-video-frames]{height:auto!important}[data-iox-video-frames]>.iox-video__poster{position:static!important;height:auto!important}}";
 
 declare function sceneKeyPosition(p: number): number;
 interface SceneTrackDef {

package/src/media-core/video.ts

@@ -437,8 +437,11 @@ export function videoInnerHtml(plan: VideoPlan, options: VideoMarkupOptions): st
     // The same on the canvas and on the site: the first picture is real content, so it is fetched at once, named, and the
     // size a phone needs. A driver's canvas covers it when pictures arrive; with no script it is what there is.
     if (plan.kind === VideoKind.Frames) {
-        const srcset = plan.frames && !isAuthoredPoster(plan) ? phoneFrameSrcset(plan.frames) : '';
-        return `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}"${srcset ? ` srcset="${esc(srcset)}" sizes="100vw"` : ''} alt="${esc(plan.title)}" decoding="async">`;
+        const own = !!plan.frames && !isAuthoredPoster(plan);
+        const srcset = own ? phoneFrameSrcset(plan.frames!) : '';
+        // Its real size, so where a Scene flows (reduced motion, no script) the picture holds its height before it loads.
+        const size = own ? ` width="${plan.frames!.wide.width}" height="${plan.frames!.wide.height}"` : '';
+        return `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}"${srcset ? ` srcset="${esc(srcset)}" sizes="100vw"` : ''}${size} alt="${esc(plan.title)}" decoding="async">`;
     }
     const poster = plan.poster ? `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}" alt="" loading="lazy" decoding="async">` : '';
     const label = esc(videoPlayLabel(plan, words));

package/src/scene-core/scene.ts

@@ -1,4 +1,5 @@
 import { SceneRole } from '@vectoriox/iox-ui/composite-core';
+import { VideoAttribute, VideoClass } from '@vectoriox/iox-ui/media-core';
 
 /**
  * A Scene's data and maths (premium-sites plan §5b). A Scene is a recipe of ordinary nodes — a tall Section, a pinned
@@ -303,7 +304,10 @@ export function applySceneFirstFrame(el: HTMLElement | null | undefined, node: S
  */
 export const SCENE_FLOW_RULES = `.iox-role-scene{height:auto!important}`
     + `.iox-role-scene-stage{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;container-type:normal!important}`
-    + `[${SceneAttribute.Tracks}]{transform:none!important;opacity:1!important;clip-path:none!important;pointer-events:auto!important}`;
+    + `[${SceneAttribute.Tracks}]{transform:none!important;opacity:1!important;clip-path:none!important;pointer-events:auto!important}`
+    // A Video the scroll plays stands as its poster, at the poster's own height: a percent of a stage that now flows is nothing.
+    + `[${VideoAttribute.Frames}]{height:auto!important}`
+    + `[${VideoAttribute.Frames}]>.${VideoClass.Poster}{position:static!important;height:auto!important}`;
 
 /** Under reduced motion the driver never starts, so the same rules hold for the whole visit. */
 export const SCENE_REDUCED_MOTION_CSS = `@media (prefers-reduced-motion: reduce){${SCENE_FLOW_RULES}}`;