@wix/editor-react-components 1.2760.0 → 1.2762.0

package/dist/site/components/Dropdown/css.css

@@ -1,3 +1,89 @@
+.root-Y7wYn3 {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-style: solid;
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  background-color: var(--wst-primary-background-color, #fff);
+  vertical-align: middle;
+  border-radius: 4px;
+  margin: 0;
+  padding-block: 8px;
+  padding-inline: 12px;
+  display: block;
+}
+
+.root-Y7wYn3:hover {
+  border-color: var(--wst-system-line-1-color, #000);
+}
+
+.root-Y7wYn3:focus {
+  border-color: var(--wst-system-line-1-color, #000);
+  outline: none;
+}
+
+.root-Y7wYn3:disabled {
+  color: var(--wst-system-disabled-color, #939393);
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  cursor: not-allowed;
+}
+
+.root-Y7wYn3[aria-invalid="true"] {
+  border-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
+}
+
+.root-Y7wYn3[aria-invalid="true"]:hover {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.root-Y7wYn3[aria-invalid="true"]:focus {
+  border-color: var(--wst-system-error-color, #df3131);
+  outline: none;
+}
+
+.root-Y7wYn3[data-valid] {
+  border-color: color-mix(in srgb,
+    var(--wst-system-success-color, #008250) 60%,
+    transparent);
+}
+
+.root-Y7wYn3::selection {
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 20%,
+    transparent);
+}
+
+.root-Y7wYn3::placeholder {
+  color: var(--wst-shade-3-color, #767676);
+  font: var(--wst-paragraph-2-font);
+}
+
+.root-Y7wYn3:disabled::placeholder {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.root-Y7wYn3:-webkit-autofill {
+  -webkit-text-fill-color: var(--wst-paragraph-2-color, #000);
+  box-shadow: 0 0 0 1.5em var(--wst-primary-background-color, #fff) inset !important;
+}
+
+.root-Y7wYn3[type="number"]::-webkit-inner-spin-button, .root-Y7wYn3[type="number"]::-webkit-outer-spin-button {
+  appearance: none;
+}
+
+.root-Y7wYn3[type="number"] {
+  appearance: textfield;
+}
+
 .root-ECdHfF {
   flex-direction: column;
   gap: 4px;

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

@@ -569,8 +569,7 @@ const itemLabelConfig = {
       textDecorationLine: { defaultValue: "none" },
       textTransform: { defaultValue: "none" },
       letterSpacing: { defaultValue: "normal" },
-      textShadow: { defaultValue: "none" },
-      textAlign: { defaultValue: "center" }
+      textShadow: { defaultValue: "none" }
     }
   }
 };

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

@@ -4,11 +4,20 @@ export declare enum ScrollSpeed {
     normal = "normal",
     fast = "fast"
 }
+/** Where on the screen the top of the component is when the video starts to move. */
+export declare enum ScrubStart {
+    /** As soon as the component comes into view. */
+    bottom = "bottom",
+    center = "center",
+    /** When the stage sticks under the header. */
+    top = "top"
+}
 export interface VideoScrubProps {
     id: string;
     className?: string;
     video?: VideoMedia;
     scrollSpeed?: ScrollSpeed;
+    scrubStart?: ScrubStart;
     /**
      * 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.

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

@@ -2,7 +2,7 @@ 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 { 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 { E as EnvironmentDefinition } from "../chunks/index2.js";
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -18,14 +18,29 @@ const getVideoRatio = (video) => {
   const height = Number(sized == null ? void 0 : sized.height);
   return width > 0 && height > 0 ? height / width : void 0;
 };
-const getScrubProgress = (root2, stage2) => {
+const getScrollSpaceHeight = (duration, speed, start) => {
+  const length = `${getScrollLengthVh(duration, speed)}vh`;
+  const part = START_LINE[start];
+  return part === void 0 ? length : `max(0px, ${length} - max(0px, ${part * 100}vh - ${STICKY_TOP}))`;
+};
+const getScrubProgress = (root2, stage2, {
+  start,
+  viewportHeight,
+  stickyTop
+}) => {
   const rootRect = root2.getBoundingClientRect();
   const stageRect = stage2.getBoundingClientRect();
-  const travel = rootRect.height - stageRect.height;
-  if (!(travel > 0)) {
+  const travel = Math.max(0, rootRect.height - stageRect.height);
+  const part = START_LINE[start];
+  const line = part === void 0 ? stickyTop : Math.max(part * viewportHeight, stickyTop);
+  const preRoll = line - stickyTop;
+  const distance = preRoll + travel;
+  if (!(distance > 0)) {
     return 0;
   }
-  return clamp((stageRect.top - rootRect.top) / travel, 0, 1);
+  const preRolled = clamp(line - rootRect.top, 0, preRoll);
+  const stuck = clamp(stageRect.top - rootRect.top, 0, travel);
+  return clamp((preRolled + stuck) / distance, 0, 1);
 };
 const useScrubGate = ({
   scrubAllowed,
@@ -142,6 +157,7 @@ const useScrubVideo = ({
 };
 const useScrubProgress = ({
   enabled,
+  start,
   rootRef,
   stageRef,
   onProgress
@@ -153,7 +169,14 @@ const useScrubProgress = ({
       return void 0;
     }
     let frame = 0;
-    const read = () => onProgress(getScrubProgress(root2, stage2));
+    const stageStyle = getComputedStyle(stage2);
+    const read = () => onProgress(
+      getScrubProgress(root2, stage2, {
+        start,
+        viewportHeight: window.innerHeight,
+        stickyTop: parseFloat(stageStyle.top) || 0
+      })
+    );
     const tick = () => {
       read();
       frame = requestAnimationFrame(tick);
@@ -178,16 +201,18 @@ const useScrubProgress = ({
       observer.disconnect();
       stop();
     };
-  }, [enabled, rootRef, stageRef, onProgress]);
+  }, [enabled, start, rootRef, stageRef, onProgress]);
 };
 const root = "root__Wv1E1";
 const stage = "stage__XFpev";
+const media = "media__tTFno";
 const scrubbing = "scrubbing__yEgJI";
 const scrollSpace = "scrollSpace__oaKzu";
 const frameReady = "frameReady__g-HFT";
 const styles = {
   root,
   stage,
+  media,
   scrubbing,
   scrollSpace,
   frameReady
@@ -199,23 +224,24 @@ const SCRUB_ROOT_STYLE = {
 const VideoScrub = ({
   id,
   className,
-  video: savedVideo,
+  video,
   scrollSpeed = ScrollSpeed.normal,
+  scrubStart = ScrubStart.top,
   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 duration = (video == null ? void 0 : video.duration) ?? 0;
   const { layout, seek } = useScrubGate({ scrubAllowed, duration });
   const { seekProgress, frameReady: frameReady2 } = useScrubVideo({
     enabled: seek,
     videoRef,
-    videoKey: video.uri
+    videoKey: video == null ? void 0 : video.uri
   });
   useScrubProgress({
     enabled: seek,
+    start: scrubStart,
     rootRef,
     stageRef,
     onProgress: seekProgress
@@ -238,21 +264,27 @@ const VideoScrub = ({
           {
             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,
+              "div",
               {
-                id: `video_${id}`,
-                videoMedia: video,
-                videoRef,
-                qualityPolicy: "proportional",
-                autoplay: false,
-                loop: false,
-                muted: true
+                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
+                  }
+                )
               }
             )
           }
@@ -261,7 +293,9 @@ const VideoScrub = ({
           "div",
           {
             className: styles.scrollSpace,
-            style: { height: `${getScrollLengthVh(duration, scrollSpeed)}vh` }
+            style: {
+              height: getScrollSpaceHeight(duration, scrollSpeed, scrubStart)
+            }
           }
         )
       ]

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

@@ -1,8 +1,8 @@
-import { VideoMedia } from '@wix/video';
-import { ScrollSpeed } from './VideoScrub.types';
+import { ScrollSpeed, ScrubStart } 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;
+export declare const STICKY_TOP = "var(--video-scrub-sticky-top)";
+export declare const START_LINE: Partial<Record<ScrubStart, number>>;

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

@@ -1,18 +1,71 @@
 .root__Wv1E1 {
+  --maskImage: initial;
+  --boxShadow: initial;
+  --border-width-top: initial;
+  --border-width-inline-end: initial;
+  --border-width-bottom: initial;
+  --border-width-inline-start: initial;
+  --border-color-top: initial;
+  --border-color-inline-end: initial;
+  --border-color-bottom: initial;
+  --border-color-inline-start: initial;
+  --border-style-top: initial;
+  --border-style-inline-end: initial;
+  --border-style-bottom: initial;
+  --border-style-inline-start: initial;
+  --borderStartStartRadius: initial;
+  --borderStartEndRadius: initial;
+  --borderEndStartRadius: initial;
+  --borderEndEndRadius: initial;
   position: relative;
   box-sizing: border-box;
 }
 
 .stage__XFpev {
   position: relative;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   overflow: hidden;
+  box-shadow: var(--boxShadow, none);
+  border-top-width: var(--border-width-top, 0);
+  border-inline-end-width: var(--border-width-inline-end, 0);
+  border-bottom-width: var(--border-width-bottom, 0);
+  border-inline-start-width: var(--border-width-inline-start, 0);
+  border-top-color: var(--border-color-top, transparent);
+  border-inline-end-color: var(--border-color-inline-end, transparent);
+  border-bottom-color: var(--border-color-bottom, transparent);
+  border-inline-start-color: var(--border-color-inline-start, transparent);
+  border-top-style: var(--border-style-top, solid);
+  border-inline-end-style: var(--border-style-inline-end, solid);
+  border-bottom-style: var(--border-style-bottom, solid);
+  border-inline-start-style: var(--border-style-inline-start, solid);
+  border-start-start-radius: var(--borderStartStartRadius, 0);
+  border-start-end-radius: var(--borderStartEndRadius, 0);
+  border-end-start-radius: var(--borderEndStartRadius, 0);
+  border-end-end-radius: var(--borderEndEndRadius, 0);
+}
+
+.media__tTFno {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  mask-image: var(--maskImage, none);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
+.scrubbing__yEgJI {
+  --video-scrub-sticky-top: var(
+    --wix-top-inset,
+    calc(var(--wix-ads-top-height, 0px) + var(--top-offset, 0px))
+  );
 }
 
 .scrubbing__yEgJI .stage__XFpev {
   position: sticky;
-  top: var(--wix-top-inset, calc(var(--wix-ads-top-height, 0px) + var(--top-offset, 0px)));
+  top: var(--video-scrub-sticky-top);
   transition: top var(--wix-top-inset-transition-duration, 0ms) var(--wix-top-inset-transition-easing, linear);
   height: inherit;
 }

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

@@ -1,10 +1,12 @@
 import { RefObject } from 'react';
+import { ScrubStart } from '../VideoScrub.types';
 /**
  * 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.
+ * is on screen. It only reads layout and style, so it adds no forced reflow to the frame.
  */
-export declare const useScrubProgress: ({ enabled, rootRef, stageRef, onProgress, }: {
+export declare const useScrubProgress: ({ enabled, start, rootRef, stageRef, onProgress, }: {
     enabled: boolean;
+    start: ScrubStart;
     rootRef: RefObject<HTMLElement | null>;
     stageRef: RefObject<HTMLElement | null>;
     onProgress: (progress: number) => void;

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

@@ -1,9 +1,9 @@
-import { 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, A as Archetype, L as LAYOUT } from "../chunks/chunk-EVX7ZUBD.js";
 import { V as VideoCategoryTypes } from "../chunks/types.impl.js";
-import { S as ScrollSpeed, R as ROOT_CLASS } from "../chunks/constants2.js";
+import { a as ScrollSpeed, e as ScrubStart, R as ROOT_CLASS } from "../chunks/constants2.js";
 const manifest = {
-  id: "c3bdf192-6423-4d70-a0f5-d5542d6a3e3f",
-  type: "wixEditorElements.VideoScrub__DEV__v1",
+  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.",
   installation: {
     initialSize: {
@@ -29,6 +29,18 @@ const manifest = {
         },
         disableDeletion: true
       },
+      scrubStart: {
+        displayName: "Starts when video reaches",
+        dataType: DATA.DATA_TYPE.textEnum,
+        defaultValue: ScrubStart.top,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            { value: ScrubStart.bottom, displayName: "Bottom of screen" },
+            { value: ScrubStart.center, displayName: "Center of screen" },
+            { value: ScrubStart.top, displayName: "Top of screen" }
+          ]
+        }
+      },
       scrollSpeed: {
         displayName: "Scroll speed",
         dataType: DATA.DATA_TYPE.textEnum,
@@ -41,6 +53,160 @@ const manifest = {
           ]
         }
       }
+    },
+    // Custom properties, not cssProperties: Studio puts cssProperties on the root, and the root is
+    // the tall scroll track. The sticky stage reads these (VideoScrub.module.scss). Same set as
+    // VideoUpload, but the borders are per side (Tabs pattern).
+    cssCustomProperties: {
+      maskImage: {
+        displayName: "Mask",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.maskImage,
+        defaultValue: "none",
+        maskImage: {
+          vectorArtCategory: MEDIA.VECTOR_ART_CATEGORY.SHAPE_LOCATION,
+          imageTypes: [CSS_PROPERTIES.IMAGE_TYPE.url]
+        }
+      },
+      boxShadow: {
+        displayName: "Shadow",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
+        defaultValue: "none"
+      },
+      "border-width-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTopWidth,
+        displayName: "Border Width Top",
+        defaultValue: "0px"
+      },
+      "border-width-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEndWidth,
+        displayName: "Border Width End",
+        defaultValue: "0px"
+      },
+      "border-width-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottomWidth,
+        displayName: "Border Width Bottom",
+        defaultValue: "0px"
+      },
+      "border-width-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStartWidth,
+        displayName: "Border Width Start",
+        defaultValue: "0px"
+      },
+      "border-color-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTopColor,
+        displayName: "Border Color Top",
+        defaultValue: "transparent"
+      },
+      "border-color-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEndColor,
+        displayName: "Border Color End",
+        defaultValue: "transparent"
+      },
+      "border-color-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottomColor,
+        displayName: "Border Color Bottom",
+        defaultValue: "transparent"
+      },
+      "border-color-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStartColor,
+        displayName: "Border Color Start",
+        defaultValue: "transparent"
+      },
+      "border-style-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTopStyle,
+        displayName: "Border Style Top",
+        defaultValue: "solid"
+      },
+      "border-style-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEndStyle,
+        displayName: "Border Style End",
+        defaultValue: "solid"
+      },
+      "border-style-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottomStyle,
+        displayName: "Border Style Bottom",
+        defaultValue: "solid"
+      },
+      "border-style-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStartStyle,
+        displayName: "Border Style Start",
+        defaultValue: "solid"
+      },
+      borderStartStartRadius: {
+        displayName: "Top Start Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartStartRadius,
+        defaultValue: "0px"
+      },
+      borderStartEndRadius: {
+        displayName: "Top End Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartEndRadius,
+        defaultValue: "0px"
+      },
+      borderEndStartRadius: {
+        displayName: "Bottom Start Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndStartRadius,
+        defaultValue: "0px"
+      },
+      borderEndEndRadius: {
+        displayName: "Bottom End Corner",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndEndRadius,
+        defaultValue: "0px"
+      }
+    },
+    displayGroups: {
+      borderColorGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderColor,
+        [DISPLAY_GROUPS.GROUP_TYPE.borderColor]: {
+          top: "border-color-top",
+          right: "border-color-inline-end",
+          bottom: "border-color-bottom",
+          left: "border-color-inline-start"
+        }
+      },
+      borderWidthGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderWidth,
+        [DISPLAY_GROUPS.GROUP_TYPE.borderWidth]: {
+          top: "border-width-top",
+          right: "border-width-inline-end",
+          bottom: "border-width-bottom",
+          left: "border-width-inline-start"
+        }
+      },
+      borderStyleGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderStyle,
+        [DISPLAY_GROUPS.GROUP_TYPE.borderStyle]: {
+          top: "border-style-top",
+          right: "border-style-inline-end",
+          bottom: "border-style-bottom",
+          left: "border-style-inline-start"
+        }
+      },
+      // Per side, so a breakpoint can override one side only (like Tabs).
+      borderGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+        [DISPLAY_GROUPS.GROUP_TYPE.border]: {
+          color: "displayGroups.borderColorGroup",
+          width: "displayGroups.borderWidthGroup",
+          style: "displayGroups.borderStyleGroup"
+        }
+      },
+      cornersGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderRadius,
+        displayName: "Corner radius",
+        borderRadius: {
+          topLeft: "borderStartStartRadius",
+          topRight: "borderStartEndRadius",
+          bottomLeft: "borderEndStartRadius",
+          bottomRight: "borderEndEndRadius"
+        }
+      },
+      // The Settings panel does not follow the `data` key order.
+      orderedDataGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: ["video", "scrubStart", "scrollSpeed"]
+        }
+      }
     }
   },
   resources: {

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

@@ -1,6 +1,6 @@
 import { VideoMedia } from '@wix/video';
-import { ScrollSpeed } from './VideoScrub.types';
-/** How far the visitor scrolls while the stage is stuck, in vh. */
+import { ScrubStart, ScrollSpeed } from './VideoScrub.types';
+/** How far the visitor scrolls from the first frame to the last, in vh. */
 export declare const getScrollLengthVh: (duration: number, speed?: ScrollSpeed) => number;
 /**
  * The video's height / width, from its saved sources (or poster). The stage falls back to it when
@@ -8,7 +8,21 @@ export declare const getScrollLengthVh: (duration: number, speed?: ScrollSpeed)
  */
 export declare const getVideoRatio: (video?: VideoMedia) => number | undefined;
 /**
- * Scroll progress through the tall root, 0 to 1: how far the sticky stage has moved down its
- * root. 0 until it sticks, 1 once it lets go, so the header and Wix Ads offsets need no math here.
+ * The scroll space under the stage, as a CSS height. An earlier start uses part of the scroll
+ * length before the stage sticks (the pre-roll), so the stuck part gets that much shorter. The
+ * video moves the same amount per scroll for every start.
  */
-export declare const getScrubProgress: (root: Element, stage: Element) => number;
+export declare const getScrollSpaceHeight: (duration: number, speed: ScrollSpeed, start: ScrubStart) => string;
+/**
+ * Scroll progress, 0 to 1. 0 while the top of the root is below the start line, 1 once the
+ * sticky stage lets go. In between it follows the scroll at the same rate: first the pre-roll,
+ * while the stage moves up to its sticky top, then while it is stuck and moves down its root.
+ *
+ * The stuck part is how far the stage moved down its root, so the header and Wix Ads offsets need
+ * no math there. `viewportHeight` and `stickyTop` are used only for the pre-roll of an early start.
+ */
+export declare const getScrubProgress: (root: Element, stage: Element, { start, viewportHeight, stickyTop, }: {
+    start: ScrubStart;
+    viewportHeight: number;
+    stickyTop: number;
+}) => number;

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

@@ -4,6 +4,12 @@ var ScrollSpeed = /* @__PURE__ */ ((ScrollSpeed2) => {
   ScrollSpeed2["fast"] = "fast";
   return ScrollSpeed2;
 })(ScrollSpeed || {});
+var ScrubStart = /* @__PURE__ */ ((ScrubStart2) => {
+  ScrubStart2["bottom"] = "bottom";
+  ScrubStart2["center"] = "center";
+  ScrubStart2["top"] = "top";
+  return ScrubStart2;
+})(ScrubStart || {});
 const ROOT_CLASS = "video-scrub";
 const DEFAULT_VIDEO_RATIO = 9 / 16;
 const SCROLL_VH_PER_SECOND = {
@@ -13,40 +19,19 @@ const SCROLL_VH_PER_SECOND = {
 };
 const MIN_SCROLL_VH = 50;
 const MAX_SCROLL_VH = 1e3;
-const mp4 = (quality, width, height) => ({
-  quality,
-  width,
-  height,
-  types: [
-    {
-      format: "mp4",
-      uri: `video/11062b_953b517691e34052afc53ccacc33fc67/${quality}/mp4/file.mp4`
-    }
-  ]
-});
-const DEFAULT_VIDEO = {
-  name: "Neutral Living Room",
-  uri: "",
-  duration: 12.5,
-  hasAudio: false,
-  sources: [
-    mp4("360p", 640, 360),
-    mp4("480p", 854, 480),
-    mp4("720p", 1280, 720),
-    mp4("1080p", 1920, 1080)
-  ],
-  poster: {
-    uri: "11062b_953b517691e34052afc53ccacc33fc67f000.jpg",
-    width: 2560,
-    height: 1440
-  }
+const STICKY_TOP = "var(--video-scrub-sticky-top)";
+const START_LINE = {
+  [ScrubStart.bottom]: 1,
+  [ScrubStart.center]: 0.5
 };
 export {
-  DEFAULT_VIDEO as D,
+  DEFAULT_VIDEO_RATIO as D,
   MAX_SCROLL_VH as M,
   ROOT_CLASS as R,
-  ScrollSpeed as S,
-  SCROLL_VH_PER_SECOND as a,
-  MIN_SCROLL_VH as b,
-  DEFAULT_VIDEO_RATIO as c
+  STICKY_TOP as S,
+  ScrollSpeed as a,
+  SCROLL_VH_PER_SECOND as b,
+  START_LINE as c,
+  MIN_SCROLL_VH as d,
+  ScrubStart as e
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2760.0",
+  "version": "1.2762.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -222,5 +222,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "52fc139ca2f0f74dea0a25be0a9921ead081f48fde38f674e2ce4087"
+  "falconPackageHash": "0fc08bcce0472bac58f4e032897a0c5b0cd25dbb6d24f30f083ec36f"
 }