@fluid-app/portal-sdk 0.1.196 → 0.1.198

package/dist/{PortalContentApiProvider-Zoz_YDJM.cjs → PortalContentApiProvider-Bn44plrY.cjs}

@@ -1424,6 +1424,35 @@ function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortal
 	});
 }
 //#endregion
+//#region ../../shareables/ui/src/components/OwnerFilterTabs.tsx
+function getFilteredEmptyMessage({ searchTerm, ownerFilter, hasOtherFilters = false, entityName = "items", defaultMessage = "Nothing available at the moment." }) {
+	const isFiltered = ownerFilter !== "all" || hasOtherFilters;
+	if (searchTerm && isFiltered) return `No ${entityName} match "${searchTerm}" with the current filters. Try a different search term or switch to "All".`;
+	if (searchTerm) return `No ${entityName} match "${searchTerm}". Try a different search term.`;
+	if (isFiltered) return `No matching ${entityName} for the current filters.`;
+	return defaultMessage;
+}
+function OwnerFilterTabs({ value, onValueChange, myLabel = "Mine" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Tabs, {
+		value,
+		onValueChange: (v) => onValueChange(v),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TabsList, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
+				value: "all",
+				children: "All"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
+				value: "my",
+				children: myLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
+				value: "company",
+				children: "Company"
+			})
+		] })
+	});
+}
+//#endregion
 //#region ../../shareables/ui/src/components/screens/MediaListingScreen.tsx
 const PAGE_SIZE$3 = 24;
 const GRID_CLASS$2 = "grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4";
@@ -1575,23 +1604,10 @@ function MediaListingScreen({ onNavigate }) {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Tabs, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
 					value: ownerFilter,
-					onValueChange: (value) => setOwnerFilter(value),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.TabsList, { children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
-							value: "all",
-							children: "All"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
-							value: "my",
-							children: "My Media"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
-							value: "company",
-							children: "Company"
-						})
-					] })
+					onValueChange: setOwnerFilter,
+					myLabel: "My Media"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "ml-auto flex items-center gap-2",
 					children: [
@@ -1672,7 +1688,13 @@ function MediaListingScreen({ onNavigate }) {
 				className: "flex flex-col items-center justify-center py-16",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "text-muted-foreground text-sm",
-					children: debouncedSearch ? "No media match your search." : ownerFilter !== "all" || kindFilter !== "all" ? "No matching media on this page — try another page or adjusting filters." : "No media available."
+					children: getFilteredEmptyMessage({
+						searchTerm: debouncedSearch,
+						ownerFilter,
+						hasOtherFilters: kindFilter !== "all",
+						entityName: "media",
+						defaultMessage: "No media available."
+					})
 				})
 			}) : viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: GRID_CLASS$2,
@@ -8915,7 +8937,11 @@ function PlaylistsListingScreen(_props) {
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("title");
+	const [ownerFilter, setOwnerFilter] = (0, react.useState)("all");
 	const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
+	(0, react.useEffect)(() => {
+		setSelectedIds(/* @__PURE__ */ new Set());
+	}, [ownerFilter]);
 	(0, react.useEffect)(() => {
 		const timer = setTimeout(() => setDebouncedSearch(searchTerm), 300);
 		return () => clearTimeout(timer);
@@ -8946,6 +8972,15 @@ function PlaylistsListingScreen(_props) {
 		placeholderData: _tanstack_react_query.keepPreviousData
 	});
 	const allPlaylists = (0, react.useMemo)(() => data?.pages.flatMap((page) => page.playlists) ?? [], [data?.pages]);
+	const filteredPlaylists = (0, react.useMemo)(() => {
+		if (ownerFilter === "all" || !user?.id) return allPlaylists;
+		if (ownerFilter === "my") return allPlaylists.filter((p) => p.user_id === user.id);
+		return allPlaylists.filter((p) => p.user_id !== user.id);
+	}, [
+		allPlaylists,
+		ownerFilter,
+		user?.id
+	]);
 	(0, react.useEffect)(() => {
 		const target = observerTarget.current;
 		if (!target) return;
@@ -8972,9 +9007,9 @@ function PlaylistsListingScreen(_props) {
 		});
 	}, []);
 	const handleSelectAll = (0, react.useCallback)(() => {
-		if (selectedIds.size === allPlaylists.length) setSelectedIds(/* @__PURE__ */ new Set());
-		else setSelectedIds(new Set(allPlaylists.map((p) => p.id)));
-	}, [selectedIds.size, allPlaylists]);
+		if (selectedIds.size === filteredPlaylists.length) setSelectedIds(/* @__PURE__ */ new Set());
+		else setSelectedIds(new Set(filteredPlaylists.map((p) => p.id)));
+	}, [selectedIds.size, filteredPlaylists]);
 	const handleClearSelection = (0, react.useCallback)(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, []);
@@ -9074,14 +9109,18 @@ function PlaylistsListingScreen(_props) {
 		children: [
 			hasSelection ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BulkSelectionBar, {
 				selectedCount: selectedIds.size,
-				totalCount: allPlaylists.length,
+				totalCount: filteredPlaylists.length,
 				onSelectAll: handleSelectAll,
 				onClearSelection: handleClearSelection,
 				onBulkFavorite: handleBulkFavorite
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex justify-end",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w-full max-w-sm",
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
+					value: ownerFilter,
+					onValueChange: setOwnerFilter,
+					myLabel: "My Playlists"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "ml-auto w-full max-w-sm",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchSort.SearchSort, {
 						searchValue: searchTerm,
 						onSearchChange: setSearchTerm,
@@ -9107,17 +9146,22 @@ function PlaylistsListingScreen(_props) {
 						sortValue,
 						onSortChange: setSortValue
 					})
-				})
+				})]
 			}),
-			allPlaylists.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			filteredPlaylists.length === 0 && !isFetchingNextPage && !hasNextPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex flex-col items-center justify-center py-16",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "text-muted-foreground text-sm",
-					children: searchTerm ? `No playlists match "${searchTerm}". Try a different search term.` : "There are no playlists available at the moment."
+					children: getFilteredEmptyMessage({
+						searchTerm,
+						ownerFilter,
+						entityName: "playlists",
+						defaultMessage: "There are no playlists available at the moment."
+					})
 				})
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: GRID_CLASS$1,
-				children: allPlaylists.map((playlist) => {
+				children: filteredPlaylists.map((playlist) => {
 					const firstItem = playlist.items?.[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;
@@ -10185,6 +10229,7 @@ function PlaylistItemsSection({ playlistId }) {
 			});
 			return;
 		}
+		let nextOrder = tableItems.length + 1;
 		for (const result of mediaResults) {
 			const label = result.metadata?.file_name?.replace(/\.[^/.]+$/, "") || `Medium #${result.asset_id}`;
 			const relateableId = result.asset_id;
@@ -10196,9 +10241,10 @@ function PlaylistItemsSection({ playlistId }) {
 				});
 				continue;
 			}
+			const order = nextOrder++;
 			const newItem = {
 				id: Date.now() + Math.random(),
-				order: 0,
+				order,
 				relateable_type: relateableType,
 				relateable: {
 					id: relateableId,
@@ -10213,7 +10259,7 @@ function PlaylistItemsSection({ playlistId }) {
 					data: {
 						relateable_type: relateableType,
 						relateable_id: relateableId,
-						order: 0
+						order
 					}
 				});
 				showToast({
@@ -11488,11 +11534,33 @@ function createPlaylistsAdapter(client) {
 				media_id: item.relateable_id,
 				position: typeof item.order === "number" ? item.order : Number(item.order)
 			})));
-			return toBffPlaylist((await portAdapter.getPlaylist(id)).playlist);
+			return {
+				id,
+				title: "",
+				description: null,
+				image_url: null,
+				slug: null,
+				active: true,
+				user_id: null,
+				is_favorited: false,
+				items: [],
+				items_count: 0
+			};
 		},
 		removeItemsFromPlaylist: async (playlistId, data) => {
 			await Promise.all(data.item_ids.map((itemId) => portAdapter.removePlaylistItem(playlistId, itemId)));
-			return toBffPlaylist((await portAdapter.getPlaylist(playlistId)).playlist);
+			return {
+				id: playlistId,
+				title: "",
+				description: null,
+				image_url: null,
+				slug: null,
+				active: true,
+				user_id: null,
+				is_favorited: false,
+				items: [],
+				items_count: 0
+			};
 		}
 	};
 }
@@ -11830,4 +11898,4 @@ Object.defineProperty(exports, "usePortalContentContext", {
 	}
 });
 
-//# sourceMappingURL=PortalContentApiProvider-Zoz_YDJM.cjs.map
+//# sourceMappingURL=PortalContentApiProvider-Bn44plrY.cjs.map