@funhub/platform 0.2.30 → 0.2.31

package/dist/components/pages/collection-detail/_components/collection-detail-video-card.mjs

@@ -1,2 +1,136 @@
 
-"use client";import{formatCompactCount as e}from"../../../../utils/common.mjs";import{cn as t}from"../../../../utils/cn.mjs";import{Image as n}from"../../../ui/image.mjs";import{Text as r}from"../../../ui/text.mjs";import{CollectionSelectIcon as i,CollectionSelectedIcon as a}from"../../../common/list/collection-list/collection-select-icon.mjs";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useTranslations as c}from"next-intl";import l from"next/link";function u(e){return o(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:`18`,height:`14`,viewBox:`0 0 18 14`,fill:`none`,...e,children:o(`path`,{d:`M11.34 6.138L7.5195 4.0635C7.3395 3.9645 7.1415 3.9105 6.957 3.9105C6.4035 3.9105 6.003 4.3335 6.003 4.9185V8.991C6.003 9.576 6.4035 9.999 6.957 9.999C7.146 9.999 7.3395 9.945 7.5195 9.8505L11.358 7.776C11.7045 7.587 11.907 7.29 11.907 6.966C11.907 6.6375 11.7 6.3315 11.34 6.138ZM14.7105 0L3.1995 1.1205C1.431 1.1205 0 2.5515 0 4.32V9.7155C0 11.484 1.431 12.915 3.1995 12.915L14.715 13.914C16.4835 13.914 17.9145 12.483 17.9145 10.7145V3.1995C17.9133 2.35053 17.5752 1.53673 16.9745 0.936838C16.3737 0.336945 15.5595 -8.37344e-07 14.7105 0ZM16.3125 10.7145C16.3125 10.9243 16.2712 11.132 16.1909 11.3258C16.1106 11.5197 15.9929 11.6958 15.8446 11.8441C15.6963 11.9924 15.5202 12.1101 15.3263 12.1904C15.1325 12.2707 14.9248 12.312 14.715 12.312L3.1995 11.313C2.98971 11.313 2.78198 11.2717 2.58816 11.1914C2.39435 11.1111 2.21824 10.9934 2.0699 10.8451C1.92156 10.6968 1.80388 10.5207 1.7236 10.3268C1.64332 10.133 1.602 9.92529 1.602 9.7155V4.32C1.602 3.89632 1.77031 3.48999 2.0699 3.1904C2.36949 2.89081 2.77582 2.7225 3.1995 2.7225L14.7105 1.602C14.9203 1.602 15.128 1.64332 15.3218 1.7236C15.5157 1.80388 15.6918 1.92156 15.8401 2.0699C15.9884 2.21824 16.1061 2.39435 16.1864 2.58816C16.2667 2.78198 16.308 2.98971 16.308 3.1995V10.7145H16.3125Z`,fill:`currentColor`})})}function d(e){let t=Number.isFinite(e)?Math.max(0,Math.floor(e||0)):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(t){return e(Number.isFinite(t)?Math.max(0,Math.floor(t||0)):0)}function p({id:e,title:p,coverImage:m,duration:h=0,episodeCount:g=0,viewCount:_=0,is_more_link:v=!1,isEditMode:y=!1,isSelected:b=!1,onToggleSelection:x}){let S=c(`components.ui.list.videoList`),C=`/video/${e}/${p}`,w=S(v?`videoListItem.series`:`videoListItem.movie`),T=v?g>0?`${g}集全`:``:d(h),E=f(_);function D(){x?.(e)}function O(e){(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),D())}return s(`div`,{className:`relative w-full`,children:[s(`div`,{className:`relative h-[228px] w-full overflow-hidden rounded-[8px]`,children:[o(n,{src:m||`/empty/default-cover.png`,alt:p||S(`videoListItem.coverAlt`),fill:!0,className:`object-cover`}),o(`div`,{className:`pointer-events-none absolute inset-0 rounded-[8px] bg-[linear-gradient(180deg,rgba(8,2,17,0.56)_3.289%,rgba(8,2,17,0)_27.697%,rgba(8,2,17,0.8)_74.178%)]`}),y&&o(`div`,{className:`absolute left-3 top-3 z-20`,children:o(b?a:i,{})}),!y&&s(`div`,{className:t(`absolute left-2 right-2 top-3 z-10 flex items-start justify-between gap-2`),children:[o(`div`,{className:`inline-flex h-5 items-center justify-center rounded-[4px] bg-white/20 px-1 text-center text-[12px] leading-[14px] text-white`,children:o(r,{className:`text-[12px] leading-[14px] text-white`,children:w})}),T?o(r,{className:`shrink-0 text-[14px] leading-4 text-white`,children:T}):null]}),s(`div`,{className:`absolute bottom-3 left-[10px] right-[10px] z-10 flex items-end gap-2`,children:[o(r,{className:`min-w-0 flex-1 line-clamp-2 text-[16px] font-normal leading-6 text-[var(--color-text-white80)]`,dangerouslySetInnerHTML:{__html:p}}),s(`div`,{className:`mb-1 flex shrink-0 items-center gap-1 text-[12px] leading-5 text-white`,children:[o(u,{className:`h-[14px] w-[18px] opacity-80`}),o(r,{className:`text-[12px] leading-5 text-white`,children:E})]})]})]}),y?o(`button`,{type:`button`,className:`absolute inset-0 z-30 block w-full rounded-[8px] text-left`,onClick:D,onKeyDown:O,"aria-pressed":b,children:o(`span`,{className:`sr-only`,children:p||S(`videoListItem.coverAlt`)})}):o(l,{href:C,className:`absolute inset-0 z-30 block rounded-[8px]`,"aria-label":p||S(`videoListItem.coverAlt`)})]})}export{p as CollectionDetailVideoCard};
+'use client';
+
+import { formatCompactCount } from "../../../../utils/common.mjs";
+import { cn } from "../../../../utils/cn.mjs";
+import { Image } from "../../../ui/image.mjs";
+import { Text } from "../../../ui/text.mjs";
+import { CollectionSelectIcon, CollectionSelectedIcon } from "../../../common/list/collection-list/collection-select-icon.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+
+//#region components/pages/collection-detail/_components/collection-detail-video-card.tsx
+/**
+* 播放量图标。
+*/
+function CollectionPlayCountIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "14",
+		viewBox: "0 0 18 14",
+		fill: "none",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M11.34 6.138L7.5195 4.0635C7.3395 3.9645 7.1415 3.9105 6.957 3.9105C6.4035 3.9105 6.003 4.3335 6.003 4.9185V8.991C6.003 9.576 6.4035 9.999 6.957 9.999C7.146 9.999 7.3395 9.945 7.5195 9.8505L11.358 7.776C11.7045 7.587 11.907 7.29 11.907 6.966C11.907 6.6375 11.7 6.3315 11.34 6.138ZM14.7105 0L3.1995 1.1205C1.431 1.1205 0 2.5515 0 4.32V9.7155C0 11.484 1.431 12.915 3.1995 12.915L14.715 13.914C16.4835 13.914 17.9145 12.483 17.9145 10.7145V3.1995C17.9133 2.35053 17.5752 1.53673 16.9745 0.936838C16.3737 0.336945 15.5595 -8.37344e-07 14.7105 0ZM16.3125 10.7145C16.3125 10.9243 16.2712 11.132 16.1909 11.3258C16.1106 11.5197 15.9929 11.6958 15.8446 11.8441C15.6963 11.9924 15.5202 12.1101 15.3263 12.1904C15.1325 12.2707 14.9248 12.312 14.715 12.312L3.1995 11.313C2.98971 11.313 2.78198 11.2717 2.58816 11.1914C2.39435 11.1111 2.21824 10.9934 2.0699 10.8451C1.92156 10.6968 1.80388 10.5207 1.7236 10.3268C1.64332 10.133 1.602 9.92529 1.602 9.7155V4.32C1.602 3.89632 1.77031 3.48999 2.0699 3.1904C2.36949 2.89081 2.77582 2.7225 3.1995 2.7225L14.7105 1.602C14.9203 1.602 15.128 1.64332 15.3218 1.7236C15.5157 1.80388 15.6918 1.92156 15.8401 2.0699C15.9884 2.21824 16.1061 2.39435 16.1864 2.58816C16.2667 2.78198 16.308 2.98971 16.308 3.1995V10.7145H16.3125Z",
+			fill: "currentColor"
+		})
+	});
+}
+/**
+* 格式化视频时长。
+*/
+function formatDurationLabel(duration) {
+	const resolvedSeconds = Number.isFinite(duration) ? Math.max(0, Math.floor(duration || 0)) : 0;
+	if (resolvedSeconds <= 0) return "";
+	const hours = Math.floor(resolvedSeconds / 3600);
+	const minutes = Math.floor(resolvedSeconds % 3600 / 60);
+	const seconds = resolvedSeconds % 60;
+	const formatPart = (value) => String(value).padStart(2, "0");
+	if (hours > 0) return `${formatPart(hours)}:${formatPart(minutes)}:${formatPart(seconds)}`;
+	return `${formatPart(minutes)}:${formatPart(seconds)}`;
+}
+/**
+* 格式化播放量。
+*/
+function formatPlayCount(viewCount) {
+	return formatCompactCount(Number.isFinite(viewCount) ? Math.max(0, Math.floor(viewCount || 0)) : 0);
+}
+/**
+* 收藏夹详情页视频卡片。
+*/
+function CollectionDetailVideoCard({ id, title, coverImage, duration = 0, episodeCount = 0, viewCount = 0, is_more_link = false, isEditMode = false, isSelected = false, onToggleSelection }) {
+	const t = useTranslations("components.ui.list.videoList");
+	const href = `/video/${id}/${title}`;
+	const badgeLabel = is_more_link ? t("videoListItem.series") : t("videoListItem.movie");
+	const metaLabel = is_more_link ? episodeCount > 0 ? `${episodeCount}集全` : "" : formatDurationLabel(duration);
+	const playCountLabel = formatPlayCount(viewCount);
+	/**
+	* 切换卡片选中状态。
+	*/
+	function handleToggleSelection() {
+		onToggleSelection?.(id);
+	}
+	/**
+	* 处理键盘选中交互。
+	*/
+	function handleSelectionKeyDown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			handleToggleSelection();
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative h-[228px] w-full overflow-hidden rounded-[8px]",
+			children: [
+				/* @__PURE__ */ jsx(Image, {
+					src: coverImage || "/empty/default-cover.png",
+					alt: title || t("videoListItem.coverAlt"),
+					fill: true,
+					className: "object-cover"
+				}),
+				/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[8px] bg-[linear-gradient(180deg,rgba(8,2,17,0.56)_3.289%,rgba(8,2,17,0)_27.697%,rgba(8,2,17,0.8)_74.178%)]" }),
+				isEditMode && /* @__PURE__ */ jsx("div", {
+					className: "absolute left-3 top-3 z-20",
+					children: isSelected ? /* @__PURE__ */ jsx(CollectionSelectedIcon, {}) : /* @__PURE__ */ jsx(CollectionSelectIcon, {})
+				}),
+				!isEditMode && /* @__PURE__ */ jsxs("div", {
+					className: cn("absolute left-2 right-2 top-3 z-10 flex items-start justify-between gap-2"),
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "inline-flex h-5 items-center justify-center rounded-[4px] bg-white/20 px-1 text-center text-[12px] leading-[14px] text-white",
+						children: /* @__PURE__ */ jsx(Text, {
+							className: "text-[12px] leading-[14px] text-white",
+							children: badgeLabel
+						})
+					}), metaLabel ? /* @__PURE__ */ jsx(Text, {
+						className: "shrink-0 text-[14px] leading-4 text-white",
+						children: metaLabel
+					}) : null]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "absolute bottom-3 left-[10px] right-[10px] z-10 flex items-end gap-2",
+					children: [/* @__PURE__ */ jsx(Text, {
+						className: "min-w-0 flex-1 line-clamp-2 text-[16px] font-normal leading-6 text-[var(--color-text-white80)]",
+						dangerouslySetInnerHTML: { __html: title }
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "mb-1 flex shrink-0 items-center gap-1 text-[12px] leading-5 text-white",
+						children: [/* @__PURE__ */ jsx(CollectionPlayCountIcon, { className: "h-[14px] w-[18px] opacity-80" }), /* @__PURE__ */ jsx(Text, {
+							className: "text-[12px] leading-5 text-white",
+							children: playCountLabel
+						})]
+					})]
+				})
+			]
+		}), isEditMode ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "absolute inset-0 z-30 block w-full rounded-[8px] text-left",
+			onClick: handleToggleSelection,
+			onKeyDown: handleSelectionKeyDown,
+			"aria-pressed": isSelected,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: title || t("videoListItem.coverAlt")
+			})
+		}) : /* @__PURE__ */ jsx(Link, {
+			href,
+			className: "absolute inset-0 z-30 block rounded-[8px]",
+			"aria-label": title || t("videoListItem.coverAlt")
+		})]
+	});
+}
+
+//#endregion
+export { CollectionDetailVideoCard };