@fluid-app/portal-sdk 0.1.192 → 0.1.194

package/dist/{PortalContentApiProvider-Bwi7FOTs.mjs → PortalContentApiProvider-Bxtd3cTD.mjs}

@@ -6710,6 +6710,63 @@ const FilePicker = ({ config: configInput = {}, onFilesSelected, onClose, open,
 	})] });
 };
 //#endregion
+//#region ../../shareables/ui/src/hooks/use-thumbnail-meta.ts
+function useThumbnailMeta(src) {
+	const [meta, setMeta] = useState(null);
+	const [loadError, setLoadError] = useState(false);
+	const fileName = src?.split("/").pop()?.split("?")[0] ?? "thumbnail";
+	const handleLoad = useCallback((e) => {
+		setLoadError(false);
+		const img = e.currentTarget;
+		setMeta((prev) => ({
+			width: img.naturalWidth,
+			height: img.naturalHeight,
+			size: prev?.size ?? null
+		}));
+	}, []);
+	const handleError = useCallback(() => {
+		setLoadError(true);
+	}, []);
+	useEffect(() => {
+		if (!src) {
+			setMeta(null);
+			return;
+		}
+		setMeta(null);
+		const controller = new AbortController();
+		fetch(src, {
+			method: "HEAD",
+			signal: controller.signal
+		}).then((res) => {
+			if (!res.ok) return;
+			const len = res.headers.get("content-length");
+			if (len) {
+				const kb = Number(len) / 1024;
+				const sizeStr = kb >= 1024 ? `${(kb / 1024).toFixed(1)} MB` : `${kb.toFixed(1)} KB`;
+				setMeta((prev) => ({
+					width: prev?.width ?? 0,
+					height: prev?.height ?? 0,
+					size: sizeStr
+				}));
+			}
+		}).catch((err) => {
+			if (err instanceof DOMException && err.name === "AbortError") return;
+			console.warn("[useThumbnailMeta] HEAD failed:", err);
+		});
+		return () => controller.abort();
+	}, [src]);
+	useEffect(() => {
+		setLoadError(false);
+	}, [src]);
+	return {
+		meta,
+		fileName,
+		handleLoad,
+		handleError,
+		loadError
+	};
+}
+//#endregion
 //#region ../../shareables/ui/src/components/playlists/RichTextEditor.tsx
 function RichTextEditor({ value, onChange, placeholder = "Start writing...", className, editorClassName }) {
 	const editor = useEditor({
@@ -7432,44 +7489,66 @@ function VideoThumbnailSelector({ videoUrl, thumbnailUrl, onThumbnailCaptured, o
 		setFrameSelectorOpen(true);
 	}, []);
 	const isMetadataLoaded = duration > 0;
+	const { meta: imgMeta, fileName: thumbFileName, handleLoad: handleImgLoad, handleError: handleImgError, loadError: imgLoadError } = useThumbnailMeta(thumbnailUrl);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-3",
 		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
 			className: "text-foreground mb-1.5 block text-sm font-medium",
 			children: "Thumbnail"
 		}), thumbnailUrl ? /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ jsx("img", {
+			className: "flex items-start gap-4",
+			children: [imgLoadError ? /* @__PURE__ */ jsx("div", {
+				className: "bg-muted flex h-28 w-48 shrink-0 items-center justify-center rounded-md border",
+				children: /* @__PURE__ */ jsx(ImageIcon, { className: "text-muted-foreground h-8 w-8" })
+			}) : /* @__PURE__ */ jsx("img", {
 				src: thumbnailUrl,
 				alt: "Video thumbnail",
-				className: "h-16 w-24 shrink-0 rounded-md border object-cover"
+				className: "w-48 shrink-0 rounded-md border object-contain",
+				onLoad: handleImgLoad,
+				onError: handleImgError
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-foreground text-sm font-medium",
-					children: "Current thumbnail"
-				}), /* @__PURE__ */ jsx("div", {
-					className: "mt-2 flex flex-col items-start gap-2",
-					children: !disabled && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: handleOpenDialog,
-						className: "gap-1.5",
-						children: [/* @__PURE__ */ jsx(Camera, { className: "h-3.5 w-3.5" }), "Select from video frame"]
-					}), onThumbnailSelected && /* @__PURE__ */ jsxs(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: onThumbnailSelected,
-						className: "gap-1.5",
-						children: [/* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5" }), "Select New Image"]
-					})] })
-				})]
+				className: "min-w-0 flex-1 pt-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-foreground truncate text-sm font-medium",
+						children: thumbFileName
+					}),
+					imgMeta && imgMeta.width > 0 && /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-xs",
+						children: [
+							imgMeta.width,
+							" × ",
+							imgMeta.height,
+							"px"
+						]
+					}),
+					imgMeta?.size && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: imgMeta.size
+					}),
+					!disabled && /* @__PURE__ */ jsxs("div", {
+						className: "mt-2 flex flex-col items-start gap-2",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: handleOpenDialog,
+							className: "gap-1.5",
+							children: [/* @__PURE__ */ jsx(Camera, { className: "h-3.5 w-3.5" }), "Select from video frame"]
+						}), onThumbnailSelected && /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onThumbnailSelected,
+							className: "gap-1.5",
+							children: [/* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5" }), "Select New Image"]
+						})]
+					})
+				]
 			})]
 		}) : /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3",
+			className: "flex items-center gap-4",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "bg-muted flex h-16 w-24 shrink-0 items-center justify-center rounded-md border",
-				children: /* @__PURE__ */ jsx(Camera, { className: "text-muted-foreground h-6 w-6" })
+				className: "bg-muted flex h-28 w-48 shrink-0 items-center justify-center rounded-md border",
+				children: /* @__PURE__ */ jsx(Camera, { className: "text-muted-foreground h-8 w-8" })
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ jsx("p", {
@@ -7591,52 +7670,77 @@ function buildEditState(mediaItem) {
 		blockCrawler: mediaItem.seo?.block_crawler ?? mediaItem.settings?.seo?.block_crawler ?? false
 	};
 }
+function ThumbnailWithMeta({ src, onReplace }) {
+	const { meta, fileName, handleLoad, handleError, loadError } = useThumbnailMeta(src);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-4",
+		children: [loadError ? /* @__PURE__ */ jsx("div", {
+			className: "bg-muted flex h-28 w-48 shrink-0 items-center justify-center rounded-md border",
+			children: /* @__PURE__ */ jsx(ImageIcon, { className: "text-muted-foreground h-8 w-8" })
+		}) : /* @__PURE__ */ jsx("img", {
+			src,
+			alt: "Thumbnail",
+			className: "w-48 shrink-0 rounded-md border object-contain",
+			onLoad: handleLoad,
+			onError: handleError
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 pt-1",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-foreground truncate text-sm font-medium",
+					children: fileName
+				}),
+				meta && meta.width > 0 && /* @__PURE__ */ jsxs("p", {
+					className: "text-muted-foreground text-xs",
+					children: [
+						meta.width,
+						" × ",
+						meta.height,
+						"px"
+					]
+				}),
+				meta?.size && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: meta.size
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-2",
+					children: /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: onReplace,
+						className: "gap-1.5",
+						children: [/* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5" }), "Select New Image"]
+					})
+				})
+			]
+		})]
+	});
+}
 function CurrentMediaPreview({ mediaItem, pendingFileUrl, pendingKind }) {
 	const effectiveKind = pendingKind ?? mediaItem.content_format ?? mediaItem.kind;
 	const effectiveVideoUrl = pendingKind === "video" ? pendingFileUrl : mediaItem.video_url;
 	const effectiveImageUrl = pendingKind === "image" ? pendingFileUrl : pendingKind ? null : mediaItem.image_url;
 	const effectivePdfUrl = pendingKind === "pdf" ? pendingFileUrl : mediaItem.pdf_url;
-	if (effectiveKind === "video" && effectiveVideoUrl) return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-3",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "relative aspect-video w-full overflow-hidden rounded-lg border bg-black",
-			children: /* @__PURE__ */ jsx("video", {
-				src: effectiveVideoUrl,
-				poster: effectiveImageUrl ?? void 0,
-				controls: true,
-				preload: "metadata",
-				className: "absolute inset-0 h-full w-full object-contain"
-			})
-		}), effectiveImageUrl && /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ jsx("img", {
-				src: effectiveImageUrl,
-				alt: "Thumbnail",
-				className: "h-16 w-16 shrink-0 rounded-md border object-cover"
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-foreground text-sm font-medium",
-					children: "Thumbnail"
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground text-xs",
-					children: "Current video thumbnail"
-				})]
-			})]
-		})]
+	if (effectiveKind === "video" && effectiveVideoUrl) return /* @__PURE__ */ jsx("div", {
+		className: "relative aspect-video w-full overflow-hidden rounded-lg border bg-black",
+		children: /* @__PURE__ */ jsx("video", {
+			src: effectiveVideoUrl,
+			poster: effectiveImageUrl ?? void 0,
+			controls: true,
+			preload: "metadata",
+			className: "absolute inset-0 h-full w-full object-contain"
+		})
 	});
-	if (effectiveKind === "pdf" && effectivePdfUrl) return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-3 rounded-lg border p-4",
-		children: [/* @__PURE__ */ jsx(FileText, { className: "text-muted-foreground h-8 w-8 shrink-0" }), /* @__PURE__ */ jsxs("div", {
-			className: "min-w-0 flex-1",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-foreground truncate text-sm font-medium",
-				children: mediaItem.title ?? "PDF"
-			}), /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-xs",
-				children: "pdf"
-			})]
-		})]
+	if (effectiveKind === "pdf" && effectivePdfUrl) return /* @__PURE__ */ jsx("div", {
+		className: "relative w-full overflow-hidden rounded-lg border",
+		children: /* @__PURE__ */ jsx("iframe", {
+			src: `${effectivePdfUrl}#view=FitH`,
+			sandbox: "allow-same-origin",
+			className: "h-auto w-full",
+			style: { minHeight: "50vh" },
+			title: mediaItem.title ?? "PDF document"
+		})
 	});
 	if (effectiveImageUrl) return /* @__PURE__ */ jsx("div", {
 		className: "relative aspect-video w-full overflow-hidden rounded-lg border",
@@ -7871,15 +7975,12 @@ function MediaEditScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-4 px-4 pt-4 pb-24 md:px-10 md:py-6",
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "mx-auto flex w-full max-w-5xl flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ jsx("h1", {
-					className: "text-foreground min-w-0 flex-1 text-xl font-semibold break-words",
+			/* @__PURE__ */ jsx("div", {
+				className: "mx-auto flex w-full max-w-5xl items-center gap-3",
+				children: /* @__PURE__ */ jsx("h1", {
+					className: "text-foreground text-xl font-semibold break-words",
 					children: editState.title || displayTitle || "Media"
-				}), /* @__PURE__ */ jsx("span", {
-					className: `inline-flex shrink-0 items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${editState.active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-600"}`,
-					children: editState.active ? "Active" : "Inactive"
-				})]
+				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "mx-auto grid w-full max-w-5xl grid-cols-1 gap-6 md:grid-cols-[3fr_1fr]",
@@ -7920,8 +8021,8 @@ function MediaEditScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 									const rawContentFormat = mediaItem.content_format;
 									const effectiveKind = pendingKind ?? rawContentFormat ?? mediaItem.kind;
 									const effectiveVideoUrl = pendingKind === "video" ? pendingMediaFile?.file_url : mediaItem.video_url;
-									if (effectiveKind !== "video" || !effectiveVideoUrl || readOnly) return null;
-									return /* @__PURE__ */ jsxs("div", {
+									if (readOnly) return null;
+									if (effectiveKind === "video" && effectiveVideoUrl) return /* @__PURE__ */ jsxs("div", {
 										className: "border-border mt-4 border-t pt-4",
 										children: [/* @__PURE__ */ jsx(VideoThumbnailSelector, {
 											videoUrl: effectiveVideoUrl,
@@ -7950,6 +8051,44 @@ function MediaEditScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 											children: "Pending — save to apply"
 										})]
 									});
+									if (effectiveKind === "pdf") {
+										const currentThumbnail = pendingThumbnail ?? mediaItem.image_url;
+										return /* @__PURE__ */ jsxs("div", {
+											className: "border-border mt-4 border-t pt-4",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "space-y-3",
+												children: [/* @__PURE__ */ jsx("label", {
+													className: "text-foreground mb-1.5 block text-sm font-medium",
+													children: "Thumbnail"
+												}), currentThumbnail ? /* @__PURE__ */ jsx(ThumbnailWithMeta, {
+													src: currentThumbnail,
+													onReplace: () => setIsThumbnailPickerOpen(true)
+												}) : /* @__PURE__ */ jsxs("div", {
+													className: "flex items-center gap-4",
+													children: [/* @__PURE__ */ jsx("div", {
+														className: "bg-muted flex h-28 w-48 shrink-0 items-center justify-center rounded-md border",
+														children: /* @__PURE__ */ jsx(ImageIcon, { className: "text-muted-foreground h-8 w-8" })
+													}), /* @__PURE__ */ jsxs("div", {
+														className: "min-w-0 flex-1",
+														children: [/* @__PURE__ */ jsx("p", {
+															className: "text-muted-foreground mb-2 text-sm",
+															children: "No thumbnail set"
+														}), /* @__PURE__ */ jsxs(Button, {
+															variant: "outline",
+															size: "sm",
+															onClick: () => setIsThumbnailPickerOpen(true),
+															className: "gap-1.5",
+															children: [/* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5" }), "Select New Image"]
+														})]
+													})]
+												})]
+											}), pendingThumbnail && /* @__PURE__ */ jsx("p", {
+												className: "text-muted-foreground mt-1.5 text-xs",
+												children: "Pending — save to apply"
+											})]
+										});
+									}
+									return null;
 								})()
 							]
 						}),
@@ -8037,7 +8176,7 @@ function MediaEditScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 						className: "border-border bg-card rounded-lg border p-4 md:p-5",
 						children: [
 							/* @__PURE__ */ jsxs("div", {
-								className: "mb-4 flex flex-wrap items-center justify-between gap-2",
+								className: "mb-4 flex items-center justify-between",
 								children: [/* @__PURE__ */ jsx("h3", {
 									className: "text-foreground text-base font-semibold",
 									children: "SEO And Link Sharing"
@@ -8224,14 +8363,24 @@ function deriveMediaType(mimeType) {
 	return "image";
 }
 function FilePreview({ result, mediaType }) {
-	if (mediaType === "image") return /* @__PURE__ */ jsx("div", {
-		className: "relative aspect-video w-full overflow-hidden rounded-lg border",
-		children: /* @__PURE__ */ jsx("img", {
-			src: result.file_url,
-			alt: result.metadata.file_name,
-			className: "absolute inset-0 h-full w-full object-cover"
-		})
-	});
+	const thumbnailSrc = mediaType === "image" ? result.file_url : result.thumbnail_url;
+	if (thumbnailSrc) {
+		const Icon = mediaType === "video" ? Video : mediaType === "pdf" ? FileText : null;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative aspect-video w-full overflow-hidden rounded-lg border",
+			children: [/* @__PURE__ */ jsx("img", {
+				src: thumbnailSrc,
+				alt: result.metadata.file_name,
+				className: "absolute inset-0 h-full w-full object-cover"
+			}), Icon && /* @__PURE__ */ jsxs("div", {
+				className: "absolute bottom-2 left-2 flex items-center gap-1.5 rounded-md bg-black/60 px-2 py-1 text-white",
+				children: [/* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium",
+					children: mediaType === "video" ? "Video" : "PDF"
+				})]
+			})]
+		});
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-3 rounded-lg border p-4",
 		children: [/* @__PURE__ */ jsx(mediaType === "video" ? Video : FileText, { className: "text-muted-foreground h-8 w-8 shrink-0" }), /* @__PURE__ */ jsxs("div", {
@@ -8269,7 +8418,7 @@ function MediaCreateScreen({ onNavigate, onBack }) {
 	}) }), [onBack, navigate]));
 	const [title, setTitle] = useState("");
 	const [description, setDescription] = useState("");
-	const [active, setActive] = useState(true);
+	const [active] = useState(true);
 	const [selectedResult, setSelectedResult] = useState(null);
 	const [isPickerOpen, setIsPickerOpen] = useState(false);
 	const [isCtaModalOpen, setIsCtaModalOpen] = useState(false);
@@ -8387,15 +8536,12 @@ function MediaCreateScreen({ onNavigate, onBack }) {
 					children: isCreating ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : "Save"
 				})
 			}),
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				className: "mx-auto flex w-full max-w-5xl items-center gap-3",
-				children: [/* @__PURE__ */ jsx("h1", {
+				children: /* @__PURE__ */ jsx("h1", {
 					className: "text-foreground text-xl font-semibold",
 					children: title.trim() || "New Media"
-				}), /* @__PURE__ */ jsx("span", {
-					className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-600"}`,
-					children: active ? "Active" : "Inactive"
-				})]
+				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "mx-auto grid w-full max-w-5xl gap-6 md:grid-cols-[3fr_1fr]",
@@ -11081,7 +11227,7 @@ function createMediaAdapter(client) {
 			};
 		},
 		createMedia: async (mediaData) => {
-			const contentFormat = mediaData.kind === "image" || mediaData.kind === "video" || mediaData.kind === "pdf" || mediaData.kind === "ppt" || mediaData.kind === "link" ? mediaData.kind : void 0;
+			const contentFormat = mediaData.kind === "image" || mediaData.kind === "video" || mediaData.kind === "pdf" || mediaData.kind === "ppt" ? mediaData.kind : void 0;
 			return toBffMediumResponse((await portAdapter.createMedia({
 				title: mediaData.title ?? "",
 				description: mediaData.description,
@@ -11098,7 +11244,7 @@ function createMediaAdapter(client) {
 			if (mediaData.active !== void 0) updateBody.status = mediaData.active ? "active" : "draft";
 			const newUrl = mediaData.image_url ?? mediaData.video_url ?? mediaData.pdf_url ?? void 0;
 			if (newUrl !== void 0) updateBody.url = newUrl;
-			if (mediaData.kind === "image" || mediaData.kind === "video" || mediaData.kind === "pdf" || mediaData.kind === "ppt" || mediaData.kind === "link") updateBody.content_format = mediaData.kind;
+			if (mediaData.kind === "image" || mediaData.kind === "video" || mediaData.kind === "pdf" || mediaData.kind === "ppt") updateBody.content_format = mediaData.kind;
 			if (mediaData.thumbnail_url !== void 0) updateBody.thumbnail_url = mediaData.thumbnail_url;
 			if (mediaData.settings?.cta) {
 				const rawType = mediaData.settings.cta.type;
@@ -11132,7 +11278,7 @@ function mapPlaylist(raw) {
 		title: raw.title ?? "",
 		description: raw.description ?? null,
 		items_count: raw.items_count ?? 0,
-		user_id: raw.user_id,
+		user_id: raw.member_id ?? void 0,
 		is_favorited: raw.is_favorited,
 		image_url: raw.image_url ?? null,
 		created_at: raw.created_at ?? "",
@@ -11659,4 +11805,4 @@ function PortalContentApiProvider({ children }) {
 //#endregion
 export { ShareablesApp as a, ShareablesCoreProvider as c, ProductsApp as i, usePortalContentContext as n, useFilePickerApi as o, toggleFavorite as r, ShareablesUIProvider as s, PortalContentApiProvider as t };
 
-//# sourceMappingURL=PortalContentApiProvider-Bwi7FOTs.mjs.map
+//# sourceMappingURL=PortalContentApiProvider-Bxtd3cTD.mjs.map