@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,32 @@
+var VideoStartType = /* @__PURE__ */ ((VideoStartType2) => {
+  VideoStartType2["auto"] = "auto";
+  VideoStartType2["click"] = "click";
+  VideoStartType2["hover"] = "hover";
+  return VideoStartType2;
+})(VideoStartType || {});
+var VideoEndType = /* @__PURE__ */ ((VideoEndType2) => {
+  VideoEndType2["loop"] = "loop";
+  VideoEndType2["replayOnClick"] = "replayOnClick";
+  VideoEndType2["stop"] = "stop";
+  return VideoEndType2;
+})(VideoEndType || {});
+var VideoPlayingState = /* @__PURE__ */ ((VideoPlayingState2) => {
+  VideoPlayingState2["playing"] = "playing";
+  VideoPlayingState2["paused"] = "paused";
+  VideoPlayingState2["ended"] = "ended";
+  return VideoPlayingState2;
+})(VideoPlayingState || {});
+var FilterEffectType = /* @__PURE__ */ ((FilterEffectType2) => {
+  FilterEffectType2["tvDuotone"] = "tvDuotone";
+  FilterEffectType2["tvMonotoneDark"] = "tvMonotoneDark";
+  FilterEffectType2["tvMonotoneLight"] = "tvMonotoneLight";
+  FilterEffectType2["grayscale"] = "grayscale";
+  FilterEffectType2["tvHue"] = "tvHue";
+  return FilterEffectType2;
+})(FilterEffectType || {});
+export {
+  FilterEffectType as F,
+  VideoStartType as V,
+  VideoEndType as a,
+  VideoPlayingState as b
+};

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

@@ -0,0 +1,477 @@
+import * as React from "react";
+import { f as fastdom, i as initCustomElement$1 } from "./customElementInit.js";
+import { I as Image } from "./Image.js";
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+const videoContainer = "video-container__qOTQi";
+const video = "video__YuKrH";
+const styles = {
+  videoContainer,
+  video
+};
+const STATIC_VIDEO_URL = "https://video.wixstatic.com/";
+const STATIC_ADAPTIVE_VIDEO_URL = "https://files.wix.com/";
+const isAbsoluteUrl = (url) => url.startsWith("http://") || url.startsWith("https://");
+function sortQualities(sources) {
+  return sources.sort((a, b) => a.width * a.height - b.width * b.height);
+}
+function getCompleteUrl(url, staticVideoUrl) {
+  const completeUrl = isAbsoluteUrl(url) ? new URL(url) : new URL(url, staticVideoUrl);
+  return completeUrl.href;
+}
+function getVideoQualityBySize(sources, _ref) {
+  let {
+    width,
+    height
+  } = _ref;
+  const targetQuality = sources.find((value) => value.width * value.height > width * height);
+  return targetQuality || sources[sources.length - 1];
+}
+function getScaleFactor(containerWidth, containerHeight, videoWidth, videoHeight) {
+  return {
+    wScale: containerWidth / videoWidth,
+    hScale: containerHeight / videoHeight
+  };
+}
+function getVideoDimension(videoScale, videoWidth, videoHeight) {
+  const scale = Math.min(videoScale.wScale, videoScale.hScale);
+  return {
+    width: Math.round(videoWidth * scale),
+    height: Math.round(videoHeight * scale)
+  };
+}
+function setVideoFocalPoint(videoNode, focalPoint) {
+  const focalX = (focalPoint == null ? void 0 : focalPoint.x) ?? 50;
+  const focalY = (focalPoint == null ? void 0 : focalPoint.y) ?? 50;
+  videoNode.style.setProperty("--focal-x", focalX.toString());
+  videoNode.style.setProperty("--focal-y", focalY.toString());
+}
+async function getVideoSource(width, height, uri, qualityPolicy, sources, adaptiveSources, duration, onError) {
+  const hasProgressiveSources = sources && sources.length > 0;
+  const hasAbsoluteUri = uri && isAbsoluteUrl(uri);
+  const shouldSkipAdaptiveShortVideo = duration && duration < 40;
+  if (qualityPolicy === "adaptive" && adaptiveSources && adaptiveSources.length > 0 && !shouldSkipAdaptiveShortVideo) {
+    const hlsSource = adaptiveSources.find((s) => s.format === "hls");
+    const Hls = await import("./hls.js");
+    if (hlsSource && Hls && Hls.default.isSupported()) {
+      const videoSourceUrl = getCompleteUrl(hlsSource.uri, STATIC_ADAPTIVE_VIDEO_URL);
+      const patchVideoSource = (videoNode) => {
+        const hls = new Hls.default();
+        hls.loadSource(videoSourceUrl);
+        hls.attachMedia(videoNode);
+        hls.on(Hls.default.Events.ERROR, (_, data) => {
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.default.ErrorTypes.NETWORK_ERROR:
+                hls.startLoad();
+                if (onError) {
+                  onError(new Error(`HLS Network Error: ${data.details}.
+Attempting to reconnect...`));
+                }
+                break;
+              case Hls.default.ErrorTypes.MEDIA_ERROR:
+                hls.recoverMediaError();
+                if (onError) {
+                  onError(new Error(`HLS Media Error: ${data.details}.
+Attempting to recover...`));
+                }
+                break;
+              default:
+                hls.destroy();
+                if (onError) {
+                  onError(new Error(`HLS Unknown Error: ${data.details}.
+Unrecoverable playback error`));
+                }
+                break;
+            }
+          }
+        });
+      };
+      return {
+        videoSourceUrl,
+        patchVideoSource
+      };
+    }
+  }
+  if (hasProgressiveSources) {
+    const highestQuality = sources[sources.length - 1];
+    if (qualityPolicy === "highest") {
+      var _highestQuality$types;
+      const url = (_highestQuality$types = highestQuality.types.find((type) => type.format === "mp4")) == null ? void 0 : _highestQuality$types.uri;
+      if (url) {
+        const videoSourceUrl = getCompleteUrl(url, STATIC_VIDEO_URL);
+        return {
+          videoSourceUrl,
+          patchVideoSource: (videoNode) => {
+            videoNode.src = videoSourceUrl;
+            videoNode.load();
+          }
+        };
+      }
+    } else {
+      var _targetQuality$types$;
+      const videoWidth = parseInt(highestQuality.width.toString(), 10);
+      const videoHeight = parseInt(highestQuality.height.toString(), 10);
+      const scaleFactor = getScaleFactor(width, height, videoWidth, videoHeight);
+      const videoScaledDimensions = getVideoDimension(scaleFactor, videoWidth, videoHeight);
+      const targetQuality = getVideoQualityBySize(sources, videoScaledDimensions);
+      const url = (_targetQuality$types$ = targetQuality.types.find((type) => type.format === "mp4")) == null ? void 0 : _targetQuality$types$.uri;
+      if (url) {
+        const videoSourceUrl = getCompleteUrl(url, STATIC_VIDEO_URL);
+        return {
+          videoSourceUrl,
+          patchVideoSource: (videoNode) => {
+            videoNode.src = videoSourceUrl;
+            videoNode.load();
+          }
+        };
+      }
+    }
+  }
+  if (hasAbsoluteUri) {
+    return {
+      videoSourceUrl: uri,
+      patchVideoSource: (videoNode) => {
+        videoNode.src = uri;
+        videoNode.load();
+      }
+    };
+  }
+  return {
+    videoSourceUrl: "",
+    patchVideoSource: () => {
+    }
+  };
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
+    return typeof o2;
+  } : function(o2) {
+    return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
+  }, _typeof(o);
+}
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+const videoLayout = {
+  /**
+   * @param {HTMLVideoElement} videoNode
+   * @param {HTMLElement} container
+   * @param {QualityPolicy} quality
+   * @param {string} uri
+   * @param {Object[]} sources
+   * @param {Object[]} adaptiveSources
+   * @param {number} duration
+   * @param {(error: Error) => void} onError
+   * @return {{currentSrc: string, videoSourceUrl: string}}
+   */
+  async measure(videoNode, container, quality, uri, sources, adaptiveSources, duration, onError) {
+    const {
+      videoSourceUrl,
+      patchVideoSource
+    } = await getVideoSource(container.offsetWidth, container.offsetHeight, uri, quality, sources, adaptiveSources, duration, onError);
+    const needsSrcUpdate = shouldUpdateSrc(videoNode, videoSourceUrl);
+    return {
+      needsSrcUpdate,
+      patchVideoSource
+    };
+  },
+  /**
+   * @param {HTMLDivElement} poster
+   * @param {HTMLVideoElement} videoNode
+   * @param {boolean} autoplay
+   * @param {boolean} needsSrcUpdate
+   * @param {string} posterEffect
+   * @param {number} playbackRate
+   * @param {(videoNode: HTMLVideoElement) => void} patchVideoSource
+   * @param {Object[]} sources
+   * @param {Object} focalPoint
+   */
+  mutate(poster, videoNode, autoplay, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, focalPoint, sources) {
+    videoNode.toggleAttribute("autoplay", autoplay);
+    if (sources != null && sources[0]) {
+      const videoWidth = sources[0].width;
+      const videoHeight = sources[0].height;
+      const aspectRatio = videoWidth / videoHeight;
+      videoNode.style.setProperty("--aspect-ratio", aspectRatio.toString());
+    }
+    setVideoFocalPoint(videoNode, focalPoint);
+    handlePosterVisibility(needsSrcUpdate, videoNode, poster, posterEffect, autoplay);
+    if (needsSrcUpdate) {
+      patchVideoSource(videoNode);
+    }
+    videoNode.playbackRate = playbackRate;
+  }
+};
+function shouldUpdateSrc(videoNode, newSrcUrl) {
+  const hasError = videoNode.networkState === videoNode.NETWORK_NO_SOURCE;
+  const hasDiff = !videoNode.currentSrc.endsWith(newSrcUrl);
+  return Boolean(newSrcUrl && (hasDiff || hasError));
+}
+function handlePosterVisibility(needsEventUpdate, videoNode, posterNode, posterEffect, autoplay) {
+  const isPausedOrEmpty = videoNode.paused || videoNode.currentSrc === "";
+  if (needsEventUpdate && isPausedOrEmpty) {
+    videoNode.ontimeupdate = null;
+    videoNode.onseeked = null;
+    videoNode.onplay = null;
+    if (autoplay) {
+      const muteState = videoNode.muted;
+      videoNode.ontimeupdate = () => {
+        if (videoNode.currentTime > 0) {
+          videoNode.ontimeupdate = null;
+          videoNode.onseeked = () => {
+            videoNode.onseeked = null;
+            videoNode.muted = muteState;
+            removePoster(videoNode, posterNode, posterEffect);
+          };
+          videoNode.currentTime = 0;
+        }
+      };
+    } else {
+      videoNode.onplay = () => {
+        videoNode.onplay = null;
+        removePoster(videoNode, posterNode, posterEffect);
+      };
+    }
+  }
+}
+function removePoster(videoNode, posterNode, posterEffect) {
+  if (posterEffect === "fade") {
+    posterNode.style.transition = "opacity 1.6s ease-out";
+  }
+  posterNode.style.opacity = "0";
+  videoNode.style.opacity = "1";
+}
+function wowVideoFactory(services, contextWindow) {
+  return class WowVideo extends contextWindow.HTMLElement {
+    constructor() {
+      super();
+      _defineProperty(this, "timeoutId", void 0);
+      this.timeoutId = null;
+    }
+    /**
+     * Dispatch a custom error event that bubbles up
+     */
+    dispatchVideoError(error) {
+      this.dispatchEvent(new CustomEvent("videoerror", {
+        detail: {
+          error
+        },
+        bubbles: true
+      }));
+    }
+    attributeChangedCallback(_, oldValue) {
+      if (oldValue) {
+        this.reLayout();
+      }
+    }
+    connectedCallback() {
+      var _services$intersectio;
+      (_services$intersectio = services.intersectionService) == null || _services$intersectio.observe(this);
+    }
+    disconnectedCallback() {
+      this.unobserveIntersect();
+    }
+    unobserveIntersect() {
+      var _services$intersectio2;
+      (_services$intersectio2 = services.intersectionService) == null || _services$intersectio2.unobserve(this);
+    }
+    /**
+     * Check if the user prefers reduced motion
+     *
+     * @returns {boolean} True if reduced motion is preferred
+     */
+    isPrefersReducedMotion() {
+      return contextWindow.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    reLayout() {
+      if (!this.dataset.videoInfo) {
+        return;
+      }
+      const {
+        uri,
+        sources,
+        adaptiveSources,
+        autoplay,
+        playbackRate,
+        posterEffect,
+        qualityPolicy,
+        focalPoint,
+        duration
+      } = JSON.parse(this.dataset.videoInfo);
+      const prefersReducedMotion = this.isPrefersReducedMotion();
+      const autoPlayAllowed = !prefersReducedMotion && autoplay;
+      const videoNode = this.querySelector("video");
+      const poster = this.querySelector("img");
+      services.mutationService.measure(async () => {
+        const measures = await videoLayout.measure(videoNode, this, qualityPolicy, uri, sources, adaptiveSources, duration, (error) => this.dispatchVideoError(error));
+        const {
+          needsSrcUpdate,
+          patchVideoSource
+        } = measures;
+        services.mutationService.mutate(() => {
+          videoLayout.mutate(poster, videoNode, autoPlayAllowed, needsSrcUpdate, posterEffect, playbackRate, patchVideoSource, focalPoint, sources);
+        });
+      });
+    }
+    static get observedAttributes() {
+      return ["data-video-info"];
+    }
+  };
+}
+function init(contextWindow, services) {
+  contextWindow = contextWindow || window;
+  const elementName = "wow-video";
+  if (contextWindow.customElements.get(elementName) === void 0) {
+    let intersectionObserver;
+    if (contextWindow.IntersectionObserver) {
+      intersectionObserver = new IntersectionObserver((entries) => entries.map((entry) => {
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          target.unobserveIntersect();
+          target.reLayout();
+        }
+        return entry;
+      }), {
+        rootMargin: "50% 100%"
+      });
+    }
+    const WowVideo = wowVideoFactory({
+      mutationService: fastdom,
+      intersectionService: intersectionObserver,
+      ...services
+    }, contextWindow);
+    contextWindow.customElements.define(elementName, WowVideo);
+  }
+  return;
+}
+function initCustomElement(contextWindow, services) {
+  if (contextWindow === void 0) {
+    contextWindow = null;
+  }
+  if (services === void 0) {
+    services = {};
+  }
+  const actualWindow = contextWindow || window;
+  init(actualWindow, services);
+}
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      initCustomElement();
+      initCustomElement$1();
+    }, {
+      once: true
+    });
+  } else {
+    initCustomElement();
+    initCustomElement$1();
+  }
+}
+const Video = (props) => {
+  const {
+    motionPart,
+    videoRef,
+    videoMedia,
+    muted,
+    loop,
+    autoplay,
+    playbackRate = 1,
+    posterEffect,
+    id,
+    qualityPolicy = "proportional",
+    focalPoint = {
+      x: 50,
+      y: 50
+    },
+    onError
+  } = props;
+  const wowVideoRef = React.useRef(null);
+  const videoInfoString = React.useMemo(() => {
+    const sortedQualities = sortQualities(videoMedia.sources || []);
+    return JSON.stringify({
+      ...videoMedia,
+      playbackRate,
+      posterEffect,
+      sources: sortedQualities,
+      autoplay,
+      qualityPolicy,
+      focalPoint
+    });
+  }, [videoMedia, playbackRate, posterEffect, autoplay, qualityPolicy, focalPoint]);
+  const VideoPosterImage = videoMedia.poster && /* @__PURE__ */ React.createElement(Image, _extends({}, videoMedia.poster, {
+    focalPoint,
+    id: `videoPoster_${id}`,
+    displayMode: "fill",
+    alt: videoMedia.name || videoMedia.poster.alt || "",
+    quality: videoMedia.poster.quality ? {
+      quality: videoMedia.poster.quality
+    } : void 0
+  }));
+  const handleVideoElementError = React.useCallback((event) => {
+    if (onError) {
+      var _videoElement$error;
+      const videoElement = event.currentTarget;
+      const error = new Error(`Video playback error: ${((_videoElement$error = videoElement.error) == null ? void 0 : _videoElement$error.message) || "Unknown error"}`);
+      onError(error);
+    }
+  }, [onError]);
+  const handleAdaptiveVideoError = React.useCallback((event) => {
+    var _event$detail;
+    if (onError && (_event$detail = event.detail) != null && _event$detail.error) {
+      onError(event.detail.error);
+    }
+  }, [onError]);
+  React.useEffect(() => {
+    const element = wowVideoRef.current;
+    element == null || element.addEventListener("videoerror", handleAdaptiveVideoError);
+    return () => {
+      element == null || element.removeEventListener("videoerror", handleAdaptiveVideoError);
+    };
+  }, [onError, handleAdaptiveVideoError]);
+  return /* @__PURE__ */ React.createElement("wow-video", {
+    ref: wowVideoRef,
+    "data-video-info": videoInfoString,
+    "data-motion-part": motionPart || "",
+    class: styles.videoContainer
+  }, /* @__PURE__ */ React.createElement("video", {
+    ref: videoRef,
+    className: styles.video,
+    crossOrigin: "anonymous",
+    playsInline: true,
+    muted,
+    loop,
+    preload: "none",
+    onError: handleVideoElementError
+  }), VideoPosterImage);
+};
+export {
+  Video as V
+};

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

@@ -0,0 +1,8 @@
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  commonjsGlobal as c,
+  getDefaultExportFromCjs as g
+};

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

@@ -0,0 +1,120 @@
+const convertA11yKeysToHtmlFormat = (a11yObj) => Object.entries(a11yObj).reduce(
+  (result, [key, value]) => {
+    const transformedKey = (key.startsWith("aria") ? key.replace(/([A-Z])/, "-$1") : key).toLowerCase();
+    return {
+      ...result,
+      [transformedKey]: value
+    };
+  },
+  {}
+);
+const removeAriaPrefix = (a11yObj) => Object.entries(a11yObj).reduce((result, [key, value]) => {
+  const withoutAria = key.replace(/^aria/, "");
+  const normalizedKey = withoutAria.charAt(0).toLowerCase() + withoutAria.slice(1);
+  return {
+    ...result,
+    [normalizedKey]: value
+  };
+}, {});
+const keyCodes = {
+  enter: 13,
+  space: 32
+};
+function activateByKey(key) {
+  return (event) => {
+    if (event.keyCode === key) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.currentTarget.click();
+    }
+  };
+}
+const activateBySpaceButton = activateByKey(keyCodes.space);
+const activateByEnterButton = activateByKey(keyCodes.enter);
+const activateBySpaceOrEnterButton = (event) => {
+  activateByEnterButton(event);
+  activateBySpaceButton(event);
+};
+const HAS_CUSTOM_FOCUS_CLASSNAME = "has-custom-focus";
+const a11yBlackList = ["aria-id", "aria-metadata", "aria-type"];
+const filteredA11y = (a11y, blacklist) => {
+  return Object.entries(a11y).reduce((acc, [key, value]) => {
+    if (!blacklist.includes(key)) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+};
+const getTabIndexAttribute = (a11y = {}) => {
+  const tabIndex = a11y.tabIndex ?? a11y.tabindex ?? void 0;
+  return tabIndex !== void 0 ? { tabIndex: Number(tabIndex) } : {};
+};
+const getAriaAttributes = ({
+  role,
+  tabIndex,
+  tabindex,
+  ...ariaProps
+} = {}) => {
+  const result = Object.entries(ariaProps).reduce(
+    (prev, [key, value]) => {
+      return { ...prev, [`aria-${key}`.toLowerCase()]: value };
+    },
+    { role, tabIndex: tabIndex ?? tabindex }
+  );
+  Object.keys(result).forEach((key) => {
+    if (result[key] === void 0 || result[key] === null) {
+      delete result[key];
+    }
+  });
+  return filteredA11y(
+    result,
+    a11yBlackList
+  );
+};
+const getAccessibilityAttributes = (attributes) => {
+  const {
+    role,
+    tabIndex,
+    tabindex,
+    screenReader,
+    lang,
+    ariaAttributes = {}
+  } = attributes;
+  const prefixedAriaAttributes = Object.entries(
+    ariaAttributes
+  ).reduce((prev, [key, value]) => {
+    return { ...prev, [`aria-${key}`.toLowerCase()]: value };
+  }, {});
+  return {
+    role,
+    tabIndex: tabIndex ?? tabindex,
+    screenReader,
+    ariaAttributes: filteredA11y(
+      prefixedAriaAttributes,
+      a11yBlackList
+    ),
+    lang
+  };
+};
+const getAccessibilityAttributesSpread = (attributes) => {
+  const a11yProps = getAccessibilityAttributes(attributes);
+  return {
+    ...a11yProps.ariaAttributes,
+    tabIndex: a11yProps.tabIndex,
+    screenReader: a11yProps.screenReader,
+    lang: a11yProps.lang,
+    role: a11yProps.role
+  };
+};
+export {
+  HAS_CUSTOM_FOCUS_CLASSNAME as H,
+  activateBySpaceOrEnterButton as a,
+  getAccessibilityAttributes as b,
+  activateBySpaceButton as c,
+  activateByEnterButton as d,
+  getTabIndexAttribute as e,
+  convertA11yKeysToHtmlFormat as f,
+  getAccessibilityAttributesSpread as g,
+  getAriaAttributes as h,
+  removeAriaPrefix as r
+};

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

@@ -0,0 +1,18 @@
+const createA11ySdk = ({ a11yProperty }) => (api) => {
+  const { props, setProps } = api;
+  return {
+    accessibility: {
+      get ariaLabel() {
+        var _a;
+        return (_a = props[a11yProperty]) == null ? void 0 : _a.ariaLabel;
+      },
+      set ariaLabel(value) {
+        const existingA11y = props[a11yProperty] ?? {};
+        setProps({ [a11yProperty]: { ...existingA11y, ariaLabel: value } });
+      }
+    }
+  };
+};
+export {
+  createA11ySdk as c
+};