@wix/editor-react-components 1.2500.0 → 1.2502.0

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { f as fastdom } from "./fastdom.js";
-import { i as imageKit, g as getPlaceholder, a as getData, b as alignTypes, f as fittingTypes, c as getFileExtension, d as fileType, M as MEDIA_ROOT_URL, S as STATIC_MEDIA_URL$1 } from "./index5.js";
+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++) {
@@ -12,7 +12,7 @@ function _extends() {
 }
 const videoContainer = "videoContainer__Eyxxe";
 const video = "video__YuKrH";
-const styles$1 = {
+const styles = {
   videoContainer,
   video
 };
@@ -346,7 +346,7 @@ function wowVideoFactory(services, contextWindow) {
     }
   };
 }
-function init$1(contextWindow, services) {
+function init(contextWindow, services) {
   contextWindow = contextWindow || window;
   const elementName = "wow-video";
   if (contextWindow.customElements.get(elementName) === void 0) {
@@ -372,7 +372,7 @@ function init$1(contextWindow, services) {
   }
   return;
 }
-function initCustomElement$1(contextWindow, services) {
+function initCustomElement(contextWindow, services) {
   if (contextWindow === void 0) {
     contextWindow = null;
   }
@@ -380,657 +380,19 @@ function initCustomElement$1(contextWindow, services) {
     services = {};
   }
   const actualWindow = contextWindow || window;
-  init$1(actualWindow, services);
-}
-const image = "image__OIbFL";
-const styles = {
-  image
-};
-const { STATIC_MEDIA_URL } = imageKit;
-const fetchLQIP = ({ fittingType, src, target, options }) => {
-  const placeholder = getPlaceholder(fittingType, src, target, {
-    ...options,
-    autoEncode: true
-  });
-  if ((placeholder == null ? void 0 : placeholder.uri) && !/^[a-z]+:/.test(placeholder.uri)) {
-    placeholder.uri = `${STATIC_MEDIA_URL}${placeholder.uri}`;
-  }
-  return placeholder;
-};
-const SCHEME_RE = /^[a-z]+:/;
-const Image = (props) => {
-  var _a, _b;
-  const { id, containerId, uri, alt, name = "", role, width, height, displayMode, devicePixelRatio, quality, alignType, bgEffectName = "", focalPoint, upscaleMethod, className = "", crop, imageStyles = {}, targetWidth, targetHeight, targetScale, onLoad = () => {
-  }, onError = () => {
-  }, shouldUseLQIP, containerWidth, containerHeight, getPlaceholder: getPlaceholder2, isInFirstFold, placeholderTransition, socialAttrs, isSEOBot, skipMeasure, hasAnimation, encoding, isFluidLayout, baseHostURL } = props;
-  const imageRef = React.useRef(null);
-  let hasSsrSrc = "";
-  const hasBlurTransition = placeholderTransition === "blur";
-  const ssrImageData = React.useRef(null);
-  if (!ssrImageData.current) {
-    if (getPlaceholder2 || shouldUseLQIP || isInFirstFold || isSEOBot) {
-      const options = {
-        upscaleMethod,
-        ...quality ? quality : {},
-        shouldLoadHQImage: isInFirstFold,
-        isSEOBot,
-        hasAnimation,
-        encoding,
-        baseHostURL
-      };
-      ssrImageData.current = (getPlaceholder2 || fetchLQIP)({
-        fittingType: displayMode,
-        src: {
-          id: uri,
-          width,
-          height,
-          crop,
-          name,
-          focalPoint
-        },
-        target: {
-          width: containerWidth,
-          height: containerHeight,
-          alignment: alignType,
-          htmlTag: "img"
-        },
-        options
-      });
-      hasSsrSrc = !ssrImageData.current.transformed || isInFirstFold || isSEOBot ? "" : "true";
-    } else {
-      ssrImageData.current = {
-        uri: void 0,
-        css: { img: {} },
-        attr: { img: {}, container: {} },
-        transformed: false
-      };
-    }
-  }
-  const isLQIP = !isSEOBot && (getPlaceholder2 || shouldUseLQIP) && !isInFirstFold && ssrImageData.current.transformed;
-  const imageInfo = React.useMemo(() => JSON.stringify({
-    containerId,
-    ...containerId && { containerId },
-    ...alignType && { alignType },
-    ...skipMeasure && { skipMeasure: true },
-    displayMode,
-    ...containerWidth && { targetWidth: containerWidth },
-    ...containerHeight && { targetHeight: containerHeight },
-    ...targetWidth && { targetWidth },
-    ...targetHeight && { targetHeight },
-    ...targetScale && { targetScale },
-    isLQIP,
-    isSEOBot,
-    lqipTransition: placeholderTransition,
-    encoding,
-    imageData: {
-      width,
-      height,
-      uri,
-      name,
-      displayMode,
-      hasAnimation,
-      ...quality && { quality },
-      ...devicePixelRatio && { devicePixelRatio },
-      ...focalPoint && { focalPoint },
-      ...crop && { crop },
-      ...upscaleMethod && { upscaleMethod }
-    }
-  }), [
-    containerId,
-    alignType,
-    skipMeasure,
-    displayMode,
-    containerWidth,
-    containerHeight,
-    targetWidth,
-    targetHeight,
-    targetScale,
-    isLQIP,
-    isSEOBot,
-    placeholderTransition,
-    encoding,
-    width,
-    height,
-    uri,
-    name,
-    hasAnimation,
-    quality,
-    devicePixelRatio,
-    focalPoint,
-    crop,
-    upscaleMethod
-  ]);
-  const ssrResult = ssrImageData.current;
-  const src = ssrResult == null ? void 0 : ssrResult.uri;
-  const srcset = ssrResult == null ? void 0 : ssrResult.srcset;
-  const placeholderStyle = (_a = ssrResult.css) == null ? void 0 : _a.img;
-  const classNames = `${styles.image} ${className}`;
-  React.useEffect(() => {
-    const imgElement = imageRef.current;
-    if (onLoad && (imgElement == null ? void 0 : imgElement.currentSrc) && (imgElement == null ? void 0 : imgElement.complete)) {
-      onLoad({
-        target: imgElement
-      });
-    }
-  }, []);
-  const maxWidth = ssrResult && !(ssrResult == null ? void 0 : ssrResult.transformed) ? `max(${width}px, 100%)` : targetWidth ? `${targetWidth}px` : null;
-  return React.createElement(
-    "wow-image",
-    { id, class: classNames, "data-image-info": imageInfo, "data-motion-part": `BG_IMG ${containerId}`, "data-bg-effect-name": bgEffectName, "data-has-ssr-src": hasSsrSrc, "data-animate-blur": !isSEOBot && isLQIP && hasBlurTransition ? "" : void 0, "data-is-responsive": isFluidLayout ? "true" : void 0, style: maxWidth ? { "--wix-img-max-width": maxWidth } : {} },
-    React.createElement("img", {
-      src,
-      ref: imageRef,
-      alt: alt || "",
-      role,
-      style: { ...placeholderStyle, ...imageStyles },
-      onLoad,
-      onError,
-      width: containerWidth ? containerWidth : void 0,
-      height: containerHeight ? containerHeight : void 0,
-      ...socialAttrs,
-      srcSet: isInFirstFold ? (_b = srcset == null ? void 0 : srcset.dpr) == null ? void 0 : _b.map((s) => SCHEME_RE.test(s) ? s : `${STATIC_MEDIA_URL}${s}`).join(", ") : void 0,
-      // @ts-expect-error fetchpriority type should work in react > 18.3 https://github.com/facebook/react/pull/25927
-      fetchpriority: isInFirstFold ? "high" : void 0,
-      loading: isInFirstFold === false ? "lazy" : void 0,
-      // The src attribute triggers a mismatch warning because wow-image updates its src outside of the React lifecycle. This causes React to retain the old value in the virtual DOM, which could potentially lead to a bug where the old value is re-rendered during updates. However, we’re confident that this issue is not reproducing in current (16-18) React versions
-      suppressHydrationWarning: true
-    })
-  );
-};
-const CSS_NUMERIC_VALUES = {
-  columnCount: 1,
-  columns: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  zIndex: 1,
-  zoom: 1
-};
-const pick = (obj, props) => {
-  const propsArr = Array.isArray(props) ? props : [props];
-  return propsArr.reduce((subObj, prop) => {
-    const val = obj[prop];
-    return val !== void 0 ? Object.assign(subObj, { [prop]: val }) : subObj;
-  }, {});
-};
-const addDefaultUnitIfNeeded = (prop, value) => typeof value === "number" && !CSS_NUMERIC_VALUES[prop] ? `${value}px` : value.toString();
-const setStyle = (node, styleProperties) => node && styleProperties && Object.keys(styleProperties).forEach((prop) => {
-  const styleProp = prop;
-  const propValue = styleProperties[styleProp];
-  if (propValue !== void 0) {
-    node.style[styleProp] = addDefaultUnitIfNeeded(styleProp, propValue);
-  } else {
-    node.style.removeProperty(styleProp);
-  }
-});
-const getScreenHeight = (heightOverride) => heightOverride || document.documentElement.clientHeight || window.innerHeight || 0;
-const matchesUserDomainMediaPrefix = (uri, prefixes) => prefixes.some((prefix) => uri.startsWith(`${prefix}_`));
-const ensureTrailingSlash = (value) => value.endsWith("/") ? value : `${value}/`;
-const resolveStaticMediaBaseUrl = ({ uri, envConsts }) => {
-  const { externalBaseUrl, userDomainMediaPrefixes = [], staticMediaUrl } = envConsts;
-  if (matchesUserDomainMediaPrefix(uri, userDomainMediaPrefixes) && externalBaseUrl) {
-    return `${ensureTrailingSlash(externalBaseUrl)}_media/`;
-  }
-  return ensureTrailingSlash(staticMediaUrl);
-};
-const getImageComputedProperties = (extendedImageInfo, envConsts, htmlTag) => {
-  if (!extendedImageInfo.targetWidth || !extendedImageInfo.targetHeight || !extendedImageInfo.imageData.uri) {
-    return { uri: "", css: {}, transformed: false };
-  }
-  const { imageData } = extendedImageInfo;
-  const fittingType = extendedImageInfo.displayMode || fittingTypes.SCALE_TO_FILL;
-  const imageOptions = Object.assign(pick(imageData, ["upscaleMethod"]), pick(extendedImageInfo, [
-    "filters",
-    "encoding",
-    "allowFullGIFTransformation",
-    "allowWebpAvifTransforms"
-  ]), extendedImageInfo.quality || imageData.quality, {
-    hasAnimation: (extendedImageInfo == null ? void 0 : extendedImageInfo.hasAnimation) || (imageData == null ? void 0 : imageData.hasAnimation)
-  });
-  const devicePixelRatioFromData = extendedImageInfo.imageData.devicePixelRatio || envConsts.devicePixelRatio;
-  const devicePixelRatio = getDevicePixelRatio$1(devicePixelRatioFromData);
-  const src = Object.assign(pick(imageData, ["width", "height", "crop", "name", "focalPoint"]), { id: imageData.uri });
-  const target = {
-    width: extendedImageInfo.targetWidth,
-    height: extendedImageInfo.targetHeight,
-    htmlTag,
-    pixelAspectRatio: devicePixelRatio,
-    alignment: extendedImageInfo.alignType || alignTypes.CENTER
-  };
-  const imageComputedProperties = getData(fittingType, src, target, imageOptions);
-  const staticMediaUrl = imageData.userDomainMediaURL ? imageData.userDomainMediaURL : resolveStaticMediaBaseUrl({
-    uri: imageData.uri,
-    envConsts
-  });
-  imageComputedProperties.uri = getMediaUrlByContext(imageComputedProperties.uri, staticMediaUrl, envConsts.mediaRootUrl);
-  return imageComputedProperties;
-};
-const getMediaUrlByContext = (imageUri, staticMediaUrl, mediaRootUrl) => {
-  var _a;
-  const isExternalUrl = /(^https?)|(^data)|(^blob)|(^\/\/)/.test(imageUri);
-  if (isExternalUrl) {
-    return imageUri;
-  }
-  let path = ensureTrailingSlash(staticMediaUrl);
-  if (imageUri) {
-    if (/^micons\//.test(imageUri)) {
-      path = ensureTrailingSlash(mediaRootUrl);
-    } else if (((_a = /[^.]+$/.exec(imageUri)) == null ? void 0 : _a[0]) === "ico") {
-      path = path.replace("media", "ficons");
-    }
-  }
-  return path + imageUri;
-};
-const getDevicePixelRatio$1 = (devicePixelRatio) => {
-  const queryParams = window.location.search.split("&").map((query) => query.split("="));
-  const devicePixelRatioQueryParam = queryParams.find((query) => {
-    var _a;
-    return (_a = query[0]) == null ? void 0 : _a.toLowerCase().includes("devicepixelratio");
-  });
-  const devicePixelRatioValueForceFromUrl = (devicePixelRatioQueryParam == null ? void 0 : devicePixelRatioQueryParam[1]) ? Number(devicePixelRatioQueryParam[1]) : null;
-  return devicePixelRatioValueForceFromUrl || devicePixelRatio || 1;
-};
-const getImageSrc = (imageNode) => imageNode.getAttribute("src");
-const imageIsAnimated = (uri, hasAnimation) => getFileExtension(uri) === fileType.GIF || getFileExtension(uri) === fileType.WEBP && hasAnimation;
-const MOBILE_SAFE_ADDRESSBAR_HEIGHT = 80;
-function getHeightOverride(height, mediaHeightOverrideType) {
-  return mediaHeightOverrideType === "fixed" || mediaHeightOverrideType === "viewport" ? document.documentElement.clientHeight + MOBILE_SAFE_ADDRESSBAR_HEIGHT : height;
-}
-function computeScaleOverrides(imageStyle, targetScale = 1) {
-  return targetScale !== 1 ? {
-    ...imageStyle,
-    width: "100%",
-    height: "100%"
-  } : imageStyle;
-}
-function computeStyleOverrides(mediaHeightOverrideType, imageStyle, displayMode, targetScale, isResponsive) {
-  const styleWithScale = computeScaleOverrides(imageStyle, targetScale);
-  if (isResponsive) {
-    delete styleWithScale.height;
-    styleWithScale.width = "100%";
-  }
-  if (!mediaHeightOverrideType) {
-    return styleWithScale;
-  }
-  const style = { ...styleWithScale };
-  if (displayMode === "fill") {
-    style.position = "absolute";
-    style.top = "0";
-  } else if (displayMode === "fit") {
-    style.height = "100%";
-  }
-  if (mediaHeightOverrideType === "fixed") {
-    style["will-change"] = "transform";
-  }
-  if (style.objectPosition) {
-    style.objectPosition = imageStyle.objectPosition.replace(/(center|bottom)$/, "top");
-  }
-  return style;
-}
-function getSourceSetsTargetHeightByEffect(sourceSets, offsetWidth, offsetHeight, screenHeight, services) {
-  const sourceSetsTargetHeights = {};
-  sourceSets.forEach(({ mediaQuery, scrollEffect }) => {
-    var _a;
-    sourceSetsTargetHeights[mediaQuery] = ((_a = services.getMediaDimensionsByEffect) == null ? void 0 : _a.call(services, scrollEffect, offsetWidth, offsetHeight, screenHeight).height) || offsetHeight;
-  });
-  return sourceSetsTargetHeights;
-}
-function computeSrcSets(measures, imageInfo, envConsts) {
-  const { sourceSets } = imageInfo;
-  if (!sourceSets || !sourceSets.length) {
-    return;
-  }
-  const mediaToUri = {};
-  sourceSets.forEach(({ mediaQuery, crop, focalPoint }) => {
-    const imageInfoClone = {
-      ...imageInfo,
-      targetHeight: (measures.sourceSetsTargetHeights || {})[mediaQuery] || 0,
-      imageData: {
-        ...imageInfo.imageData,
-        crop,
-        focalPoint
-      }
-    };
-    const imageComputedProperties = getImageComputedProperties(imageInfoClone, envConsts, "img");
-    mediaToUri[mediaQuery] = imageComputedProperties.uri || "";
-  });
-  return mediaToUri;
-}
-function measure(id, measures, domNodes, { containerElm, bgEffect = "none", sourceSets }, services) {
-  var _a, _b;
-  const innerImage = domNodes.image;
-  const wixImage = domNodes[id];
-  const screenHeight = getScreenHeight((_a = services.getScreenHeightOverride) == null ? void 0 : _a.call(services));
-  const mediaHeightOverrideType = containerElm == null ? void 0 : containerElm.dataset.mediaHeightOverrideType;
-  const hasBgEffect = bgEffect && bgEffect !== "none" || sourceSets && sourceSets.some((srcset) => srcset.scrollEffect);
-  const sourceOfDimensions = containerElm && hasBgEffect ? containerElm : wixImage;
-  const cssBgEffect = window.getComputedStyle(wixImage).getPropertyValue("--bg-scrub-effect");
-  const { width, height } = ((_b = services.getMediaDimensionsByEffect) == null ? void 0 : _b.call(services, cssBgEffect || bgEffect, sourceOfDimensions.offsetWidth, sourceOfDimensions.offsetHeight, screenHeight)) || {
-    width: wixImage.offsetWidth,
-    height: wixImage.offsetHeight
-  };
-  if (sourceSets) {
-    measures.sourceSetsTargetHeights = getSourceSetsTargetHeightByEffect(sourceSets, sourceOfDimensions.offsetWidth, sourceOfDimensions.offsetHeight, screenHeight, services);
-  }
-  if (!innerImage) {
-    return;
-  }
-  const imgSrc = getImageSrc(innerImage);
-  if (cssBgEffect) {
-    measures.top = 0.5 * (wixImage.offsetHeight - height);
-    measures.left = 0.5 * (wixImage.offsetWidth - width);
-  }
-  measures.width = width;
-  measures.height = getHeightOverride(height, mediaHeightOverrideType);
-  measures.screenHeight = screenHeight;
-  measures.imgSrc = imgSrc;
-  measures.boundingRect = wixImage.getBoundingClientRect();
-  measures.mediaHeightOverrideType = mediaHeightOverrideType;
-  measures.srcset = innerImage.srcset;
-}
-function patch(id, measures, domNodes, imageInfo, services, envConsts, loadImage, isResponsive, bgEffect, loadImageImmediately) {
-  var _a, _b, _c;
-  if (!Object.keys(measures).length) {
-    return;
-  }
-  const { imageData } = imageInfo;
-  const wixImageNode = domNodes[id];
-  const image2 = domNodes.image;
-  if (bgEffect) {
-    imageData.devicePixelRatio = 1;
-  }
-  const targetScale = imageInfo.targetScale || 1;
-  const allowFullGIFTransformation = (_a = services.isExperimentOpen) == null ? void 0 : _a.call(services, "specs.thunderbolt.allowFullGIFTransformation");
-  const allowWebpAvifTransforms = (_b = services.isExperimentOpen) == null ? void 0 : _b.call(services, "specs.thunderbolt.allowWebpAvifTransforms");
-  const extendedImageInfo = {
-    ...imageInfo,
-    ...!imageInfo.skipMeasure && {
-      targetWidth: (measures.width || 0) * targetScale,
-      targetHeight: (measures.height || 0) * targetScale
-    },
-    displayMode: imageData.displayMode,
-    allowFullGIFTransformation,
-    allowWebpAvifTransforms
-  };
-  const imageComputedProperties = getImageComputedProperties(extendedImageInfo, envConsts, "img");
-  const computedStyle = ((_c = imageComputedProperties == null ? void 0 : imageComputedProperties.css) == null ? void 0 : _c.img) || {};
-  const imageStyle = computeStyleOverrides(measures.mediaHeightOverrideType, computedStyle, imageData.displayMode, targetScale, isResponsive);
-  setStyle(image2, imageStyle);
-  if (measures.top || measures.left) {
-    setStyle(wixImageNode, {
-      top: `${measures.top}px`,
-      left: `${measures.left}px`
-    });
-  }
-  const src = (imageComputedProperties == null ? void 0 : imageComputedProperties.uri) || "";
-  const hasAnimation = (imageData == null ? void 0 : imageData.hasAnimation) || (imageInfo == null ? void 0 : imageInfo.hasAnimation);
-  const mediaToUri = computeSrcSets(measures, extendedImageInfo, envConsts);
-  if (loadImageImmediately) {
-    image2.dataset.ssrSrcDone = "true";
-  }
-  if (imageInfo.isLQIP && imageInfo.lqipTransition && !("transitioned" in wixImageNode.dataset)) {
-    wixImageNode.dataset.transitioned = "";
-    if (image2.complete) {
-      image2.onload = function() {
-        image2.dataset.loadDone = "";
-      };
-    } else {
-      image2.onload = function() {
-        if (image2.complete) {
-          image2.dataset.loadDone = "";
-        } else {
-          image2.onload = function() {
-            image2.dataset.loadDone = "";
-          };
-        }
-      };
-    }
-  }
-  if (loadImage) {
-    if (imageIsAnimated(imageData.uri, hasAnimation)) {
-      image2.setAttribute("fetchpriority", "low");
-      image2.setAttribute("loading", "lazy");
-      image2.setAttribute("decoding", "async");
-    } else {
-      image2.setAttribute("fetchpriority", "high");
-    }
-    image2.currentSrc !== src && image2.setAttribute("src", src);
-    const srcIsMissingFromSrcset = measures.srcset && !measures.srcset.split(", ").some((source) => source.split(" ")[0] === src);
-    if (srcIsMissingFromSrcset) {
-      image2.setAttribute("srcset", src);
-    }
-    if (domNodes.picture && extendedImageInfo.sourceSets) {
-      Array.from(domNodes.picture.querySelectorAll("source")).forEach((sourceNode) => {
-        const mediaQuery = sourceNode.media || "";
-        const uri = mediaToUri == null ? void 0 : mediaToUri[mediaQuery];
-        if (sourceNode.srcset !== uri) {
-          sourceNode.setAttribute("srcset", uri || "");
-        }
-      });
-    }
-  }
-}
-const imageLayout = {
-  measure,
-  patch
-};
-const TIMEOUT = 250;
-const imageEffectMap = {
-  parallax: "ImageParallax",
-  fixed: "ImageReveal"
-};
-function wowImageFactory(services, environmentConsts, contextWindow) {
-  return class WowImage extends contextWindow.HTMLElement {
-    constructor() {
-      super();
-      this.childListObserver = null;
-      this.timeoutId = null;
-    }
-    attributeChangedCallback(_, oldValue) {
-      if (oldValue) {
-        this.reLayout();
-      }
-    }
-    connectedCallback() {
-      if (environmentConsts.disableImagesLazyLoading) {
-        this.reLayout();
-      } else {
-        this.observeIntersect();
-      }
-    }
-    disconnectedCallback() {
-      this.unobserveResize();
-      this.unobserveIntersect();
-      this.unobserveChildren();
-    }
-    static get observedAttributes() {
-      return ["data-image-info"];
-    }
-    reLayout() {
-      const domNodes = {};
-      const measures = {};
-      const imageId = this.getAttribute("id");
-      const imageInfo = JSON.parse(this.dataset.imageInfo || "");
-      const isResponsive = this.dataset.isResponsive === "true";
-      const { bgEffectName } = this.dataset;
-      const { scrollEffect } = imageInfo.imageData;
-      const { sourceSets } = imageInfo;
-      const bgEffect = bgEffectName || scrollEffect && imageEffectMap[scrollEffect];
-      if (sourceSets && sourceSets.length) {
-        sourceSets.forEach((sourceSet) => {
-          if (sourceSet.scrollEffect) {
-            sourceSet.scrollEffect = imageEffectMap[sourceSet.scrollEffect];
-          }
-        });
-      }
-      domNodes[imageId] = this;
-      if (imageInfo.containerId) {
-        domNodes[imageInfo.containerId] = contextWindow.document.getElementById(`${imageInfo.containerId}`);
-      }
-      const containerElm = imageInfo.containerId ? domNodes[imageInfo.containerId] : void 0;
-      domNodes.image = this.querySelector("img");
-      domNodes.picture = this.querySelector("picture");
-      if (!domNodes.image) {
-        const target = this;
-        this.observeChildren(target);
-        return;
-      }
-      this.unobserveChildren();
-      this.observeChildren(this);
-      services.mutationService.measure(() => {
-        imageLayout.measure(imageId, measures, domNodes, {
-          containerElm,
-          bgEffect,
-          sourceSets
-        }, services);
-      });
-      const patchImage = (shouldLoadImage, loadImageImmediately2) => {
-        services.mutationService.mutate(() => {
-          imageLayout.patch(imageId, measures, domNodes, imageInfo, services, environmentConsts, shouldLoadImage, isResponsive, bgEffect, loadImageImmediately2);
-        });
-      };
-      const imageElement = domNodes.image;
-      const ssrSrcNeedProcessing = this.dataset.hasSsrSrc && !imageElement.dataset.ssrSrcDone;
-      const loadImageImmediately = !getImageSrc(imageElement) || ssrSrcNeedProcessing;
-      if (loadImageImmediately) {
-        patchImage(true, true);
-      } else {
-        this.debounceImageLoad(patchImage);
-      }
-    }
-    /**
-     * Debounce consecutive image loads
-     *
-     * @param {function} patchImage closure for patching the image
-     */
-    debounceImageLoad(patchImage) {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = contextWindow.setTimeout(() => {
-        patchImage(true);
-      }, TIMEOUT);
-      patchImage(false);
-    }
-    observeResize() {
-      var _a;
-      (_a = services.resizeService) == null ? void 0 : _a.observe(this);
-    }
-    unobserveResize() {
-      var _a;
-      (_a = services.resizeService) == null ? void 0 : _a.unobserve(this);
-    }
-    observeIntersect() {
-      var _a;
-      (_a = services.intersectionService) == null ? void 0 : _a.observe(this);
-    }
-    unobserveIntersect() {
-      var _a;
-      (_a = services.intersectionService) == null ? void 0 : _a.unobserve(this);
-    }
-    /**
-     * Observe DOM mutations to wait for addition of missing children
-     *
-     * @param {HTMLElement} parent
-     */
-    observeChildren(parent) {
-      if (!this.childListObserver) {
-        this.childListObserver = new contextWindow.MutationObserver(() => {
-          this.reLayout();
-        });
-      }
-      this.childListObserver.observe(parent, { childList: true });
-    }
-    /**
-     * Remove DOM MutationObserver if one was created
-     */
-    unobserveChildren() {
-      if (this.childListObserver) {
-        this.childListObserver.disconnect();
-        this.childListObserver = null;
-      }
-    }
-  };
-}
-function init(contextWindow, services) {
-  const elementName = "wow-image";
-  contextWindow = contextWindow || window;
-  if (contextWindow.customElements.get(elementName) === void 0) {
-    let resizeObserver;
-    if (contextWindow.ResizeObserver) {
-      resizeObserver = new contextWindow.ResizeObserver((entries) => entries.map((entry) => entry.target.reLayout()));
-    }
-    let intersectionObserver;
-    if (contextWindow.IntersectionObserver) {
-      intersectionObserver = new IntersectionObserver((entries) => entries.map((entry) => {
-        if (entry.isIntersecting) {
-          const wowImage = entry.target;
-          wowImage.unobserveIntersect();
-          wowImage.observeResize();
-        }
-        return entry;
-      }), {
-        /**
-         * old: 50% from 1080 (desktop) is 540px, 800 (mobile) 400px
-         * new: 150% from 1080 (desktop) is 1620, 800 (mobile) 1200
-         * chrome [loading=lazy]: 4g - 1250px, lower then 3g - 2500px
-         * @see https://web.dev/articles/browser-level-image-lazy-loading#improved-thresholds
-         */
-        rootMargin: "150% 100%"
-      });
-    }
-    return function(env) {
-      const WowImage = wowImageFactory({
-        resizeService: resizeObserver,
-        intersectionService: intersectionObserver,
-        mutationService: fastdom,
-        ...services
-      }, env, contextWindow);
-      contextWindow.customElements.define(elementName, WowImage);
-    };
-  }
-  return;
-}
-const getDevicePixelRatio = () => {
-  const isMSMobileDevice = /iemobile/i.test(navigator.userAgent);
-  if (isMSMobileDevice) {
-    return Math.round(window.screen.availWidth / (window.screen.width || window.document.documentElement.clientWidth));
-  }
-  return window.devicePixelRatio;
-};
-const getIsImagesLazyLoadingDisabled = () => {
-  try {
-    return new URL(window.location.href).searchParams.get("disableLazyLoading") === "true";
-  } catch {
-    return false;
-  }
-};
-function initCustomElement(services = {}, contextWindow = null, envConsts = {}) {
-  if (typeof window === "undefined") {
-    return;
-  }
-  const env = {
-    staticMediaUrl: STATIC_MEDIA_URL$1,
-    mediaRootUrl: MEDIA_ROOT_URL,
-    experiments: {},
-    devicePixelRatio: getDevicePixelRatio(),
-    disableImagesLazyLoading: getIsImagesLazyLoadingDisabled(),
-    ...envConsts
-  };
-  const define = init(contextWindow, services);
-  if (define) {
-    define(env);
-  }
+  init(actualWindow, services);
 }
 if (typeof window !== "undefined") {
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", () => {
-      initCustomElement$1();
       initCustomElement();
+      initCustomElement$1();
     }, {
       once: true
     });
   } else {
-    initCustomElement$1();
     initCustomElement();
+    initCustomElement$1();
   }
 }
 const Video = (props) => {
@@ -1099,10 +461,10 @@ const Video = (props) => {
     ref: wowVideoRef,
     "data-video-info": videoInfoString,
     "data-motion-part": motionPart || "",
-    class: styles$1.videoContainer
+    class: styles.videoContainer
   }, /* @__PURE__ */ React.createElement("video", {
     ref: videoRef,
-    className: styles$1.video,
+    className: styles.video,
     crossOrigin: "anonymous",
     playsInline: true,
     muted,