@funhub/platform 0.2.30 → 0.2.31

package/dist/components/common/media-preview/index.mjs

@@ -1,2 +1,163 @@
 
-"use client";import{cn as e}from"../../../utils/cn.mjs";import{Image as t}from"../../ui/image.mjs";import{Carousel as n,CarouselContent as r,CarouselItem as i,CarouselNext as a,CarouselPrevious as o}from"../../ui/carousel.mjs";import{Dialog as s,DialogContent as c}from"../../ui/dialog.mjs";import{CloseIcon as l}from"../../../assets/icons/close-icon.mjs";import{useMediaPreviewStore as u}from"../../../store/modules/media-preview-store.mjs";import{VideoPlay as d}from"./video-play.mjs";import{useEffect as f,useRef as p,useState as m}from"react";import{jsx as h,jsxs as g}from"react/jsx-runtime";function _(){let{openWithMediaList:e,close:t,setOpen:n}=u();function r(t,n=0){e(t,n)}return{open:r,close:t,setOpen:n}}function v(_){let{className:v}=_,{isOpen:y,setOpen:b,close:x,mediaList:S,startIndex:C,setStartIndex:w}=u(),[T,E]=m(null),[D,O]=m(null),[k,A]=m(0),j=p(!1);if(f(()=>{y||!S.length||x()},[x,y,S.length]),f(()=>{y&&!j.current&&(O(C),A(e=>e+1)),!y&&j.current&&O(null),j.current=y},[y,S.length,C]),f(()=>{if(!y||!T||!S.length)return;let e=Math.min(Math.max(C,0),Math.max(S.length-1,0));T.selectedScrollSnap()!==e&&T.scrollTo(e,!0)},[T,y,C,S.length]),f(()=>{if(!T||!S.length||!y)return;function e(){T&&w(T.selectedScrollSnap())}return T.on(`select`,e),T.on(`reInit`,e),()=>{T.off(`select`,e),T.off(`reInit`,e)}},[T,y,w,S.length]),!S.length&&!y)return null;function M(e){if(e){b(!0);return}x()}function N(){x()}function P(e){e.stopPropagation()}return h(s,{open:y,onOpenChange:M,children:g(c,{showCloseButton:!1,className:e(`border-none z-[10000] flex h-screen w-screen max-w-none items-center justify-center rounded-none bg-black text-white`,v),onClick:P,children:[g(`div`,{className:`absolute left-0 right-0 w-full flex justify-between items-center top-[calc(env(safe-area-inset-top)+60px)] z-[999] rounded-full bg-black/60 px-3 py-1 text-xs text-white`,children:[h(`div`,{className:`text-white`,children:`${C+1}/${S.length}`}),h(l,{className:`h-[12px] w-[12px] text-white`,onClick:N})]}),g(n,{className:e(`w-full`),opts:{loop:!1,startIndex:C},setApi:E,children:[h(r,{className:`will-change-transform`,children:S.map((n,r)=>h(i,{className:`will-change-transform`,children:h(`div`,{className:`relative h-[70vh] w-full overflow-hidden rounded-lg will-change-transform transform-gpu`,children:n.type===`video`?h(d,{url:n.src,cover:n.cover,isActive:r===C,autoPlayMuted:n.autoPlayMuted,previewAutoPlay:y&&D===r,previewAutoPlaySeed:k},`${n.src}-${r}`):h(t,{src:n.src,alt:`预览`,fill:!0,className:e(`object-contain will-change-transform`)})})},`${n.src}-${r}`))}),h(o,{}),h(a,{})]})]})})}export{v as MediaPreview,_ as useMediaPreview};
+'use client';
+
+import { cn } from "../../../utils/cn.mjs";
+import { Image } from "../../ui/image.mjs";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../../ui/carousel.mjs";
+import { Dialog, DialogContent } from "../../ui/dialog.mjs";
+import { CloseIcon } from "../../../assets/icons/close-icon.mjs";
+import { useMediaPreviewStore } from "../../../store/modules/media-preview-store.mjs";
+import { VideoPlay } from "./video-play.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region components/common/media-preview/index.tsx
+/** 图片预览弹窗 hook，open 方法接收媒体列表。 */
+function useMediaPreview() {
+	const { openWithMediaList, close, setOpen } = useMediaPreviewStore();
+	/** 打开媒体预览弹窗并设置媒体列表。 */
+	function open(mediaList, startIndex = 0) {
+		openWithMediaList(mediaList, startIndex);
+	}
+	return {
+		open,
+		close,
+		setOpen
+	};
+}
+/** 图片预览弹窗：仅支持手动滑动。 */
+function MediaPreview(props) {
+	const { className } = props;
+	const { isOpen, setOpen, close, mediaList, startIndex, setStartIndex } = useMediaPreviewStore();
+	const [api, setApi] = useState(null);
+	const [openStartIndex, setOpenStartIndex] = useState(null);
+	const [openSequence, setOpenSequence] = useState(0);
+	const wasOpenRef = useRef(false);
+	/** 弹窗关闭后清理状态，避免复用上次位置。 */
+	useEffect(() => {
+		if (isOpen || !mediaList.length) return;
+		close();
+	}, [
+		close,
+		isOpen,
+		mediaList.length
+	]);
+	/**
+	* 记录弹窗首次打开时的索引，仅用于当次自动播放。
+	*/
+	useEffect(() => {
+		if (isOpen && !wasOpenRef.current) {
+			setOpenStartIndex(startIndex);
+			setOpenSequence((prev) => prev + 1);
+		}
+		if (!isOpen && wasOpenRef.current) setOpenStartIndex(null);
+		wasOpenRef.current = isOpen;
+	}, [
+		isOpen,
+		mediaList.length,
+		startIndex
+	]);
+	/** 同步弹窗打开后的初始索引。 */
+	useEffect(() => {
+		if (!isOpen || !api || !mediaList.length) return;
+		const safeIndex = Math.min(Math.max(startIndex, 0), Math.max(mediaList.length - 1, 0));
+		if (api.selectedScrollSnap() === safeIndex) return;
+		api.scrollTo(safeIndex, true);
+	}, [
+		api,
+		isOpen,
+		startIndex,
+		mediaList.length
+	]);
+	/** 监听轮播切换并更新索引展示。 */
+	useEffect(() => {
+		if (!api || !mediaList.length || !isOpen) return;
+		function handleSelect() {
+			if (!api) return;
+			setStartIndex(api.selectedScrollSnap());
+		}
+		api.on("select", handleSelect);
+		api.on("reInit", handleSelect);
+		return () => {
+			api.off("select", handleSelect);
+			api.off("reInit", handleSelect);
+		};
+	}, [
+		api,
+		isOpen,
+		setStartIndex,
+		mediaList.length
+	]);
+	if (!mediaList.length && !isOpen) return null;
+	/**
+	* 处理弹窗开关状态并清理数据。
+	*/
+	function handleOpenChange(open) {
+		if (open) {
+			setOpen(true);
+			return;
+		}
+		close();
+	}
+	function handleClose() {
+		close();
+	}
+	function handleMediaPreviewClick(e) {
+		e.stopPropagation();
+	}
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: false,
+			className: cn("border-none z-[10000] flex h-screen w-screen max-w-none items-center justify-center rounded-none bg-black text-white", className),
+			onClick: handleMediaPreviewClick,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "absolute left-0 right-0 w-full flex justify-between items-center top-[calc(env(safe-area-inset-top)+60px)] z-[999] rounded-full bg-black/60 px-3 py-1 text-xs text-white",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "text-white",
+					children: `${startIndex + 1}/${mediaList.length}`
+				}), /* @__PURE__ */ jsx(CloseIcon, {
+					className: "h-[12px] w-[12px] text-white",
+					onClick: handleClose
+				})]
+			}), /* @__PURE__ */ jsxs(Carousel, {
+				className: cn("w-full"),
+				opts: {
+					loop: false,
+					startIndex
+				},
+				setApi,
+				children: [
+					/* @__PURE__ */ jsx(CarouselContent, {
+						className: "will-change-transform",
+						children: mediaList.map((media, index) => /* @__PURE__ */ jsx(CarouselItem, {
+							className: "will-change-transform",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "relative h-[70vh] w-full overflow-hidden rounded-lg will-change-transform transform-gpu",
+								children: media.type === "video" ? /* @__PURE__ */ jsx(VideoPlay, {
+									url: media.src,
+									cover: media.cover,
+									isActive: index === startIndex,
+									autoPlayMuted: media.autoPlayMuted,
+									previewAutoPlay: isOpen && openStartIndex === index,
+									previewAutoPlaySeed: openSequence
+								}, `${media.src}-${index}`) : /* @__PURE__ */ jsx(Image, {
+									src: media.src,
+									alt: "预览",
+									fill: true,
+									className: cn("object-contain will-change-transform")
+								})
+							})
+						}, `${media.src}-${index}`))
+					}),
+					/* @__PURE__ */ jsx(CarouselPrevious, {}),
+					/* @__PURE__ */ jsx(CarouselNext, {})
+				]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { MediaPreview, useMediaPreview };

package/dist/components/common/media-preview/video-play.mjs

@@ -1,2 +1,238 @@
 
-import e from"../../../utils/get-res-url.mjs";import{Image as t}from"../../ui/image.mjs";import{Box as n}from"../../ui/box.mjs";import{useCallback as r,useEffect as i,useRef as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import c from"xgplayer";import l from"xgplayer-hls";function u({onClick:e}){return o(n,{className:`absolute top-0 left-0 w-full h-full flex items-center justify-center z-10`,onClick:e,children:o(n,{className:`w-[40px] h-[40px] bg-[rgba(0,0,0,.6)] rounded-full flex items-center justify-center`,children:o(`svg`,{xmlns:`http://www.w3.org/2000/svg`,className:`play xg-icon-play`,width:`28`,height:`40`,viewBox:`3 -4 28 40`,children:o(`path`,{fill:`#fff`,transform:`scale(0.0320625 0.0320625)`,d:`M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z`})})})})}async function d(){await import(`xgplayer/dist/index.min.css`)}function f(e){if(e){try{e.muted=!0}catch{}try{e.volume=0}catch{}try{let t=e.video;t&&(t.muted=!0)}catch{}}}function p(e){e&&(e.style.opacity=``,e.style.pointerEvents=``)}function m({url:m,cover:h,isActive:g,autoPlayMuted:_,previewAutoPlay:v,previewAutoPlaySeed:y}){let b=a(!0),x=a(null),S=a(null),C=a(null),w=a(null),T=a(!1),E=a(null);i(()=>(b.current=!0,()=>{b.current=!1}),[]);let D=r(()=>{p(C.current),p(w.current),x.current&&=(x.current.destroy(),null),T.current=!1},[]);i(()=>()=>{D()},[D]),i(()=>{g||D()},[D,g]);let O=r(t=>t.endsWith(`m3u8`)?`${process.env.NEXT_PUBLIC_API_BASE}/api/content/processM3u8?url=${encodeURIComponent(`${e()}/m3f/${t}`)}`:`${e()}${t.startsWith(`/`)?t:`/${t}`}`,[]),k=r(()=>{C.current&&(C.current.style.opacity=`0`,C.current.style.pointerEvents=`none`),w.current&&(w.current.style.opacity=`0`,w.current.style.pointerEvents=`none`)},[]),A=r(async e=>{if(x.current||T.current)return;let t=S.current;if(t){T.current=!0,k();try{if(await d(),!b.current)return;let n=O(m),r=m.endsWith(`m3u8`);x.current=new c({el:t,url:n,autoplay:!0,width:`100%`,height:`100%`,volume:e.preferMuted?0:1,controls:!0,preload:`auto`,playbackRate:[],autoplayMuted:e.preferMuted,playsinline:!0,webkitPlaysInline:!0,closeVideoPreventDefault:!0,enableVideoDbltouch:!1,lang:`zh-cn`,...r?{plugins:[l]}:{},mobile:{disablePress:!0,pressRate:2,gestureX:!1,gestureY:!1}});try{let t=x.current?.play?.();t&&typeof t.catch==`function`&&t.catch(()=>{e.allowMutedFallback&&(f(x.current),x.current?.play?.().catch(()=>{}))})}catch{if(!e.allowMutedFallback)return;f(x.current);try{x.current?.play?.()}catch{}}}finally{T.current=!1}}},[O,k,m]),j=r(e=>{A({preferMuted:!!e?.preferMuted,allowMutedFallback:!!e?.allowMutedFallback})},[A]);return i(()=>{v&&g&&y!=null&&E.current!==y&&(E.current=y,A({preferMuted:!!_,allowMutedFallback:!_}))},[_,g,v,y,A]),s(n,{className:`relative w-full h-full`,children:[o(n,{className:`absolute bottom-0 left-0 w-full h-full bg-[rgba(0,0,0)] flex items-center justify-center z-10`,children:o(`div`,{className:`w-full h-full`,ref:S})}),o(`div`,{ref:C,className:`absolute bottom-0 left-0 w-full h-full z-20`,children:o(t,{src:h||``,alt:`cover`,fill:!0})}),o(`div`,{ref:w,className:`absolute bottom-0 left-0 w-full h-full z-30`,children:o(u,{onClick:j})})]})}export{m as VideoPlay};
+import getResUrl from "../../../utils/get-res-url.mjs";
+import { Image } from "../../ui/image.mjs";
+import { Box } from "../../ui/box.mjs";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Player from "xgplayer";
+import Hls from "xgplayer-hls";
+
+//#region components/common/media-preview/video-play.tsx
+/**
+* 预览弹窗播放按钮图标。
+*/
+function VideoPlayIcon({ onClick }) {
+	return /* @__PURE__ */ jsx(Box, {
+		className: "absolute top-0 left-0 w-full h-full flex items-center justify-center z-10",
+		onClick,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "w-[40px] h-[40px] bg-[rgba(0,0,0,.6)] rounded-full flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				className: "play xg-icon-play",
+				width: "28",
+				height: "40",
+				viewBox: "3 -4 28 40",
+				children: /* @__PURE__ */ jsx("path", {
+					fill: "#fff",
+					transform: "scale(0.0320625 0.0320625)",
+					d: "M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"
+				})
+			})
+		})
+	});
+}
+/**
+* 异步加载播放器样式，避免提前触发 preload 警告。
+*/
+async function ensurePlayerStyles() {
+	await import("xgplayer/dist/index.min.css");
+}
+/**
+* 设置播放器静音状态并降低音量。
+*/
+function applyMutedSettings(target) {
+	if (!target) return;
+	try {
+		target.muted = true;
+	} catch {}
+	try {
+		target.volume = 0;
+	} catch {}
+	try {
+		const video = target.video;
+		if (video) video.muted = true;
+	} catch {}
+}
+/**
+* 重置覆盖层样式，用于切换媒体/关闭弹窗后的复位。
+*/
+function resetOverlayStyle(target) {
+	if (!target) return;
+	target.style.opacity = "";
+	target.style.pointerEvents = "";
+}
+/**
+* 预览弹窗视频播放组件。
+*/
+function VideoPlay({ url, cover, isActive, autoPlayMuted, previewAutoPlay, previewAutoPlaySeed }) {
+	const isMountedRef = useRef(true);
+	const playerRef = useRef(null);
+	const playerBoxRef = useRef(null);
+	const coverBoxRef = useRef(null);
+	const iconBoxRef = useRef(null);
+	const startingRef = useRef(false);
+	const lastPreviewAutoPlaySeedRef = useRef(null);
+	/**
+	* 记录组件挂载状态，便于控制异步初始化。
+	*/
+	useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	const cleanupPlayer = useCallback(() => {
+		resetOverlayStyle(coverBoxRef.current);
+		resetOverlayStyle(iconBoxRef.current);
+		if (playerRef.current) {
+			playerRef.current.destroy();
+			playerRef.current = null;
+		}
+		startingRef.current = false;
+	}, []);
+	useEffect(() => {
+		return () => {
+			cleanupPlayer();
+		};
+	}, [cleanupPlayer]);
+	/**
+	* 非激活态时确保播放器释放，避免轮播切换后后台继续占用资源。
+	*/
+	useEffect(() => {
+		if (isActive) return;
+		cleanupPlayer();
+	}, [cleanupPlayer, isActive]);
+	/**
+	* 处理视频地址。
+	*/
+	const handleUrl = useCallback((url) => {
+		if (url.endsWith("m3u8")) return `${process.env.NEXT_PUBLIC_API_BASE}/api/content/processM3u8?url=${encodeURIComponent(`${getResUrl()}/m3f/${url}`)}`;
+		else return `${getResUrl()}${url.startsWith("/") ? url : `/${url}`}`;
+	}, []);
+	/**
+	* 隐藏封面与播放按钮（避免即使 state 未提交也能看到播放器）。
+	*/
+	const hideOverlay = useCallback(() => {
+		if (coverBoxRef.current) {
+			coverBoxRef.current.style.opacity = "0";
+			coverBoxRef.current.style.pointerEvents = "none";
+		}
+		if (iconBoxRef.current) {
+			iconBoxRef.current.style.opacity = "0";
+			iconBoxRef.current.style.pointerEvents = "none";
+		}
+	}, []);
+	/**
+	* 直接初始化播放器（不依赖 isPlaying 重新渲染来“挂载容器”）。
+	*/
+	const startPlayer = useCallback(async (options) => {
+		if (playerRef.current || startingRef.current) return;
+		const container = playerBoxRef.current;
+		if (!container) return;
+		startingRef.current = true;
+		hideOverlay();
+		try {
+			await ensurePlayerStyles();
+			if (!isMountedRef.current) return;
+			const src = handleUrl(url);
+			const shouldUseHls = url.endsWith("m3u8");
+			playerRef.current = new Player({
+				el: container,
+				url: src,
+				autoplay: true,
+				width: "100%",
+				height: "100%",
+				volume: options.preferMuted ? 0 : 1,
+				controls: true,
+				preload: "auto",
+				playbackRate: [],
+				autoplayMuted: options.preferMuted,
+				playsinline: true,
+				webkitPlaysInline: true,
+				closeVideoPreventDefault: true,
+				enableVideoDbltouch: false,
+				lang: "zh-cn",
+				...shouldUseHls ? { plugins: [Hls] } : {},
+				mobile: {
+					disablePress: true,
+					pressRate: 2,
+					gestureX: false,
+					gestureY: false
+				}
+			});
+			try {
+				const playResult = playerRef.current?.play?.();
+				if (playResult && typeof playResult.catch === "function") playResult.catch(() => {
+					if (!options.allowMutedFallback) return;
+					applyMutedSettings(playerRef.current);
+					playerRef.current?.play?.().catch(() => {});
+				});
+			} catch {
+				if (!options.allowMutedFallback) return;
+				applyMutedSettings(playerRef.current);
+				try {
+					playerRef.current?.play?.();
+				} catch {}
+			}
+		} finally {
+			startingRef.current = false;
+		}
+	}, [
+		handleUrl,
+		hideOverlay,
+		url
+	]);
+	const handleVideoPlay = useCallback((options) => {
+		startPlayer({
+			preferMuted: Boolean(options?.preferMuted),
+			allowMutedFallback: Boolean(options?.allowMutedFallback)
+		});
+	}, [startPlayer]);
+	/**
+	* 预览弹窗打开时，仅对初始索引视频自动播放一次。
+	*/
+	useEffect(() => {
+		if (!(Boolean(previewAutoPlay) && Boolean(isActive) && previewAutoPlaySeed != null && lastPreviewAutoPlaySeedRef.current !== previewAutoPlaySeed)) return;
+		lastPreviewAutoPlaySeedRef.current = previewAutoPlaySeed;
+		startPlayer({
+			preferMuted: Boolean(autoPlayMuted),
+			allowMutedFallback: !autoPlayMuted
+		});
+	}, [
+		autoPlayMuted,
+		isActive,
+		previewAutoPlay,
+		previewAutoPlaySeed,
+		startPlayer
+	]);
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "relative w-full h-full",
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				className: "absolute bottom-0 left-0 w-full h-full bg-[rgba(0,0,0)] flex items-center justify-center z-10",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full h-full",
+					ref: playerBoxRef
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: coverBoxRef,
+				className: "absolute bottom-0 left-0 w-full h-full z-20",
+				children: /* @__PURE__ */ jsx(Image, {
+					src: cover || "",
+					alt: "cover",
+					fill: true
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: iconBoxRef,
+				className: "absolute bottom-0 left-0 w-full h-full z-30",
+				children: /* @__PURE__ */ jsx(VideoPlayIcon, { onClick: handleVideoPlay })
+			})
+		]
+	});
+}
+
+//#endregion
+export { VideoPlay };

package/dist/components/common/page-loading/index.mjs

@@ -1,2 +1,21 @@
 
-import{Image as e}from"../../ui/image.mjs";import{Box as t}from"../../ui/box.mjs";import{jsx as n}from"react/jsx-runtime";function r({className:r}){return n(t,{className:`page-loading-box w-full h-full flex items-center justify-center ${r}`,children:n(t,{className:`w-[40px] h-[40px] relative`,children:n(e,{src:`/images/common/page_loading.gif`,fill:!0})})})}export{r as default};
+import { Image } from "../../ui/image.mjs";
+import { Box } from "../../ui/box.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/common/page-loading/index.tsx
+function PageLoading({ className }) {
+	return /* @__PURE__ */ jsx(Box, {
+		className: `page-loading-box w-full h-full flex items-center justify-center ${className}`,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "w-[40px] h-[40px] relative",
+			children: /* @__PURE__ */ jsx(Image, {
+				src: "/images/common/page_loading.gif",
+				fill: true
+			})
+		})
+	});
+}
+
+//#endregion
+export { PageLoading as default };

package/dist/components/common/page-skeleton/page-skeleton.mjs

@@ -1,2 +1,8 @@
 
-function e(){return null}export{e as PageSkeleton};
+//#region components/common/page-skeleton/page-skeleton.tsx
+function PageSkeleton() {
+	return null;
+}
+
+//#endregion
+export { PageSkeleton };