@wix/editor-react-components 1.2762.0 → 1.2763.0

package/dist/site/components/VideoScrub/component.js

@@ -1,9 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { V as Video } from "../chunks/Video.js";
-import { S as STICKY_TOP, a as ScrollSpeed, b as SCROLL_VH_PER_SECOND, c as START_LINE, M as MAX_SCROLL_VH, d as MIN_SCROLL_VH, D as DEFAULT_VIDEO_RATIO, R as ROOT_CLASS, e as ScrubStart } from "../chunks/constants2.js";
 import { useService } from "@wix/services-manager-react";
+import { T as TranslationsDefinition } from "../chunks/index4.js";
+import { V as Video } from "../chunks/Video.js";
+import { S as STICKY_TOP, a as ScrollSpeed, b as SCROLL_VH_PER_SECOND, c as START_LINE, M as MAX_SCROLL_VH, d as MIN_SCROLL_VH, e as assertDuration, i as isDuration, T as TIMEFRAME_CONTENT_CLASS, f as TIMEFRAMES_ARIA_LABEL_DEFAULT, g as TIMEFRAMES_ARIA_LABEL_KEY, A as ARIA_LABEL_NAMESPACE, D as DEFAULT_VIDEO_RATIO, h as TIMEFRAMES_LAYER_CLASS, R as ROOT_CLASS, j as ScrubStart } from "../chunks/types.js";
+import { c as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
+import { g as getTranslation } from "../chunks/getTranslation.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const getScrollLengthVh = (duration, speed = ScrollSpeed.normal) => clamp(
@@ -203,6 +206,224 @@ const useScrubProgress = ({
     };
   }, [enabled, start, rootRef, stageRef, onProgress]);
 };
+const toMs = (seconds) => Number.isFinite(seconds) ? Math.floor(seconds * 1e3 + 1e-6) : NaN;
+function activeAt(list, timeMs, durationMs) {
+  assertDuration(durationMs);
+  if (!Number.isFinite(timeMs)) {
+    return void 0;
+  }
+  if (timeMs >= durationMs) {
+    let latest;
+    for (const item2 of list) {
+      if (item2.startMs < durationMs && item2.endMs >= durationMs && (!latest || item2.startMs > latest.startMs)) {
+        latest = item2;
+      }
+    }
+    return latest;
+  }
+  return list.find((item2) => item2.startMs <= timeMs && timeMs < item2.endMs);
+}
+const REPORT = [
+  "seeking",
+  "seeked",
+  "timeupdate",
+  "loadedmetadata",
+  "emptied"
+];
+function watchVideoTime(video, onTimeMs) {
+  let lastMs;
+  let lastEnded;
+  let stopped = false;
+  const report = () => {
+    const timeMs = toMs(video.currentTime);
+    const { ended } = video;
+    if (stopped || !Number.isFinite(timeMs) || timeMs === lastMs && ended === lastEnded) {
+      return;
+    }
+    lastMs = timeMs;
+    lastEnded = ended;
+    onTimeMs(timeMs, ended);
+  };
+  for (const type of REPORT) {
+    video.addEventListener(type, report);
+  }
+  report();
+  return () => {
+    if (stopped) {
+      return;
+    }
+    stopped = true;
+    for (const type of REPORT) {
+      video.removeEventListener(type, report);
+    }
+  };
+}
+function indexAt(timeframes, timeMs, durationMs) {
+  if (!isDuration(durationMs)) {
+    return void 0;
+  }
+  const active = activeAt(timeframes, timeMs, durationMs);
+  const index = active === void 0 ? -1 : timeframes.indexOf(active);
+  return index === -1 ? void 0 : index;
+}
+function useActiveTimeframeIndex(timeframes, video, durationMs) {
+  const [index, setIndex] = useState(() => indexAt(timeframes, 0, durationMs));
+  useEffect(() => {
+    if (!video || !isDuration(durationMs)) {
+      setIndex(indexAt(timeframes, 0, durationMs));
+      return void 0;
+    }
+    return watchVideoTime(
+      video,
+      (timeMs, ended) => setIndex(indexAt(timeframes, ended ? durationMs : timeMs, durationMs))
+    );
+  }, [video, timeframes, durationMs]);
+  return isDuration(durationMs) ? index : void 0;
+}
+const layer = "layer__OWBg-";
+const item = "item__BRyMo";
+const inactive = "inactive__JyOT2";
+const content = "content__SndXf";
+const styles$1 = {
+  layer,
+  item,
+  inactive,
+  content
+};
+const inactiveProps = { hidden: true, "aria-hidden": true, inert: "" };
+function TimeframeLayer({
+  items,
+  activeIndex,
+  className,
+  a11yAttributes
+}) {
+  const layerRef = useRef(null);
+  const activeItemRef = useRef(null);
+  useLayoutEffect(() => {
+    const layer2 = layerRef.current;
+    if (!layer2) {
+      return;
+    }
+    const previous = activeItemRef.current;
+    const current = layer2.querySelector(
+      ":scope > [data-timeframe-active]"
+    );
+    activeItemRef.current = current;
+    if (previous && previous !== current && previous.contains(layer2.ownerDocument.activeElement)) {
+      layer2.focus({ preventScroll: true });
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...a11yAttributes,
+      ref: layerRef,
+      className: clsx(styles$1.layer, className),
+      role: "group",
+      tabIndex: -1,
+      children: items.map((item2, index) => {
+        const active = index === activeIndex;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-timeframe-index": index,
+            "data-timeframe-active": active ? "" : void 0,
+            className: clsx(styles$1.item, !active && styles$1.inactive),
+            ...active ? {} : inactiveProps,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(TIMEFRAME_CONTENT_CLASS, styles$1.content),
+                "data-timeframe-content": "",
+                children: item2.content
+              }
+            )
+          },
+          item2.key
+        );
+      })
+    }
+  );
+}
+const isTimeframe = (item2) => typeof item2 === "object" && item2 !== null && Number.isFinite(item2.startMs) && Number.isFinite(item2.endMs);
+function useTimeframes({
+  timeframes: savedTimeframes,
+  activeTimeframeIndex,
+  durationSeconds,
+  editing,
+  videoRef,
+  videoKey
+}) {
+  const [media2, setMedia] = useState(null);
+  useEffect(() => {
+    setMedia(videoRef.current);
+  }, [videoRef, videoKey]);
+  const durationMs = durationSeconds > 0 ? toMs(durationSeconds) : void 0;
+  const timeframes = useMemo(
+    () => savedTimeframes.filter(isTimeframe),
+    [savedTimeframes]
+  );
+  const timing = useMemo(
+    () => timeframes.map(({ startMs, endMs }) => ({ startMs, endMs })),
+    [timeframes]
+  );
+  useActiveTimeframeIndex(timing, editing ? null : media2, durationMs);
+  let timeMs = 0;
+  if (media2) {
+    timeMs = media2.ended && durationMs !== void 0 ? durationMs : toMs(media2.currentTime);
+  }
+  const playingIndex = indexAt(timing, timeMs, durationMs);
+  const selectedItem = Number.isInteger(activeTimeframeIndex) ? savedTimeframes[activeTimeframeIndex] : void 0;
+  const found = selectedItem ? timeframes.indexOf(selectedItem) : -1;
+  let selected;
+  if (found !== -1) {
+    selected = found;
+  } else if (activeTimeframeIndex < 0) {
+    selected = void 0;
+  } else if (timeframes.length > 0) {
+    selected = activeTimeframeIndex >= savedTimeframes.length ? timeframes.length - 1 : 0;
+  }
+  const seekMs = editing && selected !== void 0 ? timing[selected].startMs : void 0;
+  useEffect(() => {
+    if (!media2 || seekMs === void 0) {
+      return void 0;
+    }
+    const go = () => {
+      media2.pause();
+      media2.currentTime = seekMs / 1e3;
+    };
+    if (media2.readyState >= 1) {
+      go();
+    }
+    media2.addEventListener("loadedmetadata", go);
+    return () => media2.removeEventListener("loadedmetadata", go);
+  }, [media2, seekMs]);
+  const [frameShown, setFrameShown] = useState(false);
+  useEffect(() => {
+    setFrameShown(false);
+    if (!editing || !media2) {
+      return void 0;
+    }
+    const show = () => setFrameShown(true);
+    const hide = () => setFrameShown(false);
+    media2.addEventListener("seeked", show);
+    media2.addEventListener("emptied", hide);
+    return () => {
+      media2.removeEventListener("seeked", show);
+      media2.removeEventListener("emptied", hide);
+    };
+  }, [editing, media2]);
+  const items = timeframes.map((timeframe, index) => ({
+    // Index keys only for broken items with no identifier; they mix up state after a split.
+    key: typeof timeframe.timeframeIdentifier === "string" && timeframe.timeframeIdentifier !== "" ? timeframe.timeframeIdentifier : `timeframe-index-${index}`,
+    content: timeframe.container
+  }));
+  return {
+    items,
+    activeIndex: editing ? selected : playingIndex,
+    frameShown: editing && frameShown
+  };
+}
 const root = "root__Wv1E1";
 const stage = "stage__XFpev";
 const media = "media__tTFno";
@@ -221,14 +442,34 @@ const SCRUB_ROOT_STYLE = {
   minHeight: "max-content",
   aspectRatio: "auto"
 };
+const NO_TIMEFRAMES = [];
 const VideoScrub = ({
   id,
   className,
   video,
   scrollSpeed = ScrollSpeed.normal,
   scrubStart = ScrubStart.top,
-  scrubAllowed = true
+  scrubAllowed = true,
+  timeframes: savedTimeframes,
+  activeTimeframeIndex = 0,
+  elementProps
 }) => {
+  var _a;
+  const editing = !scrubAllowed;
+  const { translate } = useService(
+    TranslationsDefinition
+  );
+  const layerProps = elementProps == null ? void 0 : elementProps.timeframesLayer;
+  const layerA11y = {
+    ...(layerProps == null ? void 0 : layerProps.a11y) && convertA11yKeysToHtmlFormat(layerProps.a11y),
+    "aria-label": ((_a = layerProps == null ? void 0 : layerProps.a11y) == null ? void 0 : _a.ariaLabel) || // The service returns the key itself when there is no translation.
+    getTranslation(
+      translate(ARIA_LABEL_NAMESPACE),
+      "label",
+      { label: TIMEFRAMES_ARIA_LABEL_KEY },
+      { label: TIMEFRAMES_ARIA_LABEL_DEFAULT }
+    )
+  };
   const rootRef = useRef(null);
   const stageRef = useRef(null);
   const videoRef = useRef(null);
@@ -246,6 +487,14 @@ const VideoScrub = ({
     stageRef,
     onProgress: seekProgress
   });
+  const timeframe = useTimeframes({
+    timeframes: savedTimeframes ?? NO_TIMEFRAMES,
+    activeTimeframeIndex,
+    durationSeconds: duration,
+    editing,
+    videoRef,
+    videoKey: (video == null ? void 0 : video.uri) ?? ""
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -259,34 +508,51 @@ const VideoScrub = ({
       ),
       style: layout ? SCRUB_ROOT_STYLE : void 0,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             ref: stageRef,
-            className: clsx(styles.stage, frameReady2 && styles.frameReady),
+            className: clsx(
+              styles.stage,
+              (frameReady2 || timeframe.frameShown) && styles.frameReady
+            ),
             "data-scrub-stage": layout ? "" : void 0,
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: styles.media,
-                style: layout ? {
-                  aspectRatio: `1 / ${getVideoRatio(video) ?? DEFAULT_VIDEO_RATIO}`
-                } : void 0,
-                children: video && /* @__PURE__ */ jsx(
-                  Video,
-                  {
-                    id: `video_${id}`,
-                    videoMedia: video,
-                    videoRef,
-                    qualityPolicy: "proportional",
-                    autoplay: false,
-                    loop: false,
-                    muted: true
-                  }
-                )
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles.media,
+                  "aria-hidden": "true",
+                  style: layout ? {
+                    aspectRatio: `1 / ${getVideoRatio(video) ?? DEFAULT_VIDEO_RATIO}`
+                  } : void 0,
+                  children: video && /* @__PURE__ */ jsx(
+                    Video,
+                    {
+                      id: `video_${id}`,
+                      videoMedia: video,
+                      videoRef,
+                      qualityPolicy: "proportional",
+                      autoplay: false,
+                      loop: false,
+                      muted: true
+                    }
+                  )
+                }
+              ),
+              timeframe.items.length > 0 && /* @__PURE__ */ jsx(
+                TimeframeLayer,
+                {
+                  className: clsx(
+                    TIMEFRAMES_LAYER_CLASS,
+                    layerProps == null ? void 0 : layerProps.className
+                  ),
+                  items: timeframe.items,
+                  activeIndex: timeframe.activeIndex,
+                  a11yAttributes: layerA11y
+                }
+              )
+            ]
           }
         ),
         layout && /* @__PURE__ */ jsx(

package/dist/site/components/VideoScrub/constants.d.ts

@@ -6,3 +6,8 @@ export declare const MIN_SCROLL_VH = 50;
 export declare const MAX_SCROLL_VH = 1000;
 export declare const STICKY_TOP = "var(--video-scrub-sticky-top)";
 export declare const START_LINE: Partial<Record<ScrubStart, number>>;
+export declare const TIMEFRAMES_LAYER_CLASS = "video-scrub-timeframes";
+export declare const ARIA_LABEL_NAMESPACE = "ariaLabels";
+export declare const TIMEFRAMES_ARIA_LABEL_KEY = "VideoScrub_AriaLabel_Timeframes";
+export declare const TIMEFRAMES_ARIA_LABEL_DEFAULT = "Video content";
+export declare const TIMEFRAMES_GROUP_KEY = "timeframes";

package/dist/site/components/VideoScrub/css.css

@@ -1,4 +1,24 @@
-.root__Wv1E1 {
+.layer__OWBg- {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
+  outline: none;
+}
+
+.item__BRyMo {
+  grid-area: 1/1;
+}
+
+.inactive__JyOT2 {
+  display: none;
+}
+
+.content__SndXf {
+  width: 100%;
+  height: 100%;
+}.root__Wv1E1 {
   --maskImage: initial;
   --boxShadow: initial;
   --border-width-top: initial;

package/dist/site/components/VideoScrub/hooks/useTimeframes.d.ts

@@ -0,0 +1,23 @@
+import { RefObject } from 'react';
+import { TimeframeLayerItem } from '../timeframes';
+import { VideoScrubTimeframe } from '../VideoScrub.types';
+/**
+ * The timeframe to show, and the layer items (TimelineBox's view logic).
+ * Editing: the timeframe selected in the editor (R1), and the video stays on its start frame.
+ * Otherwise: the timeframe at the video's time, which the scroll sets by seeking (each `seeked`
+ * reports the new time).
+ */
+export declare function useTimeframes({ timeframes: savedTimeframes, activeTimeframeIndex, durationSeconds, editing, videoRef, videoKey, }: {
+    timeframes: ReadonlyArray<VideoScrubTimeframe>;
+    activeTimeframeIndex: number;
+    durationSeconds: number;
+    editing: boolean;
+    videoRef: RefObject<HTMLVideoElement | null>;
+    /** Changes when the video changes (its uri), in case @wix/video makes a new <video>. */
+    videoKey: string;
+}): {
+    items: Array<TimeframeLayerItem>;
+    activeIndex: number | undefined;
+    /** Editing only: a seek landed, so the video (not the poster) should show. */
+    frameShown: boolean;
+};

package/dist/site/components/VideoScrub/manifest.js

@@ -1,10 +1,10 @@
-import { b as DISPLAY_GROUPS, C as CSS_PROPERTIES, M as MEDIA, D as DATA, A as Archetype, L as LAYOUT } from "../chunks/chunk-EVX7ZUBD.js";
+import { b as DISPLAY_GROUPS, C as CSS_PROPERTIES, M as MEDIA, D as DATA, E as ELEMENTS, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
 import { V as VideoCategoryTypes } from "../chunks/types.impl.js";
-import { a as ScrollSpeed, e as ScrubStart, R as ROOT_CLASS } from "../chunks/constants2.js";
+import { k as TIMEFRAMES_GROUP_KEY, a as ScrollSpeed, j as ScrubStart, h as TIMEFRAMES_LAYER_CLASS, T as TIMEFRAME_CONTENT_CLASS, l as MAX_COUNT, R as ROOT_CLASS } from "../chunks/types.js";
 const manifest = {
-  id: "45b42eec-531c-46e4-980f-0546afae1eaa",
-  type: "wixEditorElements.VideoScrub__DEV__v4",
-  description: "A video that plays by page scroll: while the visitor scrolls past it, the video stays on screen and its time follows the scroll.",
+  id: "f67effcb-a591-4156-adee-445134fe12da",
+  type: "wixEditorElements.VideoScrub__DEV__v5",
+  description: "A video that plays by page scroll: while the visitor scrolls past it, the video stays on screen and its time follows the scroll. Timeframes show elements over the video during parts of it.",
   installation: {
     initialSize: {
       width: {
@@ -52,6 +52,88 @@ const manifest = {
             { value: ScrollSpeed.fast, displayName: "Fast" }
           ]
         }
+      },
+      // Time ranges on the video. Each one owns a container of elements, shown over the video while
+      // the time is inside it. The Timeframes panel edits them (TimelineBox rules, renamed).
+      timeframes: {
+        displayName: "Timeframes",
+        dataType: DATA.DATA_TYPE.arrayItems,
+        [DATA.DATA_TYPE.arrayItems]: {
+          maxSize: MAX_COUNT,
+          data: {
+            items: {
+              // Our own stable id: runtime items have no `_id`. A name ending in `Id` stops the
+              // editor from making `_id` (TimelineBox finding), so it is `Identifier`.
+              timeframeIdentifier: {
+                displayName: "Timeframe Identifier",
+                dataType: DATA.DATA_TYPE.text
+              },
+              // The editor's item list reads `item.name`.
+              name: {
+                displayName: "Name",
+                dataType: DATA.DATA_TYPE.text
+              },
+              startMs: {
+                displayName: "Start Ms",
+                dataType: DATA.DATA_TYPE.number
+              },
+              endMs: {
+                displayName: "End Ms",
+                dataType: DATA.DATA_TYPE.number
+              },
+              container: {
+                displayName: "Timeframe",
+                dataType: DATA.DATA_TYPE.container,
+                [DATA.DATA_TYPE.container]: {
+                  selector: `.${TIMEFRAME_CONTENT_CLASS}`,
+                  containerType: ContainerType.simple,
+                  simple: {
+                    displayName: "Timeframe",
+                    behaviors: { selectable: true },
+                    // Always the size of the stage, like MultiStateBox's state container.
+                    layout: {
+                      resizeDirection: LAYOUT.RESIZE_DIRECTION.none
+                    }
+                  }
+                }
+              },
+              // Stored only for now: missing means 1.
+              scrollSensitivity: {
+                displayName: "Scroll Sensitivity",
+                dataType: DATA.DATA_TYPE.number
+              }
+            }
+          }
+        }
+      },
+      activeTimeframeIndex: {
+        displayName: "Active Timeframe Index",
+        dataType: DATA.DATA_TYPE.number,
+        defaultValue: 0
+      }
+    },
+    displayFilters: {
+      data: { hide: ["activeTimeframeIndex"] }
+    },
+    elements: {
+      // The layer over the video that holds the timeframes. Only its label is set here.
+      timeframesLayer: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: "Timeframes",
+          selector: `.${TIMEFRAMES_LAYER_CLASS}`,
+          behaviors: {
+            selectable: false
+          },
+          data: {
+            a11y: {
+              dataType: DATA.DATA_TYPE.a11y,
+              [DATA.DATA_TYPE.a11y]: {
+                attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+              }
+            }
+          }
+        }
       }
     },
     // Custom properties, not cssProperties: Studio puts cssProperties on the root, and the root is
@@ -154,6 +236,16 @@ const manifest = {
       }
     },
     displayGroups: {
+      [TIMEFRAMES_GROUP_KEY]: {
+        displayName: "Timeframe",
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: "timeframes",
+          selectedItemIndex: "activeTimeframeIndex",
+          // A new VideoScrub has no timeframes, so "nothing selected" is a normal state.
+          allowNoSelection: true
+        }
+      },
       borderColorGroup: {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.borderColor,
         [DISPLAY_GROUPS.GROUP_TYPE.borderColor]: {
@@ -213,7 +305,10 @@ const manifest = {
     client: {
       componentUrl: "./site/components/VideoScrub/component.tsx",
       dependencies: {
-        serviceDependencies: ["@wix/viewer-service-environment"]
+        serviceDependencies: [
+          "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations"
+        ]
       }
     },
     editor: {
@@ -221,6 +316,7 @@ const manifest = {
       dependencies: {
         serviceDependencies: [
           "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations",
           "@wix/site-service-editor-context"
         ]
       }

package/dist/site/components/VideoScrub/timeframes/index.d.ts

@@ -8,6 +8,6 @@ export { add, createInitial, edgeLimits, fitToDuration, moveTimeframe, moveLimit
 export type { Edge } from './edit';
 export { activeAt } from './query';
 export { watchVideoTime } from './watchVideoTime';
-export { useActiveTimeframeIndex } from './useActiveTimeframeIndex';
+export { indexAt, useActiveTimeframeIndex } from './useActiveTimeframeIndex';
 export { TimeframeLayer } from './TimeframeLayer';
 export type { TimeframeLayerItem, TimeframeLayerProps } from './TimeframeLayer';

package/dist/site/components/VideoScrub/timeframes/types.d.ts

@@ -36,7 +36,7 @@ export declare const MAX_COUNT = 40;
  * `selector` points at it, like Accordion's `.item-content`. The editor needs this selector to find
  * each container. (Saves can still fail with SCHEMA_REFERENCES_NOT_FOUND; that is a server bug.)
  */
-export declare const TIMEFRAME_CONTENT_CLASS = "timeframe-content";
+export declare const TIMEFRAME_CONTENT_CLASS = "video-scrub-timeframe-content";
 /** Length of a new timeframe from createInitial and add, when there is room. */
 export declare const DEFAULT_TIMEFRAME_MS = 5000;
 export type TimeframeErrorCode = 'badTime' | 'tooShort' | 'outOfRange' | 'notSorted' | 'overlap' | 'tooMany' | 'notFound' | 'onBoundary' | 'inGap' | 'insideTimeframe' | 'noRoom' | 'badSensitivity' | 'badItem' | 'badKey' | 'duplicateKey' | 'duplicateId';

package/dist/site/components/VideoScrub/timeframes/useActiveTimeframeIndex.d.ts

@@ -1,4 +1,6 @@
 import { TimeframeTiming } from './types';
+/** The index of the timeframe at `timeMs`, or undefined in a gap or for a bad duration. */
+export declare function indexAt<T extends TimeframeTiming>(timeframes: ReadonlyArray<T>, timeMs: number, durationMs: number | undefined): number | undefined;
 /**
  * The index of the timeframe showing in `video` now. It re-renders only when the index changes.
  * `durationMs` comes from the data. Undefined or invalid gives undefined.

package/dist/site/components/chunks/AnimatedIcon.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
 import { p as parseSvg } from "./parseSvg.js";
-import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants20.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants19.js";
 import { c as cn } from "./index9.js";
 const AnimatedSvg = forwardRef(
   ({ svgContent, reducedMotion = false, duration }, ref) => {

package/dist/site/components/chunks/Button.js

@@ -7,8 +7,8 @@ import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js
 import { f as formatClassNames } from "./classNames.js";
 import { I as IconAnimationTriggers } from "./Button.types.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
-import { T as TRANSITION_DURATION, D as DesignStates, S as SEMANTIC_CLASS_NAMES, a as TestIds, C as COMPONENT_TYPE } from "./constants22.js";
-import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
+import { T as TRANSITION_DURATION, D as DesignStates, S as SEMANTIC_CLASS_NAMES, a as TestIds, C as COMPONENT_TYPE } from "./constants21.js";
+import { e as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
 import { i as isValidLink } from "./Link.js";
 import { d as defineStaticService } from "./staticService.js";
 import { d as defineService } from "./index8.js";

package/dist/site/components/chunks/Image.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { i as imageKit, g as getPlaceholder } from "./index5.js";
+import { i as imageKit, g as getPlaceholder } from "./index6.js";
 const image = "image__WopE9";
 const styles = {
   image

package/dist/site/components/chunks/Link.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { a as activateBySpaceOrEnterButton, c as activateBySpaceButton, d as activateByEnterButton } from "./a11y.js";
+import { a as activateBySpaceOrEnterButton, d as activateBySpaceButton, e as activateByEnterButton } from "./a11y.js";
 import { a as getDataAttributes } from "./dataUtils.js";
 const TestIds = {
   root: "linkElement"

package/dist/site/components/chunks/Patterns.js

@@ -2,7 +2,7 @@ import React__default from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c as clsx } from "./clsx.js";
 import { a as getDataAttributes } from "./dataUtils.js";
-import { T as TestIds } from "./constants10.js";
+import { T as TestIds } from "./constants9.js";
 function bidiFactory() {
   var bidi2 = (function(exports$1) {
     var DATA = {

package/dist/site/components/chunks/ResponsiveBox.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { c as clsx } from "./clsx.js";
 import { f as formatClassNames } from "./classNames.js";
-import { e as getTabIndexAttribute, h as getAriaAttributes } from "./a11y.js";
+import { f as getTabIndexAttribute, h as getAriaAttributes } from "./a11y.js";
 import { a as getDataAttributes } from "./dataUtils.js";
 const clickable = "clickable__Nql0c";
 const commonStyles = {

package/dist/site/components/chunks/TextEffectsShared.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import { f as formatClassNames } from "./classNames.js";
 import { a as getDataAttributes } from "./dataUtils.js";
-import { e as getTabIndexAttribute } from "./a11y.js";
-import { D as DEFAULT_TEXT_DIRECTION, a as DEFAULT_HTML_TAG, d as dataHooks, T as TestIds } from "./constants10.js";
+import { f as getTabIndexAttribute } from "./a11y.js";
+import { D as DEFAULT_TEXT_DIRECTION, a as DEFAULT_HTML_TAG, d as dataHooks, T as TestIds } from "./constants9.js";
 import { c as clsx } from "./clsx.js";
 import { L as Link } from "./Link.js";
 const semanticClassNames = {