@fluid-app/portal-sdk 0.1.314 → 0.1.315

package/dist/{ShareablesScreen-QclWhq3D.cjs → ShareablesScreen-BeEEI0mD.cjs}

@@ -924,11 +924,27 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 }
 //#endregion
 //#region ../../shareables/ui/src/components/SharePage/SharePageImageDisplay.tsx
-function SharePageImageDisplay({ displayImage, displayTitle, displayVideo, isVideo, badgeLabel, rounded = true, showBadge = true }) {
+function buildPdfSrc(url, page = 1) {
+	try {
+		const parsed = new URL(url);
+		parsed.hash = `page=${page}&view=FitH`;
+		return parsed.toString();
+	} catch {
+		return `${url}#page=${page}&view=FitH`;
+	}
+}
+function SharePageImageDisplay({ displayImage, displayTitle, displayVideo, displayPdf, isVideo, badgeLabel, rounded = true, showBadge = true }) {
 	const [isPreviewOpen, setIsPreviewOpen] = (0, react.useState)(false);
+	const [currentPage, setCurrentPage] = (0, react.useState)(1);
 	const renderImage = useRenderImage();
+	const handlePrevPage = () => {
+		setCurrentPage((prev) => prev > 1 ? prev - 1 : prev);
+	};
+	const handleNextPage = () => {
+		setCurrentPage((prev) => prev + 1);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `relative h-full w-full overflow-hidden bg-gray-100 ${rounded ? "rounded-2xl" : ""}`,
+		className: `relative flex h-full w-full flex-col overflow-hidden bg-gray-100 ${rounded ? "rounded-2xl" : ""}`,
 		children: [
 			isVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
 				src: displayVideo || "",
@@ -937,7 +953,45 @@ function SharePageImageDisplay({ displayImage, displayTitle, displayVideo, isVid
 				muted: true,
 				loop: true,
 				controls: true
-			}) : renderImage({
+			}) : displayPdf ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+				src: buildPdfSrc(displayPdf, currentPage),
+				className: "min-h-0 w-full flex-1",
+				title: displayTitle || "PDF document"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-center gap-4 py-3",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+						onClick: handlePrevPage,
+						disabled: currentPage <= 1,
+						variant: "outline",
+						size: "sm",
+						className: "h-8 w-8 p-0",
+						"aria-label": "Previous page",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-center gap-2",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "number",
+							min: "1",
+							value: currentPage,
+							onChange: (e) => {
+								const page = parseInt(e.target.value);
+								if (page > 0) setCurrentPage(page);
+							},
+							className: "border-input bg-background w-14 rounded-md border px-2 py-1 text-center text-sm focus:ring-1 focus:outline-none"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+						onClick: handleNextPage,
+						variant: "outline",
+						size: "sm",
+						className: "h-8 w-8 p-0",
+						"aria-label": "Next page",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-4 w-4" })
+					})
+				]
+			})] }) : renderImage({
 				src: displayImage,
 				alt: displayTitle,
 				fill: true,
@@ -948,7 +1002,7 @@ function SharePageImageDisplay({ displayImage, displayTitle, displayVideo, isVid
 				className: "absolute top-3 right-3 z-0 bg-gray-100 text-gray-900 hover:bg-gray-100",
 				children: badgeLabel
 			}),
-			isVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+			(isVideo || displayPdf) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 				onClick: () => setIsPreviewOpen(true),
 				className: "absolute top-3 left-3 z-0 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-gray-700 backdrop-blur-sm transition-colors hover:bg-white",
 				variant: "ghost",
@@ -971,6 +1025,32 @@ function SharePageImageDisplay({ displayImage, displayTitle, displayVideo, isVid
 					controls: true,
 					onClick: (e) => e.stopPropagation()
 				})]
+			}),
+			isPreviewOpen && displayPdf && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "fixed inset-0 z-9999 flex items-center justify-center bg-black/70 backdrop-blur-sm",
+				onClick: () => setIsPreviewOpen(false),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+					onClick: (e) => {
+						e.stopPropagation();
+						setIsPreviewOpen(false);
+					},
+					className: "absolute top-4 right-4 z-10000 flex h-10 w-10 items-center justify-center rounded-full bg-white/90 text-gray-900 backdrop-blur-sm transition-colors hover:bg-white",
+					variant: "ghost",
+					size: "sm",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-5 w-5" })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "relative",
+					onClick: (e) => e.stopPropagation(),
+					style: {
+						width: "95vw",
+						height: "90vh"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+						src: buildPdfSrc(displayPdf, currentPage),
+						className: "h-full w-full rounded-lg bg-white",
+						title: displayTitle || "PDF document"
+					})
+				})]
 			})
 		]
 	});
@@ -2163,7 +2243,9 @@ function MediaDetailScreen({ mediaId, onNavigate, onBack }) {
 	const displayTitle = mediaItem?.title || "";
 	const displayImage = mediaItem?.image_url || "";
 	const displayVideo = mediaItem?.video_url || "";
+	const displayPdf = mediaItem?.pdf_url || "";
 	const isVideo = mediaItem?.kind === "video" && !!displayVideo;
+	const isPdf = mediaItem?.kind === "pdf" && !!displayPdf;
 	const badgeLabel = getBadgeLabel(mediaItem?.kind ?? null, {
 		video: t("media_type_video"),
 		image: t("media_type_image"),
@@ -2211,6 +2293,7 @@ function MediaDetailScreen({ mediaId, onNavigate, onBack }) {
 					displayImage,
 					displayTitle,
 					displayVideo: isVideo ? displayVideo : void 0,
+					displayPdf: isPdf ? displayPdf : void 0,
 					isVideo,
 					badgeLabel,
 					rounded: true,
@@ -13913,4 +13996,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-QclWhq3D.cjs.map
+//# sourceMappingURL=ShareablesScreen-BeEEI0mD.cjs.map