@funhub/platform 0.2.29 → 0.2.31

package/dist/components/common/photo-grid/common-photo-grid.mjs

@@ -1,2 +1,322 @@
 
-"use client";import{Image as e}from"../../ui/image.mjs";import{photoPreview as t}from"../photo-preview/common-photo-preview.mjs";import{Fragment as n,jsx as r,jsxs as i}from"react/jsx-runtime";import"photoswipe/style.css";const a={},o=[];function s({image:t,index:n,className:o=``,isVideo:s=!1,isLongImage:c=!1,isGifImage:l=!1,styleCss:u=a,onClick:d}){return i(`div`,{className:`bg-bg2 photo-preview-item relative ${o}`,style:{...u},onClick:()=>{d({image:t,defaultIndex:n})},children:[r(e,{src:t,fill:!0,objectFit:`cover`}),r(`div`,{className:`absolute top-0 left-0 w-full h-full z-[1]`,style:{backgroundColor:`rgba(0, 0, 0, 0.02)`}}),s&&r(`div`,{className:`w-[36px] h-[36px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center rounded-full bg-[rgba(0,0,0,0.5)] video-flag z-[2]`,children:r(`svg`,{xmlns:`http://www.w3.org/2000/svg`,className:`w-full h-full scale-[0.8]`,width:`28`,height:`40`,viewBox:`3 -4 28 40`,children:r(`path`,{fill:`#fff`,transform:`scale(0.0320625 0.0320625)`,d:`M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z`})})}),(c||l)&&r(`div`,{className:`absolute bottom-0 right-0 z-[1] h-[22px] px-[6px] leading-[22px] text-[14px] text-[#fff] bg-theme1 rounded-tl-[4px]`,children:l?`动图`:`长图`})]})}function c({className:e=``,imageList:a=o,isHorizontal:c=!1,onOpenVideoPreview:l}){let u=[],d=a.map((e,t)=>(e.isVideo&&u.push(t),{src:e.src,srcThumbnail:e.srcThumbnail||e.src,isVideo:e.isVideo,width:e.width,height:e.height,videoParams:e.videoParams}));if(!d||d.length===0)return r(n,{children:` `});let f=e=>u.includes(e),p=e=>d[e].width===0||d[e].height===0?!1:d[e].height/d[e].width>=3,m=e=>d[e].src?.endsWith(`.gif`)||d[e].src?.endsWith(`.GIF`)||d[e].src?.endsWith(`.gifxxx`),h=e=>{if(f(e.defaultIndex)){g(e.defaultIndex);return}t({images:d.map(e=>({src:e.src,width:e.width,height:e.height})),defaultIndex:e.defaultIndex,videoIndexArr:u,openVideo:g})},g=e=>{d[e].videoParams&&l?.({info:d[e].videoParams,show:!0})};return c?r(`div`,{className:`w-full flex g-scroll-box-x gap-[8px] ${e}`,onClick:e=>{e.stopPropagation()},children:d.map((e,t)=>r(s,{image:e.srcThumbnail,index:t,isVideo:f(t),isLongImage:p(t),isGifImage:m(t),onClick:h},`${t}horizontal${e}`))}):i(`div`,{className:`w-full ${e}`,onClick:e=>{e.stopPropagation()},children:[d.length===1&&(d[0].width<d[0].height?r(s,{image:d[0].srcThumbnail,className:`w-[230px] h-[306px] rounded-[12px] overflow-hidden`,index:0,isVideo:f(0),isLongImage:p(0),isGifImage:m(0),onClick:h}):r(s,{image:d[0].srcThumbnail,className:`w-full rounded-[12px] overflow-hidden`,index:0,isVideo:f(0),isLongImage:p(0),isGifImage:m(0),onClick:h,styleCss:{paddingBottom:`${d[0].height/d[0].width*100}%`}})),d.length===2&&r(`div`,{className:`w-full flex gap-[2px] rounded-[12px] overflow-hidden`,children:d.map((e,t)=>r(s,{className:`flex-1 pb-[50%]`,image:e.srcThumbnail,index:t,isVideo:f(t),isLongImage:p(t),isGifImage:m(t),onClick:h},`${t}two${e}`))}),d.length===3&&i(`div`,{className:`w-full h-[357px] flex gap-[2px] rounded-[12px] overflow-hidden`,children:[r(s,{image:d[0].srcThumbnail,className:`w-[56.65%] h-[100%]`,index:0,isVideo:f(0),isLongImage:p(0),isGifImage:m(0),onClick:h}),r(`div`,{className:`flex-1 flex flex-col gap-[2px]`,children:d.slice(1).map((e,t)=>r(s,{className:`w-[100%] flex-1`,image:e.srcThumbnail,index:t+1,isVideo:f(t+1),isLongImage:p(t+1),isGifImage:m(t+1),onClick:h},`${t}three${e}`))})]}),d.length===4&&r(`div`,{className:`w-full h-[357px] rounded-[12px] overflow-hidden grid grid-cols-2 grid-rows-2 gap-[2px]`,children:d.map((e,t)=>r(s,{className:`w-[100%] h-[100%]`,image:e.srcThumbnail,index:t,isVideo:f(t),isLongImage:p(t),isGifImage:m(t),onClick:h},`${t}four${e}`))}),d.length===5&&i(`div`,{className:`w-full rounded-[12px] overflow-hidden flex flex-col gap-[2px]`,children:[r(`div`,{className:`w-full h-[198px] flex gap-[2px]`,children:d.slice(0,2).map((e,t)=>r(s,{className:`flex-1 h-full`,image:e.srcThumbnail,index:t,isVideo:f(t),isLongImage:p(t),isGifImage:m(t),onClick:h},`${t}five${e}`))}),r(`div`,{className:`w-full h-[134px] flex gap-[2px]`,children:d.slice(2).map((e,t)=>r(s,{className:`flex-1 h-full`,image:e.srcThumbnail,index:t+2,isVideo:f(t+2),isLongImage:p(t+2),isGifImage:m(t+2),onClick:h},`${t}five-two${e}`))})]}),d.length===6&&i(`div`,{className:`w-full rounded-[12px] overflow-hidden flex flex-col gap-[2px]`,children:[i(`div`,{className:`w-full h-[270px] flex gap-[2px]`,children:[r(s,{className:`w-[270px] h-full`,image:d[0].srcThumbnail,index:0,isVideo:f(0),isLongImage:p(0),isGifImage:m(0),onClick:h}),r(`div`,{className:`flex-1 grid grid-cols-1 grid-rows-2 gap-[2px]`,children:d.slice(1,3).map((e,t)=>r(s,{className:`w-full h-full`,image:e.srcThumbnail,index:t+1,isVideo:f(t+1),isLongImage:p(t+1),isGifImage:m(t+1),onClick:h},`${t}six-one${e}`))})]}),r(`div`,{className:`w-full h-[134px] grid grid-cols-3 grid-rows-1 gap-[2px]`,children:d.slice(3).map((e,t)=>r(s,{className:`w-full h-full`,image:e.srcThumbnail,index:t+3,isVideo:f(t+3),isLongImage:p(t+3),isGifImage:m(t+3),onClick:h},`${t}six-two${e}`))})]}),d.length===7&&i(`div`,{className:`w-full rounded-[12px] overflow-hidden flex gap-[2px]`,children:[r(`div`,{className:`w-[304px] h-[270px] grid grid-cols-2 grid-rows-2 gap-[2px]`,children:d.slice(0,4).map((e,t)=>r(s,{className:`w-[100%] h-[100%]`,image:e.srcThumbnail,index:t,isVideo:f(t),isLongImage:p(t),isGifImage:m(t),onClick:h},`${t}seven-one${e}`))}),r(`div`,{className:`flex-1 flex flex-col grid grid-cols-1 grid-rows-3 gap-[2px]`,children:d.slice(4).map((e,t)=>r(s,{className:`w-[100%] h-[100%]`,image:e.srcThumbnail,index:t+4,isVideo:f(t+4),isLongImage:p(t+4),isGifImage:m(t+4),onClick:h},`${t}seven-two${e}`))})]}),d.length===8&&i(`div`,{className:`w-full rounded-[12px] overflow-hidden flex flex-col gap-[2px]`,children:[r(`div`,{className:`w-full h-[134px] flex gap-[2px] items-center`,children:d.slice(0,2).map((e,t)=>r(s,{className:`flex-1 h-full`,image:e.srcThumbnail,index:t,isVideo:f(t),isLongImage:p(t),isGifImage:m(t),onClick:h},`${t}eight${e}`))}),r(`div`,{className:`w-full h-[270px] grid grid-cols-3 grid-rows-2 gap-[2px]`,children:d.slice(2).map((e,t)=>r(s,{className:`w-full h-full`,image:e.srcThumbnail,index:t+2,isVideo:f(t+2),isLongImage:p(t+2),isGifImage:m(t+2),onClick:h},`${t}eight-two${e}`))})]}),d.length===9&&r(`div`,{className:`w-full h-[406px] rounded-[12px] overflow-hidden grid grid-cols-3 grid-rows-3 gap-[2px]`,children:d.map((e,t)=>r(s,{className:`w-full w-full`,image:e.srcThumbnail,index:t,isVideo:f(t),isLongImage:p(t),isGifImage:m(t),onClick:h},`${t}nine${e}`))})]})}export{c as default};
+'use client';
+
+import { Image } from "../../ui/image.mjs";
+import { photoPreview } from "../photo-preview/common-photo-preview.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "photoswipe/style.css";
+
+//#region components/common/photo-grid/common-photo-grid.tsx
+const emptyStyleCss = {};
+const emptyImageList = [];
+function PhotoPreviewItem({ image, index, className = "", isVideo = false, isLongImage = false, isGifImage = false, styleCss = emptyStyleCss, onClick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `bg-bg2 photo-preview-item relative ${className}`,
+		style: { ...styleCss },
+		onClick: () => {
+			onClick({
+				image,
+				defaultIndex: index
+			});
+		},
+		children: [
+			isLongImage ? /* @__PURE__ */ jsx(Image, {
+				src: image,
+				fill: true,
+				objectFit: "cover"
+			}) : /* @__PURE__ */ jsx(Image, {
+				src: image,
+				fill: true,
+				objectFit: "cover"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 left-0 w-full h-full z-[1]",
+				style: { backgroundColor: "rgba(0, 0, 0, 0.02)" }
+			}),
+			isVideo && /* @__PURE__ */ jsx("div", {
+				className: "w-[36px] h-[36px] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center rounded-full bg-[rgba(0,0,0,0.5)] video-flag z-[2]",
+				children: /* @__PURE__ */ jsx("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					className: "w-full h-full scale-[0.8]",
+					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"
+					})
+				})
+			}),
+			(isLongImage || isGifImage) && /* @__PURE__ */ jsx("div", {
+				className: "absolute bottom-0 right-0 z-[1] h-[22px] px-[6px] leading-[22px] text-[14px] text-[#fff] bg-theme1 rounded-tl-[4px]",
+				children: isGifImage ? "动图" : "长图"
+			})
+		]
+	});
+}
+function CommonPhotoGrid({ className = "", imageList = emptyImageList, isHorizontal = false, onOpenVideoPreview }) {
+	const videoIndexArr = [];
+	const images = imageList.map((item, index) => {
+		if (item.isVideo) videoIndexArr.push(index);
+		return {
+			src: item.src,
+			srcThumbnail: item.srcThumbnail || item.src,
+			isVideo: item.isVideo,
+			width: item.width,
+			height: item.height,
+			videoParams: item.videoParams
+		};
+	});
+	if (!images || images.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: " " });
+	const isVideoView = (index) => {
+		return videoIndexArr.includes(index);
+	};
+	const isLongImage = (index) => {
+		if (images[index].width === 0 || images[index].height === 0) return false;
+		return images[index].height / images[index].width >= 3;
+	};
+	const isGifImage = (index) => {
+		return images[index].src?.endsWith(".gif") || images[index].src?.endsWith(".GIF") || images[index].src?.endsWith(".gifxxx");
+	};
+	const openPhotoPreview = (props) => {
+		if (isVideoView(props.defaultIndex)) {
+			openVideoPreview(props.defaultIndex);
+			return;
+		}
+		photoPreview({
+			images: images.map((image) => ({
+				src: image.src,
+				width: image.width,
+				height: image.height
+			})),
+			defaultIndex: props.defaultIndex,
+			videoIndexArr,
+			openVideo: openVideoPreview
+		});
+	};
+	const openVideoPreview = (index) => {
+		if (!images[index].videoParams) return;
+		onOpenVideoPreview?.({
+			info: images[index].videoParams,
+			show: true
+		});
+	};
+	if (isHorizontal) return /* @__PURE__ */ jsx("div", {
+		className: `w-full flex g-scroll-box-x gap-[8px] ${className}`,
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		children: images.map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+			image: item.srcThumbnail,
+			index,
+			isVideo: isVideoView(index),
+			isLongImage: isLongImage(index),
+			isGifImage: isGifImage(index),
+			onClick: openPhotoPreview
+		}, `${index}horizontal${item}`))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `w-full ${className}`,
+		onClick: (e) => {
+			e.stopPropagation();
+		},
+		children: [
+			images.length === 1 && (images[0].width < images[0].height ? /* @__PURE__ */ jsx(PhotoPreviewItem, {
+				image: images[0].srcThumbnail,
+				className: "w-[230px] h-[306px] rounded-[12px] overflow-hidden",
+				index: 0,
+				isVideo: isVideoView(0),
+				isLongImage: isLongImage(0),
+				isGifImage: isGifImage(0),
+				onClick: openPhotoPreview
+			}) : /* @__PURE__ */ jsx(PhotoPreviewItem, {
+				image: images[0].srcThumbnail,
+				className: "w-full rounded-[12px] overflow-hidden",
+				index: 0,
+				isVideo: isVideoView(0),
+				isLongImage: isLongImage(0),
+				isGifImage: isGifImage(0),
+				onClick: openPhotoPreview,
+				styleCss: { paddingBottom: `${images[0].height / images[0].width * 100}%` }
+			})),
+			images.length === 2 && /* @__PURE__ */ jsx("div", {
+				className: "w-full flex gap-[2px] rounded-[12px] overflow-hidden",
+				children: images.map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+					className: "flex-1 pb-[50%]",
+					image: item.srcThumbnail,
+					index,
+					isVideo: isVideoView(index),
+					isLongImage: isLongImage(index),
+					isGifImage: isGifImage(index),
+					onClick: openPhotoPreview
+				}, `${index}two${item}`))
+			}),
+			images.length === 3 && /* @__PURE__ */ jsxs("div", {
+				className: "w-full h-[357px] flex gap-[2px] rounded-[12px] overflow-hidden",
+				children: [/* @__PURE__ */ jsx(PhotoPreviewItem, {
+					image: images[0].srcThumbnail,
+					className: "w-[56.65%] h-[100%]",
+					index: 0,
+					isVideo: isVideoView(0),
+					isLongImage: isLongImage(0),
+					isGifImage: isGifImage(0),
+					onClick: openPhotoPreview
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 flex flex-col gap-[2px]",
+					children: images.slice(1).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "w-[100%] flex-1",
+						image: item.srcThumbnail,
+						index: index + 1,
+						isVideo: isVideoView(index + 1),
+						isLongImage: isLongImage(index + 1),
+						isGifImage: isGifImage(index + 1),
+						onClick: openPhotoPreview
+					}, `${index}three${item}`))
+				})]
+			}),
+			images.length === 4 && /* @__PURE__ */ jsx("div", {
+				className: "w-full h-[357px] rounded-[12px] overflow-hidden grid grid-cols-2 grid-rows-2 gap-[2px]",
+				children: images.map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+					className: "w-[100%] h-[100%]",
+					image: item.srcThumbnail,
+					index,
+					isVideo: isVideoView(index),
+					isLongImage: isLongImage(index),
+					isGifImage: isGifImage(index),
+					onClick: openPhotoPreview
+				}, `${index}four${item}`))
+			}),
+			images.length === 5 && /* @__PURE__ */ jsxs("div", {
+				className: "w-full rounded-[12px] overflow-hidden flex flex-col gap-[2px]",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-full h-[198px] flex gap-[2px]",
+					children: images.slice(0, 2).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "flex-1 h-full",
+						image: item.srcThumbnail,
+						index,
+						isVideo: isVideoView(index),
+						isLongImage: isLongImage(index),
+						isGifImage: isGifImage(index),
+						onClick: openPhotoPreview
+					}, `${index}five${item}`))
+				}), /* @__PURE__ */ jsx("div", {
+					className: "w-full h-[134px] flex gap-[2px]",
+					children: images.slice(2).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "flex-1 h-full",
+						image: item.srcThumbnail,
+						index: index + 2,
+						isVideo: isVideoView(index + 2),
+						isLongImage: isLongImage(index + 2),
+						isGifImage: isGifImage(index + 2),
+						onClick: openPhotoPreview
+					}, `${index}five-two${item}`))
+				})]
+			}),
+			images.length === 6 && /* @__PURE__ */ jsxs("div", {
+				className: "w-full rounded-[12px] overflow-hidden flex flex-col gap-[2px]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "w-full h-[270px] flex gap-[2px]",
+					children: [/* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "w-[270px] h-full",
+						image: images[0].srcThumbnail,
+						index: 0,
+						isVideo: isVideoView(0),
+						isLongImage: isLongImage(0),
+						isGifImage: isGifImage(0),
+						onClick: openPhotoPreview
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex-1 grid grid-cols-1 grid-rows-2 gap-[2px]",
+						children: images.slice(1, 3).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+							className: "w-full h-full",
+							image: item.srcThumbnail,
+							index: index + 1,
+							isVideo: isVideoView(index + 1),
+							isLongImage: isLongImage(index + 1),
+							isGifImage: isGifImage(index + 1),
+							onClick: openPhotoPreview
+						}, `${index}six-one${item}`))
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "w-full h-[134px] grid grid-cols-3 grid-rows-1 gap-[2px]",
+					children: images.slice(3).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "w-full h-full",
+						image: item.srcThumbnail,
+						index: index + 3,
+						isVideo: isVideoView(index + 3),
+						isLongImage: isLongImage(index + 3),
+						isGifImage: isGifImage(index + 3),
+						onClick: openPhotoPreview
+					}, `${index}six-two${item}`))
+				})]
+			}),
+			images.length === 7 && /* @__PURE__ */ jsxs("div", {
+				className: "w-full rounded-[12px] overflow-hidden flex gap-[2px]",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-[304px] h-[270px] grid grid-cols-2 grid-rows-2 gap-[2px]",
+					children: images.slice(0, 4).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "w-[100%] h-[100%]",
+						image: item.srcThumbnail,
+						index,
+						isVideo: isVideoView(index),
+						isLongImage: isLongImage(index),
+						isGifImage: isGifImage(index),
+						onClick: openPhotoPreview
+					}, `${index}seven-one${item}`))
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1 flex flex-col grid grid-cols-1 grid-rows-3 gap-[2px]",
+					children: images.slice(4).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "w-[100%] h-[100%]",
+						image: item.srcThumbnail,
+						index: index + 4,
+						isVideo: isVideoView(index + 4),
+						isLongImage: isLongImage(index + 4),
+						isGifImage: isGifImage(index + 4),
+						onClick: openPhotoPreview
+					}, `${index}seven-two${item}`))
+				})]
+			}),
+			images.length === 8 && /* @__PURE__ */ jsxs("div", {
+				className: "w-full rounded-[12px] overflow-hidden flex flex-col gap-[2px]",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-full h-[134px] flex gap-[2px] items-center",
+					children: images.slice(0, 2).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "flex-1 h-full",
+						image: item.srcThumbnail,
+						index,
+						isVideo: isVideoView(index),
+						isLongImage: isLongImage(index),
+						isGifImage: isGifImage(index),
+						onClick: openPhotoPreview
+					}, `${index}eight${item}`))
+				}), /* @__PURE__ */ jsx("div", {
+					className: "w-full h-[270px] grid grid-cols-3 grid-rows-2 gap-[2px]",
+					children: images.slice(2).map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+						className: "w-full h-full",
+						image: item.srcThumbnail,
+						index: index + 2,
+						isVideo: isVideoView(index + 2),
+						isLongImage: isLongImage(index + 2),
+						isGifImage: isGifImage(index + 2),
+						onClick: openPhotoPreview
+					}, `${index}eight-two${item}`))
+				})]
+			}),
+			images.length === 9 && /* @__PURE__ */ jsx("div", {
+				className: "w-full h-[406px] rounded-[12px] overflow-hidden grid grid-cols-3 grid-rows-3 gap-[2px]",
+				children: images.map((item, index) => /* @__PURE__ */ jsx(PhotoPreviewItem, {
+					className: "w-full w-full",
+					image: item.srcThumbnail,
+					index,
+					isVideo: isVideoView(index),
+					isLongImage: isLongImage(index),
+					isGifImage: isGifImage(index),
+					onClick: openPhotoPreview
+				}, `${index}nine${item}`))
+			})
+		]
+	});
+}
+
+//#endregion
+export { CommonPhotoGrid as default };

package/dist/components/common/photo-grid/index.mjs

@@ -1,2 +1,227 @@
 
-"use client";import{useFollowIdsState as e}from"../../../store/modules/follow-ids-store.mjs";import{useUserStore as t}from"../../../store/modules/user-store.mjs";import{gContentGetVideoDetail as n}from"../../../service/generated/client.mjs";import{useLoginModalStore as r}from"../../../store/modules/login-modal-store.mjs";import{batchQueryContentInteractions as i}from"../../../hooks/use-content-operate.mjs";import a from"../../biz/business/search-bar/variants/detail-search-bar/index.mjs";import o from"../../pages/fullscreen-feed/page.mjs";import{useCallback as s,useEffect as c,useMemo as l,useState as u}from"react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{useTranslations as m}from"next-intl";function h(e,t){return(e||[]).map((e,n)=>({id:e.id||`${t||`episode`}-${n+1}`,name:e.name||String(n+1),preview_m3u8_url:e.preview_m3u8url||e.preview_m3u8_url||``,m3u8_url:e.m3u8url||e.m3u8_url||``}))}function g(e){let t=e.id||``,n=h(e.links,t),r=e.static,i=e.score===void 0||e.score===null?void 0:Number(e.score),a=e.duration===void 0||e.duration===null?void 0:Number(e.duration),o={id:t,mid:e.mid||t,name:e.name||``,img_x:e.img_x||``,img_y:e.img_y||``,img_type:e.img_type||``,cat_id:e.cat_id||``,cat_name:e.cat_name||``,status:e.status||``,status_text:e.status_text||``,show_at:e.show_at||``,tags:[],update_status:e.update_status||``,description:e.description||``,language:e.language||``,director:e.director||``,issue_date:e.issue_date||``,actor:e.actor||``,up_user:e.up_user||``,money:e.money||``,source_username:e.source_username||``,task_id:e.task_id||``,file_status:e.file_status||``,score:Number.isFinite(i)?i:void 0,duration:Number.isFinite(a)?a:void 0,episode_cnt:n.length||0,links:[],static:{browse_cnt:Number(r?.browse_cnt||0),collect_cnt:Number(r?.collect_cnt||0),comment_cnt:Number(r?.comment_cnt||0),like_cnt:Number(r?.like_cnt||0),share_cnt:Number(r?.share_cnt||0),dislike_cnt:Number(r?.dislike_cnt||0)},type:e.type??e.content_type,author:e.up_user||e.source_username?{user_id:e.up_user||``,nick_name:e.source_username||``,avatar:``}:void 0};return n.length===0?[{...o,links:[]}]:n.map((e,n)=>{let r=e.id||`${t||`episode`}-${n+1}`,i=e.name||`第${n+1}集`;return{...o,id:r,mid:r,name:i,links:[e]}})}function _(e,t){let n=new Map((t||[]).filter(e=>e.content_id).map(e=>[e.content_id,e]));return e.map(e=>{let t=n.get(e.id);return t?{...e,is_liked:t.is_liked||!1,is_dislike:t.is_disliked??t.is_dislike??!1,is_collected:t.is_collected||!1,is_followed:t.is_followed||!1,author:e.author}:e})}function v({params:h,initialContents:v}){let y=m(`components.common.photoGrid`),{locale:b,seriesId:x,episodeNum:S=`1`}=h,{userInfo:C,isLogin:w}=t(),{followIds:T,setFollowIds:E}=e(),D=l(()=>v??[],[v]),[O,k]=u(D),[A,j]=u(!1),M=b?`/${b}`:``,N=f(`div`,{className:`fixed top-0 left-0 right-0 z-40`,children:f(a,{})});c(()=>{k(D)},[D]),c(()=>{if(!x||D.length>0)return;let e=!0;k([]);async function t(){j(!0);try{let t=(await n({id:x}))?.data?.video;if(!t||!e)return;k(g(t))}catch(e){console.error(`获取剧集详情失败:`,e)}finally{e&&j(!1)}}return t(),()=>{e=!1}},[x,D.length]);let P=l(()=>O.map(e=>e.id).filter(Boolean).join(`,`),[O]),F=l(()=>P?P.split(`,`):[],[P]);c(()=>{if(!w||F.length===0)return;let e=!0;async function t(){let t=await i(F,0);!e||!t?.interaction_list?.length||k(e=>_(e,t.interaction_list||[]))}return t(),()=>{e=!1}},[P,F,w]);let I=l(()=>{let e=S??`1`,t=Number.parseInt(e,10);if(Number.isNaN(t))return 0;let n=Math.max(0,t-1);return O.length>0?Math.min(n,O.length-1):n},[S,O.length]),L=s(({episodeId:e,episodeNum:t})=>{let n=`${M}/feed-series/${e}/episode/${t}`;typeof window<`u`&&window.history.replaceState(null,``,n)},[M]),R=s(()=>{r.getState().open()},[]);return x?A&&O.length===0?p(d,{children:[N,p(`div`,{className:`flex h-screen w-full items-center justify-center bg-black text-white/80`,children:[y(`episodeLoading`),`...`]})]}):!A&&O.length===0?p(d,{children:[N,f(`div`,{className:`flex h-screen w-full items-center justify-center bg-black text-white/80`,children:y(`noEpisodes`)})]}):p(d,{children:[N,f(o,{seriesId:x,initialContents:O,initialActiveIndex:I,videoConfig:{loop:!1,autoNext:!0},currentUserId:C.userId||void 0,followIds:T,onFollowIdsChange:E,onRequireLogin:R,onEpisodeNavigate:L})]}):p(d,{children:[N,p(`div`,{className:`flex h-screen w-full items-center justify-center bg-black text-white/80`,children:[y(`missingEpisode`),` `,`ID`]})]})}export{v as default};
+'use client';
+
+import { useFollowIdsState } from "../../../store/modules/follow-ids-store.mjs";
+import { useUserStore } from "../../../store/modules/user-store.mjs";
+import { gContentGetVideoDetail } from "../../../service/generated/client.mjs";
+import { useLoginModalStore } from "../../../store/modules/login-modal-store.mjs";
+import { batchQueryContentInteractions } from "../../../hooks/use-content-operate.mjs";
+import detail_search_bar_default from "../../biz/business/search-bar/variants/detail-search-bar/index.mjs";
+import FullscreenFeedPage from "../../pages/fullscreen-feed/page.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+
+//#region components/common/photo-grid/index.tsx
+/**
+* 归一化剧集链接，兼容不同字段命名。
+*/
+function normalizeSeriesLinks(links, fallbackId) {
+	return (links || []).map((link, index) => ({
+		id: link.id || `${fallbackId || "episode"}-${index + 1}`,
+		name: link.name || String(index + 1),
+		preview_m3u8_url: link.preview_m3u8url || link.preview_m3u8_url || "",
+		m3u8_url: link.m3u8url || link.m3u8_url || ""
+	}));
+}
+/**
+* 将视频详情转换为剧集滚动列表数据。
+*/
+function buildSeriesContents(detail) {
+	const detailId = detail.id || "";
+	const seriesLinks = normalizeSeriesLinks(detail.links, detailId);
+	const detailStatic = detail.static;
+	const score = detail.score === void 0 || detail.score === null ? void 0 : Number(detail.score);
+	const duration = detail.duration === void 0 || detail.duration === null ? void 0 : Number(detail.duration);
+	const baseInfo = {
+		id: detailId,
+		mid: detail.mid || detailId,
+		name: detail.name || "",
+		img_x: detail.img_x || "",
+		img_y: detail.img_y || "",
+		img_type: detail.img_type || "",
+		cat_id: detail.cat_id || "",
+		cat_name: detail.cat_name || "",
+		status: detail.status || "",
+		status_text: detail.status_text || "",
+		show_at: detail.show_at || "",
+		tags: [],
+		update_status: detail.update_status || "",
+		description: detail.description || "",
+		language: detail.language || "",
+		director: detail.director || "",
+		issue_date: detail.issue_date || "",
+		actor: detail.actor || "",
+		up_user: detail.up_user || "",
+		money: detail.money || "",
+		source_username: detail.source_username || "",
+		task_id: detail.task_id || "",
+		file_status: detail.file_status || "",
+		score: Number.isFinite(score) ? score : void 0,
+		duration: Number.isFinite(duration) ? duration : void 0,
+		episode_cnt: seriesLinks.length || 0,
+		links: [],
+		static: {
+			browse_cnt: Number(detailStatic?.browse_cnt || 0),
+			collect_cnt: Number(detailStatic?.collect_cnt || 0),
+			comment_cnt: Number(detailStatic?.comment_cnt || 0),
+			like_cnt: Number(detailStatic?.like_cnt || 0),
+			share_cnt: Number(detailStatic?.share_cnt || 0),
+			dislike_cnt: Number(detailStatic?.dislike_cnt || 0)
+		},
+		type: detail.type ?? detail.content_type,
+		author: detail.up_user || detail.source_username ? {
+			user_id: detail.up_user || "",
+			nick_name: detail.source_username || "",
+			avatar: ""
+		} : void 0
+	};
+	if (seriesLinks.length === 0) return [{
+		...baseInfo,
+		links: []
+	}];
+	return seriesLinks.map((link, index) => {
+		const episodeId = link.id || `${detailId || "episode"}-${index + 1}`;
+		const episodeName = link.name || `第${index + 1}集`;
+		return {
+			...baseInfo,
+			id: episodeId,
+			mid: episodeId,
+			name: episodeName,
+			links: [link]
+		};
+	});
+}
+/**
+* 合并剧集交互状态。
+*/
+function mergeEpisodeInteractions(contents, interactionList) {
+	const interactionMap = new Map((interactionList || []).filter((item) => item.content_id).map((item) => [item.content_id, item]));
+	return contents.map((item) => {
+		const interaction = interactionMap.get(item.id);
+		if (!interaction) return item;
+		return {
+			...item,
+			is_liked: interaction.is_liked || false,
+			is_dislike: interaction.is_disliked ?? interaction.is_dislike ?? false,
+			is_collected: interaction.is_collected || false,
+			is_followed: interaction.is_followed || false,
+			author: item.author
+		};
+	});
+}
+/**
+* 剧集页，按地址栏 seriesId 拉取详情并注入全屏流。
+*/
+function SeriesEpisodePage({ params, initialContents }) {
+	const t = useTranslations("components.common.photoGrid");
+	const { locale, seriesId, episodeNum = "1" } = params;
+	const { userInfo, isLogin } = useUserStore();
+	const { followIds, setFollowIds } = useFollowIdsState();
+	const stableInitialContents = useMemo(() => initialContents ?? [], [initialContents]);
+	const [resolvedContents, setResolvedContents] = useState(stableInitialContents);
+	const [isLoading, setIsLoading] = useState(false);
+	const localePrefix = locale ? `/${locale}` : "";
+	const searchBar = /* @__PURE__ */ jsx("div", {
+		className: "fixed top-0 left-0 right-0 z-40",
+		children: /* @__PURE__ */ jsx(detail_search_bar_default, {})
+	});
+	useEffect(() => {
+		/**
+		* 又是这种同步问题，实在是没必要
+		*/
+		setResolvedContents(stableInitialContents);
+	}, [stableInitialContents]);
+	useEffect(() => {
+		if (!seriesId || stableInitialContents.length > 0) return;
+		let active = true;
+		setResolvedContents([]);
+		async function fetchSeriesDetail() {
+			setIsLoading(true);
+			try {
+				const detail = (await gContentGetVideoDetail({ id: seriesId }))?.data?.video;
+				if (!detail || !active) return;
+				setResolvedContents(buildSeriesContents(detail));
+			} catch (error) {
+				console.error("获取剧集详情失败:", error);
+			} finally {
+				if (active) setIsLoading(false);
+			}
+		}
+		fetchSeriesDetail();
+		return () => {
+			active = false;
+		};
+	}, [seriesId, stableInitialContents.length]);
+	const contentIdsKey = useMemo(() => {
+		return resolvedContents.map((item) => item.id).filter(Boolean).join(",");
+	}, [resolvedContents]);
+	const contentIds = useMemo(() => {
+		return contentIdsKey ? contentIdsKey.split(",") : [];
+	}, [contentIdsKey]);
+	useEffect(() => {
+		if (!isLogin) return;
+		if (contentIds.length === 0) return;
+		let active = true;
+		async function fetchInteractions() {
+			const data = await batchQueryContentInteractions(contentIds, 0);
+			if (!active || !data?.interaction_list?.length) return;
+			setResolvedContents((prev) => mergeEpisodeInteractions(prev, data.interaction_list || []));
+		}
+		fetchInteractions();
+		return () => {
+			active = false;
+		};
+	}, [
+		contentIdsKey,
+		contentIds,
+		isLogin
+	]);
+	const initialActiveIndex = useMemo(() => {
+		const resolvedEpisodeNum = episodeNum ?? "1";
+		const parsed = Number.parseInt(resolvedEpisodeNum, 10);
+		if (Number.isNaN(parsed)) return 0;
+		const candidate = Math.max(0, parsed - 1);
+		return resolvedContents.length > 0 ? Math.min(candidate, resolvedContents.length - 1) : candidate;
+	}, [episodeNum, resolvedContents.length]);
+	const handleEpisodeNavigate = useCallback(({ episodeId, episodeNum }) => {
+		const nextUrl = `${localePrefix}/feed-series/${episodeId}/episode/${episodeNum}`;
+		if (typeof window !== "undefined") window.history.replaceState(null, "", nextUrl);
+	}, [localePrefix]);
+	const handleRequireLogin = useCallback(() => {
+		useLoginModalStore.getState().open();
+	}, []);
+	if (!seriesId) return /* @__PURE__ */ jsxs(Fragment$1, { children: [searchBar, /* @__PURE__ */ jsxs("div", {
+		className: "flex h-screen w-full items-center justify-center bg-black text-white/80",
+		children: [
+			t("missingEpisode"),
+			" ",
+			"ID"
+		]
+	})] });
+	if (isLoading && resolvedContents.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [searchBar, /* @__PURE__ */ jsxs("div", {
+		className: "flex h-screen w-full items-center justify-center bg-black text-white/80",
+		children: [t("episodeLoading"), "..."]
+	})] });
+	if (!isLoading && resolvedContents.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [searchBar, /* @__PURE__ */ jsx("div", {
+		className: "flex h-screen w-full items-center justify-center bg-black text-white/80",
+		children: t("noEpisodes")
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [searchBar, /* @__PURE__ */ jsx(FullscreenFeedPage, {
+		seriesId,
+		initialContents: resolvedContents,
+		initialActiveIndex,
+		videoConfig: {
+			loop: false,
+			autoNext: true
+		},
+		currentUserId: userInfo.userId || void 0,
+		followIds,
+		onFollowIdsChange: setFollowIds,
+		onRequireLogin: handleRequireLogin,
+		onEpisodeNavigate: handleEpisodeNavigate
+	})] });
+}
+
+//#endregion
+export { SeriesEpisodePage as default };

package/dist/components/common/photo-preview/common-photo-preview.mjs

@@ -1,2 +1,98 @@
 
-import{decryptImageUrl as e}from"../../../utils/decrypt-image-client.mjs";import{closeLoading as t,isLoadingCancelled as n,showLoading as r}from"./decrypt-loading.mjs";import"./style.mjs";import i from"photoswipe/lightbox";import"photoswipe/style.css";let a=null,o=!1;function s({width:e,height:t}){let n=window.innerWidth,r=e||n,i=t||n;return r<n&&(i=n/r*i,r=n),{width:r,height:i}}async function c({images:t,videoIndexArr:n=[]}){let i=[];r();try{i=await Promise.all(t.map(async(t,r)=>{let{width:i,height:a}=s({width:t.width,height:t.height});return{src:await e(t.src),width:i,height:a,alt:n.includes(r)?`${r}`:`image`}}))}catch(e){console.error(e)}return i}async function l({images:e,defaultIndex:r=0,videoIndexArr:s=[],openVideo:l}){if(e.length===0)return;let u=await c({images:e,videoIndexArr:s,defaultIndex:r});if(n())return;o=!1;let d=e=>{let t=e?.target?.alt&&e.target.alt!==`image`;(e?.target?.classList?.contains(`is__video`)||t)&&l?.(Number.parseInt(a.pswp.currSlide.data.alt))};a=new i({dataSource:u,pswpModule:()=>import(`photoswipe`),loop:!1,bgOpacity:1,zoom:!1,maxZoomLevel:4,tapAction:(e,t)=>{d(t)}}),a.on(`change`,e=>{a.pswp?.currSlide?.data?.alt&&a.pswp.currSlide.data.alt!==`image`&&(a.pswp.currSlide?.holderElement?.classList.contains(`is__video`)||a.pswp.currSlide.holderElement.classList.add(`is__video`))}),a.on(`contentDeactivate`,e=>{e?.content?.instance?.currSlide?.holderElement?.classList.remove(`is__video`)}),a.on(`close`,()=>{t()}),a.on(`loadComplete`,()=>{o||=(setTimeout(()=>{t()},500),!0)}),a.on(`destroy`,()=>{console.log(`------destroy`),t(),a=null}),a.init(),a.loadAndOpen(r)}export{l as photoPreview};
+import { decryptImageUrl } from "../../../utils/decrypt-image-client.mjs";
+import { closeLoading, isLoadingCancelled, showLoading } from "./decrypt-loading.mjs";
+import "./style.mjs";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import "photoswipe/style.css";
+
+//#region components/common/photo-preview/common-photo-preview.ts
+let lightbox = null;
+let isHasCloseLoading = false;
+function getWidthAndHeight({ width, height }) {
+	const windowWidth = window.innerWidth;
+	let imgWidth = width || windowWidth;
+	let imgHeight = height || windowWidth;
+	if (imgWidth < windowWidth) {
+		imgHeight = windowWidth / imgWidth * imgHeight;
+		imgWidth = windowWidth;
+	}
+	return {
+		width: imgWidth,
+		height: imgHeight
+	};
+}
+async function getDataSource({ images, videoIndexArr = [] }) {
+	let dataSource = [];
+	showLoading();
+	try {
+		dataSource = await Promise.all(images.map(async (image, index) => {
+			const { width, height } = getWidthAndHeight({
+				width: image.width,
+				height: image.height
+			});
+			return {
+				src: await decryptImageUrl(image.src),
+				width,
+				height,
+				alt: videoIndexArr.includes(index) ? `${index}` : "image"
+			};
+		}));
+	} catch (error) {
+		console.error(error);
+	}
+	return dataSource;
+}
+async function photoPreview({ images, defaultIndex = 0, videoIndexArr = [], openVideo }) {
+	if (images.length === 0) return;
+	const dataSource = await getDataSource({
+		images,
+		videoIndexArr,
+		defaultIndex
+	});
+	if (isLoadingCancelled()) return;
+	isHasCloseLoading = false;
+	const judgeIsVideo = (e) => {
+		const isClickImg = e?.target?.alt && e.target.alt !== "image";
+		if (e?.target?.classList?.contains("is__video") || isClickImg) openVideo?.(Number.parseInt(lightbox.pswp.currSlide.data.alt));
+	};
+	lightbox = new PhotoSwipeLightbox({
+		dataSource,
+		pswpModule: () => import("photoswipe"),
+		loop: false,
+		bgOpacity: 1,
+		zoom: false,
+		maxZoomLevel: 4,
+		tapAction: (_releasePoint, e) => {
+			judgeIsVideo(e);
+		}
+	});
+	lightbox.on("change", (_e) => {
+		if (lightbox.pswp?.currSlide?.data?.alt && lightbox.pswp.currSlide.data.alt !== "image") {
+			if (!lightbox.pswp.currSlide?.holderElement?.classList.contains("is__video")) lightbox.pswp.currSlide.holderElement.classList.add("is__video");
+		}
+	});
+	lightbox.on("contentDeactivate", (e) => {
+		e?.content?.instance?.currSlide?.holderElement?.classList.remove("is__video");
+	});
+	lightbox.on("close", () => {
+		closeLoading();
+	});
+	lightbox.on("loadComplete", () => {
+		if (!isHasCloseLoading) {
+			setTimeout(() => {
+				closeLoading();
+			}, 500);
+			isHasCloseLoading = true;
+		}
+	});
+	lightbox.on("destroy", () => {
+		console.log("------destroy");
+		closeLoading();
+		lightbox = null;
+	});
+	lightbox.init();
+	lightbox.loadAndOpen(defaultIndex);
+}
+
+//#endregion
+export { photoPreview };