@rxdrag/website-lib-core 0.0.127 → 0.0.128

package/src/react/components/Medias/VideoPlayer.tsx

@@ -1,114 +1,114 @@
-import { Media } from "@rxdrag/rxcms-models";
-import React, { useEffect, useRef, useState } from "react";
-import Hls from "hls.js";
-import clsx from "clsx";
-
-export function VideoPlayer(props: {
-  media: Media;
-  size?: "normal" | "small";
-  playButtonClass?: string;
-}) {
-  const { media, size = "normal", playButtonClass } = props;
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const hlsRef = useRef<Hls | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  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);
-
-    if (media.storageType === "cloudflare_stream") {
-      if (!Hls.isSupported()) {
-        if (video.canPlayType("application/vnd.apple.mpegurl")) {
-          video.src = videoUrl;
-        }
-      } else {
-        const hls = new Hls({
-          enableWorker: true,
-        });
-
-        hls.loadSource(videoUrl);
-        hls.attachMedia(video);
-        hlsRef.current = hls;
-      }
-    } else {
-      video.src = videoUrl;
-    }
-
-    return () => {
-      video.removeEventListener("play", handlePlay);
-      video.removeEventListener("pause", handlePause);
-      if (hlsRef.current) {
-        hlsRef.current.destroy();
-        hlsRef.current = null;
-      }
-    };
-  }, [media.file?.original, media.storageType]);
-
-  return (
-    <div className="relative w-full h-full group cursor-pointer" onClick={handlePlayClick}>
-      <video
-        ref={videoRef}
-        preload="metadata"
-        poster={media.file?.thumbnail}
-        className="absolute inset-0 w-full h-full object-cover"
-        controls={false} 
-        playsInline
-      />
-      {!isPlaying && (
-        <div className="absolute inset-0 flex items-center justify-center z-10 bg-black/10 group-hover:bg-black/20 transition-colors">
-          <div
-            className={clsx(
-              "rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow-lg transition-all hover:scale-110 backdrop-blur-sm",
-              size === "small" ? "w-8 h-8" : "w-14 h-14",
-              playButtonClass
-            )}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              className={clsx(
-                "text-gray-900 ml-1",
-                size === "small" ? "w-4 h-4" : "w-8 h-8"
-              )}
-            >
-              <path
-                fillRule="evenodd"
-                d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.248L7.28 19.987C6.03 20.673 4.5 19.77 4.5 18.562V5.653z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+import { Media } from "@rxdrag/rxcms-models";
+import React, { useEffect, useRef, useState } from "react";
+import Hls from "hls.js";
+import clsx from "clsx";
+
+export function VideoPlayer(props: {
+  media: Media;
+  size?: "normal" | "small";
+  playButtonClass?: string;
+}) {
+  const { media, size = "normal", playButtonClass } = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const hlsRef = useRef<Hls | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  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);
+
+    if (media.storageType === "cloudflare_stream") {
+      if (!Hls.isSupported()) {
+        if (video.canPlayType("application/vnd.apple.mpegurl")) {
+          video.src = videoUrl;
+        }
+      } else {
+        const hls = new Hls({
+          enableWorker: true,
+        });
+
+        hls.loadSource(videoUrl);
+        hls.attachMedia(video);
+        hlsRef.current = hls;
+      }
+    } else {
+      video.src = videoUrl;
+    }
+
+    return () => {
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, [media.file?.original, media.storageType]);
+
+  return (
+    <div className="relative w-full h-full group cursor-pointer" onClick={handlePlayClick}>
+      <video
+        ref={videoRef}
+        preload="metadata"
+        poster={media.file?.thumbnail}
+        className="absolute inset-0 w-full h-full object-cover"
+        controls={false} 
+        playsInline
+      />
+      {!isPlaying && (
+        <div className="absolute inset-0 flex items-center justify-center z-10 bg-black/10 group-hover:bg-black/20 transition-colors">
+          <div
+            className={clsx(
+              "rounded-full bg-white/90 hover:bg-white flex items-center justify-center shadow-lg transition-all hover:scale-110 backdrop-blur-sm",
+              size === "small" ? "w-8 h-8" : "w-14 h-14",
+              playButtonClass
+            )}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className={clsx(
+                "text-gray-900 ml-1",
+                size === "small" ? "w-4 h-4" : "w-8 h-8"
+              )}
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.248L7.28 19.987C6.03 20.673 4.5 19.77 4.5 18.562V5.653z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}