@wix/editor-react-components 1.2496.0 → 1.2498.0

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { f as fastdom, i as initCustomElement$1 } from "./customElementInit.js";
-import { I as Image } from "./Image.js";
+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";
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -10,9 +10,9 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
-const videoContainer = "video-container__qOTQi";
+const videoContainer = "videoContainer__Eyxxe";
 const video = "video__YuKrH";
-const styles = {
+const styles$1 = {
   videoContainer,
   video
 };
@@ -346,7 +346,7 @@ function wowVideoFactory(services, contextWindow) {
     }
   };
 }
-function init(contextWindow, services) {
+function init$1(contextWindow, services) {
   contextWindow = contextWindow || window;
   const elementName = "wow-video";
   if (contextWindow.customElements.get(elementName) === void 0) {
@@ -372,7 +372,7 @@ function init(contextWindow, services) {
   }
   return;
 }
-function initCustomElement(contextWindow, services) {
+function initCustomElement$1(contextWindow, services) {
   if (contextWindow === void 0) {
     contextWindow = null;
   }
@@ -380,19 +380,657 @@ function initCustomElement(contextWindow, services) {
     services = {};
   }
   const actualWindow = contextWindow || window;
-  init(actualWindow, services);
+  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);
+  }
 }
 if (typeof window !== "undefined") {
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", () => {
-      initCustomElement();
       initCustomElement$1();
+      initCustomElement();
     }, {
       once: true
     });
   } else {
-    initCustomElement();
     initCustomElement$1();
+    initCustomElement();
   }
 }
 const Video = (props) => {
@@ -411,6 +1049,7 @@ const Video = (props) => {
       x: 50,
       y: 50
     },
+    posterFittingType = "fill",
     onError
   } = props;
   const wowVideoRef = React.useRef(null);
@@ -429,7 +1068,7 @@ const Video = (props) => {
   const VideoPosterImage = videoMedia.poster && /* @__PURE__ */ React.createElement(Image, _extends({}, videoMedia.poster, {
     focalPoint,
     id: `videoPoster_${id}`,
-    displayMode: "fill",
+    displayMode: posterFittingType,
     alt: videoMedia.name || videoMedia.poster.alt || "",
     quality: videoMedia.poster.quality ? {
       quality: videoMedia.poster.quality
@@ -460,10 +1099,10 @@ const Video = (props) => {
     ref: wowVideoRef,
     "data-video-info": videoInfoString,
     "data-motion-part": motionPart || "",
-    class: styles.videoContainer
+    class: styles$1.videoContainer
   }, /* @__PURE__ */ React.createElement("video", {
     ref: videoRef,
-    className: styles.video,
+    className: styles$1.video,
     crossOrigin: "anonymous",
     playsInline: true,
     muted,