@wix/editor-react-components 1.2761.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 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 { 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(
@@ -18,14 +21,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 +160,7 @@ const useScrubVideo = ({
 };
 const useScrubProgress = ({
   enabled,
+  start,
   rootRef,
   stageRef,
   onProgress
@@ -153,7 +172,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 +204,236 @@ const useScrubProgress = ({
       observer.disconnect();
       stop();
     };
-  }, [enabled, rootRef, stageRef, onProgress]);
+  }, [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";
 const scrubbing = "scrubbing__yEgJI";
 const scrollSpace = "scrollSpace__oaKzu";
 const frameReady = "frameReady__g-HFT";
 const styles = {
   root,
   stage,
+  media,
   scrubbing,
   scrollSpace,
   frameReady
@@ -196,30 +442,59 @@ const SCRUB_ROOT_STYLE = {
   minHeight: "max-content",
   aspectRatio: "auto"
 };
+const NO_TIMEFRAMES = [];
 const VideoScrub = ({
   id,
   className,
-  video: savedVideo,
+  video,
   scrollSpeed = ScrollSpeed.normal,
-  scrubAllowed = true
+  scrubStart = ScrubStart.top,
+  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);
-  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
   });
+  const timeframe = useTimeframes({
+    timeframes: savedTimeframes ?? NO_TIMEFRAMES,
+    activeTimeframeIndex,
+    durationSeconds: duration,
+    editing,
+    videoRef,
+    videoKey: (video == null ? void 0 : video.uri) ?? ""
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -233,35 +508,60 @@ const VideoScrub = ({
       ),
       style: layout ? SCRUB_ROOT_STYLE : void 0,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             ref: stageRef,
-            className: clsx(styles.stage, frameReady2 && styles.frameReady),
-            style: layout ? {
-              aspectRatio: `1 / ${getVideoRatio(video) ?? DEFAULT_VIDEO_RATIO}`
-            } : void 0,
+            className: clsx(
+              styles.stage,
+              (frameReady2 || timeframe.frameShown) && styles.frameReady
+            ),
             "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
-              }
-            )
+            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(
           "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,13 @@
-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>>;
+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,18 +1,91 @@
-.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;
+  --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/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;
+};