@deriv-web-design/ui 0.1.18 → 0.1.20

package/components.manifest.json

@@ -891,7 +891,7 @@
       "name": "DotLottieInView",
       "source": "components/DotLottieInView/DotLottieInView.tsx",
       "props": {},
-      "description": "Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view. When it enters view again, it plays once more. Set `enabled={false}` to force stop (e.g. hidden slides) without relying on geometry alone. The player itself is fetched lazily, the first time this instance is both enabled and in view — so a page with no animation never downloads it, and a below-the-fold band does not pay for it during initial load."
+      "description": "Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view. When it enters view again, it plays once more. Set `enabled={false}` to force stop (e.g. hidden slides) without relying on geometry alone. The player itself is fetched lazily, the first time this instance is in view — so a page with no animation never downloads it, and a below-the-fold band does not pay for it during initial load. `enabled` gates playback only: a consumer that crossfades between stacked instances needs them all loaded, not just the one currently showing."
     },
     "DownloadBadge": {
       "name": "DownloadBadge",
@@ -1826,6 +1826,16 @@
               "required": true,
               "description": "Visible label on the link, e.g. \"Learn more\""
             },
+            "mediaSizes": {
+              "type": "string",
+              "required": false,
+              "description": "Browser layout contract for `mediaSrcSet`. Defaults to the column this template actually lays out (`(min-width: 992px) 50vw, 100vw`), so a consumer supplying only `mediaSrcSet` still gets a correct pick."
+            },
+            "mediaSrcSet": {
+              "type": "string",
+              "required": false,
+              "description": "Responsive candidates for `mediaUrl`, as a standard `srcset` string. Render-time only — a CMS stores one master URL and the renderer derives these. Without them the same file is sent to every device: the desktop media column is ~560 CSS px (1120 at DPR 2, so a 1200w rendition), while a phone paints the same slot at ~382 CSS px and needs 800w. Measured on one asset: 64,736 B against 40,120 B for the width that actually paints. Ignored for `\"lottie\"` items — an animation is played, not resized."
+            },
             "mediaType": {
               "type": "\"image\" | \"lottie\"",
               "required": false,
@@ -1836,6 +1846,16 @@
               "required": true,
               "description": "URL to the .lottie file or any image asset (png, jpg, svg, webp…)"
             },
+            "posterSizes": {
+              "type": "string",
+              "required": false,
+              "description": "Layout contract for `posterSrcSet`. Same default as `mediaSizes`."
+            },
+            "posterSrcSet": {
+              "type": "string",
+              "required": false,
+              "description": "Responsive candidates for `posterUrl`. Same contract as `mediaSrcSet`."
+            },
             "posterUrl": {
               "type": "string",
               "required": false,

package/dist/index.d.mts

@@ -750,6 +750,24 @@ interface FeatureScrollItem {
     mediaType?: "lottie" | "image";
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
+    /**
+     * Responsive candidates for `mediaUrl`, as a standard `srcset` string.
+     *
+     * Render-time only — a CMS stores one master URL and the renderer derives
+     * these. Without them the same file is sent to every device: the desktop
+     * media column is ~560 CSS px (1120 at DPR 2, so a 1200w rendition), while a
+     * phone paints the same slot at ~382 CSS px and needs 800w. Measured on one
+     * asset: 64,736 B against 40,120 B for the width that actually paints.
+     *
+     * Ignored for `"lottie"` items — an animation is played, not resized.
+     */
+    mediaSrcSet?: string;
+    /**
+     * Browser layout contract for `mediaSrcSet`. Defaults to the column this
+     * template actually lays out (`(min-width: 992px) 50vw, 100vw`), so a
+     * consumer supplying only `mediaSrcSet` still gets a correct pick.
+     */
+    mediaSizes?: string;
     /**
      * Still frame painted while an animation's player and engine are loading.
      *
@@ -760,6 +778,10 @@ interface FeatureScrollItem {
      * a hole in the layout. Ignored once the animation is playing.
      */
     posterUrl?: string;
+    /** Responsive candidates for `posterUrl`. Same contract as `mediaSrcSet`. */
+    posterSrcSet?: string;
+    /** Layout contract for `posterSrcSet`. Same default as `mediaSizes`. */
+    posterSizes?: string;
 }
 interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */
@@ -844,9 +866,11 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
  * When it enters view again, it plays once more. Set `enabled={false}` to force stop
  * (e.g. hidden slides) without relying on geometry alone.
  *
- * The player itself is fetched lazily, the first time this instance is both
- * enabled and in view — so a page with no animation never downloads it, and a
- * below-the-fold band does not pay for it during initial load.
+ * The player itself is fetched lazily, the first time this instance is in view —
+ * so a page with no animation never downloads it, and a below-the-fold band does
+ * not pay for it during initial load. `enabled` gates playback only: a consumer
+ * that crossfades between stacked instances needs them all loaded, not just the
+ * one currently showing.
  */
 declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -750,6 +750,24 @@ interface FeatureScrollItem {
     mediaType?: "lottie" | "image";
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
+    /**
+     * Responsive candidates for `mediaUrl`, as a standard `srcset` string.
+     *
+     * Render-time only — a CMS stores one master URL and the renderer derives
+     * these. Without them the same file is sent to every device: the desktop
+     * media column is ~560 CSS px (1120 at DPR 2, so a 1200w rendition), while a
+     * phone paints the same slot at ~382 CSS px and needs 800w. Measured on one
+     * asset: 64,736 B against 40,120 B for the width that actually paints.
+     *
+     * Ignored for `"lottie"` items — an animation is played, not resized.
+     */
+    mediaSrcSet?: string;
+    /**
+     * Browser layout contract for `mediaSrcSet`. Defaults to the column this
+     * template actually lays out (`(min-width: 992px) 50vw, 100vw`), so a
+     * consumer supplying only `mediaSrcSet` still gets a correct pick.
+     */
+    mediaSizes?: string;
     /**
      * Still frame painted while an animation's player and engine are loading.
      *
@@ -760,6 +778,10 @@ interface FeatureScrollItem {
      * a hole in the layout. Ignored once the animation is playing.
      */
     posterUrl?: string;
+    /** Responsive candidates for `posterUrl`. Same contract as `mediaSrcSet`. */
+    posterSrcSet?: string;
+    /** Layout contract for `posterSrcSet`. Same default as `mediaSizes`. */
+    posterSizes?: string;
 }
 interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
     /** Section heading rendered as an H2 */
@@ -844,9 +866,11 @@ type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autopla
  * When it enters view again, it plays once more. Set `enabled={false}` to force stop
  * (e.g. hidden slides) without relying on geometry alone.
  *
- * The player itself is fetched lazily, the first time this instance is both
- * enabled and in view — so a page with no animation never downloads it, and a
- * below-the-fold band does not pay for it during initial load.
+ * The player itself is fetched lazily, the first time this instance is in view —
+ * so a page with no animation never downloads it, and a below-the-fold band does
+ * not pay for it during initial load. `enabled` gates playback only: a consumer
+ * that crossfades between stacked instances needs them all loaded, not just the
+ * one currently showing.
  */
 declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, poster, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -2676,7 +2676,7 @@ function DotLottieInView({
   }, [rootMargin, threshold]);
   (0, import_react12.useEffect)(() => {
     if (mounted) return;
-    if (!(inView && enabled)) return;
+    if (!inView) return;
     if (typeof window === "undefined") return;
     let cancelled = false;
     const commit = () => {
@@ -2691,15 +2691,23 @@ function DotLottieInView({
       }
       if (timerId !== null) window.clearTimeout(timerId);
     };
-  }, [inView, enabled, mounted]);
+  }, [inView, mounted]);
   (0, import_react12.useEffect)(() => {
     if (!dotLottie) return;
     if (!enabled || !inView) {
       dotLottie.stop();
       return;
     }
-    dotLottie.stop();
-    dotLottie.play();
+    const start = () => {
+      dotLottie.stop();
+      dotLottie.play();
+    };
+    if (dotLottie.isLoaded) {
+      start();
+      return;
+    }
+    dotLottie.addEventListener("load", start);
+    return () => dotLottie.removeEventListener("load", start);
   }, [dotLottie, enabled, inView]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
@@ -2796,6 +2804,7 @@ var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     )
   }
 );
+var DEFAULT_MEDIA_SIZES = "(min-width: 992px) 50vw, 100vw";
 function mediaSrc(item) {
   return typeof item.mediaUrl === "string" && item.mediaUrl !== "" ? item.mediaUrl : null;
 }
@@ -2819,6 +2828,10 @@ var MediaRenderer = ({ item, active, rootMargin, threshold }) => {
           "img",
           {
             src: item.posterUrl,
+            ...item.posterSrcSet ? {
+              srcSet: item.posterSrcSet,
+              sizes: item.posterSizes ?? DEFAULT_MEDIA_SIZES
+            } : {},
             alt: "",
             "aria-hidden": "true",
             loading: "lazy",
@@ -2832,6 +2845,7 @@ var MediaRenderer = ({ item, active, rootMargin, threshold }) => {
     "img",
     {
       src,
+      ...item.mediaSrcSet ? { srcSet: item.mediaSrcSet, sizes: item.mediaSizes ?? DEFAULT_MEDIA_SIZES } : {},
       alt: item.title,
       loading: "lazy",
       decoding: "async"