@wix/editor-react-components 1.2812.0 → 1.2813.0

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

@@ -29,14 +29,19 @@ const getScrollSpaceHeight = (duration, speed, start) => {
 const getScrubProgress = (root2, stage2, {
   start,
   viewportHeight,
-  stickyTop
+  stickyTop,
+  sticky = true
 }) => {
   const rootRect = root2.getBoundingClientRect();
-  const stageRect = stage2.getBoundingClientRect();
-  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;
+  if (!sticky) {
+    const length = preRoll + rootRect.height;
+    return length > 0 ? clamp((line - rootRect.top) / length, 0, 1) : 0;
+  }
+  const stageRect = stage2.getBoundingClientRect();
+  const travel = Math.max(0, rootRect.height - stageRect.height);
   const distance = preRoll + travel;
   if (!(distance > 0)) {
     return 0;
@@ -177,7 +182,9 @@ const useScrubProgress = ({
       getScrubProgress(root2, stage2, {
         start,
         viewportHeight: window.innerHeight,
-        stickyTop: parseFloat(stageStyle.top) || 0
+        stickyTop: parseFloat(stageStyle.top) || 0,
+        // The Sticky design option turns it off in CSS only (VideoScrub.module.scss).
+        sticky: stageStyle.position === "sticky"
       })
     );
     const tick = () => {
@@ -424,6 +431,46 @@ function useTimeframes({
     frameShown: editing && frameShown
   };
 }
+const useVideoDuration = ({
+  savedDuration,
+  videoRef,
+  videoKey
+}) => {
+  const [loadedDuration, setLoadedDuration] = useState(0);
+  useEffect(() => {
+    setLoadedDuration(0);
+    const video = videoRef.current;
+    if (savedDuration || !video) {
+      return void 0;
+    }
+    const read = () => setLoadedDuration(
+      Number.isFinite(video.duration) && video.duration > 0 ? video.duration : 0
+    );
+    let requestedSrc = "";
+    const loadMetadata = () => {
+      const src = video.getAttribute("src") || video.currentSrc;
+      if (!src || src === requestedSrc || video.readyState >= HTMLMediaElement.HAVE_METADATA) {
+        return;
+      }
+      requestedSrc = src;
+      if (video.preload === "none") {
+        video.preload = "metadata";
+      }
+      video.load();
+    };
+    video.addEventListener("loadstart", loadMetadata);
+    video.addEventListener("loadedmetadata", read);
+    video.addEventListener("durationchange", read);
+    loadMetadata();
+    read();
+    return () => {
+      video.removeEventListener("loadstart", loadMetadata);
+      video.removeEventListener("loadedmetadata", read);
+      video.removeEventListener("durationchange", read);
+    };
+  }, [savedDuration, videoRef, videoKey]);
+  return savedDuration || loadedDuration;
+};
 const root = "root__Wv1E1";
 const stage = "stage__XFpev";
 const media = "media__tTFno";
@@ -470,7 +517,11 @@ const VideoScrub = ({
   const rootRef = useRef(null);
   const stageRef = useRef(null);
   const videoRef = useRef(null);
-  const duration = (video == null ? void 0 : video.duration) ?? 0;
+  const duration = useVideoDuration({
+    savedDuration: video == null ? void 0 : video.duration,
+    videoRef,
+    videoKey: video == null ? void 0 : video.uri
+  });
   const { layout, seek } = useScrubGate({ scrubAllowed, duration });
   const { seekProgress, frameReady: frameReady2 } = useScrubVideo({
     enabled: seek,

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

@@ -1,10 +1,18 @@
 import { ScrollSpeed, ScrubStart } from './VideoScrub.types';
-export declare const COMPONENT_TYPE = "wixEditorElements.VideoScrub__DEV__v11";
+export declare const COMPONENT_TYPE = "wixEditorElements.VideoScrub__DEV__v14";
 export declare const ROOT_CLASS = "video-scrub";
 export declare const presets: {
-    readonly free: "free";
+    readonly resizable: "resizable";
     readonly stretched: "stretched";
 };
+export declare const PRESET_THUMBNAILS: {
+    readonly stretched: "https://static.wixstatic.com/media/18873e_d780aeec5db34595bafd5f0d806b834b~mv2.png";
+    readonly resizable: "https://static.wixstatic.com/media/18873e_7db03132e6d8443da903c91f02616b90~mv2.png";
+};
+export declare const StickyMode: {
+    readonly on: "on";
+    readonly off: "off";
+};
 export declare const DEFAULT_VIDEO_RATIO: number;
 export declare const SCROLL_VH_PER_SECOND: Record<ScrollSpeed, number>;
 export declare const MIN_SCROLL_VH = 50;

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

@@ -38,6 +38,9 @@
   --borderEndStartRadius: initial;
   --borderEndEndRadius: initial;
   --aspect-ratio: initial;
+  --video-scrub-stage-position: initial;
+  --video-scrub-stage-top: initial;
+  --video-scrub-scroll-space: initial;
   position: relative;
   box-sizing: border-box;
 }
@@ -85,13 +88,17 @@
 }
 
 .scrubbing__yEgJI .stage__XFpev {
-  position: sticky;
-  top: var(--video-scrub-sticky-top);
+  position: var(--video-scrub-stage-position, sticky);
+  top: var(--video-scrub-stage-top, var(--video-scrub-sticky-top));
   transition: top var(--wix-top-inset-transition-duration, 0ms) var(--wix-top-inset-transition-easing, linear);
   height: var(--video-scrub-stage-height, inherit);
   aspect-ratio: 1/var(--aspect-ratio);
 }
 
+.scrollSpace__oaKzu {
+  display: var(--video-scrub-scroll-space, block);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .scrollSpace__oaKzu {
     display: none;

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

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+/**
+ * The video's length in seconds. Replace Video (GFPP) saves `duration`, but a video picked in the
+ * Settings panel is saved without it, so then it comes from the video element once its metadata
+ * loads. 0 until known.
+ */
+export declare const useVideoDuration: ({ savedDuration, videoRef, videoKey, }: {
+    savedDuration?: number;
+    videoRef: RefObject<HTMLVideoElement | null>;
+    videoKey?: string;
+}) => number;

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

@@ -1,24 +1,18 @@
 import { L as LAYOUT, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, M as MEDIA, D as DATA, c as ContainerType, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { g as getTranslationResources } from "../chunks/translationResources.js";
 import { V as VideoCategoryTypes } from "../chunks/types.impl.js";
-import { p as presets, k as TIMEFRAMES_GROUP_KEY, a as ScrollSpeed, j as ScrubStart, T as TIMEFRAME_CONTENT_CLASS, l as MAX_COUNT, R as ROOT_CLASS, C as COMPONENT_TYPE } from "../chunks/types.js";
+import { p as presets, k as TIMEFRAMES_GROUP_KEY, a as ScrollSpeed, j as ScrubStart, P as PRESET_THUMBNAILS, l as StickyMode, T as TIMEFRAME_CONTENT_CLASS, m as MAX_COUNT, R as ROOT_CLASS, C as COMPONENT_TYPE } from "../chunks/types.js";
 const manifest = {
-  id: "0dab4e56-b218-41ae-baef-a041df9f12e1",
+  id: "550e742a-512c-410c-a721-d805f781c5bc",
   type: COMPONENT_TYPE,
   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: {
-        sizingType: LAYOUT.SIZING_TYPE.pixels,
-        pixels: 640
-      },
-      height: {
-        sizingType: LAYOUT.SIZING_TYPE.pixels,
-        pixels: 360
-      }
+      width: { sizingType: LAYOUT.SIZING_TYPE.stretched },
+      height: { sizingType: LAYOUT.SIZING_TYPE.content }
     },
     presets: {
-      default: presets.free
+      default: presets.stretched
     }
   },
   editorElement: {
@@ -231,6 +225,42 @@ const manifest = {
         displayName: "Bottom End Corner",
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndEndRadius,
         defaultValue: "0px"
+      },
+      // On: the video stays on screen while it scrubs, over a tall scroll track. Off: the root is
+      // only the video, and it scrubs while it scrolls past. CSS only, so the server render is
+      // right (VideoScrub.module.scss).
+      sticky: {
+        displayName: "Sticky video",
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+        defaultValue: StickyMode.on,
+        customEnum: {
+          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+          options: [
+            {
+              value: StickyMode.on,
+              displayName: "On",
+              appliedStyles: [
+                { property: "--video-scrub-stage-position", value: "sticky" },
+                // Both options set the same properties, so one breakpoint's value never leaks
+                // into another's.
+                {
+                  property: "--video-scrub-stage-top",
+                  value: "var(--video-scrub-sticky-top)"
+                },
+                { property: "--video-scrub-scroll-space", value: "block" }
+              ]
+            },
+            {
+              value: StickyMode.off,
+              displayName: "Off",
+              appliedStyles: [
+                { property: "--video-scrub-stage-position", value: "relative" },
+                { property: "--video-scrub-stage-top", value: "0px" },
+                { property: "--video-scrub-scroll-space", value: "none" }
+              ]
+            }
+          ]
+        }
       }
     },
     displayGroups: {
@@ -280,6 +310,12 @@ const manifest = {
           style: "displayGroups.borderStyleGroup"
         }
       },
+      stickyGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+        cssDataType: {
+          items: ["sticky"]
+        }
+      },
       cornersGroup: {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.borderRadius,
         displayName: "Corner radius",
@@ -290,12 +326,13 @@ const manifest = {
           bottomRight: "borderEndEndRadius"
         }
       },
-      // The native presets panel (Explore Designs), like Wix Gallery.
+      // The native presets panel (Explore Designs). One group, so the panel shows no tabs. The
+      // panel lists Resizable first whatever this order is.
       layouts: {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.presets,
         displayName: "Layouts",
         presets: {
-          items: [presets.free, presets.stretched]
+          items: [presets.stretched, presets.resizable]
         }
       },
       // The Settings panel does not follow the `data` key order.
@@ -307,33 +344,31 @@ const manifest = {
       }
     },
     presets: {
-      [presets.free]: {
-        displayName: "Free",
-        // TODO: a real Video Scrub thumbnail. Borrowed from Wix Gallery for the spike.
-        thumbnailUrl: "https://static.wixstatic.com/media/a9ff3b_e6ae88d12db9412498e72af65ce87c19~mv2.png",
+      [presets.stretched]: {
+        presetCssUrl: `./site/components/VideoScrub/presets/${presets.stretched}.css`,
+        displayName: "Stretched",
+        thumbnailUrl: PRESET_THUMBNAILS.stretched,
         initialSize: {
-          width: { sizingType: LAYOUT.SIZING_TYPE.pixels, pixels: 640 },
-          height: { sizingType: LAYOUT.SIZING_TYPE.pixels, pixels: 360 }
+          width: { sizingType: LAYOUT.SIZING_TYPE.stretched },
+          height: { sizingType: LAYOUT.SIZING_TYPE.content }
         },
         presetDefaults: {
           layout: {
-            resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.none,
             disableStretching: true
           }
         }
       },
-      [presets.stretched]: {
-        presetCssUrl: `./site/components/VideoScrub/presets/${presets.stretched}.css`,
-        displayName: "Stretched",
-        // TODO: a real Video Scrub thumbnail. Borrowed from Wix Gallery for the spike.
-        thumbnailUrl: "https://static.wixstatic.com/media/a9ff3b_9e4382b1d2e64e4a9ab56cc128439bd8~mv2.png",
+      [presets.resizable]: {
+        displayName: "Resizable",
+        thumbnailUrl: PRESET_THUMBNAILS.resizable,
         initialSize: {
-          width: { sizingType: LAYOUT.SIZING_TYPE.stretched },
-          height: { sizingType: LAYOUT.SIZING_TYPE.content }
+          width: { sizingType: LAYOUT.SIZING_TYPE.pixels, pixels: 640 },
+          height: { sizingType: LAYOUT.SIZING_TYPE.pixels, pixels: 360 }
         },
         presetDefaults: {
           layout: {
-            resizeDirection: LAYOUT.RESIZE_DIRECTION.none,
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
             disableStretching: true
           }
         }

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

@@ -20,9 +20,13 @@ export declare const getScrollSpaceHeight: (duration: number, speed: ScrollSpeed
  *
  * 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.
+ *
+ * Not sticky (the Sticky design option is off): the root is only the video, and it scrubs while it
+ * scrolls from the start line until its bottom passes the sticky top (0 then: the stage's `top`).
  */
-export declare const getScrubProgress: (root: Element, stage: Element, { start, viewportHeight, stickyTop, }: {
+export declare const getScrubProgress: (root: Element, stage: Element, { start, viewportHeight, stickyTop, sticky, }: {
     start: ScrubStart;
     viewportHeight: number;
     stickyTop: number;
+    sticky?: boolean;
 }) => number;

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

@@ -10,12 +10,20 @@ var ScrubStart = /* @__PURE__ */ ((ScrubStart2) => {
   ScrubStart2["top"] = "top";
   return ScrubStart2;
 })(ScrubStart || {});
-const COMPONENT_TYPE = "wixEditorElements.VideoScrub__DEV__v11";
+const COMPONENT_TYPE = "wixEditorElements.VideoScrub__DEV__v14";
 const ROOT_CLASS = "video-scrub";
 const presets = {
-  free: "free",
+  resizable: "resizable",
   stretched: "stretched"
 };
+const PRESET_THUMBNAILS = {
+  stretched: "https://static.wixstatic.com/media/18873e_d780aeec5db34595bafd5f0d806b834b~mv2.png",
+  resizable: "https://static.wixstatic.com/media/18873e_7db03132e6d8443da903c91f02616b90~mv2.png"
+};
+const StickyMode = {
+  on: "on",
+  off: "off"
+};
 const DEFAULT_VIDEO_RATIO = 9 / 16;
 const SCROLL_VH_PER_SECOND = {
   [ScrollSpeed.slow]: 30,
@@ -51,6 +59,7 @@ export {
   DEFAULT_VIDEO_RATIO as D,
   LEGACY_TIMEFRAMES_ARIA_LABEL_KEY as L,
   MAX_SCROLL_VH as M,
+  PRESET_THUMBNAILS as P,
   ROOT_CLASS as R,
   STICKY_TOP as S,
   TIMEFRAME_CONTENT_CLASS as T,
@@ -65,6 +74,7 @@ export {
   isDuration as i,
   ScrubStart as j,
   TIMEFRAMES_GROUP_KEY as k,
-  MAX_COUNT as l,
+  StickyMode as l,
+  MAX_COUNT as m,
   presets as p
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2812.0",
+  "version": "1.2813.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -224,5 +224,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "db2dc4c2786e0c1a74db536e48c8d37ce5caac29cf5dceeae5f39a23"
+  "falconPackageHash": "0c6c4253b10c03d8953b8a008299c366f0bf518734fe5debf1e27950"
 }