@rxdrag/website-lib-core 0.0.127 → 0.0.128

package/src/react/components/ProductCard/ProductDescription/index.tsx

@@ -1,13 +1,13 @@
-import clsx from "clsx"
-import { HTMLAttributes } from "react"
-import "./style.css"
-
-export function ProductDescription(props: HTMLAttributes<HTMLParagraphElement>) {
-  const { className, ...rest } = props
-  return (
-    <p
-      className={clsx("product-description", className)}
-      {...rest}
-    />
-  )
+import clsx from "clsx"
+import { HTMLAttributes } from "react"
+import "./style.css"
+
+export function ProductDescription(props: HTMLAttributes<HTMLParagraphElement>) {
+  const { className, ...rest } = props
+  return (
+    <p
+      className={clsx("product-description", className)}
+      {...rest}
+    />
+  )
 }

package/src/react/components/ProductCard/ProductDescription/style.css

@@ -1,6 +1,6 @@
-.x-figure .product-description {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0.4rem;
+.x-figure .product-description {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0.4rem;
 }

package/src/react/components/ProductCard/ProductMedia/index.tsx

@@ -1,35 +1,35 @@
-import { HtmlHTMLAttributes } from "react";
-import "./style.css";
-import { TProduct } from "../../../../entify";
-
-export function ProductMedia(
-  props: {
-    product?: TProduct;
-    width?: number;
-    aspect?: string;
-  } & HtmlHTMLAttributes<HTMLImageElement>
-) {
-  const { product, style, width, className, aspect, ...rest } = props;
-
-  return (
-    <div
-      className={"product-media " + className}
-      style={{
-        aspectRatio: aspect || "4 / 3",
-        borderRadius: "1rem",
-        overflow: "hidden",
-        ...style,
-        width,
-      }}
-      {...rest}
-    >
-      <img
-        style={{
-          width: "100%",
-        }}
-        src={product?.coverUrl}
-        alt={product?.title}
-      />
-    </div>
-  );
-}
+import { HtmlHTMLAttributes } from "react";
+import "./style.css";
+import { TProduct } from "../../../../entify";
+
+export function ProductMedia(
+  props: {
+    product?: TProduct;
+    width?: number;
+    aspect?: string;
+  } & HtmlHTMLAttributes<HTMLImageElement>
+) {
+  const { product, style, width, className, aspect, ...rest } = props;
+
+  return (
+    <div
+      className={"product-media " + className}
+      style={{
+        aspectRatio: aspect || "4 / 3",
+        borderRadius: "1rem",
+        overflow: "hidden",
+        ...style,
+        width,
+      }}
+      {...rest}
+    >
+      <img
+        style={{
+          width: "100%",
+        }}
+        src={product?.coverUrl}
+        alt={product?.title}
+      />
+    </div>
+  );
+}

package/src/react/components/ProductCard/ProductMedia/style.css

@@ -1,6 +1,6 @@
-.x-figure .product-media {
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.x-figure .product-media {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

package/src/react/components/ProductCard/ProductTitle/index.tsx

@@ -1,7 +1,7 @@
-import { HTMLAttributes } from "react";
-import "./style.css";
-
-export function ProductTitle(props: HTMLAttributes<HTMLHeadingElement>) {
-  const { className, ...rest } = props;
-  return <h3 className={"product-title " + className} {...rest} />;
-}
+import { HTMLAttributes } from "react";
+import "./style.css";
+
+export function ProductTitle(props: HTMLAttributes<HTMLHeadingElement>) {
+  const { className, ...rest } = props;
+  return <h3 className={"product-title " + className} {...rest} />;
+}

package/src/react/components/ProductCard/ProductTitle/style.css

@@ -1,4 +1,4 @@
-.x-figure .product-title{
-  margin-top: 0.6rem;
-  padding-top: 0;
+.x-figure .product-title{
+  margin-top: 0.6rem;
+  padding-top: 0;
 }

package/src/react/components/ProductCard/ProductView.tsx

@@ -1,36 +1,36 @@
-import { ProductCardProps } from "./ProductCard";
-import { Figcaption, Figure, FigureContent } from "@rxdrag/tiptap-preview";
-import { ProductMedia } from "./ProductMedia";
-import { ProductTitle } from "./ProductTitle";
-import { ProductDescription } from "./ProductDescription";
-import { ProductCta } from "./ProductCta";
-import { TProduct } from "../../../entify";
-
-export function ProductView(
-  props: {
-    product?: TProduct;
-    ctaTitle?: string;
-  } & ProductCardProps
-) {
-  const { product, ctaTitle, node } = props;
-
-  const title = node?.title || product?.title;
-  const description = node?.description || product?.description;
-
-  return (
-    <Figure>
-      <FigureContent width={node?.width} align={node?.align}>
-        <a href={`/products/${product?.slug}`}>
-          <ProductMedia product={product} aspect={node?.aspect} />
-        </a>
-      </FigureContent>
-      <Figcaption width={node?.width} align={node?.align}>
-        <a href={`/products/${product?.slug}`}>
-          <ProductTitle>{title}</ProductTitle>
-        </a>
-        <ProductDescription>{description}</ProductDescription>
-        <ProductCta product={product}>{ctaTitle}</ProductCta>
-      </Figcaption>
-    </Figure>
-  );
-}
+import { ProductCardProps } from "./ProductCard";
+import { Figcaption, Figure, FigureContent } from "@rxdrag/tiptap-preview";
+import { ProductMedia } from "./ProductMedia";
+import { ProductTitle } from "./ProductTitle";
+import { ProductDescription } from "./ProductDescription";
+import { ProductCta } from "./ProductCta";
+import { TProduct } from "../../../entify";
+
+export function ProductView(
+  props: {
+    product?: TProduct;
+    ctaTitle?: string;
+  } & ProductCardProps
+) {
+  const { product, ctaTitle, node } = props;
+
+  const title = node?.title || product?.title;
+  const description = node?.description || product?.description;
+
+  return (
+    <Figure>
+      <FigureContent width={node?.width} align={node?.align}>
+        <a href={`/products/${product?.slug}`}>
+          <ProductMedia product={product} aspect={node?.aspect} />
+        </a>
+      </FigureContent>
+      <Figcaption width={node?.width} align={node?.align}>
+        <a href={`/products/${product?.slug}`}>
+          <ProductTitle>{title}</ProductTitle>
+        </a>
+        <ProductDescription>{description}</ProductDescription>
+        <ProductCta product={product}>{ctaTitle}</ProductCta>
+      </Figcaption>
+    </Figure>
+  );
+}

package/src/react/components/ProductCard/index.ts

@@ -1,5 +1,5 @@
-export * from "./ProductCta";
-export * from "./ProductTitle";
-export * from "./ProductDescription";
-export * from "./ProductCard";
+export * from "./ProductCta";
+export * from "./ProductTitle";
+export * from "./ProductDescription";
+export * from "./ProductCard";
 export * from "./ProductMedia";

package/src/react/components/ProductCard/useQueryProduct.ts

@@ -1,32 +1,32 @@
-import { useEffect, useRef, useState } from "react";
-import { Product } from "@rxdrag/rxcms-models";
-
-export function useQueryProduct(productId?: string, websiteId?: string) {
-  const active = useRef<boolean>(false);
-  const [product, setProduct] = useState<Product | undefined>({});
-
-  const url = websiteId
-    ? `/${websiteId}/api/product/${productId}`
-    : `/api/product/${productId}`;
-
-  useEffect(() => {
-    if (active.current && !productId) {
-      return;
-    }
-
-    fetch(url)
-      .then((res) => res.json())
-      .then((data) => {
-        setProduct(data);
-        active.current = true;
-      });
-  }, [productId]);
-
-  useEffect(() => {
-    return () => {
-      active.current = false;
-    };
-  });
-
-  return product;
-}
+import { useEffect, useRef, useState } from "react";
+import { Product } from "@rxdrag/rxcms-models";
+
+export function useQueryProduct(productId?: string, websiteId?: string) {
+  const active = useRef<boolean>(false);
+  const [product, setProduct] = useState<Product | undefined>({});
+
+  const url = websiteId
+    ? `/${websiteId}/api/product/${productId}`
+    : `/api/product/${productId}`;
+
+  useEffect(() => {
+    if (active.current && !productId) {
+      return;
+    }
+
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        setProduct(data);
+        active.current = true;
+      });
+  }, [productId]);
+
+  useEffect(() => {
+    return () => {
+      active.current = false;
+    };
+  });
+
+  return product;
+}

package/src/react/components/ReactModalTrigger.tsx

@@ -1,28 +1,28 @@
-import type { ReactNode } from "react";
-
-export function ReactModalTrigger(props: {
-  className?: string;
-  openableKey?: string;
-  callToAction?: string;
-  children?: ReactNode;
-}) {
-  const {
-    className,
-    callToAction,
-    openableKey = "enquiry-modal",
-    children,
-  } = props;
-  const roleProps = {
-    "data-modal-open": openableKey,
-    "data-call-to-action": callToAction,
-  };
-  return (
-    <button
-      {...roleProps}
-      className={className}
-      type="button"
-    >
-      {children || "Get a quote"}
-    </button>
-  );
-}
+import type { ReactNode } from "react";
+
+export function ReactModalTrigger(props: {
+  className?: string;
+  openableKey?: string;
+  callToAction?: string;
+  children?: ReactNode;
+}) {
+  const {
+    className,
+    callToAction,
+    openableKey = "enquiry-modal",
+    children,
+  } = props;
+  const roleProps = {
+    "data-modal-open": openableKey,
+    "data-call-to-action": callToAction,
+  };
+  return (
+    <button
+      {...roleProps}
+      className={className}
+      type="button"
+    >
+      {children || "Get a quote"}
+    </button>
+  );
+}

package/src/react/components/ReactVideoPlayer.tsx

@@ -9,11 +9,13 @@ import Hls from "hls.js";
 import type { Media } from "@rxdrag/rxcms-models";
 import { ReactModalTrigger } from "./ReactModalTrigger";
 import clsx from "clsx";
+import { VideoPlayIcon } from "./VideoPlayIcon";
 
 export type ID = string | number;
 
 export type VideoPlayerClassNames = {
   container?: string;
+  aspect?: string;
   video?: string;
   playButton?: string;
   playButtonOuter?: string;
@@ -31,13 +33,15 @@ export const ReactVideoPlayer = forwardRef<
   HTMLDivElement,
   {
     endTitle?: string;
-    media: Media;
+    media?: Media;
     posterUrl?: string;
     eagerLoad?: boolean;
     classNames?: VideoPlayerClassNames;
     callToAction?: string;
     onToggleSelect?: (id: ID) => void;
     designMode?: boolean;
+    children?: React.ReactNode;
+    
   }
 >((props, ref) => {
   const {
@@ -49,6 +53,7 @@ export const ReactVideoPlayer = forwardRef<
     classNames,
     callToAction,
     designMode,
+    children,
     ...rest
   } = props;
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -63,11 +68,11 @@ export const ReactVideoPlayer = forwardRef<
 
   const ensureSourceReady = useCallback(() => {
     const video = videoRef.current;
-    const url = media.file?.original;
+    const url = media?.file?.original;
     if (!video || !url) return false;
     if (sourceReadyRef.current) return true;
 
-    if (media.storageType === "cloudflare_stream") {
+    if (media?.storageType === "cloudflare_stream") {
       if (!Hls.isSupported()) {
         if (video.canPlayType("application/vnd.apple.mpegurl")) {
           video.src = url;
@@ -106,7 +111,7 @@ export const ReactVideoPlayer = forwardRef<
     sourceReadyRef.current = true;
     setIsSourceReady(true);
     return true;
-  }, [media.file?.original, media.storageType]);
+  }, [media?.file?.original, media?.storageType]);
 
   const handleContainerClick = useCallback(
     (e: React.MouseEvent) => {
@@ -116,11 +121,11 @@ export const ReactVideoPlayer = forwardRef<
         videoRef.current.pause();
         return;
       }
-      if (media.id != null) {
+      if (media?.id != null) {
         onToggleSelect?.(media.id);
       }
     },
-    [isPlaying, media.id, onToggleSelect, designMode]
+    [isPlaying, media?.id, onToggleSelect, designMode],
   );
 
   const handlePlayClick = useCallback(
@@ -144,7 +149,7 @@ export const ReactVideoPlayer = forwardRef<
         setIsLoading(false);
       });
     },
-    [isPlaying, designMode, ensureSourceReady]
+    [isPlaying, designMode, ensureSourceReady],
   );
 
   useEffect(() => {
@@ -206,14 +211,15 @@ export const ReactVideoPlayer = forwardRef<
         hlsRef.current = null;
       }
     };
-  }, [eagerLoad, ensureSourceReady, media.file?.original, media.storageType]);
+  }, [eagerLoad, ensureSourceReady, media?.file?.original, media?.storageType]);
 
   return (
     <div
       ref={ref}
       className={clsx(
-        "relative w-full aspect-video rounded-2xl",
-        classNames?.container
+        "relative w-full rounded-2xl",
+        classNames?.aspect ?? "aspect-video",
+        classNames?.container,
       )}
       onClick={handleContainerClick}
       {...rest}
@@ -222,64 +228,35 @@ export const ReactVideoPlayer = forwardRef<
         ref={videoRef}
         onClick={(e) => !designMode && e.stopPropagation()}
         preload={eagerLoad ? "metadata" : "none"}
-        poster={posterUrl ?? media.file?.thumbnail}
+        poster={posterUrl ?? media?.file?.thumbnail}
         className={clsx(
           "w-full h-full rounded-lg object-cover",
-          classNames?.video
+          classNames?.video,
         )}
         playsInline
         controls={!designMode && hasStarted}
         disablePictureInPicture
         controlsList="nodownload noremoteplayback noplaybackrate"
       >
-        {!media.storageType && media.file?.original && (eagerLoad || isSourceReady) ? (
+        {!media?.storageType &&
+        media?.file?.original &&
+        (eagerLoad || isSourceReady) ? (
           <source src={media.file.original} />
         ) : null}
         Your browser does not support video playback.
       </video>
 
-      {!isPlaying &&
-        !isEnded &&
-        !isLoading &&
-        (
+      {!isPlaying && !isEnded && !isLoading && (
         <button
           type="button"
           onClick={handlePlayClick}
           className={clsx(
             "absolute inset-0 items-center justify-center w-full h-full transition rounded-lg z-10",
             hasStarted ? "hidden md:flex" : "flex",
-            classNames?.playButton
+            classNames?.playButton,
           )}
         >
-          <div
-            className={clsx(
-              "flex items-center justify-center w-14 h-14 lg:w-[130px] lg:h-[130px] bg-white/15 rounded-full backdrop-blur-sm hover:shadow-md transition-all duration-300 hover:scale-110 group",
-              classNames?.playButtonOuter
-            )}
-          >
-            <div
-              className={clsx(
-                "w-10 h-10 lg:w-[90px] lg:h-[90px] bg-white relative overflow-hidden rounded-full",
-                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={clsx(
-                      "size-4 lg:size-8 text-gray-700",
-                      classNames?.playIcon
-                    )}
-                    viewBox="0 0 30 32"
-                    fill="currentColor"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path d="M27.2003 19.4972C29.945 17.9735 29.945 14.0264 27.2003 12.5027L6.44148 0.978573C3.77538 -0.501503 0.5 1.42643 0.5 4.47581V27.5241C0.5 30.5735 3.77537 32.5014 6.44147 31.0214L27.2003 19.4972Z" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
+          {children || <VideoPlayIcon classNames={classNames} />}
         </button>
       )}
 
@@ -287,14 +264,14 @@ export const ReactVideoPlayer = forwardRef<
         <div
           className={clsx(
             "absolute inset-0 flex items-center justify-center w-full h-full rounded-lg z-10 bg-black/20",
-            classNames?.loadingOverlay
+            classNames?.loadingOverlay,
           )}
           onClick={(e) => e.stopPropagation()}
         >
           <div
             className={clsx(
               "flex items-center gap-3 rounded-full bg-black/50 px-4 py-2 text-white",
-              classNames?.loadingContent
+              classNames?.loadingContent,
             )}
           >
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
@@ -306,7 +283,7 @@ export const ReactVideoPlayer = forwardRef<
       <div
         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
+          classNames?.overlay,
         )}
         style={{ display: isEnded ? "flex" : "none" }}
       >
@@ -319,7 +296,7 @@ export const ReactVideoPlayer = forwardRef<
           <ReactModalTrigger
             className={clsx(
               "btn btn-primary px-10 py-2.5 rounded-full ripple",
-              classNames?.ctaButton
+              classNames?.ctaButton,
             )}
             callToAction={callToAction}
           >
@@ -329,7 +306,7 @@ export const ReactVideoPlayer = forwardRef<
             type="button"
             className={clsx(
               "px-10 py-2.5 bg-white/20 hover:bg-white/30 rounded-full transition text-sm",
-              classNames?.overlayReplayButton
+              classNames?.overlayReplayButton,
             )}
             onClick={(e) => {
               e.stopPropagation();