@comet/site-nextjs 9.0.0-canary-20251209132220 → 9.0.0-canary-20251209140438

package/lib/index.d.ts

@@ -11,7 +11,7 @@ export { sitePreviewRoute } from './sitePreview/appRouter/sitePreviewRoute';
 export { legacyPagesRouterSitePreviewApiHandler } from './sitePreview/pagesRouter/legacyPagesRouterSitePreviewApiHandler';
 export { legacyPagesRouterPreviewParams, previewParams, type SitePreviewParams } from './sitePreview/previewUtils';
 export { SitePreviewProvider } from './sitePreview/SitePreviewProvider';
-export { AdminMessageType, type BlockLoader, type BlockLoaderDependencies, type BlockLoaderOptions, BlockPreviewProvider, BlocksBlock, calculateInheritAspectRatio, convertPreviewDataToHeaders, type CookieApi, CookieApiProvider, CookieSafe, createFetchInMemoryCache, createFetchWithPreviewHeaders, createGraphQLFetch, createPersistedQueryGraphQLFetch, DamFileDownloadLinkBlock, EmailLinkBlock, ErrorHandlerBoundary, ErrorHandlerProvider, ExternalLinkBlock, generateImageUrl, getMaxDimensionsFromArea, gql, type GraphQLFetch, hasRichTextBlockContent, type IAdminContentScopeMessage, type IAdminGraphQLApiUrlMessage, type IAdminHoverComponentMessage, type IAdminShowOnlyVisibleMessage, IFrameBridgeProvider, type IFrameHoverComponentMessage, type IFrameLocationMessage, type IFrameMessage, IFrameMessageType, type IFrameOpenLinkMessage, type IFrameSelectComponentMessage, type ImageDimensions, type IReadyIFrameMessage, isWithPreviewPropsData, ListBlock, OneOfBlock, OptionalBlock, parseAspectRatio, persistedQueryRoute, PhoneLinkBlock, Preview, type PreviewData, PreviewSkeleton, type PropsWithData, recursivelyLoadBlockData, sendSitePreviewIFrameMessage, 
+export { AdminMessageType, type BlockLoader, type BlockLoaderDependencies, type BlockLoaderOptions, BlockPreviewProvider, BlocksBlock, calculateInheritAspectRatio, convertPreviewDataToHeaders, type CookieApi, CookieApiProvider, CookieSafe, createFetchInMemoryCache, createFetchWithPreviewHeaders, createGraphQLFetch, createPersistedQueryGraphQLFetch, DamFileDownloadLinkBlock, EmailLinkBlock, ErrorHandlerBoundary, ErrorHandlerProvider, ExternalLinkBlock, generateImageUrl, getMaxDimensionsFromArea, gql, type GraphQLFetch, hasRichTextBlockContent, type IAdminContentScopeMessage, type IAdminGraphQLApiUrlMessage, type IAdminHoverComponentMessage, type IAdminShowOnlyVisibleMessage, IFrameBridgeProvider, type IFrameHoverComponentMessage, type IFrameLocationMessage, type IFrameMessage, IFrameMessageType, type IFrameOpenLinkMessage, type IFrameSelectComponentMessage, type ImageDimensions, type IReadyIFrameMessage, isWithPreviewPropsData, ListBlock, OneOfBlock, OptionalBlock, parseAspectRatio, persistedQueryRoute, PhoneLinkBlock, type PlayPauseButtonProps, Preview, type PreviewData, PreviewSkeleton, type PropsWithData, recursivelyLoadBlockData, sendSitePreviewIFrameMessage, 
 /** @deprecated Use PreviewData instead. */
 type PreviewData as SitePreviewData, SitePreviewIFrameMessageType, type SupportedBlocks, SvgImageBlock, useBlockPreviewFetch, useCookieApi, useCookieBotCookieApi, useIFrameBridge, useIsElementInViewport, useLocalStorageCookieApi, useOneTrustCookieApi, usePreview, type VideoPreviewImageProps, webpackPersistedQueriesLoader, withPreview, type WithPreviewProps, } from '@comet/site-react';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,oCAAoC,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAC5G,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,kEAAkE,CAAC;AAC1H,OAAO,EAAE,8BAA8B,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACnH,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EACH,gBAAgB,EAChB,KAAK,WAAW,EAChB,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,EACvB,oBAAoB,EACpB,WAAW,EACX,2BAA2B,EAC3B,2BAA2B,EAC3B,KAAK,SAAS,EACd,iBAAiB,EACjB,UAAU,EACV,wBAAwB,EACxB,6BAA6B,EAC7B,kBAAkB,EAClB,gCAAgC,EAChC,wBAAwB,EACxB,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,GAAG,EACH,KAAK,YAAY,EACjB,uBAAuB,EACvB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,oBAAoB,EACpB,KAAK,2BAA2B,EAChC,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,4BAA4B,EACjC,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,sBAAsB,EACtB,SAAS,EACT,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,OAAO,EACP,KAAK,WAAW,EAChB,eAAe,EACf,KAAK,aAAa,EAClB,wBAAwB,EACxB,4BAA4B;AAC5B,2CAA2C;AAC3C,KAAK,WAAW,IAAI,eAAe,EACnC,4BAA4B,EAC5B,KAAK,eAAe,EACpB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACpB,UAAU,EACV,KAAK,sBAAsB,EAC3B,6BAA6B,EAC7B,WAAW,EACX,KAAK,gBAAgB,GACxB,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,oCAAoC,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAC5G,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sCAAsC,EAAE,MAAM,kEAAkE,CAAC;AAC1H,OAAO,EAAE,8BAA8B,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACnH,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EACH,gBAAgB,EAChB,KAAK,WAAW,EAChB,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,EACvB,oBAAoB,EACpB,WAAW,EACX,2BAA2B,EAC3B,2BAA2B,EAC3B,KAAK,SAAS,EACd,iBAAiB,EACjB,UAAU,EACV,wBAAwB,EACxB,6BAA6B,EAC7B,kBAAkB,EAClB,gCAAgC,EAChC,wBAAwB,EACxB,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,GAAG,EACH,KAAK,YAAY,EACjB,uBAAuB,EACvB,KAAK,yBAAyB,EAC9B,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,4BAA4B,EACjC,oBAAoB,EACpB,KAAK,2BAA2B,EAChC,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,4BAA4B,EACjC,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,sBAAsB,EACtB,SAAS,EACT,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,KAAK,oBAAoB,EACzB,OAAO,EACP,KAAK,WAAW,EAChB,eAAe,EACf,KAAK,aAAa,EAClB,wBAAwB,EACxB,4BAA4B;AAC5B,2CAA2C;AAC3C,KAAK,WAAW,IAAI,eAAe,EACnC,4BAA4B,EAC5B,KAAK,eAAe,EACpB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACZ,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACpB,UAAU,EACV,KAAK,sBAAsB,EAC3B,6BAA6B,EAC7B,WAAW,EACX,KAAK,gBAAgB,GACxB,MAAM,mBAAmB,CAAC"}

package/lib/site-react/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,45 @@ 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 [isPlaying, setIsPlaying] = useState(autoplay ?? false);
+    const [isHandledManually, setIsHandledManually] = useState(false);
     const hasPreviewImage = Boolean(previewImage && previewImage.damFile);
-    const videoRef = useRef(null);
-    useIsElementInViewport(videoRef, (inView) => {
-      if (autoplay && videoRef.current) {
-        if (inView) {
-          videoRef.current.play();
-        } else {
-          videoRef.current.pause();
+    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,
@@ -40,25 +62,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, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
+        PlayPauseButton,
+        {
+          isPlaying,
+          onClick: handlePlayPauseClick,
+          ariaLabelPlay: playButtonAriaLabel,
+          ariaLabelPause: pauseButtonAriaLabel
+        }
+      ))
+    ] }) });
   },
   { label: "Video" }
 );

package/lib/site-react/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/site-react/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,40 @@ 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 [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 });
     }
@@ -53,6 +74,16 @@ const VimeoVideoBlock = withPreview(
     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,
@@ -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, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
+            PlayPauseButton,
+            {
+              isPlaying,
+              onClick: handlePlayPauseClick,
+              ariaLabelPlay: playButtonAriaLabel,
+              ariaLabelPause: pauseButtonAriaLabel
+            }
+          ))
+        ]
       }
     ) });
   },

package/lib/site-react/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,40 @@ const YouTubeVideoBlock = withPreview(
     renderPreviewImage,
     fill,
     previewImageIcon,
-    playButtonAriaLabel
+    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 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 (!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 });
     }
@@ -52,7 +64,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 +72,16 @@ const YouTubeVideoBlock = withPreview(
     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,
@@ -68,22 +90,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, 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()
+            }
+          )
+        ]
       }
     ) });
   },

package/lib/site-react/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/site-react/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/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%}._imageContainer_ecpdr_1{position:relative;width:100%;aspect-ratio:var(--aspect-ratio)}
+._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%}._imageContainer_ecpdr_1{position:relative;width:100%;aspect-ratio:var(--aspect-ratio)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/site-nextjs",
-  "version": "9.0.0-canary-20251209132220",
+  "version": "9.0.0-canary-20251209140438",
   "description": "Comet Site Next.js package",
   "repository": {
     "type": "git",
@@ -28,13 +28,13 @@
   "dependencies": {
     "jose": "^5.10.0",
     "server-only": "^0.0.1",
-    "@comet/site-react": "9.0.0-canary-20251209132220"
+    "@comet/site-react": "9.0.0-canary-20251209140438"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "chokidar-cli": "^3.0.0",
     "eslint": "^9.30.1",
     "jest": "^29.7.0",
@@ -45,7 +45,7 @@
     "prettier": "^3.6.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6.1.2",
     "rollup": "^4.44.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "sass": "^1.89.2",
@@ -53,8 +53,8 @@
     "typescript": "5.9.3",
     "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.4",
-    "@comet/cli": "9.0.0-canary-20251209132220",
-    "@comet/eslint-config": "9.0.0-canary-20251209132220"
+    "@comet/cli": "9.0.0-canary-20251209140438",
+    "@comet/eslint-config": "9.0.0-canary-20251209140438"
   },
   "peerDependencies": {
     "next": "^16.0.0",
@@ -75,6 +75,7 @@
     "generate-block-types": "comet generate-block-types",
     "generate-block-types:watch": "chokidar -s \"block-meta.json\" -c \"pnpm run generate-block-types\"",
     "lint": "pnpm run generate-block-types && run-p lint:prettier lint:eslint lint:tsc",
+    "lint:ci": "pnpm run lint",
     "lint:eslint": "eslint --max-warnings 0 src/ **/*.json --no-warn-ignored",
     "lint:prettier": "pnpm exec prettier --check './**/*.{js,json,md,yml,yaml,css,scss}'",
     "lint:tsc": "tsc --noEmit",