@rxdrag/website-lib-core 0.0.63 → 0.0.65

package/src/react/components/ReactVideoPlayer.tsx

@@ -0,0 +1,255 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Hls from "hls.js";
+import type { Media } from "@rxdrag/rxcms-models";
+import { ReactModalTrigger } from "./ReactModalTrigger";
+import clsx from "clsx";
+
+export type ID = string | number;
+
+export type VideoPlayerClassNames = {
+  container?: string;
+  video?: string;
+  playButton?: string;
+  playButtonOuter?: string;
+  playButtonInner?: string;
+  playIcon?: string;
+  overlay?: string;
+  overlayTitle?: string;
+  ctaButton?: string;
+  overlayReplayButton?: string;
+};
+
+export function ReactVideoPlayer(props: {
+  endTitle?: string;
+  media: Media;
+  posterUrl?: string;
+  classNames?: VideoPlayerClassNames;
+  callToAction?: string;
+  onToggleSelect?: (id: ID) => void;
+}) {
+  const {
+    endTitle,
+    media,
+    onToggleSelect,
+    posterUrl,
+    classNames,
+    callToAction,
+  } = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const hlsRef = useRef<Hls | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isEnded, setIsEnded] = useState(false);
+
+  const handleContainerClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (isPlaying && videoRef.current) {
+        e.stopPropagation();
+        videoRef.current.pause();
+        return;
+      }
+      if (media.id != null) {
+        onToggleSelect?.(media.id);
+      }
+    },
+    [isPlaying, media.id, onToggleSelect]
+  );
+
+  const handlePlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const v = videoRef.current;
+      if (!v) return;
+      if (isPlaying) v.pause();
+      else v.play();
+    },
+    [isPlaying]
+  );
+
+  useEffect(() => {
+    const video = videoRef.current;
+    const url = media.file?.original;
+    if (!video || !url) return;
+
+    const onPlay = () => {
+      setIsPlaying(true);
+      setIsEnded(false);
+    };
+    const onPause = () => setIsPlaying(false);
+    const onEnded = () => {
+      setIsPlaying(false);
+      setIsEnded(true);
+    };
+
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.addEventListener("ended", onEnded);
+
+    if (media.storageType === "cloudflare_stream") {
+      if (!Hls.isSupported()) {
+        if (video.canPlayType("application/vnd.apple.mpegurl")) {
+          video.src = url;
+        }
+        return () => {
+          video.removeEventListener("play", onPlay);
+          video.removeEventListener("pause", onPause);
+          video.removeEventListener("ended", onEnded);
+        };
+      }
+
+      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;
+
+      return () => {
+        video.removeEventListener("play", onPlay);
+        video.removeEventListener("pause", onPause);
+        video.removeEventListener("ended", onEnded);
+        hls.destroy();
+        hlsRef.current = null;
+      };
+    } else {
+      video.src = url;
+      return () => {
+        video.removeEventListener("play", onPlay);
+        video.removeEventListener("pause", onPause);
+        video.removeEventListener("ended", onEnded);
+      };
+    }
+  }, [media.file?.original, media.storageType]);
+
+  return (
+    <div
+      className={[
+        "relative w-full aspect-video rounded-2xl",
+        classNames?.container,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      onClick={handleContainerClick}
+    >
+      <video
+        ref={videoRef}
+        preload="metadata"
+        poster={posterUrl ?? media.file?.thumbnail}
+        className={["w-full h-full rounded-lg object-cover", classNames?.video]
+          .filter(Boolean)
+          .join(" ")}
+        controls
+      >
+        {!media.storageType && media.file?.original ? (
+          <source src={media.file.original} />
+        ) : null}
+        Your browser does not support video playback.
+      </video>
+
+      {!isPlaying && !isEnded && (
+        <button
+          type="button"
+          onClick={handlePlayClick}
+          className={[
+            "absolute inset-0 flex items-center justify-center w-full h-full transition rounded-lg z-10",
+            classNames?.playButton,
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          <div
+            className={[
+              "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(" ")}
+          >
+            <div
+              className={[
+                "size-[90px] bg-white relative overflow-hidden rounded-full",
+                classNames?.playButtonInner,
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              <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(" ")}
+                    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>
+        </button>
+      )}
+
+      <div
+        className={[
+          "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(" ")}
+        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={[
+              "px-10 py-2.5 bg-white/20 hover:bg-white/30 rounded-full transition text-sm",
+              classNames?.overlayReplayButton,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            onClick={(e) => {
+              e.stopPropagation();
+              const v = videoRef.current;
+              if (!v) return;
+              v.currentTime = 0;
+              setIsEnded(false);
+              v.play();
+            }}
+          >
+            Replay
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/react/components/index.ts

@@ -11,5 +11,7 @@ export * from "./SearchInput";
 export * from "./ToTop";
 export * from "./BackgroundVideoPlayer";
 export * from "./BackgroundHlsVideoPlayer";
-export * from "./VideoPlayer";
+export * from "./ReactModalTrigger";
+export * from "./ReactVideoPlayer";
+
 

package/src/react/components/ContactForm/useVisitorInfo.ts

@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-
-export interface VisitorInfo {
-  visitorId: string | null;
-  sessionId: string | null;
-}
-
-export function useVisitorInfo() {
-  const [visitorInfo, setVisitorInfo] = useState<VisitorInfo>({
-    visitorId: null,
-    sessionId: null,
-  });
-
-  useEffect(() => {
-    const getVisitorId = () => {
-      const match = document.cookie.match(/visitor_id=([^;]+)/);
-      return match ? match[1] : null;
-    };
-
-    const getSessionId = () => {
-      return sessionStorage.getItem("session_id");
-    };
-
-    setVisitorInfo({
-      visitorId: getVisitorId(),
-      sessionId: getSessionId(),
-    });
-  }, []);
-
-  return visitorInfo;
-}

package/src/react/components/VideoPlayer.tsx

@@ -1,146 +0,0 @@
-import { ID } from "@rxdrag/entify-lib";
-import { Media } from "@rxdrag/rxcms-models";
-import React, { useEffect, useRef, useState } from "react";
-import Hls from "hls.js";
-import { Icon } from "@iconify/react";
-
-export function VideoPlayer(props: {
-  media: Media;
-  onToggleSelect?: (id: ID) => void;
-}) {
-  const { media, onToggleSelect } = props;
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const hlsRef = useRef<Hls | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  const handleContainerClick = React.useCallback(
-    (e: React.MouseEvent) => {
-      // 如果正在播放，点击暂停并阻止事件冒泡（避免同时触发选择）
-      if (isPlaying && videoRef.current) {
-        e.stopPropagation();
-        videoRef.current.pause();
-        return;
-      }
-      
-      // 未播放时，触发选择事件
-      onToggleSelect?.(media.id!);
-    },
-    [media.id, onToggleSelect, isPlaying]
-  );
-
-  const handlePlayClick = React.useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (videoRef.current) {
-        if (isPlaying) {
-          videoRef.current.pause();
-        } else {
-          videoRef.current.play();
-        }
-      }
-    },
-    [isPlaying]
-  );
-
-  useEffect(() => {
-    if (!videoRef.current || !media.file?.original) return;
-
-    const video = videoRef.current;
-    const videoUrl = media.file.original;
-
-    // 监听播放状态
-    const handlePlay = () => {
-      setIsPlaying(true);
-    };
-
-    const handlePause = () => {
-      setIsPlaying(false);
-    };
-
-    video.addEventListener("play", handlePlay);
-    video.addEventListener("pause", handlePause);
-
-    // Cloudflare Stream 使用 HLS
-    if (media.storageType === "cloudflare_stream") {
-      if (!Hls.isSupported()) {
-        // Safari 原生支持 HLS
-        if (video.canPlayType("application/vnd.apple.mpegurl")) {
-          video.src = videoUrl;
-        }
-        return () => {
-          video.removeEventListener("play", handlePlay);
-          video.removeEventListener("pause", handlePause);
-        };
-      }
-
-      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(videoUrl);
-      hls.attachMedia(video);
-      hlsRef.current = hls;
-
-      return () => {
-        video.removeEventListener("play", handlePlay);
-        video.removeEventListener("pause", handlePause);
-        hls.destroy();
-        hlsRef.current = null;
-      };
-    } else {
-      // 普通视频使用原生 video
-      video.src = videoUrl;
-
-      return () => {
-        video.removeEventListener("play", handlePlay);
-        video.removeEventListener("pause", handlePause);
-      };
-    }
-  }, [media.file?.original, media.storageType]);
-
-  return (
-    <div
-      className="z-0 w-full bg-default-100 cursor-pointer aspect-square relative group"
-      onClick={handleContainerClick}
-    >
-      <video
-        ref={videoRef}
-        preload="metadata"
-        poster={media.file?.thumbnail}
-        className="absolute inset-0 w-full h-full object-cover"
-      />
-
-      {/* 播放按钮 - 播放时隐藏 */}
-      {!isPlaying && (
-        <button
-          onClick={handlePlayClick}
-          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer"
-        >
-          <div className="w-12 h-12 rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow-lg transition-all hover:scale-110">
-            <Icon
-              icon="mdi:play"
-              className="text-2xl text-gray-800"
-              style={{ marginLeft: "3px" }}
-            />
-          </div>
-        </button>
-      )}
-    </div>
-  );
-}