@wix/editor-react-components 1.2736.0 → 1.2738.0

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants14.js";
+import { T as TestIds } from "../chunks/constants15.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants14.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants15.js";
 import { t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNames, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants13.js";
+import { T as TestIds } from "../chunks/constants14.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants13.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants14.js";
 import { e as textEffectsPatternCssCustomPropertyNames, t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants12.js";
+import { T as TestIds } from "../chunks/constants13.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants12.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants13.js";
 import { t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNames, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants11.js";
+import { T as TestIds } from "../chunks/constants12.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants11.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants12.js";
 import { t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNames, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { n as noiseIntensityConfig, T as TestIds } from "../chunks/constants10.js";
+import { n as noiseIntensityConfig, T as TestIds } from "../chunks/constants11.js";
 import { c as createSvgManager, r as range, u as useUniqueSvg } from "../chunks/useUniqueSvg.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants10.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants11.js";
 import { t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNames, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds, a as angleConfig } from "../chunks/constants8.js";
-import { b as blendModes } from "../chunks/constants9.js";
+import { T as TestIds, a as angleConfig } from "../chunks/constants9.js";
+import { b as blendModes } from "../chunks/constants10.js";
 import { r as range, u as useUniqueSvg, c as createSvgManager } from "../chunks/useUniqueSvg.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, b as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants8.js";
+import { D as DisplayNames, b as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants9.js";
 import { t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNames, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants7.js";
+import { T as TestIds } from "../chunks/constants8.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants7.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants8.js";
 import { t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNames, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants6.js";
+import { T as TestIds } from "../chunks/constants7.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants6.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants7.js";
 import { e as textEffectsPatternCssCustomPropertyNames, t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, b as textEffectsCommonData, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants5.js";
+import { T as TestIds } from "../chunks/constants6.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index9.js";

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

@@ -1,6 +1,6 @@
 import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants5.js";
-import { D as DEFAULT_TEXT_DIRECTION } from "../chunks/constants9.js";
+import { D as DisplayNames, a as TEXT_TWIST_PANEL_ID, C as COMPONENT_ID } from "../chunks/constants6.js";
+import { D as DEFAULT_TEXT_DIRECTION } from "../chunks/constants10.js";
 import { b as textEffectsCommonData, e as textEffectsPatternCssCustomPropertyNames, t as textEffectsInteractions, f as textEffectsPatternCssCustomProperties, a as textEffectsBaseCssProperties, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: COMPONENT_ID,

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants4.js";
+import { T as TestIds } from "../chunks/constants5.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { c as cn } from "../chunks/index9.js";
 const container = "container__tWYVk";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, D as DATA, b as DISPLAY_GROUPS, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DisplayNames } from "../chunks/constants4.js";
+import { D as DisplayNames } from "../chunks/constants5.js";
 import { t as textEffectsInteractions, a as textEffectsBaseCssProperties, b as textEffectsCommonData, c as textEffectsLayout, d as textEffectsInstallation } from "../chunks/manifestBase.js";
 const manifest = {
   id: "7e2b4a91-c5d8-4f3e-9a6b-1d8e7f2c3a4b",

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

@@ -8,7 +8,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
-import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
+import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants4.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { c as $3e6197669829fe11$export$40bfa8c7b0832715, d as $d1116acdf220c2da$export$4c014de7c8940b4c, e as $3274bf1495747a7b$export$5add1d006293d136, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, h as $01b77f81d0f07f68$export$75b6ee27786ba447, i as $a049562f99e7db0e$export$f9c6924e160136d1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.js";

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

@@ -1,5 +1,5 @@
 import { I as INTERACTIONS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E as ELEMENTS, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DesignStates, a as DisplayNames, s as selectors } from "../chunks/constants3.js";
+import { D as DesignStates, a as DisplayNames, s as selectors } from "../chunks/constants4.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -12,7 +12,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { g as getTranslation } from "../chunks/getTranslation.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { E as EMPTY_VALUE, s as selectors, T as TestIds, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
+import { E as EMPTY_VALUE, s as selectors, T as TestIds, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants3.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { c as DisplayNames, d as defaultValues, e as DesignStates, s as selectors } from "../chunks/constants2.js";
+import { c as DisplayNames, d as defaultValues, e as DesignStates, s as selectors } from "../chunks/constants3.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { VideoScrubProps } from './VideoScrub.types';
+declare const VideoScrub: FC<VideoScrubProps>;
+export default VideoScrub;

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

@@ -0,0 +1,17 @@
+import { VideoMedia } from '@wix/video';
+export declare enum ScrollSpeed {
+    slow = "slow",
+    normal = "normal",
+    fast = "fast"
+}
+export interface VideoScrubProps {
+    id: string;
+    className?: string;
+    video?: VideoMedia;
+    scrollSpeed?: ScrollSpeed;
+    /**
+     * Whether this render may scrub. The live bundle always may; the editor bundle may only in
+     * Preview, because the editor stage keeps the designed height.
+     */
+    scrubAllowed?: boolean;
+}

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

@@ -0,0 +1,2 @@
+import { default as VideoScrub } from './VideoScrub';
+export default VideoScrub;

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

@@ -0,0 +1,273 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { c as clsx } from "../chunks/clsx.js";
+import { V as Video } from "../chunks/Video.js";
+import { S as ScrollSpeed, a as SCROLL_VH_PER_SECOND, M as MAX_SCROLL_VH, b as MIN_SCROLL_VH, D as DEFAULT_VIDEO, c as DEFAULT_VIDEO_RATIO, R as ROOT_CLASS } from "../chunks/constants2.js";
+import { useService } from "@wix/services-manager-react";
+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(
+  duration * (SCROLL_VH_PER_SECOND[speed] ?? SCROLL_VH_PER_SECOND[ScrollSpeed.normal]),
+  MIN_SCROLL_VH,
+  MAX_SCROLL_VH
+);
+const getVideoRatio = (video) => {
+  var _a;
+  const sized = ((_a = video == null ? void 0 : video.sources) == null ? void 0 : _a.find(({ width: width2, height: height2 }) => width2 > 0 && height2 > 0)) ?? (video == null ? void 0 : video.poster);
+  const width = Number(sized == null ? void 0 : sized.width);
+  const height = Number(sized == null ? void 0 : sized.height);
+  return width > 0 && height > 0 ? height / width : void 0;
+};
+const getScrubProgress = (root2, stage2) => {
+  const rootRect = root2.getBoundingClientRect();
+  const stageRect = stage2.getBoundingClientRect();
+  const travel = rootRect.height - stageRect.height;
+  if (!(travel > 0)) {
+    return 0;
+  }
+  return clamp((stageRect.top - rootRect.top) / travel, 0, 1);
+};
+const useScrubGate = ({
+  scrubAllowed,
+  duration
+}) => {
+  const environment = useService(EnvironmentDefinition);
+  const layout = scrubAllowed && duration > 0;
+  const seek = layout && !(environment == null ? void 0 : environment.reducedMotion);
+  return { layout, seek };
+};
+const SEEK_EPSILON = 1 / 60;
+const END_OFFSET = 1 / 30;
+const FIRST_FRAME_TIME = 1e-3;
+const getScrubTime = (progress, duration) => {
+  if (!(Number.isFinite(duration) && duration > 0)) {
+    return void 0;
+  }
+  return Math.min(progress * duration, Math.max(0, duration - END_OFFSET));
+};
+const flushSeek = (video, target) => {
+  if (video.seeking || video.readyState < HTMLMediaElement.HAVE_METADATA) {
+    return false;
+  }
+  if (Math.abs(video.currentTime - target) <= SEEK_EPSILON) {
+    return false;
+  }
+  video.currentTime = target;
+  return true;
+};
+const useScrubVideo = ({
+  enabled,
+  videoRef,
+  videoKey
+}) => {
+  const progress = useRef(0);
+  const flush = useRef(() => {
+  });
+  const [frameReady2, setFrameReady] = useState(false);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!enabled || !video) {
+      setFrameReady(false);
+      return void 0;
+    }
+    if (!video.paused) {
+      video.pause();
+    }
+    let firstFrameShown = false;
+    let requestedSrc = "";
+    progress.current = 0;
+    setFrameReady(false);
+    flush.current = () => {
+      const time = getScrubTime(progress.current, video.duration);
+      if (time !== void 0) {
+        flushSeek(video, time);
+      }
+    };
+    const startLoading = () => {
+      const src = video.getAttribute("src") || video.currentSrc;
+      if (!src || src === requestedSrc) {
+        return;
+      }
+      requestedSrc = src;
+      video.preload = "auto";
+      if (video.readyState < HTMLMediaElement.HAVE_METADATA) {
+        video.load();
+      }
+    };
+    const onLoadedMetadata = () => {
+      if (!firstFrameShown) {
+        firstFrameShown = true;
+        if (progress.current === 0) {
+          video.currentTime = FIRST_FRAME_TIME;
+          return;
+        }
+      }
+      flush.current();
+    };
+    const onSeeked = () => {
+      if (firstFrameShown) {
+        setFrameReady(true);
+      }
+      flush.current();
+    };
+    const onDurationChange = () => flush.current();
+    const onEmptied = () => {
+      firstFrameShown = false;
+      setFrameReady(false);
+    };
+    video.addEventListener("loadstart", startLoading);
+    video.addEventListener("loadedmetadata", onLoadedMetadata);
+    video.addEventListener("durationchange", onDurationChange);
+    video.addEventListener("seeked", onSeeked);
+    video.addEventListener("emptied", onEmptied);
+    startLoading();
+    if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
+      onLoadedMetadata();
+    }
+    return () => {
+      flush.current = () => {
+      };
+      video.removeEventListener("loadstart", startLoading);
+      video.removeEventListener("loadedmetadata", onLoadedMetadata);
+      video.removeEventListener("durationchange", onDurationChange);
+      video.removeEventListener("seeked", onSeeked);
+      video.removeEventListener("emptied", onEmptied);
+    };
+  }, [enabled, videoRef, videoKey]);
+  const seekProgress = useCallback((value) => {
+    progress.current = Math.min(1, Math.max(0, value));
+    flush.current();
+  }, []);
+  return { seekProgress, frameReady: frameReady2 };
+};
+const useScrubProgress = ({
+  enabled,
+  rootRef,
+  stageRef,
+  onProgress
+}) => {
+  useEffect(() => {
+    const root2 = rootRef.current;
+    const stage2 = stageRef.current;
+    if (!enabled || !root2 || !stage2 || typeof IntersectionObserver === "undefined") {
+      return void 0;
+    }
+    let frame = 0;
+    const read = () => onProgress(getScrubProgress(root2, stage2));
+    const tick = () => {
+      read();
+      frame = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      frame = 0;
+    };
+    const observer = new IntersectionObserver((entries) => {
+      var _a;
+      if ((_a = entries[entries.length - 1]) == null ? void 0 : _a.isIntersecting) {
+        if (!frame) {
+          frame = requestAnimationFrame(tick);
+        }
+      } else {
+        stop();
+        read();
+      }
+    });
+    observer.observe(root2);
+    return () => {
+      observer.disconnect();
+      stop();
+    };
+  }, [enabled, rootRef, stageRef, onProgress]);
+};
+const root = "root__Wv1E1";
+const stage = "stage__XFpev";
+const scrubbing = "scrubbing__yEgJI";
+const scrollSpace = "scrollSpace__oaKzu";
+const frameReady = "frameReady__g-HFT";
+const styles = {
+  root,
+  stage,
+  scrubbing,
+  scrollSpace,
+  frameReady
+};
+const SCRUB_ROOT_STYLE = {
+  minHeight: "max-content",
+  aspectRatio: "auto"
+};
+const VideoScrub = ({
+  id,
+  className,
+  video: savedVideo,
+  scrollSpeed = ScrollSpeed.normal,
+  scrubAllowed = true
+}) => {
+  const rootRef = useRef(null);
+  const stageRef = useRef(null);
+  const videoRef = useRef(null);
+  const video = savedVideo ?? DEFAULT_VIDEO;
+  const duration = video.duration ?? 0;
+  const { layout, seek } = useScrubGate({ scrubAllowed, duration });
+  const { seekProgress, frameReady: frameReady2 } = useScrubVideo({
+    enabled: seek,
+    videoRef,
+    videoKey: video.uri
+  });
+  useScrubProgress({
+    enabled: seek,
+    rootRef,
+    stageRef,
+    onProgress: seekProgress
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ref: rootRef,
+      className: clsx(
+        ROOT_CLASS,
+        styles.root,
+        layout && styles.scrubbing,
+        className
+      ),
+      style: layout ? SCRUB_ROOT_STYLE : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: stageRef,
+            className: clsx(styles.stage, frameReady2 && styles.frameReady),
+            style: layout ? {
+              aspectRatio: `1 / ${getVideoRatio(video) ?? DEFAULT_VIDEO_RATIO}`
+            } : void 0,
+            "data-scrub-stage": layout ? "" : void 0,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              Video,
+              {
+                id: `video_${id}`,
+                videoMedia: video,
+                videoRef,
+                qualityPolicy: "proportional",
+                autoplay: false,
+                loop: false,
+                muted: true
+              }
+            )
+          }
+        ),
+        layout && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.scrollSpace,
+            style: { height: `${getScrollLengthVh(duration, scrollSpeed)}vh` }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  VideoScrub as default
+};

package/dist/site/components/VideoScrub/component.preview.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { VideoScrubProps } from './VideoScrub.types';
+export default function VideoScrubPreview(props: VideoScrubProps): React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import { VideoMedia } from '@wix/video';
+import { ScrollSpeed } from './VideoScrub.types';
+export declare const ROOT_CLASS = "video-scrub";
+export declare const DEFAULT_VIDEO_RATIO: number;
+export declare const SCROLL_VH_PER_SECOND: Record<ScrollSpeed, number>;
+export declare const MIN_SCROLL_VH = 50;
+export declare const MAX_SCROLL_VH = 1000;
+export declare const DEFAULT_VIDEO: VideoMedia;

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

@@ -0,0 +1,72 @@
+.root__Wv1E1 {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.stage__XFpev {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scrubbing__yEgJI .stage__XFpev {
+  position: sticky;
+  top: var(--wix-top-inset, calc(var(--wix-ads-top-height, 0px) + var(--top-offset, 0px)));
+  transition: top var(--wix-top-inset-transition-duration, 0ms) var(--wix-top-inset-transition-easing, linear);
+  height: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scrollSpace__oaKzu {
+    display: none;
+  }
+  .scrubbing__yEgJI .stage__XFpev {
+    transition: none;
+  }
+}
+.frameReady__g-HFT video,
+.frameReady__g-HFT wow-image {
+  transition: opacity 0.2s ease-out;
+}
+.frameReady__g-HFT video {
+  opacity: 1;
+}
+.frameReady__g-HFT wow-image {
+  opacity: 0;
+}
+.videoContainer__Eyxxe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+  container-type: size;
+}
+
+.video__YuKrH {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  object-fit: var(--video-fit, cover);
+  opacity: 0;
+  --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
+  --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
+  object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
+}
+.image__WopE9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.image__WopE9 img {
+  max-width: var(--wix-img-max-width, 100%);
+}
+.image__WopE9[data-animate-blur] img {
+  filter: blur(9px);
+  transition: filter 0.8s ease-in;
+}
+.image__WopE9[data-animate-blur] img[data-load-done] {
+  filter: none;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * `layout`: render the tall root, the sticky stage and the scroll space.
+ * `seek`: drive the video time from the scroll.
+ *
+ * Reduced motion turns off only `seek`. The server can't know the visitor's setting, so the tall
+ * layout is switched off in CSS (prefers-reduced-motion) and the server and client DOM stay equal.
+ */
+export declare const useScrubGate: ({ scrubAllowed, duration, }: {
+    scrubAllowed: boolean;
+    duration: number;
+}) => {
+    layout: boolean;
+    seek: boolean;
+};

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

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+/**
+ * Calls `onProgress` every frame with the scroll progress through the tall root, while the root
+ * is on screen. It only reads layout, so it adds no forced reflow to the frame.
+ */
+export declare const useScrubProgress: ({ enabled, rootRef, stageRef, onProgress, }: {
+    enabled: boolean;
+    rootRef: RefObject<HTMLElement | null>;
+    stageRef: RefObject<HTMLElement | null>;
+    onProgress: (progress: number) => void;
+}) => void;