@rxdrag/website-lib-core 0.0.73 → 0.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/slate-preview": "1.2.58",
+    "@rxdrag/eslint-config-custom": "0.2.12",
     "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/eslint-config-custom": "0.2.12"
+    "@rxdrag/slate-preview": "1.2.60"
   },
   "dependencies": {
     "clsx": "^2.1.0",
@@ -35,8 +35,8 @@
     "lodash-es": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/rxcms-models": "0.3.92",
-    "@rxdrag/entify-lib": "0.0.21"
+    "@rxdrag/entify-lib": "0.0.22",
+    "@rxdrag/rxcms-models": "0.3.93"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/react/components/ContactForm/ContactForm.tsx

@@ -179,7 +179,7 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       <div
         ref={ref}
         className={clsx(
-          "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2",
+          "py-4 grid max-w-2xl grid-cols-1 gap-x-6 sm:grid-cols-2 w-full",
           className || "gap-y-6"
         )}
       >

package/src/react/components/ReactVideoPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState, forwardRef } from "react";
 import Hls from "hls.js";
 import type { Media } from "@rxdrag/rxcms-models";
 import { ReactModalTrigger } from "./ReactModalTrigger";
@@ -19,14 +19,15 @@ export type VideoPlayerClassNames = {
   overlayReplayButton?: string;
 };
 
-export function ReactVideoPlayer(props: {
+export const ReactVideoPlayer = forwardRef<HTMLDivElement, {
   endTitle?: string;
   media: Media;
   posterUrl?: string;
   classNames?: VideoPlayerClassNames;
   callToAction?: string;
   onToggleSelect?: (id: ID) => void;
-}) {
+  designMode?: boolean;
+}>((props, ref) => {
   const {
     endTitle,
     media,
@@ -34,6 +35,7 @@ export function ReactVideoPlayer(props: {
     posterUrl,
     classNames,
     callToAction,
+    designMode,
   } = props;
   const videoRef = useRef<HTMLVideoElement>(null);
   const hlsRef = useRef<Hls | null>(null);
@@ -42,6 +44,7 @@ export function ReactVideoPlayer(props: {
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent) => {
+      if (designMode) return;
       if (isPlaying && videoRef.current) {
         e.stopPropagation();
         videoRef.current.pause();
@@ -51,18 +54,19 @@ export function ReactVideoPlayer(props: {
         onToggleSelect?.(media.id);
       }
     },
-    [isPlaying, media.id, onToggleSelect]
+    [isPlaying, media.id, onToggleSelect, designMode]
   );
 
   const handlePlayClick = useCallback(
     (e: React.MouseEvent) => {
+      if (designMode) return;
       e.stopPropagation();
       const v = videoRef.current;
       if (!v) return;
       if (isPlaying) v.pause();
       else v.play();
     },
-    [isPlaying]
+    [isPlaying, designMode]
   );
 
   useEffect(() => {
@@ -136,22 +140,17 @@ export function ReactVideoPlayer(props: {
 
   return (
     <div
-      className={[
-        "relative w-full aspect-video rounded-2xl",
-        classNames?.container,
-      ]
-        .filter(Boolean)
-        .join(" ")}
+      ref={ref}
+      className={clsx("relative w-full aspect-video rounded-2xl", classNames?.container)}
       onClick={handleContainerClick}
     >
       <video
         ref={videoRef}
+        onClick={(e) => !designMode && e.stopPropagation()}
         preload="metadata"
         poster={posterUrl ?? media.file?.thumbnail}
-        className={["w-full h-full rounded-lg object-cover", classNames?.video]
-          .filter(Boolean)
-          .join(" ")}
-        controls
+        className={clsx("w-full h-full rounded-lg object-cover", classNames?.video)}
+        controls={!designMode}
       >
         {!media.storageType && media.file?.original ? (
           <source src={media.file.original} />
@@ -163,35 +162,27 @@ export function ReactVideoPlayer(props: {
         <button
           type="button"
           onClick={handlePlayClick}
-          className={[
+          className={clsx(
             "absolute inset-0 flex items-center justify-center w-full h-full transition rounded-lg z-10",
-            classNames?.playButton,
-          ]
-            .filter(Boolean)
-            .join(" ")}
+            classNames?.playButton
+          )}
         >
           <div
-            className={[
+            className={clsx(
               "flex items-center justify-center size-[130px] bg-white/15 rounded-full backdrop-blur-sm hover:shadow-md transition-all duration-300 hover:scale-110 group",
-              classNames?.playButtonOuter,
-            ]
-              .filter(Boolean)
-              .join(" ")}
+              classNames?.playButtonOuter
+            )}
           >
             <div
-              className={[
+              className={clsx(
                 "size-[90px] bg-white relative overflow-hidden rounded-full",
-                classNames?.playButtonInner,
-              ]
-                .filter(Boolean)
-                .join(" ")}
+                classNames?.playButtonInner
+              )}
             >
               <div className="absolute inset-0 cross-gradient box-shadow-1">
                 <div className="w-full h-full flex items-center justify-center">
                   <svg
-                    className={["size-8 text-gray-700", classNames?.playIcon]
-                      .filter(Boolean)
-                      .join(" ")}
+                    className={clsx("size-8 text-gray-700", classNames?.playIcon)}
                     viewBox="0 0 30 32"
                     fill="currentColor"
                     xmlns="http://www.w3.org/2000/svg"
@@ -206,12 +197,10 @@ export function ReactVideoPlayer(props: {
       )}
 
       <div
-        className={[
+        className={clsx(
           "absolute inset-0 bg-black/50 flex-col gap-6 items-center justify-center text-center text-white hidden z-10 rounded-2xl",
-          classNames?.overlay,
-        ]
-          .filter(Boolean)
-          .join(" ")}
+          classNames?.overlay
+        )}
         style={{ display: isEnded ? "flex" : "none" }}
       >
         <p
@@ -231,12 +220,10 @@ export function ReactVideoPlayer(props: {
           </ReactModalTrigger>
           <button
             type="button"
-            className={[
+            className={clsx(
               "px-10 py-2.5 bg-white/20 hover:bg-white/30 rounded-full transition text-sm",
-              classNames?.overlayReplayButton,
-            ]
-              .filter(Boolean)
-              .join(" ")}
+              classNames?.overlayReplayButton
+            )}
             onClick={(e) => {
               e.stopPropagation();
               const v = videoRef.current;
@@ -252,4 +239,4 @@ export function ReactVideoPlayer(props: {
       </div>
     </div>
   );
-}
+});