@rxdrag/website-lib-core 0.0.52 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -35,8 +35,8 @@
     "lodash-es": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@rxdrag/entify-lib": "0.0.10",
-    "@rxdrag/rxcms-models": "0.3.78"
+    "@rxdrag/entify-lib": "0.0.11",
+    "@rxdrag/rxcms-models": "0.3.80"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/react/components/BackgroundVideoPlayer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, type VideoHTMLAttributes } from "react";
 
-export function VideoPlayer(props: VideoHTMLAttributes<HTMLVideoElement>) {
+export function BackgroundVideoPlayer(props: VideoHTMLAttributes<HTMLVideoElement>) {
   const { poster, src, className, ...restProps } = props;
   const videoRef = useRef<HTMLVideoElement>(null);
 

package/src/react/components/VideoPlayer.tsx

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

package/src/react/components/index.ts

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