@rxdrag/website-lib-core 0.0.64 → 0.0.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,9 +24,9 @@
     "@types/react-dom": "^19.1.0",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.12",
+    "@rxdrag/slate-preview": "1.2.58",
     "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/slate-preview": "1.2.58"
+    "@rxdrag/eslint-config-custom": "0.2.12"
   },
   "dependencies": {
     "clsx": "^2.1.0",

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

@@ -14,164 +14,200 @@ export interface TelInputProps
   labelClassName?: string;
   inputClassName?: string;
   countries?: CountryDial[];
+  selectPlaceholder?: string;
 }
 
-export const TelInput2 = forwardRef<HTMLInputElement, TelInputProps>((props, ref) => {
-  const {
-    label,
-    name,
-    required,
-    requiredClassName,
-    className,
-    labelClassName,
-    inputClassName,
-    countries,
-    placeholder,
-    value,
-    onChange,
-  } = props;
+export const TelInput2 = forwardRef<HTMLInputElement, TelInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries,
+      placeholder,
+      selectPlaceholder,
+      value,
+      onChange,
+    } = props;
 
-  const { labelRef, paddingLeft } = useInlineLabelPadding(16);
-  const {
-    allCountries,
-    selected,
-    localNumber,
-    onSelectCountry,
-    onChangeLocal,
-  } = useTelControl({ countries, name, value, onChange });
+    const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+    const {
+      allCountries,
+      selected,
+      localNumber,
+      onSelectCountry,
+      onChangeLocal,
+    } = useTelControl({ countries, name, value, onChange });
 
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  const panelRef = useRef<HTMLDivElement | null>(null);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
 
-  const filtered = useMemo(() => {
-    if (!query) return allCountries;
-    const q = query.toLowerCase();
-    return allCountries.filter(
-      (c) =>
-        c.name.toLowerCase().includes(q) ||
-        (c.region && c.region.toLowerCase().includes(q)) ||
-        c.dialCode.replace("+", "").includes(q.replace("+", ""))
-    );
-  }, [allCountries, query]);
-
-  useEffect(() => {
-    const onDocClick = (e: MouseEvent) => {
-      const target = e.target as Node;
-      if (
-        open &&
-        panelRef.current &&
-        !panelRef.current.contains(target) &&
-        buttonRef.current &&
-        !buttonRef.current.contains(target)
-      ) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", onDocClick);
-    return () => document.removeEventListener("mousedown", onDocClick);
-  }, [open]);
+    const filtered = useMemo(() => {
+      if (!query) return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c) =>
+          c.name.toLowerCase().includes(q) ||
+          (c.region && c.region.toLowerCase().includes(q)) ||
+          c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
 
-  return (
-    <div className={clsx("relative w-full", className)}>
-      <label
-        ref={labelRef}
-        htmlFor={name}
-        className={clsx(
-          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
-          labelClassName
-        )}
-      >
-        {label}
-        {required ? <span className={requiredClassName}>*</span> : null}
-      </label>
+    useEffect(() => {
+      const onDocClick = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (
+          open &&
+          panelRef.current &&
+          !panelRef.current.contains(target) &&
+          buttonRef.current &&
+          !buttonRef.current.contains(target)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
 
-      <div
-        className={clsx(
-          "flex h-10 items-center gap-2 rounded-md shadow-sm focus-within:ring-2 focus-within:ring-primary-300",
-          inputClassName
-        )}
-        style={{ paddingLeft }}
-      >
-        <div className="relative h-full">
-          <button
-            ref={buttonRef}
-            type="button"
-            aria-haspopup="listbox"
-            aria-expanded={open}
-            onClick={() => setOpen((v) => !v)}
-            className={"h-full min-w-[100px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"}
-          >
-            <span className="truncate text-left leading-tight">
-              {selected ? (
-                <span className="font-medium">{selected.dialCode}</span>
-              ) : (
-                <span className="text-gray-500">+ Code</span>
-              )}
-            </span>
-            <svg className="ml-2 h-4 w-4 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z" clipRule="evenodd" />
-            </svg>
-          </button>
+    return (
+      <div className={clsx("relative w-full", className)}>
+        <label
+          ref={labelRef}
+          htmlFor={name}
+          className={clsx(
+            "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+            labelClassName
+          )}
+        >
+          {label}
+          {required ? <span className={requiredClassName}>*</span> : null}
+        </label>
 
-          {open ? (
-            <div ref={panelRef} className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg">
-              <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
-                <input
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder="Enter Country/Region"
-                  className="h-8 w-full bg-transparent text-sm outline-none"
+        <div
+          className={clsx(
+            "flex h-10 items-center gap-2 rounded-md shadow-sm focus-within:ring-2 focus-within:ring-primary-300",
+            inputClassName
+          )}
+          style={{ paddingLeft }}
+        >
+          <div className="relative h-full">
+            <button
+              ref={buttonRef}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className={
+                "h-full min-w-[100px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
+              }
+            >
+              <span className="truncate text-left leading-tight">
+                {selected ? (
+                  <span className="font-medium">{selected.dialCode}</span>
+                ) : (
+                  <span className="text-gray-500">+ Code</span>
+                )}
+              </span>
+              <svg
+                className="ml-2 h-4 w-4 text-gray-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
+                  clipRule="evenodd"
                 />
-                <svg className="h-4 w-4 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fillRule="evenodd" d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z" clipRule="evenodd" />
-                </svg>
-              </div>
+              </svg>
+            </button>
 
-              <div className="mt-2 max-h-64 overflow-auto pr-1">
-                {filtered.map((c) => (
-                  <button
-                    key={c.code}
-                    type="button"
-                    onClick={() => {
-                      onSelectCountry(c);
-                      setOpen(false);
-                    }}
-                    className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+            {open ? (
+              <div
+                ref={panelRef}
+                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
+              >
+                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                  <input
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder={selectPlaceholder || "Enter Country/Region"}
+                    className="h-8 w-full bg-transparent text-sm outline-none"
+                  />
+                  <svg
+                    className="h-4 w-4 text-gray-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
                   >
-                    <span className={clsx("inline-block h-3 w-3 rounded-full border", selected?.code === c.code ? "border-primary-500 ring-4 ring-primary-200" : "border-gray-400")}></span>
-                    <span className="flex-1 truncate">
-                      {c.name}
-                      {c.region ? <span className="text-gray-500">, {c.region}</span> : null}
-                    </span>
-                    <span className="text-gray-700">{c.dialCode}</span>
-                  </button>
-                ))}
+                    <path
+                      fillRule="evenodd"
+                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+
+                <div className="mt-2 max-h-64 overflow-auto pr-1">
+                  {filtered.map((c) => (
+                    <button
+                      key={c.code}
+                      type="button"
+                      onClick={() => {
+                        onSelectCountry(c);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span
+                        className={clsx(
+                          "inline-block h-3 w-3 rounded-full border",
+                          selected?.code === c.code
+                            ? "border-primary-500 ring-4 ring-primary-200"
+                            : "border-gray-400"
+                        )}
+                      ></span>
+                      <span className="flex-1 truncate">
+                        {c.name}
+                        {c.region ? (
+                          <span className="text-gray-500">, {c.region}</span>
+                        ) : null}
+                      </span>
+                      <span className="text-gray-700">{c.dialCode}</span>
+                    </button>
+                  ))}
+                </div>
               </div>
-            </div>
-          ) : null}
-        </div>
+            ) : null}
+          </div>
 
-        <input
-          ref={ref}
-          id={name}
-          name={name}
-          required={required}
-          placeholder={placeholder || "Phone number"}
-          inputMode="tel"
-          className={clsx(
-            "h-10 w-full appearance-none rounded-md border-0 bg-transparent px-3 py-0 text-sm leading-tight focus:outline-none",
-          )}
-          value={localNumber}
-          onChange={(e) => onChangeLocal(e.target.value)}
-          autoComplete={name}
-          autoCorrect="off"
-          spellCheck={false}
-        />
+          <input
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            placeholder={placeholder || "Phone number"}
+            inputMode="tel"
+            className={clsx(
+              "h-10 w-full appearance-none rounded-md border-0 bg-transparent px-3 py-0 text-sm leading-tight focus:outline-none"
+            )}
+            value={localNumber}
+            onChange={(e) => onChangeLocal(e.target.value)}
+            autoComplete={name}
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 export default TelInput2;

package/src/react/components/ReactModalTrigger.tsx

@@ -0,0 +1,44 @@
+import { useRef } from "react";
+import {
+  DATA_POPUP_CTA,
+  DATA_OPENABLE_ROLE,
+  OpenAble,
+  DATA_OPENABLE,
+  popover,
+} from "../../controller";
+
+export function ReactModalTrigger(props: {
+  className?: string;
+  openableKey?: string;
+  callToAction?: string;
+  children?: React.ReactNode;
+}) {
+  const {
+    className,
+    callToAction,
+    openableKey = "enquiry-modal",
+    children,
+  } = props;
+  const ref = useRef<HTMLButtonElement>(null);
+  const roleProps = {
+    [DATA_POPUP_CTA]: callToAction,
+    [DATA_OPENABLE_ROLE]: OpenAble.ModalTrigger,
+    [DATA_OPENABLE]: openableKey,
+  };
+
+  const handleClick = () => {
+    if (ref.current) {
+      popover.open(openableKey, ref.current);
+    }
+  };
+  return (
+    <button
+      ref={ref}
+      {...roleProps}
+      className={className}
+      onClick={handleClick}
+    >
+      {children || "Get a quote"}
+    </button>
+  );
+}

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/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>
-  );
-}