@comet/site-react 9.0.0-beta.3 → 9.0.0-beta.4

package/lib/blockLoader/blockLoader.js

@@ -1,59 +1 @@
-async function recursivelyLoadBlockData({
-  blockType,
-  blockData,
-  blocksMeta,
-  loaders,
-  ...dependencies
-}) {
-  function iterateField(block, passedBlockData) {
-    const blockData2 = { ...passedBlockData };
-    for (const field of block.fields) {
-      if (!blockData2[field.name]) {
-        continue;
-      } else if (field.kind == "NestedObjectList") {
-        blockData2[field.name] = blockData2[field.name].map((i) => {
-          return iterateField(field.object, i);
-        });
-      } else if (field.kind == "NestedObject") {
-        blockData2[field.name] = iterateField(field.object, blockData2[field.name]);
-      } else if (field.kind == "OneOfBlocks") {
-        const oneOfBlockType = field.blocks[blockData2.type];
-        if (!oneOfBlockType) {
-          throw new Error("invalid blockType");
-        }
-        blockData2[field.name] = iterateBlock({
-          blockType: oneOfBlockType,
-          blockData: blockData2[field.name]
-        });
-      } else if (field.kind == "Block") {
-        blockData2[field.name] = iterateBlock({
-          blockType: field.block,
-          blockData: blockData2[field.name]
-        });
-      }
-    }
-    return blockData2;
-  }
-  const loadedBlockData = [];
-  function iterateBlock({ blockType: blockType2, blockData: blockData2 }) {
-    const block = blocksMeta.find((block2) => block2.name === blockType2);
-    if (!block) {
-      throw new Error("invalid blockType");
-    }
-    const newBlockData = iterateField(block, blockData2);
-    if (loaders[blockType2]) {
-      newBlockData.loaded = loaders[blockType2]({ blockData: blockData2, ...dependencies });
-      loadedBlockData.push(newBlockData);
-    }
-    return newBlockData;
-  }
-  const ret = iterateBlock({ blockType, blockData });
-  await Promise.all(loadedBlockData.map((blockData2) => blockData2.loaded));
-  for (const blockData2 of loadedBlockData) {
-    blockData2.loaded = await blockData2.loaded;
-  }
-  return ret;
-}
-export {
-  recursivelyLoadBlockData
-};
+async function e({blockType:e,blockData:o,blocksMeta:a,loaders:n,...c}){function t(e,o){const a={...o};for(const n of e.fields)if(a[n.name])if("NestedObjectList"==n.kind)a[n.name]=a[n.name].map(e=>t(n.object,e));else if("NestedObject"==n.kind)a[n.name]=t(n.object,a[n.name]);else if("OneOfBlocks"==n.kind){const e=n.blocks[a.type];if(!e)throw new Error("invalid blockType");a[n.name]=i({blockType:e,blockData:a[n.name]})}else"Block"==n.kind&&(a[n.name]=i({blockType:n.block,blockData:a[n.name]}));return a}const l=[];function i({blockType:e,blockData:o}){const i=a.find(o=>o.name===e);if(!i)throw new Error("invalid blockType");const k=t(i,o);return n[e]&&(k.loaded=n[e]({blockData:o,...c}),l.push(k)),k}const k=i({blockType:e,blockData:o});await Promise.all(l.map(e=>e.loaded));for(const s of l)s.loaded=await s.loaded;return k}export{e as recursivelyLoadBlockData};

package/lib/blocks/DamFileDownloadLinkBlock.js

@@ -1,28 +1,2 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { cloneElement } from "react";
-import { withPreview } from "../iframebridge/withPreview.js";
-const DamFileDownloadLinkBlock = withPreview(
-  ({ data: { file, openFileType }, children, legacyBehavior, ...anchorProps }) => {
-    if (!file) {
-      if (legacyBehavior) {
-        return children;
-      }
-      return /* @__PURE__ */ jsx("span", { className: anchorProps.className, children });
-    }
-    const href = file.fileUrl;
-    const target = openFileType === "NewTab" ? "_blank" : anchorProps.target;
-    if (legacyBehavior) {
-      return cloneElement(children, {
-        ...anchorProps,
-        href,
-        target
-      });
-    }
-    return /* @__PURE__ */ jsx("a", { ...anchorProps, href, target, children });
-  },
-  { label: "DamFileDownloadLink" }
-);
-export {
-  DamFileDownloadLinkBlock
-};
+import{jsx as e}from"react/jsx-runtime";import{cloneElement as r}from"react";import{withPreview as a}from"../iframebridge/withPreview.js";const t=a(({data:{file:a,openFileType:t},children:i,legacyBehavior:l,...n})=>{if(!a)return l?i:/* @__PURE__ */e("span",{className:n.className,children:i});const o=a.fileUrl,m="NewTab"===t?"_blank":n.target;return l?r(i,{...n,href:o,target:m}):/* @__PURE__ */e("a",{...n,href:o,target:m,children:i})},{label:"DamFileDownloadLink"});export{t as DamFileDownloadLinkBlock};

package/lib/blocks/DamVideoBlock.js

@@ -1,100 +1,6 @@
 "use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useState, useCallback } from "react";
-import { withPreview } from "../iframebridge/withPreview.js";
-import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton.js";
-import styles from "./DamVideoBlock.module.scss.js";
-import { PlayPauseButton } from "./helpers/PlayPauseButton.js";
-import { useIsElementInViewport } from "./helpers/useIsElementInViewport.js";
-const DamVideoBlock = withPreview(
-  ({
-    data: { damFile, autoplay, loop, showControls, previewImage },
-    aspectRatio = "16x9",
-    previewImageSizes,
-    renderPreviewImage,
-    fill,
-    previewImageIcon,
-    playButtonAriaLabel,
-    pauseButtonAriaLabel,
-    playPauseButton: PlayPauseButtonComponent
-  }) => {
-    var _a;
-    if (damFile === void 0) {
-      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
-    }
-    const [showPreviewImage, setShowPreviewImage] = useState(true);
-    const [isPlaying, setIsPlaying] = useState(autoplay ?? false);
-    const [isHandledManually, setIsHandledManually] = useState(false);
-    const hasPreviewImage = Boolean(previewImage && previewImage.damFile);
-    const [videoElement, setVideoElement] = useState(null);
-    const videoRef = setVideoElement;
-    const handleInView = useCallback(
-      (inView) => {
-        if (!isHandledManually && videoElement) {
-          if (inView && autoplay) {
-            videoElement.play();
-            setIsPlaying(true);
-          } else {
-            videoElement.pause();
-            setIsPlaying(false);
-          }
-        }
-      },
-      [autoplay, isHandledManually, videoElement]
-    );
-    useIsElementInViewport({ current: videoElement }, handleInView);
-    const handlePlayPauseClick = () => {
-      if (isPlaying) {
-        setIsPlaying(false);
-        setIsHandledManually(true);
-        videoElement == null ? void 0 : videoElement.pause();
-      } else {
-        setIsPlaying(true);
-        videoElement == null ? void 0 : videoElement.play();
-      }
-    };
-    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
-      onPlay: () => setShowPreviewImage(false),
-      image: previewImage,
-      aspectRatio,
-      sizes: previewImageSizes,
-      fill,
-      icon: previewImageIcon,
-      playButtonAriaLabel
-    }) : /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
-      /* @__PURE__ */ jsxs(
-        "video",
-        {
-          autoPlay: autoplay || hasPreviewImage && !showPreviewImage,
-          controls: showControls,
-          loop,
-          playsInline: true,
-          muted: autoplay,
-          ref: videoRef,
-          className: clsx(styles.video, fill && styles.fill),
-          style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", " / ") } : void 0,
-          children: [
-            (_a = damFile.captions) == null ? void 0 : _a.map((caption) => {
-              return /* @__PURE__ */ jsx("track", { src: caption.fileUrl, kind: "captions", srcLang: caption.language }, caption.id);
-            }),
-            /* @__PURE__ */ jsx("source", { src: damFile.fileUrl, type: damFile.mimetype })
-          ]
-        }
-      ),
-      !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
-        PlayPauseButton,
-        {
-          isPlaying,
-          onClick: handlePlayPauseClick,
-          ariaLabelPlay: playButtonAriaLabel,
-          ariaLabelPause: pauseButtonAriaLabel
-        }
-      ))
-    ] }) });
-  },
-  { label: "Video" }
-);
-export {
-  DamVideoBlock
-};
+import{jsx as e,Fragment as a,jsxs as i}from"react/jsx-runtime";import o from"clsx";import{useState as r,useCallback as l}from"react";import{withPreview as t}from"../iframebridge/withPreview.js";import{PreviewSkeleton as s}from"../previewskeleton/PreviewSkeleton.js";import n from"./DamVideoBlock.module.scss.js";import{PlayPauseButton as p}from"./helpers/PlayPauseButton.js";import{useIsElementInViewport as m}from"./helpers/useIsElementInViewport.js";const c=t(({data:{damFile:t,autoplay:c,loop:u,showControls:d,previewImage:y},aspectRatio:f="16x9",previewImageSizes:v,renderPreviewImage:P,fill:g,previewImageIcon:w,playButtonAriaLabel:h,pauseButtonAriaLabel:I,playPauseButton:b})=>{if(void 0===t)/* @__PURE__ */
+return e(s,{type:"media",hasContent:!1,aspectRatio:f});const[k,B]=r(!0),[j,L]=r(c??!1),[x,C]=r(!1),A=Boolean(y&&y.damFile),[R,V]=r(null),z=V,F=l(e=>{!x&&R&&(e&&c?(R.play(),L(!0)):(R.pause(),L(!1)))},[c,x,R]);m({current:R},F);const N=()=>{j?(L(!1),C(!0),R?.pause()):(L(!0),R?.play())};/* @__PURE__ */
+return e(a,{children:A&&k?P({onPlay:()=>B(!1),image:y,aspectRatio:f,sizes:v,fill:g,icon:w,playButtonAriaLabel:h}):/* @__PURE__ */i("div",{className:n.root,children:[
+/* @__PURE__ */i("video",{autoPlay:c||A&&!k,controls:d,loop:u,playsInline:!0,muted:c,ref:z,className:o(n.video,g&&n.fill),style:g?void 0:{"--aspect-ratio":f.replace("x"," / ")},children:[t.captions?.map(a=>/* @__PURE__ */e("track",{src:a.fileUrl,kind:"captions",srcLang:a.language},a.id)),
+/* @__PURE__ */e("source",{src:t.fileUrl,type:t.mimetype})]}),!d&&(b?/* @__PURE__ */e(b,{isPlaying:j,onClick:N}):/* @__PURE__ */e(p,{isPlaying:j,onClick:N,ariaLabelPlay:h,ariaLabelPause:I}))]})})},{label:"Video"});export{c as DamVideoBlock};

package/lib/blocks/DamVideoBlock.module.scss.js

@@ -1,14 +1 @@
-const root = "_root_1jlho_1";
-const video = "_video_1jlho_6";
-const fill = "_fill_1jlho_12";
-const styles = {
-  root,
-  video,
-  fill
-};
-export {
-  styles as default,
-  fill,
-  root,
-  video
-};
+const o="_root_1jlho_1",_="_video_1jlho_6",l="_fill_1jlho_12",t={root:o,video:_,fill:l};export{t as default,l as fill,o as root,_ as video};

package/lib/blocks/EmailLinkBlock.js

@@ -1,21 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { cloneElement } from "react";
-const EmailLinkBlock = ({ data: { email }, children, legacyBehavior, ...anchorProps }) => {
-  if (!email) {
-    if (legacyBehavior) {
-      return children;
-    }
-    return /* @__PURE__ */ jsx("span", { className: anchorProps.className, children });
-  }
-  const href = `mailto:${email}`;
-  if (legacyBehavior) {
-    return cloneElement(children, {
-      ...anchorProps,
-      href
-    });
-  }
-  return /* @__PURE__ */ jsx("a", { ...anchorProps, href, children });
-};
-export {
-  EmailLinkBlock
-};
+import{jsx as r}from"react/jsx-runtime";import{cloneElement as e}from"react";const a=({data:{email:a},children:t,legacyBehavior:c,...i})=>{if(!a)return c?t:/* @__PURE__ */r("span",{className:i.className,children:t});const m=`mailto:${a}`;return c?e(t,{...i,href:m}):/* @__PURE__ */r("a",{...i,href:m,children:t})};export{a as EmailLinkBlock};

package/lib/blocks/ExternalLinkBlock.js

@@ -1,48 +1,2 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { cloneElement } from "react";
-import { usePreview } from "../preview/usePreview.js";
-import { sendSitePreviewIFrameMessage } from "../sitePreview/iframebridge/sendSitePreviewIFrameMessage.js";
-import { SitePreviewIFrameMessageType } from "../sitePreview/iframebridge/SitePreviewIFrameMessage.js";
-function ExternalLinkBlock({ data: { targetUrl, openInNewWindow }, children, legacyBehavior, ...anchorProps }) {
-  const preview = usePreview();
-  if (preview.previewType === "SitePreview" || preview.previewType === "BlockPreview") {
-    const onClick = (event) => {
-      event.preventDefault();
-      if (preview.previewType === "SitePreview") {
-        sendSitePreviewIFrameMessage({
-          cometType: SitePreviewIFrameMessageType.OpenLink,
-          data: { link: { openInNewWindow, targetUrl } }
-        });
-      }
-    };
-    if (legacyBehavior) {
-      return cloneElement(children, {
-        ...anchorProps,
-        href: "#",
-        onClick
-      });
-    }
-    return /* @__PURE__ */ jsx("a", { ...anchorProps, href: "#", onClick, children });
-  } else {
-    if (!targetUrl) {
-      if (legacyBehavior) {
-        return children;
-      }
-      return /* @__PURE__ */ jsx("span", { className: anchorProps.className, children });
-    }
-    const href = targetUrl;
-    const target = openInNewWindow ? "_blank" : anchorProps.target;
-    if (legacyBehavior) {
-      return cloneElement(children, {
-        ...anchorProps,
-        href,
-        target
-      });
-    }
-    return /* @__PURE__ */ jsx("a", { ...anchorProps, href, target, children });
-  }
-}
-export {
-  ExternalLinkBlock
-};
+import{jsx as e}from"react/jsx-runtime";import{cloneElement as r}from"react";import{usePreview as i}from"../preview/usePreview.js";import{sendSitePreviewIFrameMessage as t}from"../sitePreview/iframebridge/sendSitePreviewIFrameMessage.js";import{SitePreviewIFrameMessageType as a}from"../sitePreview/iframebridge/SitePreviewIFrameMessage.js";function n({data:{targetUrl:n,openInNewWindow:o},children:s,legacyBehavior:p,...m}){const c=i();if("SitePreview"===c.previewType||"BlockPreview"===c.previewType){const i=e=>{e.preventDefault(),"SitePreview"===c.previewType&&t({cometType:a.OpenLink,data:{link:{openInNewWindow:o,targetUrl:n}}})};return p?r(s,{...m,href:"#",onClick:i}):/* @__PURE__ */e("a",{...m,href:"#",onClick:i,children:s})}{if(!n)return p?s:/* @__PURE__ */e("span",{className:m.className,children:s});const i=n,t=o?"_blank":m.target;return p?r(s,{...m,href:i,target:t}):/* @__PURE__ */e("a",{...m,href:i,target:t,children:s})}}export{n as ExternalLinkBlock};

package/lib/blocks/PhoneLinkBlock.js

@@ -1,21 +1 @@
-import { jsx } from "react/jsx-runtime";
-import { cloneElement } from "react";
-const PhoneLinkBlock = ({ data: { phone }, children, legacyBehavior, ...anchorProps }) => {
-  if (!phone) {
-    if (legacyBehavior) {
-      return children;
-    }
-    return /* @__PURE__ */ jsx("span", { className: anchorProps.className, children });
-  }
-  const href = `tel:${phone}`;
-  if (legacyBehavior) {
-    return cloneElement(children, {
-      ...anchorProps,
-      href
-    });
-  }
-  return /* @__PURE__ */ jsx("a", { ...anchorProps, href, children });
-};
-export {
-  PhoneLinkBlock
-};
+import{jsx as r}from"react/jsx-runtime";import{cloneElement as e}from"react";const a=({data:{phone:a},children:t,legacyBehavior:c,...n})=>{if(!a)return c?t:/* @__PURE__ */r("span",{className:n.className,children:t});const o=`tel:${a}`;return c?e(t,{...n,href:o}):/* @__PURE__ */r("a",{...n,href:o,children:t})};export{a as PhoneLinkBlock};

package/lib/blocks/SvgImageBlock.js

@@ -1,31 +1,2 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { withPreview } from "../iframebridge/withPreview.js";
-import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton.js";
-const SvgImageBlock = withPreview(
-  ({
-    data: { damFile },
-    width = "100%",
-    height = "auto",
-    ...restProps
-  }) => {
-    if (!damFile) {
-      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, height: height === "auto" ? void 0 : height });
-    }
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: damFile.fileUrl,
-        width: width === "auto" ? void 0 : width,
-        height: height === "auto" ? void 0 : height,
-        alt: damFile.altText ?? "",
-        title: damFile.title ?? "",
-        ...restProps
-      }
-    );
-  },
-  { label: "SvgImage" }
-);
-export {
-  SvgImageBlock
-};
+import{jsx as t}from"react/jsx-runtime";import{withPreview as e}from"../iframebridge/withPreview.js";import{PreviewSkeleton as i}from"../previewskeleton/PreviewSkeleton.js";const o=e(({data:{damFile:e},width:o="100%",height:r="auto",...a})=>e?/* @__PURE__ */t("img",{src:e.fileUrl,width:"auto"===o?void 0:o,height:"auto"===r?void 0:r,alt:e.altText??"",title:e.title??"",...a}):/* @__PURE__ */t(i,{type:"media",hasContent:!1,height:"auto"===r?void 0:r}),{label:"SvgImage"});export{o as SvgImageBlock};

package/lib/blocks/VimeoVideoBlock.js

@@ -1,130 +1,5 @@
 "use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useState, useRef, useCallback } from "react";
-import { withPreview } from "../iframebridge/withPreview.js";
-import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton.js";
-import { PlayPauseButton } from "./helpers/PlayPauseButton.js";
-import { useIsElementInViewport } from "./helpers/useIsElementInViewport.js";
-import styles from "./VimeoVideoBlock.module.scss.js";
-function parseVimeoIdentifier(vimeoIdentifier) {
-  const urlRegEx = /^(https?:\/\/)?((www\.|player\.)?vimeo\.com\/?(showcase\/)*([0-9a-z]*\/)*([0-9]{6,11})[?]?.*)$/;
-  const idRegEx = /^([0-9]{6,11})$/;
-  const urlRegExMatch = vimeoIdentifier.match(urlRegEx);
-  const idRegExMatch = vimeoIdentifier.match(idRegEx);
-  if (!urlRegExMatch && !idRegExMatch) {
-    return void 0;
-  }
-  if (urlRegExMatch) {
-    return urlRegExMatch[6];
-  } else if (idRegExMatch) {
-    return idRegExMatch[1];
-  }
-}
-const VimeoVideoBlock = withPreview(
-  ({
-    data: { vimeoIdentifier, autoplay, loop, showControls, previewImage },
-    aspectRatio = "16x9",
-    previewImageSizes,
-    renderPreviewImage,
-    fill,
-    previewImageIcon,
-    playButtonAriaLabel,
-    pauseButtonAriaLabel,
-    playPauseButton: PlayPauseButtonComponent
-  }) => {
-    const [showPreviewImage, setShowPreviewImage] = useState(true);
-    const hasPreviewImage = !!(previewImage && previewImage.damFile);
-    const inViewRef = useRef(null);
-    const [iframeElement, setIframeElement] = useState(null);
-    const iframeRef = setIframeElement;
-    const [isPlaying, setIsPlaying] = useState(autoplay ?? false);
-    const [isHandledManually, setIsHandledManually] = useState(false);
-    const pauseVimeoVideo = useCallback(() => {
-      var _a;
-      (_a = iframeElement == null ? void 0 : iframeElement.contentWindow) == null ? void 0 : _a.postMessage(JSON.stringify({ method: "pause" }), "https://player.vimeo.com");
-    }, [iframeElement]);
-    const playVimeoVideo = useCallback(() => {
-      var _a;
-      (_a = iframeElement == null ? void 0 : iframeElement.contentWindow) == null ? void 0 : _a.postMessage(JSON.stringify({ method: "play" }), "https://player.vimeo.com");
-    }, [iframeElement]);
-    const handleInView = useCallback(
-      (isVisible) => {
-        if (!isHandledManually) {
-          if (isVisible && autoplay) {
-            playVimeoVideo();
-            setIsPlaying(true);
-          } else {
-            pauseVimeoVideo();
-            setIsPlaying(false);
-          }
-        }
-      },
-      [autoplay, isHandledManually, playVimeoVideo, pauseVimeoVideo]
-    );
-    useIsElementInViewport(inViewRef, handleInView);
-    if (!vimeoIdentifier) {
-      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
-    }
-    const identifier = parseVimeoIdentifier(vimeoIdentifier);
-    const searchParams = new URLSearchParams();
-    if (hasPreviewImage && !showPreviewImage) {
-      searchParams.append("autoplay", "1");
-    }
-    if (autoplay) {
-      searchParams.append("muted", "1");
-    }
-    if (loop !== void 0) {
-      searchParams.append("loop", Number(loop).toString());
-    }
-    if (showControls !== void 0) {
-      searchParams.append("controls", Number(showControls).toString());
-    }
-    searchParams.append("dnt", "1");
-    const vimeoBaseUrl = "https://player.vimeo.com/video/";
-    const vimeoUrl = new URL(`${vimeoBaseUrl}${identifier ?? ""}`);
-    vimeoUrl.search = searchParams.toString();
-    const handlePlayPauseClick = () => {
-      if (isPlaying) {
-        setIsPlaying(false);
-        setIsHandledManually(true);
-        pauseVimeoVideo();
-      } else {
-        setIsPlaying(true);
-        playVimeoVideo();
-      }
-    };
-    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
-      onPlay: () => setShowPreviewImage(false),
-      image: previewImage,
-      aspectRatio,
-      sizes: previewImageSizes,
-      fill,
-      icon: previewImageIcon,
-      playButtonAriaLabel
-    }) : /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: inViewRef,
-        className: clsx(styles.videoContainer, fill && styles.fill),
-        style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", "/") } : void 0,
-        children: [
-          /* @__PURE__ */ jsx("iframe", { ref: iframeRef, className: styles.vimeoContainer, src: vimeoUrl.toString(), allow: "autoplay", allowFullScreen: true }),
-          !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
-            PlayPauseButton,
-            {
-              isPlaying,
-              onClick: handlePlayPauseClick,
-              ariaLabelPlay: playButtonAriaLabel,
-              ariaLabelPause: pauseButtonAriaLabel
-            }
-          ))
-        ]
-      }
-    ) });
-  },
-  { label: "Video" }
-);
-export {
-  VimeoVideoBlock
-};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import a from"clsx";import{useState as i,useRef as r,useCallback as n}from"react";import{withPreview as s}from"../iframebridge/withPreview.js";import{PreviewSkeleton as l}from"../previewskeleton/PreviewSkeleton.js";import{PlayPauseButton as p}from"./helpers/PlayPauseButton.js";import{useIsElementInViewport as m}from"./helpers/useIsElementInViewport.js";import c from"./VimeoVideoBlock.module.scss.js";const d=s(({data:{vimeoIdentifier:s,autoplay:d,loop:u,showControls:f,previewImage:v},aspectRatio:w="16x9",previewImageSizes:y,renderPreviewImage:h,fill:g,previewImageIcon:P,playButtonAriaLabel:S,pauseButtonAriaLabel:b,playPauseButton:I})=>{const[L,j]=i(!0),B=!(!v||!v.damFile),C=r(null),[N,k]=i(null),x=k,[R,V]=i(d??!1),[z,A]=i(!1),$=n(()=>{N?.contentWindow?.postMessage(JSON.stringify({method:"pause"}),"https://player.vimeo.com")},[N]),F=n(()=>{N?.contentWindow?.postMessage(JSON.stringify({method:"play"}),"https://player.vimeo.com")},[N]),J=n(e=>{z||(e&&d?(F(),V(!0)):($(),V(!1)))},[d,z,F,$]);if(m(C,J),!s)/* @__PURE__ */
+return e(l,{type:"media",hasContent:!1,aspectRatio:w});const M=function(e){const o=e.match(/^(https?:\/\/)?((www\.|player\.)?vimeo\.com\/?(showcase\/)*([0-9a-z]*\/)*([0-9]{6,11})[?]?.*)$/),t=e.match(/^([0-9]{6,11})$/);if(o||t)return o?o[6]:t?t[1]:void 0}(s),O=new URLSearchParams;B&&!L&&O.append("autoplay","1"),d&&O.append("muted","1"),void 0!==u&&O.append("loop",Number(u).toString()),void 0!==f&&O.append("controls",Number(f).toString()),O.append("dnt","1");const U=new URL(`https://player.vimeo.com/video/${M??""}`);U.search=O.toString();const W=()=>{R?(V(!1),A(!0),$()):(V(!0),F())};/* @__PURE__ */
+return e(o,{children:B&&L?h({onPlay:()=>j(!1),image:v,aspectRatio:w,sizes:y,fill:g,icon:P,playButtonAriaLabel:S}):/* @__PURE__ */t("div",{ref:C,className:a(c.videoContainer,g&&c.fill),style:g?void 0:{"--aspect-ratio":w.replace("x","/")},children:[
+/* @__PURE__ */e("iframe",{ref:x,className:c.vimeoContainer,src:U.toString(),allow:"autoplay",allowFullScreen:!0}),!f&&(I?/* @__PURE__ */e(I,{isPlaying:R,onClick:W}):/* @__PURE__ */e(p,{isPlaying:R,onClick:W,ariaLabelPlay:S,ariaLabelPause:b}))]})})},{label:"Video"});export{d as VimeoVideoBlock};

package/lib/blocks/VimeoVideoBlock.module.scss.js

@@ -1,14 +1 @@
-const videoContainer = "_videoContainer_1flq1_1";
-const fill = "_fill_1flq1_7";
-const vimeoContainer = "_vimeoContainer_1flq1_12";
-const styles = {
-  videoContainer,
-  fill,
-  vimeoContainer
-};
-export {
-  styles as default,
-  fill,
-  videoContainer,
-  vimeoContainer
-};
+const e="_videoContainer_1flq1_1",i="_fill_1flq1_7",o="_vimeoContainer_1flq1_12",n={videoContainer:e,fill:i,vimeoContainer:o};export{n as default,i as fill,e as videoContainer,o as vimeoContainer};

package/lib/blocks/YouTubeVideoBlock.js

@@ -1,137 +1,5 @@
 "use client";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useState, useRef, useCallback } from "react";
-import { withPreview } from "../iframebridge/withPreview.js";
-import { PreviewSkeleton } from "../previewskeleton/PreviewSkeleton.js";
-import { PlayPauseButton } from "./helpers/PlayPauseButton.js";
-import { useIsElementInViewport } from "./helpers/useIsElementInViewport.js";
-import styles from "./YouTubeVideoBlock.module.scss.js";
-const EXPECTED_YT_ID_LENGTH = 11;
-const parseYoutubeIdentifier = (value) => {
-  const regExp = /(https?:\/\/)?(((m|www)\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)([_0-9a-zA-Z-]+)/;
-  const match = value.match(regExp);
-  const youtubeId = value.length === EXPECTED_YT_ID_LENGTH ? value : match && match[8].length === EXPECTED_YT_ID_LENGTH ? match[8] : null;
-  return youtubeId ?? void 0;
-};
-const YouTubeVideoBlock = withPreview(
-  ({
-    data: { youtubeIdentifier, autoplay, loop, showControls, previewImage },
-    aspectRatio = "16x9",
-    previewImageSizes,
-    renderPreviewImage,
-    fill,
-    previewImageIcon,
-    playButtonAriaLabel,
-    pauseButtonAriaLabel,
-    playPauseButton: PlayPauseButtonComponent
-  }) => {
-    const [showPreviewImage, setShowPreviewImage] = useState(true);
-    const [isPlaying, setIsPlaying] = useState(autoplay ?? false);
-    const [isHandledManually, setIsHandledManually] = useState(false);
-    const hasPreviewImage = !!(previewImage && previewImage.damFile);
-    const [iframeElement, setIframeElement] = useState(null);
-    const iframeRef = setIframeElement;
-    const inViewRef = useRef(null);
-    const pauseYouTubeVideo = useCallback(() => {
-      var _a;
-      (_a = iframeElement == null ? void 0 : iframeElement.contentWindow) == null ? void 0 : _a.postMessage(`{"event":"command","func":"pauseVideo","args":""}`, "https://www.youtube-nocookie.com");
-    }, [iframeElement]);
-    const playYouTubeVideo = useCallback(() => {
-      var _a;
-      (_a = iframeElement == null ? void 0 : iframeElement.contentWindow) == null ? void 0 : _a.postMessage(`{"event":"command","func":"playVideo","args":""}`, "https://www.youtube-nocookie.com");
-    }, [iframeElement]);
-    const handleInView = useCallback(
-      (inView) => {
-        if (!isHandledManually) {
-          if (inView && autoplay) {
-            playYouTubeVideo();
-            setIsPlaying(true);
-          } else {
-            pauseYouTubeVideo();
-            setIsPlaying(false);
-          }
-        }
-      },
-      [autoplay, isHandledManually, playYouTubeVideo, pauseYouTubeVideo]
-    );
-    useIsElementInViewport(inViewRef, handleInView);
-    if (!youtubeIdentifier) {
-      return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
-    }
-    const identifier = parseYoutubeIdentifier(youtubeIdentifier);
-    const searchParams = new URLSearchParams();
-    searchParams.append("modestbranding", "1");
-    searchParams.append("rel", "0");
-    searchParams.append("enablejsapi", "1");
-    if (hasPreviewImage && !showPreviewImage) {
-      searchParams.append("autoplay", "1");
-    }
-    if (autoplay) {
-      searchParams.append("mute", "1");
-    }
-    if (showControls !== void 0) {
-      searchParams.append("controls", Number(showControls).toString());
-    }
-    if (loop !== void 0) {
-      searchParams.append("loop", Number(loop).toString());
-    }
-    if (loop && identifier) {
-      searchParams.append("playlist", identifier);
-    }
-    const youtubeBaseUrl = "https://www.youtube-nocookie.com/embed/";
-    const youtubeUrl = new URL(`${youtubeBaseUrl}${identifier ?? ""}`);
-    youtubeUrl.search = searchParams.toString();
-    const handlePlayPauseClick = () => {
-      if (isPlaying) {
-        setIsPlaying(false);
-        setIsHandledManually(true);
-        pauseYouTubeVideo();
-      } else {
-        setIsPlaying(true);
-        playYouTubeVideo();
-      }
-    };
-    return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
-      onPlay: () => setShowPreviewImage(false),
-      image: previewImage,
-      aspectRatio,
-      sizes: previewImageSizes,
-      fill,
-      icon: previewImageIcon,
-      playButtonAriaLabel
-    }) : /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: inViewRef,
-        className: clsx(styles.videoContainer, fill && styles.fill),
-        style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", "/") } : void 0,
-        children: [
-          !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
-            PlayPauseButton,
-            {
-              isPlaying,
-              onClick: handlePlayPauseClick,
-              ariaLabelPlay: playButtonAriaLabel,
-              ariaLabelPause: pauseButtonAriaLabel
-            }
-          )),
-          /* @__PURE__ */ jsx(
-            "iframe",
-            {
-              ref: iframeRef,
-              className: styles.youtubeContainer,
-              allow: "autoplay",
-              referrerPolicy: "strict-origin-when-cross-origin",
-              src: youtubeUrl.toString()
-            }
-          )
-        ]
-      }
-    ) });
-  },
-  { label: "Video" }
-);
-export {
-  YouTubeVideoBlock
-};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import a from"clsx";import{useState as i,useRef as r,useCallback as n}from"react";import{withPreview as s}from"../iframebridge/withPreview.js";import{PreviewSkeleton as l}from"../previewskeleton/PreviewSkeleton.js";import{PlayPauseButton as p}from"./helpers/PlayPauseButton.js";import{useIsElementInViewport as m}from"./helpers/useIsElementInViewport.js";import u from"./YouTubeVideoBlock.module.scss.js";const c=s(({data:{youtubeIdentifier:s,autoplay:c,loop:d,showControls:w,previewImage:y},aspectRatio:g="16x9",previewImageSizes:b,renderPreviewImage:f,fill:v,previewImageIcon:h,playButtonAriaLabel:P,pauseButtonAriaLabel:k,playPauseButton:I})=>{const[j,L]=i(!0),[S,B]=i(c??!1),[C,x]=i(!1),R=!(!y||!y.damFile),[V,A]=i(null),N=A,z=r(null),M=n(()=>{V?.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}',"https://www.youtube-nocookie.com")},[V]),U=n(()=>{V?.contentWindow?.postMessage('{"event":"command","func":"playVideo","args":""}',"https://www.youtube-nocookie.com")},[V]),W=n(e=>{C||(e&&c?(U(),B(!0)):(M(),B(!1)))},[c,C,U,M]);if(m(z,W),!s)/* @__PURE__ */
+return e(l,{type:"media",hasContent:!1,aspectRatio:g});const E=(e=>{const o=e.match(/(https?:\/\/)?(((m|www)\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)([_0-9a-zA-Z-]+)/);return(11===e.length?e:o&&11===o[8].length?o[8]:null)??void 0})(s),F=new URLSearchParams;F.append("modestbranding","1"),F.append("rel","0"),F.append("enablejsapi","1"),R&&!j&&F.append("autoplay","1"),c&&F.append("mute","1"),void 0!==w&&F.append("controls",Number(w).toString()),void 0!==d&&F.append("loop",Number(d).toString()),d&&E&&F.append("playlist",E);const T=new URL(`https://www.youtube-nocookie.com/embed/${E??""}`);T.search=F.toString();const Y=()=>{S?(B(!1),x(!0),M()):(B(!0),U())};/* @__PURE__ */
+return e(o,{children:R&&j?f({onPlay:()=>L(!1),image:y,aspectRatio:g,sizes:b,fill:v,icon:h,playButtonAriaLabel:P}):/* @__PURE__ */t("div",{ref:z,className:a(u.videoContainer,v&&u.fill),style:v?void 0:{"--aspect-ratio":g.replace("x","/")},children:[!w&&(I?/* @__PURE__ */e(I,{isPlaying:S,onClick:Y}):/* @__PURE__ */e(p,{isPlaying:S,onClick:Y,ariaLabelPlay:P,ariaLabelPause:k})),
+/* @__PURE__ */e("iframe",{ref:N,className:u.youtubeContainer,allow:"autoplay",referrerPolicy:"strict-origin-when-cross-origin",src:T.toString()})]})})},{label:"Video"});export{c as YouTubeVideoBlock};