@fluid-app/portal-sdk 0.1.131 → 0.1.133

package/dist/{src-DIcd2_ex.cjs → src-C5GUPE_i.cjs}

@@ -1373,15 +1373,20 @@ function MediaListingScreen({ onNavigate }) {
 	const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, error } = (0, _tanstack_react_query.useInfiniteQuery)({
 		queryKey: shareablesKeys.media.list(debouncedSearch, sortDesc, repContext),
 		queryFn: async ({ pageParam = 1 }) => {
-			return (await api.media.getMedia({
+			const response = await api.media.getMedia({
 				page: pageParam,
 				per_page: PAGE_SIZE$2,
 				search_query: debouncedSearch || void 0,
 				sorted_by: sortDesc ? "title_desc" : "title_asc"
-			})).media;
+			});
+			return {
+				media: response.media,
+				nextPage: response.meta?.next ?? null
+			};
 		},
-		getNextPageParam: (lastPage, allPages) => lastPage.length === PAGE_SIZE$2 ? allPages.length + 1 : void 0,
-		initialPageParam: 1
+		getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
+		initialPageParam: 1,
+		placeholderData: _tanstack_react_query.keepPreviousData
 	});
 	const handleIntersect = (0, react.useCallback)((entries) => {
 		if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
@@ -1400,7 +1405,7 @@ function MediaListingScreen({ onNavigate }) {
 		observer.observe(target);
 		return () => observer.disconnect();
 	}, [handleIntersect]);
-	const mediaItems = data?.pages.flat() ?? [];
+	const mediaItems = data?.pages.flatMap((page) => page.media) ?? [];
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-6 px-4 py-4 md:px-10 md:py-6",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6825,7 +6830,8 @@ function PlaylistsListingScreen(_props) {
 	const observerTarget = (0, react.useRef)(null);
 	const sortParam = currentSort.sortDirection === "desc" ? `-${currentSort.sortBy}` : currentSort.sortBy;
 	const queryKey = [
-		"shareables-playlists",
+		...shareablesKeys.playlists.all,
+		"list",
 		debouncedSearch,
 		sortParam
 	];
@@ -6844,7 +6850,8 @@ function PlaylistsListingScreen(_props) {
 			};
 		},
 		getNextPageParam: (lastPage) => lastPage.nextCursor ?? void 0,
-		initialPageParam: void 0
+		initialPageParam: void 0,
+		placeholderData: _tanstack_react_query.keepPreviousData
 	});
 	const allPlaylists = (0, react.useMemo)(() => data?.pages.flatMap((page) => page.playlists) ?? [], [data?.pages]);
 	(0, react.useEffect)(() => {
@@ -6922,7 +6929,7 @@ function PlaylistsListingScreen(_props) {
 			});
 		},
 		onSettled: () => {
-			queryClient.invalidateQueries({ queryKey: ["shareables-playlists"] });
+			queryClient.invalidateQueries({ queryKey: shareablesKeys.playlists.all });
 		}
 	});
 	const handleFavorite = (0, react.useCallback)((playlistId) => {
@@ -6941,7 +6948,7 @@ function PlaylistsListingScreen(_props) {
 		if (!window.confirm("Are you sure you want to delete this playlist?")) return;
 		try {
 			await onDeletePlaylist(playlistId);
-			queryClient.invalidateQueries({ queryKey: ["shareables-playlists"] });
+			queryClient.invalidateQueries({ queryKey: shareablesKeys.playlists.all });
 			showToast({
 				title: "Playlist deleted",
 				type: "success"
@@ -7001,8 +7008,8 @@ function PlaylistsListingScreen(_props) {
 				className: GRID_CLASS$1,
 				children: allPlaylists.map((playlist) => {
 					const firstItem = playlist.items?.[0];
-					const imageUrl = playlist.image_url || firstItem?.relateable?.image_url || firstItem?.relateable?.compressed_image_url;
-					const itemCount = playlist.items?.length ?? 0;
+					const imageUrl = playlist.image_url ?? firstItem?.image_url ?? firstItem?.relateable?.image_url ?? firstItem?.relateable?.compressed_image_url;
+					const itemCount = playlist.items_count ?? playlist.items?.length ?? 0;
 					const canEdit = !readOnly && playlist.user_id === user?.id;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaylistCard, {
 						title: playlist.title || "Untitled Playlist",
@@ -7211,17 +7218,18 @@ function PlaylistItemsList({ items, onSelectItem, selectedItemIndex = 0, onNavig
 			className: "space-y-3",
 			children: items.map((item, index) => {
 				const relateable = item.relateable;
-				const imageUrl = relateable?.image_url || relateable?.compressed_image_url || DEFAULT_IMAGE$2;
-				const title = relateable?.title || "Untitled";
+				const imageUrl = item.image_url ?? relateable?.image_url ?? relateable?.compressed_image_url ?? DEFAULT_IMAGE$2;
+				const title = item.title ?? relateable?.title ?? "Untitled";
 				const rawPrice = relateable?.display_price || relateable?.price;
 				const price = rawPrice && parseFloat(rawPrice.replace(/[^0-9.-]/g, "")) > 0 ? rawPrice : null;
-				const itemType = getItemType(item.relateable_type, relateable?.kind);
-				const isVideo = relateable?.kind === "video";
-				const isImage = relateable?.kind === "image";
+				const kind = item.kind ?? relateable?.kind;
+				const itemType = getItemType(item.relateable_type, kind);
+				const isVideo = kind === "video";
+				const isImage = kind === "image";
 				const isProduct = item.relateable_type === "Product";
 				const isNavigable = NAVIGABLE_RELATEABLE_TYPES.has(item.relateable_type ?? "");
-				const videoLength = formatVideoLength(relateable?.duration);
-				const fileType = getFileType(relateable?.media_format, relateable?.image_url);
+				const videoLength = formatVideoLength(item.duration ?? relateable?.duration);
+				const fileType = getFileType(item.media_format ?? relateable?.media_format, item.image_url ?? relateable?.image_url);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					onClick: () => handleCardClick(index),
 					className: `hover:bg-muted-600 flex w-full cursor-pointer items-start gap-3 rounded-lg p-3 text-left transition-all ${index === selectedItemIndex ? "bg-muted-600" : "bg-muted"}`,
@@ -7383,11 +7391,12 @@ function PlaylistDetailScreen({ playlistId, onNavigate }) {
 		navigate
 	]);
 	const selectedPlaylistItem = playlist?.items?.[selectedPlaylistItemIndex];
-	const displayImage = selectedPlaylistItem?.relateable?.image_url || selectedPlaylistItem?.relateable?.compressed_image_url || DEFAULT_IMAGE$1;
+	const displayImage = selectedPlaylistItem?.image_url ?? selectedPlaylistItem?.relateable?.image_url ?? selectedPlaylistItem?.relateable?.compressed_image_url ?? DEFAULT_IMAGE$1;
 	const strippedDescription = stripTags(playlist?.description || playlist?.search_engine_optimizer?.description || "");
 	const shouldShowReadMore = strippedDescription.length > 150;
-	const displayVideo = selectedPlaylistItem?.relateable?.kind === "video" ? selectedPlaylistItem?.relateable?.video_url || void 0 : void 0;
-	const isVideo = selectedPlaylistItem?.relateable?.kind === "video" && !!displayVideo;
+	const selectedKind = selectedPlaylistItem?.kind ?? selectedPlaylistItem?.relateable?.kind;
+	const displayVideo = selectedKind === "video" ? selectedPlaylistItem?.video_url ?? selectedPlaylistItem?.relateable?.video_url ?? void 0 : void 0;
+	const isVideo = selectedKind === "video" && !!displayVideo;
 	const taggedProducts = playlist?.items?.filter((item) => item.relateable_type === "Product").map((item) => item.relateable).filter((p) => !!p) || [];
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "flex items-center justify-center py-16",
@@ -8019,7 +8028,9 @@ function SortableTable({ items, setItems, onDeleteItem, isDeletePending, enableR
 		relateable_id: item.relateable?.id,
 		relateable: item.relateable,
 		order: index + 1,
-		title: item.relateable?.title || `${item.relateable_type} #${item.relateable?.id}`
+		title: item.title ?? item.relateable?.title ?? `${item.relateable_type} #${item.relateable?.id}`,
+		image_url: item.image_url ?? item.relateable?.image_url ?? null,
+		kind: item.kind ?? item.relateable?.kind ?? null
 	}));
 	const tableContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "border-border w-full overflow-x-auto rounded-lg border",
@@ -8070,8 +8081,8 @@ function SortableTable({ items, setItems, onDeleteItem, isDeletePending, enableR
 								className: "flex min-w-0 items-center gap-3",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "bg-muted flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded",
-									children: row.relateable?.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-										src: String(row.relateable.image_url),
+									children: row.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										src: String(row.image_url),
 										alt: String(row.title),
 										className: "h-full w-full object-cover"
 									}) : getItemIcon(row.relateable_type || "")
@@ -8088,7 +8099,7 @@ function SortableTable({ items, setItems, onDeleteItem, isDeletePending, enableR
 							className: "px-6 py-4 whitespace-nowrap",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "bg-muted text-foreground inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(typeBadgeIcon(row.relateable_type || "", row.relateable?.kind || ""), { className: "h-3 w-3 shrink-0" }), getTypeDisplay(row.relateable_type || "", row.relateable?.kind || "")] })
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(typeBadgeIcon(row.relateable_type || "", row.kind || ""), { className: "h-3 w-3 shrink-0" }), getTypeDisplay(row.relateable_type || "", row.kind || "")] })
 							})
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
@@ -8919,4 +8930,4 @@ Object.defineProperty(exports, "getFileMimeType", {
 	}
 });
 
-//# sourceMappingURL=src-DIcd2_ex.cjs.map
+//# sourceMappingURL=src-C5GUPE_i.cjs.map