@comet/site-react 8.8.0-canary-20251127134721 → 8.8.0-canary-20251127144258

package/lib/blocks/DamVideoBlock.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
+import { ComponentType, ReactElement, ReactNode } from 'react';
 import { DamVideoBlockData } from '../blocks.generated';
+import { PlayPauseButtonProps } from './helpers/PlayPauseButton';
 import { VideoPreviewImageProps } from './helpers/VideoPreviewImage';
 import { PropsWithData } from './PropsWithData';
 interface DamVideoBlockProps extends PropsWithData<DamVideoBlockData> {
@@ -9,6 +10,8 @@ interface DamVideoBlockProps extends PropsWithData<DamVideoBlockData> {
     fill?: boolean;
     previewImageIcon?: ReactNode;
     playButtonAriaLabel?: string;
+    pauseButtonAriaLabel?: string;
+    playPauseButton?: ComponentType<PlayPauseButtonProps>;
 }
 export declare const DamVideoBlock: ({ ...componentProps }: import('../iframebridge/withPreview').WithPreviewProps & DamVideoBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/blocks/DamVideoBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DamVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/DamVideoBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK7D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,kBAAmB,SAAQ,aAAa,CAAC,iBAAiB,CAAC;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,iJA8DzB,CAAC"}
+{"version":3,"file":"DamVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/DamVideoBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAyB,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,kBAAmB,SAAQ,aAAa,CAAC,iBAAiB,CAAC;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,aAAa,iJA+FzB,CAAC"}

package/lib/blocks/DamVideoBlock.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useState, useRef } from "react";
+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(
   ({
@@ -14,24 +15,42 @@ const DamVideoBlock = withPreview(
     renderPreviewImage,
     fill,
     previewImageIcon,
-    playButtonAriaLabel
+    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 [isHandledManually, setIsHandledManually] = useState(!autoplay);
     const hasPreviewImage = Boolean(previewImage && previewImage.damFile);
-    const videoRef = useRef(null);
-    useIsElementInViewport(videoRef, (inView) => {
-      if (autoplay && videoRef.current) {
-        if (inView) {
-          videoRef.current.play();
+    const [videoElement, setVideoElement] = useState(null);
+    const videoRef = setVideoElement;
+    const handleInView = useCallback(
+      (inView) => {
+        if (autoplay && videoElement && !isHandledManually) {
+          if (inView) {
+            videoElement.play();
+          } else {
+            videoElement.pause();
+          }
+        }
+      },
+      [autoplay, isHandledManually, videoElement]
+    );
+    useIsElementInViewport({ current: videoElement }, handleInView);
+    const handlePlayPauseClick = () => {
+      setIsHandledManually(!isHandledManually);
+      if (videoElement) {
+        if (videoElement.paused) {
+          videoElement.play();
         } else {
-          videoRef.current.pause();
+          videoElement.pause();
         }
       }
-    });
+    };
     return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
       onPlay: () => setShowPreviewImage(false),
       image: previewImage,
@@ -40,25 +59,36 @@ const DamVideoBlock = withPreview(
       fill,
       icon: previewImageIcon,
       playButtonAriaLabel
-    }) : /* @__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 })
-        ]
-      }
-    ) });
+    }) : /* @__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: isHandledManually, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
+        PlayPauseButton,
+        {
+          isPlaying: isHandledManually,
+          onClick: handlePlayPauseClick,
+          ariaLabelPlay: playButtonAriaLabel,
+          ariaLabelPause: pauseButtonAriaLabel
+        }
+      ))
+    ] }) });
   },
   { label: "Video" }
 );

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

@@ -1,11 +1,14 @@
-const video = "_video_17b8y_1";
-const fill = "_fill_17b8y_7";
+const root = "_root_8r6od_1";
+const video = "_video_8r6od_5";
+const fill = "_fill_8r6od_11";
 const styles = {
+  root,
   video,
   fill
 };
 export {
   styles as default,
   fill,
+  root,
   video
 };

package/lib/blocks/VimeoVideoBlock.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
+import { ComponentType, ReactElement, ReactNode } from 'react';
 import { VimeoVideoBlockData } from '../blocks.generated';
+import { PlayPauseButtonProps } from './helpers/PlayPauseButton';
 import { VideoPreviewImageProps } from './helpers/VideoPreviewImage';
 import { PropsWithData } from './PropsWithData';
 interface VimeoVideoBlockProps extends PropsWithData<VimeoVideoBlockData> {
@@ -9,6 +10,8 @@ interface VimeoVideoBlockProps extends PropsWithData<VimeoVideoBlockData> {
     fill?: boolean;
     previewImageIcon?: ReactNode;
     playButtonAriaLabel?: string;
+    pauseButtonAriaLabel?: string;
+    playPauseButton?: ComponentType<PlayPauseButtonProps>;
 }
 export declare const VimeoVideoBlock: ({ ...componentProps }: import('../iframebridge/withPreview').WithPreviewProps & VimeoVideoBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/blocks/VimeoVideoBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VimeoVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/VimeoVideoBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAI/D,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAmBrD,UAAU,oBAAqB,SAAQ,aAAa,CAAC,mBAAmB,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,eAAe,mJAqE3B,CAAC"}
+{"version":3,"file":"VimeoVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/VimeoVideoBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAiC,MAAM,OAAO,CAAC;AAE7G,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAG/D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAmBrD,UAAU,oBAAqB,SAAQ,aAAa,CAAC,mBAAmB,CAAC;IACrE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,eAAe,mJAgH3B,CAAC"}

package/lib/blocks/VimeoVideoBlock.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useState, useRef } from "react";
+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) {
@@ -26,20 +27,37 @@ const VimeoVideoBlock = withPreview(
     renderPreviewImage,
     fill,
     previewImageIcon,
-    playButtonAriaLabel
+    playButtonAriaLabel,
+    pauseButtonAriaLabel,
+    playPauseButton: PlayPauseButtonComponent
   }) => {
     const [showPreviewImage, setShowPreviewImage] = useState(true);
     const hasPreviewImage = !!(previewImage && previewImage.damFile);
     const inViewRef = useRef(null);
-    const iframeRef = useRef(null);
-    const handleVisibilityChange = (isVisible) => {
-      var _a, _b;
-      (_b = (_a = iframeRef.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage(
-        JSON.stringify({ method: isVisible && autoplay ? "play" : "pause" }),
-        "https://player.vimeo.com"
-      );
-    };
-    useIsElementInViewport(inViewRef, handleVisibilityChange);
+    const [iframeElement, setIframeElement] = useState(null);
+    const iframeRef = setIframeElement;
+    const [isHandledManually, setIsHandledManually] = useState(!autoplay);
+    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();
+          } else {
+            pauseVimeoVideo();
+          }
+        }
+      },
+      [autoplay, isHandledManually, playVimeoVideo, pauseVimeoVideo]
+    );
+    useIsElementInViewport(inViewRef, handleInView);
     if (!vimeoIdentifier) {
       return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
     }
@@ -53,6 +71,19 @@ const VimeoVideoBlock = withPreview(
     const vimeoBaseUrl = "https://player.vimeo.com/video/";
     const vimeoUrl = new URL(`${vimeoBaseUrl}${identifier ?? ""}`);
     vimeoUrl.search = searchParams.toString();
+    const handlePlayPauseClick = () => {
+      setIsHandledManually((prev) => {
+        const next = !prev;
+        if (iframeElement) {
+          if (next) {
+            playVimeoVideo();
+          } else {
+            pauseVimeoVideo();
+          }
+        }
+        return next;
+      });
+    };
     return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
       onPlay: () => setShowPreviewImage(false),
       image: previewImage,
@@ -61,13 +92,24 @@ const VimeoVideoBlock = withPreview(
       fill,
       icon: previewImageIcon,
       playButtonAriaLabel
-    }) : /* @__PURE__ */ jsx(
+    }) : /* @__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 })
+        children: [
+          /* @__PURE__ */ jsx("iframe", { ref: iframeRef, className: styles.vimeoContainer, src: vimeoUrl.toString(), allow: "autoplay", allowFullScreen: true }),
+          !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying: isHandledManually, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
+            PlayPauseButton,
+            {
+              isPlaying: isHandledManually,
+              onClick: handlePlayPauseClick,
+              ariaLabelPlay: playButtonAriaLabel,
+              ariaLabelPause: pauseButtonAriaLabel
+            }
+          ))
+        ]
       }
     ) });
   },

package/lib/blocks/YouTubeVideoBlock.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
+import { ComponentType, ReactElement, ReactNode } from 'react';
 import { YouTubeVideoBlockData } from '../blocks.generated';
+import { PlayPauseButtonProps } from './helpers/PlayPauseButton';
 import { VideoPreviewImageProps } from './helpers/VideoPreviewImage';
 import { PropsWithData } from './PropsWithData';
 interface YouTubeVideoBlockProps extends PropsWithData<YouTubeVideoBlockData> {
@@ -9,6 +10,8 @@ interface YouTubeVideoBlockProps extends PropsWithData<YouTubeVideoBlockData> {
     fill?: boolean;
     previewImageIcon?: ReactNode;
     playButtonAriaLabel?: string;
+    pauseButtonAriaLabel?: string;
+    playPauseButton?: ComponentType<PlayPauseButtonProps>;
 }
 export declare const YouTubeVideoBlock: ({ ...componentProps }: import('../iframebridge/withPreview').WithPreviewProps & YouTubeVideoBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/blocks/YouTubeVideoBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YouTubeVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/YouTubeVideoBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjE,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAcrD,UAAU,sBAAuB,SAAQ,aAAa,CAAC,qBAAqB,CAAC;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,iBAAiB,qJAwF7B,CAAC"}
+{"version":3,"file":"YouTubeVideoBlock.d.ts","sourceRoot":"","sources":["../../src/blocks/YouTubeVideoBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAiC,MAAM,OAAO,CAAC;AAE7G,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEvF,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAerD,UAAU,sBAAuB,SAAQ,aAAa,CAAC,qBAAqB,CAAC;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;CACzD;AAED,eAAO,MAAM,iBAAiB,qJAuH7B,CAAC"}

package/lib/blocks/YouTubeVideoBlock.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useState, useRef } from "react";
+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;
@@ -21,29 +22,38 @@ const YouTubeVideoBlock = withPreview(
     renderPreviewImage,
     fill,
     previewImageIcon,
-    playButtonAriaLabel
+    playButtonAriaLabel,
+    pauseButtonAriaLabel,
+    playPauseButton: PlayPauseButtonComponent
   }) => {
     const [showPreviewImage, setShowPreviewImage] = useState(true);
+    const [isHandledManually, setIsHandledManually] = useState(autoplay ?? false);
     const hasPreviewImage = !!(previewImage && previewImage.damFile);
-    const iframeRef = useRef(null);
+    const [iframeElement, setIframeElement] = useState(null);
+    const iframeRef = setIframeElement;
     const inViewRef = useRef(null);
-    const pauseYouTubeVideo = () => {
-      var _a, _b;
-      (_b = (_a = iframeRef.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage(`{"event":"command","func":"pauseVideo","args":""}`, "https://www.youtube-nocookie.com");
-    };
-    const playYouTubeVideo = () => {
-      var _a, _b;
-      (_b = (_a = iframeRef.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage(`{"event":"command","func":"playVideo","args":""}`, "https://www.youtube-nocookie.com");
-    };
-    useIsElementInViewport(inViewRef, (inView) => {
-      if (autoplay) {
-        if (inView) {
-          playYouTubeVideo();
-        } else {
-          pauseYouTubeVideo();
+    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 (autoplay) {
+          if (inView && isHandledManually) {
+            playYouTubeVideo();
+            setIsHandledManually(true);
+          } else {
+            pauseYouTubeVideo();
+          }
         }
-      }
-    });
+      },
+      [autoplay, isHandledManually, playYouTubeVideo, pauseYouTubeVideo]
+    );
+    useIsElementInViewport(inViewRef, handleInView);
     if (!youtubeIdentifier) {
       return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
     }
@@ -52,7 +62,7 @@ const YouTubeVideoBlock = withPreview(
     searchParams.append("modestbranding", "1");
     searchParams.append("rel", "0");
     searchParams.append("enablejsapi", "1");
-    if (hasPreviewImage && !showPreviewImage) searchParams.append("autoplay", "1");
+    if (hasPreviewImage && !showPreviewImage || !hasPreviewImage) 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());
@@ -60,6 +70,15 @@ const YouTubeVideoBlock = withPreview(
     const youtubeBaseUrl = "https://www.youtube-nocookie.com/embed/";
     const youtubeUrl = new URL(`${youtubeBaseUrl}${identifier ?? ""}`);
     youtubeUrl.search = searchParams.toString();
+    const handlePlayPauseClick = () => {
+      if (isHandledManually) {
+        pauseYouTubeVideo();
+        setIsHandledManually(false);
+      } else {
+        playYouTubeVideo();
+        setIsHandledManually(true);
+      }
+    };
     return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
       onPlay: () => setShowPreviewImage(false),
       image: previewImage,
@@ -68,22 +87,33 @@ const YouTubeVideoBlock = withPreview(
       fill,
       icon: previewImageIcon,
       playButtonAriaLabel
-    }) : /* @__PURE__ */ jsx(
+    }) : /* @__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.youtubeContainer,
-            allow: "autoplay",
-            referrerPolicy: "strict-origin-when-cross-origin",
-            src: youtubeUrl.toString()
-          }
-        )
+        children: [
+          !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying: !isHandledManually, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
+            PlayPauseButton,
+            {
+              isPlaying: !isHandledManually,
+              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()
+            }
+          )
+        ]
       }
     ) });
   },

package/lib/blocks/helpers/PlayPauseButton.d.ts

@@ -0,0 +1,8 @@
+export interface PlayPauseButtonProps {
+    isPlaying: boolean;
+    onClick: () => void;
+    ariaLabelPlay?: string;
+    ariaLabelPause?: string;
+}
+export declare const PlayPauseButton: ({ isPlaying, onClick, ariaLabelPlay, ariaLabelPause }: PlayPauseButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PlayPauseButton.d.ts.map

package/lib/blocks/helpers/PlayPauseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayPauseButton.d.ts","sourceRoot":"","sources":["../../../src/blocks/helpers/PlayPauseButton.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,oBAAoB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,GAAI,uDAAuD,oBAAoB,4CAM1G,CAAC"}

package/lib/blocks/helpers/PlayPauseButton.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./PlayPauseButton.module.scss.js";
+const PlayPauseButton = ({ isPlaying, onClick, ariaLabelPlay, ariaLabelPause }) => {
+  return /* @__PURE__ */ jsx("button", { className: clsx(styles.button), onClick, "aria-label": isPlaying ? ariaLabelPause ?? "Pause" : ariaLabelPlay ?? "Play", children: /* @__PURE__ */ jsx("div", { className: clsx(styles.animatedPlayPause, !isPlaying && styles.animatedPlayPausePaused) }) });
+};
+export {
+  PlayPauseButton
+};

package/lib/blocks/helpers/PlayPauseButton.module.scss.js

@@ -0,0 +1,14 @@
+const button = "_button_4r8gs_1";
+const animatedPlayPause = "_animatedPlayPause_4r8gs_23";
+const animatedPlayPausePaused = "_animatedPlayPausePaused_4r8gs_32";
+const styles = {
+  button,
+  animatedPlayPause,
+  animatedPlayPausePaused
+};
+export {
+  animatedPlayPause,
+  animatedPlayPausePaused,
+  button,
+  styles as default
+};

package/lib/index.d.ts

@@ -8,6 +8,7 @@ export { ListBlock } from './blocks/factories/ListBlock';
 export { OneOfBlock } from './blocks/factories/OneOfBlock';
 export { OptionalBlock } from './blocks/factories/OptionalBlock';
 export type { SupportedBlocks } from './blocks/factories/types';
+export { type PlayPauseButtonProps } from './blocks/helpers/PlayPauseButton';
 export { hasRichTextBlockContent } from './blocks/helpers/RichTextBlockHelper';
 export { useIsElementInViewport } from './blocks/helpers/useIsElementInViewport';
 export type { VideoPreviewImageProps } from './blocks/helpers/VideoPreviewImage';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/lib/style.css

@@ -1 +1 @@
-._previewElementContainer_nwhl6_1{display:contents}._childrenWrapper_qguhx_1{position:relative;z-index:1}._root_v4248_1{position:absolute;z-index:2;top:0;left:0;right:0;min-height:100vh;height:var(--height)}._root_1ya0k_1{position:absolute;cursor:pointer;outline:1px solid transparent;outline-offset:-1px}._root_1ya0k_1:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.25}._root_1ya0k_1:hover{outline-color:#29b6f6;outline-style:solid}._root_1ya0k_1:hover:after{background-color:#29b6f6}._isHoveredInBlockList_1ya0k_24{outline-color:#29b6f6;outline-style:solid}._isHoveredInBlockList_1ya0k_24:after{background-color:#29b6f6}._showBlockOutlines_1ya0k_32:not(:hover){outline-color:#d9d9d9;outline-style:dashed}._blockIsSelected_1ya0k_37{outline-color:#29b6f6}._blockIsSelected_1ya0k_37 ._label_1ya0k_40{display:inline-block}._label_1ya0k_40{position:absolute;padding:2px;background-color:#57b0eb;line-height:16px;color:#fff;top:1px;right:1px;font-size:12px;display:none}._barSkeleton_zomv4_1{min-height:20px;margin-bottom:5px;margin-right:5px;background-color:var(--background-color);color:var(--color)}._rowsContainer_zomv4_9{width:100%;min-width:300px}._rowSkeleton_zomv4_14{margin-bottom:10px;min-height:20px;width:var(--width);background-color:var(--background-color);color:var(--color)}._imageContainer_zomv4_22{width:100%;aspect-ratio:var(--aspect-ratio);height:var(--height);background-color:var(--background-color);color:var(--color)}._video_17b8y_1{width:100%;object-fit:cover;aspect-ratio:var(--aspect-ratio)}._fill_17b8y_7{height:100%}._root_1k5a5_1{position:relative;width:100%}._fill_1k5a5_6{height:100%}._iconWrapper_1k5a5_10{position:absolute;top:0;right:0;left:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:#000;opacity:.5;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;cursor:pointer}._iconWrapper_1k5a5_10:focus ._playIcon_1k5a5_26{outline:4px solid white;outline-offset:10px;border-radius:2px}._playIcon_1k5a5_26{width:64px;height:64px;box-sizing:border-box;border-style:solid;border-width:32px 0 32px 64px;border-color:transparent transparent transparent white}._videoContainer_1flq1_1{overflow:hidden;position:relative;aspect-ratio:var(--aspect-ratio)}._fill_1flq1_7{width:100%;height:100%}._vimeoContainer_1flq1_12{position:absolute;border:0;top:0;left:0;width:100%;height:100%}._videoContainer_bhmhr_1{overflow:hidden;position:relative;aspect-ratio:var(--aspect-ratio)}._fill_bhmhr_7{width:100%;height:100%}._youtubeContainer_bhmhr_12{position:absolute;border:0;top:0;left:0;width:100%;height:100%}
+._previewElementContainer_nwhl6_1{display:contents}._childrenWrapper_qguhx_1{position:relative;z-index:1}._root_v4248_1{position:absolute;z-index:2;top:0;left:0;right:0;min-height:100vh;height:var(--height)}._root_1ya0k_1{position:absolute;cursor:pointer;outline:1px solid transparent;outline-offset:-1px}._root_1ya0k_1:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.25}._root_1ya0k_1:hover{outline-color:#29b6f6;outline-style:solid}._root_1ya0k_1:hover:after{background-color:#29b6f6}._isHoveredInBlockList_1ya0k_24{outline-color:#29b6f6;outline-style:solid}._isHoveredInBlockList_1ya0k_24:after{background-color:#29b6f6}._showBlockOutlines_1ya0k_32:not(:hover){outline-color:#d9d9d9;outline-style:dashed}._blockIsSelected_1ya0k_37{outline-color:#29b6f6}._blockIsSelected_1ya0k_37 ._label_1ya0k_40{display:inline-block}._label_1ya0k_40{position:absolute;padding:2px;background-color:#57b0eb;line-height:16px;color:#fff;top:1px;right:1px;font-size:12px;display:none}._barSkeleton_zomv4_1{min-height:20px;margin-bottom:5px;margin-right:5px;background-color:var(--background-color);color:var(--color)}._rowsContainer_zomv4_9{width:100%;min-width:300px}._rowSkeleton_zomv4_14{margin-bottom:10px;min-height:20px;width:var(--width);background-color:var(--background-color);color:var(--color)}._imageContainer_zomv4_22{width:100%;aspect-ratio:var(--aspect-ratio);height:var(--height);background-color:var(--background-color);color:var(--color)}._root_8r6od_1{position:relative}._video_8r6od_5{width:100%;object-fit:cover;aspect-ratio:var(--aspect-ratio)}._fill_8r6od_11{height:100%}._button_4r8gs_1{position:absolute;left:8px;bottom:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-color:#000000b3;z-index:10}._button_4r8gs_1:hover,._button_4r8gs_1:active{background-color:#9e9e9e}._button_4r8gs_1:focus{border-radius:6px}._animatedPlayPause_4r8gs_23{box-sizing:border-box;height:12px;border-color:transparent transparent transparent #fff;cursor:pointer;border-style:solid;border-width:6px 0 6px 9px;transition:border-width .1s ease,border-style .1s ease}._animatedPlayPausePaused_4r8gs_32{border-style:double;border-width:0 0 0 9px}._root_1k5a5_1{position:relative;width:100%}._fill_1k5a5_6{height:100%}._iconWrapper_1k5a5_10{position:absolute;top:0;right:0;left:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:#000;opacity:.5;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;padding:0;cursor:pointer}._iconWrapper_1k5a5_10:focus ._playIcon_1k5a5_26{outline:4px solid white;outline-offset:10px;border-radius:2px}._playIcon_1k5a5_26{width:64px;height:64px;box-sizing:border-box;border-style:solid;border-width:32px 0 32px 64px;border-color:transparent transparent transparent white}._videoContainer_1flq1_1{overflow:hidden;position:relative;aspect-ratio:var(--aspect-ratio)}._fill_1flq1_7{width:100%;height:100%}._vimeoContainer_1flq1_12{position:absolute;border:0;top:0;left:0;width:100%;height:100%}._videoContainer_bhmhr_1{overflow:hidden;position:relative;aspect-ratio:var(--aspect-ratio)}._fill_bhmhr_7{width:100%;height:100%}._youtubeContainer_bhmhr_12{position:absolute;border:0;top:0;left:0;width:100%;height:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/site-react",
-  "version": "8.8.0-canary-20251127134721",
+  "version": "8.8.0-canary-20251127144258",
   "description": "Comet Site React package",
   "repository": {
     "type": "git",
@@ -55,8 +55,8 @@
     "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.4",
     "webpack": "^5.102.1",
-    "@comet/cli": "8.8.0-canary-20251127134721",
-    "@comet/eslint-config": "8.8.0-canary-20251127134721"
+    "@comet/cli": "8.8.0-canary-20251127144258",
+    "@comet/eslint-config": "8.8.0-canary-20251127144258"
   },
   "peerDependencies": {
     "react": "^18.0.0"