@funhub/platform 0.2.16 → 0.2.18

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

@@ -1,163 +1,2 @@
 
-'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 };
+"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};

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

@@ -1,238 +1,2 @@
 
-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 };
+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};

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

@@ -1,21 +1,2 @@
 
-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 };
+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};

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

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