@rxdrag/website-lib-react 0.0.4 → 0.0.6

package/src/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,24 @@
+import { CSSProperties } from "react";
+import { TSlateResizable } from "@rxdrag/tiptap-preview";
+import { ProductView } from "./ProductView";
+import { Product } from "@rxdrag/rxcms-models";
+
+export type TSlateProduct = TSlateResizable & {
+  product?: Product;
+  title?: string;
+  description?: string;
+  aspect?: string;
+  ctaTitle?: string;
+};
+
+export const PRODUCT_KEY = "Product";
+
+export type ProductCardProps = {
+  node?: TSlateProduct;
+  style?: CSSProperties;
+};
+
+// Slate用的渲染组件
+export const ProductCard = ({ node }: ProductCardProps) => {
+  return <ProductView product={node?.product} node={node} ctaTitle={node?.ctaTitle}/>;
+};

package/src/components/ProductCard/ProductCta/index.tsx

@@ -0,0 +1,28 @@
+import { Product } from "@rxdrag/rxcms-models";
+import "./style.css";
+import type { ReactNode } from "react";
+
+//TODO: 跟询盘触发器同样的实现原理，给询盘对话框发消息
+export function ProductCta(props: {
+  product?: Product;
+  openableKey?: string;
+  children?: ReactNode;
+}) {
+  const { product, openableKey = "enquiry-modal", children } = props;
+  const roleProps = {
+    "data-modal-open": openableKey,
+    "data-call-to-action": `From RichText ProductCard-${product?.title}-${product?.id}`,
+  };
+
+  return (
+    <div className="flex justify-center items-center">
+      <button
+        {...roleProps}
+        className="product-cta-button relative flex-1 mt-2 flex items-center justify-center rounded-md border border-transparent bg-sky-600 text-md font-smibold text-white hover:bg-sky-700"
+        type="button"
+      >
+        {children || "Get a quote"}
+      </button>
+    </div>
+  );
+}

package/src/components/ProductCard/ProductCta/style.css

@@ -0,0 +1,4 @@
+.product-cta-button {
+  width: 100%;
+  padding: 8px 16px;
+}

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

@@ -0,0 +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}
+    />
+  )
+}

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

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

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

@@ -0,0 +1,35 @@
+import { HtmlHTMLAttributes } from "react";
+import "./style.css";
+import { TProduct } from "../../../types/view-model";
+
+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/components/ProductCard/ProductMedia/style.css

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

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

@@ -0,0 +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} />;
+}

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

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

package/src/components/ProductCard/ProductView.tsx

@@ -0,0 +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 "../../types/view-model";
+
+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/components/ProductCard/index.ts

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

package/src/components/ProductCard/useQueryProduct.ts

@@ -0,0 +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;
+}

package/src/components/ReactModalTrigger.tsx

@@ -0,0 +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>
+  );
+}

package/src/components/ReactVideoPlayer.tsx

@@ -0,0 +1,332 @@
+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";
+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;
+  playButtonInner?: string;
+  playIcon?: string;
+  loadingOverlay?: string;
+  loadingContent?: string;
+  overlay?: string;
+  overlayTitle?: string;
+  ctaButton?: string;
+  overlayReplayButton?: string;
+};
+
+export const ReactVideoPlayer = forwardRef<
+  HTMLDivElement,
+  {
+    endTitle?: string;
+    media?: Media;
+    posterUrl?: string;
+    eagerLoad?: boolean;
+    classNames?: VideoPlayerClassNames;
+    callToAction?: string;
+    onToggleSelect?: (id: ID) => void;
+    designMode?: boolean;
+    children?: React.ReactNode;
+    
+  }
+>((props, ref) => {
+  const {
+    endTitle,
+    media,
+    onToggleSelect,
+    posterUrl,
+    eagerLoad,
+    classNames,
+    callToAction,
+    designMode,
+    children,
+    ...rest
+  } = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const hlsRef = useRef<Hls | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isEnded, setIsEnded] = useState(false);
+  const [isSourceReady, setIsSourceReady] = useState(false);
+  const sourceReadyRef = useRef(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const isEndedRef = useRef(false);
+  const [hasStarted, setHasStarted] = useState(false);
+
+  const ensureSourceReady = useCallback(() => {
+    const video = videoRef.current;
+    const url = media?.file?.original;
+    if (!video || !url) return false;
+    if (sourceReadyRef.current) return true;
+
+    if (media?.storageType === "cloudflare_stream") {
+      if (!Hls.isSupported()) {
+        if (video.canPlayType("application/vnd.apple.mpegurl")) {
+          video.src = url;
+          sourceReadyRef.current = true;
+          setIsSourceReady(true);
+          return true;
+        }
+        return false;
+      }
+
+      const hls = new Hls({ enableWorker: true });
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              hls.startLoad();
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              hls.recoverMediaError();
+              break;
+            default:
+              hls.destroy();
+              break;
+          }
+        }
+      });
+      hls.loadSource(url);
+      hls.attachMedia(video);
+      hlsRef.current = hls;
+      sourceReadyRef.current = true;
+      setIsSourceReady(true);
+      return true;
+    }
+
+    video.src = url;
+    sourceReadyRef.current = true;
+    setIsSourceReady(true);
+    return true;
+  }, [media?.file?.original, media?.storageType]);
+
+  const handleContainerClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (designMode) return;
+      if (isPlaying && videoRef.current) {
+        e.stopPropagation();
+        videoRef.current.pause();
+        return;
+      }
+      if (media?.id != null) {
+        onToggleSelect?.(media.id);
+      }
+    },
+    [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();
+        return;
+      }
+
+      const ok = ensureSourceReady();
+      if (!ok) return;
+
+      setIsLoading(true);
+
+      v.play().catch((error) => {
+        console.log("ReactVideoPlayer play() failed:", error);
+        setIsLoading(false);
+      });
+    },
+    [isPlaying, designMode, ensureSourceReady],
+  );
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    video.pause();
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    video.removeAttribute("src");
+    video.load();
+    setIsSourceReady(false);
+    sourceReadyRef.current = false;
+
+    const onPlay = () => {
+      setIsPlaying(true);
+      setIsEnded(false);
+      isEndedRef.current = false;
+      setIsLoading(false);
+      setHasStarted(true);
+    };
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => {
+      setIsPlaying(false);
+      setIsEnded(true);
+      isEndedRef.current = true;
+      setIsLoading(false);
+    };
+    const onWaiting = () => {
+      if (!isEndedRef.current) setIsLoading(true);
+    };
+    const onCanPlay = () => {
+      setIsLoading(false);
+    };
+
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.addEventListener("ended", onEnded);
+    video.addEventListener("waiting", onWaiting);
+    video.addEventListener("canplay", onCanPlay);
+    video.addEventListener("playing", onCanPlay);
+
+    if (eagerLoad) {
+      ensureSourceReady();
+    }
+
+    return () => {
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("ended", onEnded);
+      video.removeEventListener("waiting", onWaiting);
+      video.removeEventListener("canplay", onCanPlay);
+      video.removeEventListener("playing", onCanPlay);
+
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, [eagerLoad, ensureSourceReady, media?.file?.original, media?.storageType]);
+
+  return (
+    <div
+      ref={ref}
+      className={clsx(
+        "relative w-full rounded-2xl",
+        classNames?.aspect ?? "aspect-video",
+        classNames?.container,
+      )}
+      onClick={handleContainerClick}
+      {...rest}
+    >
+      <video
+        ref={videoRef}
+        onClick={(e) => !designMode && e.stopPropagation()}
+        preload={eagerLoad ? "metadata" : "none"}
+        poster={posterUrl ?? media?.file?.thumbnail}
+        className={clsx(
+          "w-full h-full rounded-lg object-cover",
+          classNames?.video,
+        )}
+        playsInline
+        controls={!designMode && hasStarted}
+        disablePictureInPicture
+        controlsList="nodownload noremoteplayback noplaybackrate"
+      >
+        {!media?.storageType &&
+        media?.file?.original &&
+        (eagerLoad || isSourceReady) ? (
+          <source src={media.file.original} />
+        ) : null}
+        Your browser does not support video playback.
+      </video>
+
+      {!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,
+          )}
+        >
+          {children || <VideoPlayIcon classNames={classNames} />}
+        </button>
+      )}
+
+      {!isPlaying && !isEnded && isLoading && (
+        <div
+          className={clsx(
+            "absolute inset-0 flex items-center justify-center w-full h-full rounded-lg z-10 bg-black/20",
+            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,
+            )}
+          >
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+            <span className="text-sm">Loading...</span>
+          </div>
+        </div>
+      )}
+
+      <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,
+        )}
+        style={{ display: isEnded ? "flex" : "none" }}
+      >
+        <p
+          className={clsx("text-4xl drop-shadow-lg", classNames?.overlayTitle)}
+        >
+          {endTitle ?? "Contact Us Now"}
+        </p>
+        <div className="flex items-center gap-4">
+          <ReactModalTrigger
+            className={clsx(
+              "btn btn-primary px-10 py-2.5 rounded-full ripple",
+              classNames?.ctaButton,
+            )}
+            callToAction={callToAction}
+          >
+            Consult Now
+          </ReactModalTrigger>
+          <button
+            type="button"
+            className={clsx(
+              "px-10 py-2.5 bg-white/20 hover:bg-white/30 rounded-full transition text-sm",
+              classNames?.overlayReplayButton,
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              const v = videoRef.current;
+              if (!v) return;
+              const ok = ensureSourceReady();
+              if (!ok) return;
+              setIsLoading(true);
+              v.currentTime = 0;
+              setIsEnded(false);
+              v.play().catch((error) => {
+                console.log("ReactVideoPlayer play() failed:", error);
+                setIsLoading(false);
+              });
+            }}
+          >
+            Replay
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/RichTextOutline/index.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, useEffect } from "react";
+import { useAcitviedHeading } from "./useAcitviedHeading";
+import clsx from "clsx";
+import { parseOutline } from "./parseOutline";
+
+export type RichTextOutlineProps = {
+  className?: string;
+  itemClassName?: string;
+  value?: string;
+  //滚动偏移量
+  yOffset?: number;
+  style?: React.CSSProperties;
+};
+
+export const RichTextOutline = forwardRef<
+  HTMLUListElement,
+  RichTextOutlineProps
+>((props, ref) => {
+  const { className, itemClassName, value, yOffset = 200, ...rest } = props;
+  const activiedId = useAcitviedHeading(yOffset);
+  const outline = parseOutline(value);
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const element = document.getElementById(
+        window.location.hash.substring(1)
+      );
+      if (element) {
+        const y =
+          element.getBoundingClientRect().top + window.scrollY - yOffset;
+        window.scrollTo({ top: y, behavior: "smooth" });
+      }
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [yOffset]);
+
+  return outline?.length ? (
+    <ul ref={ref} className={className} {...rest}>
+      {outline?.map((item, index) => {
+        return (
+          <li
+            key={item?.key + index}
+            className={clsx(
+              activiedId === item?.key ? "actived" : "",
+              itemClassName
+            )}
+          >
+            <a
+              href={`#${item?.key}`}
+              onClick={(e) => {
+                e.preventDefault();
+                const element = document.getElementById(item?.key);
+                if (element) {
+                  const y =
+                    element.getBoundingClientRect().top +
+                    window.scrollY +
+                    yOffset;
+                  window.scrollTo({ top: y, behavior: "smooth" });
+                }
+              }}
+            >
+              {item?.text}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  ) : null;
+});