@funhub/platform 0.1.127 → 0.1.130

package/dist/components/common/list/video-list/video-list-item.mjs

@@ -1,2 +1,105 @@
 
-"use client";import{cn as e}from"../../../../utils/cn.mjs";import{Image as t}from"../../../ui/image.mjs";import{Box as n}from"../../../ui/box.mjs";import{Checkbox as r}from"../../../ui/checkbox.mjs";import{Text as i}from"../../../ui/text.mjs";import{VideoIcon as a}from"../../icons/video.mjs";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useTranslations as c}from"next-intl";import{isNil as l}from"lodash-es";function u(e){let t=Number.isFinite(e)?Math.max(0,e):0;return t<1e3?String(Math.floor(t)):t<1e6?`${(Math.floor(t/100)/10).toFixed(1)}K`:`${(Math.floor(t/1e5)/10).toFixed(1)}M`}function d(e){let t=Number.isFinite(e)?Math.max(0,Math.floor(e)):0;if(t<=0)return``;let n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=t%60,a=e=>String(e).padStart(2,`0`);return n>0?`${a(n)}:${a(r)}:${a(i)}`:`${a(r)}:${a(i)}`}function f(f){let p=c(`components.ui.list.videoList`),{title:m,coverImage:h,duration:g,progress:_=0,seriesNum:v=1,authorName:y,viewCount:b,is_more_link:x,showVideoProgress:S,isEditMode:C=!1,isSelected:w=!1,onToggle:T}=f,E=p(x?`videoListItem.series`:`videoListItem.movie`),D=d(g);return s(n,{className:`flex items-start gap-2 py-1.5`,children:[C&&o(n,{className:`shrink-0 self-center  `,children:o(r,{checked:w,onCheckedChange:T})}),s(n,{className:`flex-1 h-22 min-w-0 flex items-center gap-[9px]`,children:[s(n,{className:`relative w-35.5 h-20 shrink-0 rounded-lg overflow-hidden `,children:[l(x)?null:o(n,{className:`absolute z-[2] bottom-1 left-1 rounded-xs bg-black/60 px-1 text-[10px] text-white`,children:o(i,{children:E})}),D?o(n,{className:`absolute z-[2] bottom-1 right-1 rounded-xs bg-black/60 px-1 text-[10px] text-white`,children:o(i,{children:D})}):null,o(t,{src:h||`/empty/default-cover.png`,alt:m||p(`videoListItem.coverAlt`),fill:!0,className:`object-cover`})]}),s(n,{className:`flex-1 min-w-0 flex flex-col justify-between py-1.5`,children:[o(i,{className:`text-base text-text1 line-clamp-2 leading-5`,children:m}),s(n,{className:e(`flex-1`,{invisible:!S}),children:[x&&v>=1?`第${v}集 · `:``,p(`videoListItem.watchUntil`),_,`%`]}),o(n,{className:`flex text-text1/33 h-[1em] items-center justify-between text-sm `,children:s(n,{className:`flex items-center gap-1`,children:[o(a,{className:`size-3.5`,"aria-hidden":`true`}),o(i,{children:u(b)})]})})]})]})]})}export{f as VideoListItem};
+'use client';
+
+import { cn } from "../../../../utils/cn.mjs";
+import { Image } from "../../../ui/image.mjs";
+import { Box } from "../../../ui/box.mjs";
+import { Checkbox } from "../../../ui/checkbox.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { VideoIcon } from "../../icons/video.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { isNil } from "lodash-es";
+
+//#region components/common/list/video-list/video-list-item.tsx
+const K_THRESHOLD = 1e3;
+const M_THRESHOLD = 1e6;
+/**
+* 将播放量格式化为 K / M 简写。
+*/
+function formatPlayCount(value) {
+	const resolvedValue = Number.isFinite(value) ? Math.max(0, value) : 0;
+	if (resolvedValue < K_THRESHOLD) return String(Math.floor(resolvedValue));
+	if (resolvedValue < M_THRESHOLD) return `${(Math.floor(resolvedValue / 100) / 10).toFixed(1)}K`;
+	return `${(Math.floor(resolvedValue / 1e5) / 10).toFixed(1)}M`;
+}
+/**
+* 将视频时长（秒）格式化为 HH:MM:SS 或 MM:SS。
+*/
+function formatVideoDuration(value) {
+	const resolvedSeconds = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+	if (resolvedSeconds <= 0) return "";
+	const hours = Math.floor(resolvedSeconds / 3600);
+	const minutes = Math.floor(resolvedSeconds % 3600 / 60);
+	const seconds = resolvedSeconds % 60;
+	const formatPart = (num) => String(num).padStart(2, "0");
+	if (hours > 0) return `${formatPart(hours)}:${formatPart(minutes)}:${formatPart(seconds)}`;
+	return `${formatPart(minutes)}:${formatPart(seconds)}`;
+}
+function VideoListItem(props) {
+	const t = useTranslations("components.ui.list.videoList");
+	const { title, coverImage, duration, progress = 0, seriesNum = 1, authorName: _authorName, viewCount, is_more_link, showVideoProgress, isEditMode = false, isSelected = false, onToggle } = props;
+	const videoTypeLabel = is_more_link ? t("videoListItem.series") : t("videoListItem.movie");
+	const videoDurationLabel = formatVideoDuration(duration);
+	return /* @__PURE__ */ jsxs(Box, {
+		className: "flex items-start gap-2 py-1.5",
+		children: [isEditMode && /* @__PURE__ */ jsx(Box, {
+			className: "shrink-0 self-center  ",
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: isSelected,
+				onCheckedChange: onToggle
+			})
+		}), /* @__PURE__ */ jsxs(Box, {
+			className: "flex-1 h-22 min-w-0 flex items-center gap-[9px]",
+			children: [/* @__PURE__ */ jsxs(Box, {
+				className: "relative w-35.5 h-20 shrink-0 rounded-lg overflow-hidden ",
+				children: [
+					!isNil(is_more_link) ? /* @__PURE__ */ jsx(Box, {
+						className: "absolute z-[2] bottom-1 left-1 rounded-xs bg-black/60 px-1 text-[10px] text-white",
+						children: /* @__PURE__ */ jsx(Text, { children: videoTypeLabel })
+					}) : null,
+					videoDurationLabel ? /* @__PURE__ */ jsx(Box, {
+						className: "absolute z-[2] bottom-1 right-1 rounded-xs bg-black/60 px-1 text-[10px] text-white",
+						children: /* @__PURE__ */ jsx(Text, { children: videoDurationLabel })
+					}) : null,
+					/* @__PURE__ */ jsx(Image, {
+						src: coverImage || "/empty/default-cover.png",
+						alt: title || t("videoListItem.coverAlt"),
+						fill: true,
+						className: "object-cover"
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Box, {
+				className: "flex-1 min-w-0 flex flex-col justify-between py-1.5",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						className: "text-base text-text1 line-clamp-2 leading-5",
+						children: title
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						className: cn("flex-1", { invisible: !showVideoProgress }),
+						children: [
+							is_more_link && seriesNum >= 1 ? `第${seriesNum}集 · ` : "",
+							t("videoListItem.watchUntil"),
+							progress,
+							"%"
+						]
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						className: "flex text-text1/33 h-[1em] items-center justify-between text-sm ",
+						children: /* @__PURE__ */ jsxs(Box, {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsx(VideoIcon, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ jsx(Text, { children: formatPlayCount(viewCount) })]
+						})
+					})
+				]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { VideoListItem };

package/dist/components/common/list/video-list/video-list.mjs

@@ -1,2 +1,153 @@
 
-"use client";import{Box as e}from"../../../ui/box.mjs";import{List as t}from"../../../ui/list.mjs";import{Text as n}from"../../../ui/text.mjs";import{normalizeTimeToMilliseconds as r}from"../../../ui/time.mjs";import{VideoListItemSkeleton as i}from"../../skeleton/video-list-item-skeleton.mjs";import{VideoListItem as a}from"./video-list-item.mjs";import{useIsClient as o}from"foxact/use-is-client";import{useMemo as s}from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{useTranslations as d}from"next-intl";import f from"next/link";import{orderBy as p}from"lodash-es";function m(e){let t=r(e);if(!t)return!1;let n=new Date(t),i=new Date;return n.getFullYear()===i.getFullYear()&&n.getMonth()===i.getMonth()&&n.getDate()===i.getDate()}function h(e){let t=r(e);if(!t)return!1;let n=new Date(t),i=new Date;return i.setDate(i.getDate()-1),n.getFullYear()===i.getFullYear()&&n.getMonth()===i.getMonth()&&n.getDate()===i.getDate()}function g(r){let g=d(`components.ui.list`),_=o(),{list:v,showVideoProgress:y,loading:b,hasMore:x=!1,loadMore:S,isEditMode:C,selectedIds:w,onToggleSelection:T,emptyText:E}=r,D=s(()=>p(v,[`publishTime`],[`desc`]),[v]),{todayList:O,yesterdayList:k,earlierList:A}=s(()=>{if(!_)return{todayList:[],yesterdayList:[],earlierList:D};let e=[],t=[],n=[];for(let r of v)m(r.publishTime)?e.push(r):h(r.publishTime)?t.push(r):n.push(r);return{todayList:p(e,[`publishTime`],[`desc`]),yesterdayList:p(t,[`publishTime`],[`desc`]),earlierList:p(n,[`publishTime`],[`desc`])}},[_,v,D]),j=!!b&&v.length===0,M=_;return j?l(e,{className:`bg-bg1`,children:Array.from({length:6}).map((e,t)=>l(i,{isEditMode:C,showVideoProgress:y},`video-list-item-skeleton-${t}`))}):u(t,{loading:b,loadMore:S,hasMore:x,empty:`no-content`,emptyText:E||g(`videoList.empty`),children:[M&&O.length>0&&u(c,{children:[l(e,{className:`  `,children:l(n,{className:`text-lg  text-text1`,children:g(`videoList.today`)})}),O.map(e=>C?l(a,{showVideoProgress:y,isEditMode:C,isSelected:w?.has(e.id),...e,onToggle:()=>T?.(e.id)},e.id):l(f,{href:`/video/${e.id}/${e.title}`,children:l(a,{showVideoProgress:y,isEditMode:C,isSelected:w?.has(e.id),...e,onToggle:()=>T?.(e.id)},e.id)},e.id))]}),M&&k.length>0&&u(c,{children:[l(e,{className:`  `,children:l(n,{className:`text-lg  text-text1`,children:g(`videoList.yesterday`)})}),k.map(e=>C?l(a,{showVideoProgress:y,isEditMode:C,isSelected:w?.has(e.id),...e,onToggle:()=>T?.(e.id)},e.id):l(f,{href:`/video/${e.id}/${e.title}`,children:l(a,{showVideoProgress:y,isEditMode:C,isSelected:w?.has(e.id),...e,onToggle:()=>T?.(e.id)},e.id)},e.id))]}),A.length>0&&u(c,{children:[l(e,{className:`  `,children:l(n,{className:`text-lg  text-text1`,children:g(`videoList.earlier`)})}),A.map(e=>C?l(a,{showVideoProgress:y,isEditMode:C,isSelected:w?.has(e.id),...e,onToggle:()=>T?.(e.id)},e.id):l(f,{href:`/video/${e.id}/${e.title}`,children:l(a,{showVideoProgress:y,isEditMode:C,isSelected:w?.has(e.id),...e,onToggle:()=>T?.(e.id)},e.id)},e.id))]})]})}export{g as VideoList};
+'use client';
+
+import { Box } from "../../../ui/box.mjs";
+import { List } from "../../../ui/list.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { normalizeTimeToMilliseconds } from "../../../ui/time.mjs";
+import { VideoListItemSkeleton } from "../../skeleton/video-list-item-skeleton.mjs";
+import { VideoListItem } from "./video-list-item.mjs";
+import { useIsClient } from "foxact/use-is-client";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { orderBy } from "lodash-es";
+
+//#region components/common/list/video-list/video-list.tsx
+const DEFAULT_SKELETON_COUNT = 6;
+/** 判断时间戳是否是今天 */
+function isToday(timestamp) {
+	const milliseconds = normalizeTimeToMilliseconds(timestamp);
+	if (!milliseconds) return false;
+	const date = new Date(milliseconds);
+	const today = /* @__PURE__ */ new Date();
+	return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
+}
+/** 判断时间戳是否是昨天 */
+function isYesterday(timestamp) {
+	const milliseconds = normalizeTimeToMilliseconds(timestamp);
+	if (!milliseconds) return false;
+	const date = new Date(milliseconds);
+	const yesterday = /* @__PURE__ */ new Date();
+	yesterday.setDate(yesterday.getDate() - 1);
+	return date.getFullYear() === yesterday.getFullYear() && date.getMonth() === yesterday.getMonth() && date.getDate() === yesterday.getDate();
+}
+/**
+* 视频列表组件。
+*/
+function VideoList(props) {
+	const t = useTranslations("components.ui.list");
+	const isClient = useIsClient();
+	const { list, showVideoProgress, loading, hasMore = false, loadMore, isEditMode, selectedIds, onToggleSelection, emptyText } = props;
+	const sortedList = useMemo(() => orderBy(list, ["publishTime"], ["desc"]), [list]);
+	const { todayList, yesterdayList, earlierList } = useMemo(() => {
+		if (!isClient) return {
+			todayList: [],
+			yesterdayList: [],
+			earlierList: sortedList
+		};
+		const today = [];
+		const yesterday = [];
+		const earlier = [];
+		for (const item of list) if (isToday(item.publishTime)) today.push(item);
+		else if (isYesterday(item.publishTime)) yesterday.push(item);
+		else earlier.push(item);
+		return {
+			todayList: orderBy(today, ["publishTime"], ["desc"]),
+			yesterdayList: orderBy(yesterday, ["publishTime"], ["desc"]),
+			earlierList: orderBy(earlier, ["publishTime"], ["desc"])
+		};
+	}, [
+		isClient,
+		list,
+		sortedList
+	]);
+	const shouldShowSkeleton = Boolean(loading) && list.length === 0;
+	const shouldShowGroupHeaders = isClient;
+	if (shouldShowSkeleton) return /* @__PURE__ */ jsx(Box, {
+		className: "bg-bg1",
+		children: Array.from({ length: DEFAULT_SKELETON_COUNT }).map((_, index) => /* @__PURE__ */ jsx(VideoListItemSkeleton, {
+			isEditMode,
+			showVideoProgress
+		}, `video-list-item-skeleton-${index}`))
+	});
+	return /* @__PURE__ */ jsxs(List, {
+		loading,
+		loadMore,
+		hasMore,
+		empty: "no-content",
+		emptyText: emptyText || t("videoList.empty"),
+		children: [
+			shouldShowGroupHeaders && todayList.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+				className: "  ",
+				children: /* @__PURE__ */ jsx(Text, {
+					className: "text-lg  text-text1",
+					children: t("videoList.today")
+				})
+			}), todayList.map((item) => isEditMode ? /* @__PURE__ */ jsx(VideoListItem, {
+				showVideoProgress,
+				isEditMode,
+				isSelected: selectedIds?.has(item.id),
+				...item,
+				onToggle: () => onToggleSelection?.(item.id)
+			}, item.id) : /* @__PURE__ */ jsx(Link, {
+				href: `/video/${item.id}/${item.title}`,
+				children: /* @__PURE__ */ jsx(VideoListItem, {
+					showVideoProgress,
+					isEditMode,
+					isSelected: selectedIds?.has(item.id),
+					...item,
+					onToggle: () => onToggleSelection?.(item.id)
+				}, item.id)
+			}, item.id))] }),
+			shouldShowGroupHeaders && yesterdayList.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+				className: "  ",
+				children: /* @__PURE__ */ jsx(Text, {
+					className: "text-lg  text-text1",
+					children: t("videoList.yesterday")
+				})
+			}), yesterdayList.map((item) => isEditMode ? /* @__PURE__ */ jsx(VideoListItem, {
+				showVideoProgress,
+				isEditMode,
+				isSelected: selectedIds?.has(item.id),
+				...item,
+				onToggle: () => onToggleSelection?.(item.id)
+			}, item.id) : /* @__PURE__ */ jsx(Link, {
+				href: `/video/${item.id}/${item.title}`,
+				children: /* @__PURE__ */ jsx(VideoListItem, {
+					showVideoProgress,
+					isEditMode,
+					isSelected: selectedIds?.has(item.id),
+					...item,
+					onToggle: () => onToggleSelection?.(item.id)
+				}, item.id)
+			}, item.id))] }),
+			earlierList.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+				className: "  ",
+				children: /* @__PURE__ */ jsx(Text, {
+					className: "text-lg  text-text1",
+					children: t("videoList.earlier")
+				})
+			}), earlierList.map((item) => isEditMode ? /* @__PURE__ */ jsx(VideoListItem, {
+				showVideoProgress,
+				isEditMode,
+				isSelected: selectedIds?.has(item.id),
+				...item,
+				onToggle: () => onToggleSelection?.(item.id)
+			}, item.id) : /* @__PURE__ */ jsx(Link, {
+				href: `/video/${item.id}/${item.title}`,
+				children: /* @__PURE__ */ jsx(VideoListItem, {
+					showVideoProgress,
+					isEditMode,
+					isSelected: selectedIds?.has(item.id),
+					...item,
+					onToggle: () => onToggleSelection?.(item.id)
+				}, item.id)
+			}, item.id))] })
+		]
+	});
+}
+
+//#endregion
+export { VideoList };

package/dist/components/common/locale-sync/locale-sync.mjs

@@ -1,2 +1,63 @@
 
-"use client";import{getCachedLocalePreference as e,persistLocalePreference as t,resolveLocaleByPriority as n,resolveLocaleFromNavigator as r}from"../../../i18n.mjs";import{useEffect as i}from"react";const a=`funhub-locale-sync-attempt`;function o(){if(typeof window>`u`)return``;try{return window.sessionStorage.getItem(a)||``}catch{return``}}function s(e){if(!(typeof window>`u`))try{window.sessionStorage.setItem(a,e)}catch{}}function c(){if(!(typeof window>`u`))try{window.sessionStorage.removeItem(a)}catch{}}function l(a){let{locale:l}=a;return i(()=>{let i=e(),a=n(i,r(window.navigator.languages,window.navigator.language));if(a!==l){if(o()===a)return;s(a),t(a),window.location.reload();return}c(),i!==a&&t(a)},[l]),null}export{l as LocaleSync};
+'use client';
+
+import { getCachedLocalePreference, persistLocalePreference, resolveLocaleByPriority, resolveLocaleFromNavigator } from "../../../i18n.mjs";
+import { useEffect } from "react";
+
+//#region components/common/locale-sync/locale-sync.tsx
+/**
+* 语言同步重载标记，防止在 Cookie 不可用环境下无限刷新。
+*/
+const localeSyncAttemptKey = "funhub-locale-sync-attempt";
+/**
+* 读取当前会话中记录的同步语言。
+*/
+function getLocaleSyncAttempt() {
+	if (typeof window === "undefined") return "";
+	try {
+		return window.sessionStorage.getItem(localeSyncAttemptKey) || "";
+	} catch {
+		return "";
+	}
+}
+/**
+* 写入当前会话同步语言记录。
+*/
+function setLocaleSyncAttempt(locale) {
+	if (typeof window === "undefined") return;
+	try {
+		window.sessionStorage.setItem(localeSyncAttemptKey, locale);
+	} catch {}
+}
+/**
+* 清理当前会话同步语言记录。
+*/
+function clearLocaleSyncAttempt() {
+	if (typeof window === "undefined") return;
+	try {
+		window.sessionStorage.removeItem(localeSyncAttemptKey);
+	} catch {}
+}
+/**
+* 同步语言偏好：优先读取用户缓存，其次回退浏览器语言。
+*/
+function LocaleSync(props) {
+	const { locale } = props;
+	useEffect(() => {
+		const cachedLocale = getCachedLocalePreference();
+		const targetLocale = resolveLocaleByPriority(cachedLocale, resolveLocaleFromNavigator(window.navigator.languages, window.navigator.language));
+		if (targetLocale !== locale) {
+			if (getLocaleSyncAttempt() === targetLocale) return;
+			setLocaleSyncAttempt(targetLocale);
+			persistLocalePreference(targetLocale);
+			window.location.reload();
+			return;
+		}
+		clearLocaleSyncAttempt();
+		if (cachedLocale !== targetLocale) persistLocalePreference(targetLocale);
+	}, [locale]);
+	return null;
+}
+
+//#endregion
+export { LocaleSync };

package/dist/components/common/login-dialog/login-dialog.mjs

@@ -1,2 +1,30 @@
 
-"use client";import{ensureGuestIdentity as e}from"../../../store/modules/user-store.mjs";import{Dialog as t,DialogContent as n}from"../../ui/dialog.mjs";import{useLoginModalStore as r}from"../../../store/modules/login-modal-store.mjs";import{Login as i}from"../../pages/login/index.mjs";import{useEffect as a}from"react";import{jsx as o}from"react/jsx-runtime";function s(s){let{contentClassName:c}=s,{isOpen:l,setOpen:u,entryStep:d}=r();return a(()=>{e()},[]),o(t,{open:l,onOpenChange:u,children:o(n,{showCloseButton:!1,className:`bg-transparent !m-0 !p-0 !fixed !inset-0 !w-screen !h-screen !max-w-none !rounded-none !top-0 !left-0 !translate-x-0 !translate-y-0 !transform-none z-[9999] !pointer-events-auto ${c||``}`,children:o(i,{initialStep:d??`login`},`${l?`open`:`closed`}-${d??`login`}`)})})}export{s as LoginDialog};
+'use client';
+
+import { ensureGuestIdentity } from "../../../store/modules/user-store.mjs";
+import { Dialog, DialogContent } from "../../ui/dialog.mjs";
+import { useLoginModalStore } from "../../../store/modules/login-modal-store.mjs";
+import { Login } from "../../pages/login/index.mjs";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region components/common/login-dialog/login-dialog.tsx
+function LoginDialog(props) {
+	const { contentClassName } = props;
+	const { isOpen, setOpen, entryStep } = useLoginModalStore();
+	useEffect(() => {
+		ensureGuestIdentity();
+	}, []);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(DialogContent, {
+			showCloseButton: false,
+			className: `bg-transparent !m-0 !p-0 !fixed !inset-0 !w-screen !h-screen !max-w-none !rounded-none !top-0 !left-0 !translate-x-0 !translate-y-0 !transform-none z-[9999] !pointer-events-auto ${contentClassName || ""}`,
+			children: /* @__PURE__ */ jsx(Login, { initialStep: entryStep ?? "login" }, `${isOpen ? "open" : "closed"}-${entryStep ?? "login"}`)
+		})
+	});
+}
+
+//#endregion
+export { LoginDialog };

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