@comet/site-react 8.10.0-canary-20251209100104 → 8.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/blocks/DamVideoBlock.d.ts.map +1 -1
  2. package/lib/blocks/DamVideoBlock.js +15 -12
  3. package/lib/blocks/VimeoVideoBlock.js +14 -14
  4. package/lib/blocks/YouTubeVideoBlock.d.ts.map +1 -1
  5. package/lib/blocks/YouTubeVideoBlock.js +12 -9
  6. package/lib/blocks/helpers/PlayPauseButton.js +1 -1
  7. package/package.json +3 -3
package/lib/blocks/DamVideoBlock.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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,iJAkGzB,CAAC"}
package/lib/blocks/DamVideoBlock.js CHANGED
@@ -24,17 +24,20 @@ const DamVideoBlock = withPreview(
24
24
  return /* @__PURE__ */ jsx(PreviewSkeleton, { type: "media", hasContent: false, aspectRatio });
25
25
  }
26
26
  const [showPreviewImage, setShowPreviewImage] = useState(true);
27
- const [isHandledManually, setIsHandledManually] = useState(!autoplay);
27
+ const [isPlaying, setIsPlaying] = useState(autoplay ?? false);
28
+ const [isHandledManually, setIsHandledManually] = useState(false);
28
29
  const hasPreviewImage = Boolean(previewImage && previewImage.damFile);
29
30
  const [videoElement, setVideoElement] = useState(null);
30
31
  const videoRef = setVideoElement;
31
32
  const handleInView = useCallback(
32
33
  (inView) => {
33
- if (autoplay && videoElement && !isHandledManually) {
34
- if (inView) {
34
+ if (!isHandledManually && videoElement) {
35
+ if (inView && autoplay) {
35
36
  videoElement.play();
37
+ setIsPlaying(true);
36
38
  } else {
37
39
  videoElement.pause();
40
+ setIsPlaying(false);
38
41
  }
39
42
  }
40
43
  },
@@ -42,13 +45,13 @@ const DamVideoBlock = withPreview(
42
45
  );
43
46
  useIsElementInViewport({ current: videoElement }, handleInView);
44
47
  const handlePlayPauseClick = () => {
45
- setIsHandledManually(!isHandledManually);
46
- if (videoElement) {
47
- if (videoElement.paused) {
48
- videoElement.play();
49
- } else {
50
- videoElement.pause();
51
- }
48
+ if (isPlaying) {
49
+ setIsPlaying(false);
50
+ setIsHandledManually(true);
51
+ videoElement == null ? void 0 : videoElement.pause();
52
+ } else {
53
+ setIsPlaying(true);
54
+ videoElement == null ? void 0 : videoElement.play();
52
55
  }
53
56
  };
54
57
  return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
@@ -79,10 +82,10 @@ const DamVideoBlock = withPreview(
79
82
  ]
80
83
  }
81
84
  ),
82
- !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying: isHandledManually, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
85
+ !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
83
86
  PlayPauseButton,
84
87
  {
85
- isPlaying: isHandledManually,
88
+ isPlaying,
86
89
  onClick: handlePlayPauseClick,
87
90
  ariaLabelPlay: playButtonAriaLabel,
88
91
  ariaLabelPause: pauseButtonAriaLabel
package/lib/blocks/VimeoVideoBlock.js CHANGED
@@ -36,7 +36,8 @@ const VimeoVideoBlock = withPreview(
36
36
  const inViewRef = useRef(null);
37
37
  const [iframeElement, setIframeElement] = useState(null);
38
38
  const iframeRef = setIframeElement;
39
- const [isHandledManually, setIsHandledManually] = useState(!autoplay);
39
+ const [isPlaying, setIsPlaying] = useState(autoplay ?? false);
40
+ const [isHandledManually, setIsHandledManually] = useState(false);
40
41
  const pauseVimeoVideo = useCallback(() => {
41
42
  var _a;
42
43
  (_a = iframeElement == null ? void 0 : iframeElement.contentWindow) == null ? void 0 : _a.postMessage(JSON.stringify({ method: "pause" }), "https://player.vimeo.com");
@@ -50,8 +51,10 @@ const VimeoVideoBlock = withPreview(
50
51
  if (!isHandledManually) {
51
52
  if (isVisible && autoplay) {
52
53
  playVimeoVideo();
54
+ setIsPlaying(true);
53
55
  } else {
54
56
  pauseVimeoVideo();
57
+ setIsPlaying(false);
55
58
  }
56
59
  }
57
60
  },
@@ -72,17 +75,14 @@ const VimeoVideoBlock = withPreview(
72
75
  const vimeoUrl = new URL(`${vimeoBaseUrl}${identifier ?? ""}`);
73
76
  vimeoUrl.search = searchParams.toString();
74
77
  const handlePlayPauseClick = () => {
75
- setIsHandledManually((prev) => {
76
- const next = !prev;
77
- if (iframeElement) {
78
- if (next) {
79
- playVimeoVideo();
80
- } else {
81
- pauseVimeoVideo();
82
- }
83
- }
84
- return next;
85
- });
78
+ if (isPlaying) {
79
+ setIsPlaying(false);
80
+ setIsHandledManually(true);
81
+ pauseVimeoVideo();
82
+ } else {
83
+ setIsPlaying(true);
84
+ playVimeoVideo();
85
+ }
86
86
  };
87
87
  return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
88
88
  onPlay: () => setShowPreviewImage(false),
@@ -100,10 +100,10 @@ const VimeoVideoBlock = withPreview(
100
100
  style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", "/") } : void 0,
101
101
  children: [
102
102
  /* @__PURE__ */ jsx("iframe", { ref: iframeRef, className: styles.vimeoContainer, src: vimeoUrl.toString(), allow: "autoplay", allowFullScreen: true }),
103
- !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying: isHandledManually, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
103
+ !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
104
104
  PlayPauseButton,
105
105
  {
106
- isPlaying: isHandledManually,
106
+ isPlaying,
107
107
  onClick: handlePlayPauseClick,
108
108
  ariaLabelPlay: playButtonAriaLabel,
109
109
  ariaLabelPause: pauseButtonAriaLabel
package/lib/blocks/YouTubeVideoBlock.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"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,qJA2H7B,CAAC"}
package/lib/blocks/YouTubeVideoBlock.js CHANGED
@@ -27,7 +27,8 @@ const YouTubeVideoBlock = withPreview(
27
27
  playPauseButton: PlayPauseButtonComponent
28
28
  }) => {
29
29
  const [showPreviewImage, setShowPreviewImage] = useState(true);
30
- const [isHandledManually, setIsHandledManually] = useState(autoplay ?? false);
30
+ const [isPlaying, setIsPlaying] = useState(autoplay ?? false);
31
+ const [isHandledManually, setIsHandledManually] = useState(false);
31
32
  const hasPreviewImage = !!(previewImage && previewImage.damFile);
32
33
  const [iframeElement, setIframeElement] = useState(null);
33
34
  const iframeRef = setIframeElement;
@@ -42,12 +43,13 @@ const YouTubeVideoBlock = withPreview(
42
43
  }, [iframeElement]);
43
44
  const handleInView = useCallback(
44
45
  (inView) => {
45
- if (autoplay) {
46
- if (inView && isHandledManually) {
46
+ if (!isHandledManually) {
47
+ if (inView && autoplay) {
47
48
  playYouTubeVideo();
48
- setIsHandledManually(true);
49
+ setIsPlaying(true);
49
50
  } else {
50
51
  pauseYouTubeVideo();
52
+ setIsPlaying(false);
51
53
  }
52
54
  }
53
55
  },
@@ -71,12 +73,13 @@ const YouTubeVideoBlock = withPreview(
71
73
  const youtubeUrl = new URL(`${youtubeBaseUrl}${identifier ?? ""}`);
72
74
  youtubeUrl.search = searchParams.toString();
73
75
  const handlePlayPauseClick = () => {
74
- if (isHandledManually) {
76
+ if (isPlaying) {
77
+ setIsPlaying(false);
78
+ setIsHandledManually(true);
75
79
  pauseYouTubeVideo();
76
- setIsHandledManually(false);
77
80
  } else {
81
+ setIsPlaying(true);
78
82
  playYouTubeVideo();
79
- setIsHandledManually(true);
80
83
  }
81
84
  };
82
85
  return /* @__PURE__ */ jsx(Fragment, { children: hasPreviewImage && showPreviewImage ? renderPreviewImage({
@@ -94,10 +97,10 @@ const YouTubeVideoBlock = withPreview(
94
97
  className: clsx(styles.videoContainer, fill && styles.fill),
95
98
  style: !fill ? { "--aspect-ratio": aspectRatio.replace("x", "/") } : void 0,
96
99
  children: [
97
- !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying: !isHandledManually, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
100
+ !showControls && (PlayPauseButtonComponent ? /* @__PURE__ */ jsx(PlayPauseButtonComponent, { isPlaying, onClick: handlePlayPauseClick }) : /* @__PURE__ */ jsx(
98
101
  PlayPauseButton,
99
102
  {
100
- isPlaying: !isHandledManually,
103
+ isPlaying,
101
104
  onClick: handlePlayPauseClick,
102
105
  ariaLabelPlay: playButtonAriaLabel,
103
106
  ariaLabelPause: pauseButtonAriaLabel
package/lib/blocks/helpers/PlayPauseButton.js CHANGED
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import clsx from "clsx";
3
3
  import styles from "./PlayPauseButton.module.scss.js";
4
4
  const PlayPauseButton = ({ isPlaying, onClick, ariaLabelPlay, ariaLabelPause }) => {
5
- 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) }) });
5
+ 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) }) });
6
6
  };
7
7
  export {
8
8
  PlayPauseButton
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@comet/site-react",
3
- "version": "8.10.0-canary-20251209100104",
3
+ "version": "8.10.0",
4
4
  "description": "Comet Site React package",
5
5
  "repository": {
6
6
  "type": "git",
@@ -55,8 +55,8 @@
55
55
  "vite": "^5.4.19",
56
56
  "vite-plugin-dts": "^4.5.4",
57
57
  "webpack": "^5.102.1",
58
- "@comet/cli": "8.10.0-canary-20251209100104",
59
- "@comet/eslint-config": "8.10.0-canary-20251209100104"
58
+ "@comet/cli": "8.10.0",
59
+ "@comet/eslint-config": "8.10.0"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "react": "^18.0.0"