@behindthemusictree/app-kit-ui 33.2.0 → 34.0.0

package/dist/{chunk-FHGQGTCN.js → chunk-A7OWCEIK.js}

@@ -21,9 +21,10 @@ import { useGenreTreeViewState, useArtist as useArtist2, useUpdateGenre as useUp
 import { usePopup as usePopup5 } from "@behindthemusictree/app-kit/popup";
 
 // src/genre-tree/playlist-tree/size-metric.ts
+import { genrePlaylistTrackCount } from "@behindthemusictree/app-kit/genre-tree";
 var hasViewsCount = (genrePlaylists) => genrePlaylists.every((genrePlaylist) => genrePlaylist.viewsCount !== void 0);
 var genrePlaylistSize = (genrePlaylist, metric) => {
-  if (metric === "songs") return genrePlaylist.tracksCount;
+  if (metric === "songs") return genrePlaylistTrackCount(genrePlaylist);
   if (genrePlaylist.viewsCount === void 0) {
     throw new Error(`Genre playlist ${genrePlaylist.uuid} has no viewsCount to size by views`);
   }
@@ -47,6 +48,7 @@ function toTreeNodes(genrePlaylists, sizeMetric) {
 }
 
 // src/genre-tree/playlist-tree/TreePerRoot.tsx
+import { genrePlaylistTrackCount as genrePlaylistTrackCount2 } from "@behindthemusictree/app-kit/genre-tree";
 import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import {
   GenreTree,
@@ -60,30 +62,32 @@ import { ErrorCode } from "@behindthemusictree/app-kit/transport";
 import { useCallback, useMemo } from "react";
 import {
   TrackListOriginType,
-  useTrackList
+  useTrackList,
+  GenreCatalogueCountsSchema,
+  defaultGenreMusicSelection,
+  genreMusicSelectionKey
 } from "@behindthemusictree/app-kit/genre-tree";
 function useGenrePlaylistPlayback({
   scope,
   genrePlaylists,
   artist = null
 }) {
-  const { trackList, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList();
+  const { trackList, playNewTrackListFromGenrePlaylist } = useTrackList();
   const origin = trackList?.origin;
   const playingNodeId = useMemo(() => {
-    if (!origin) return null;
-    if (!artist) return origin.type === TrackListOriginType.GENRE_PLAYLIST ? origin.uuid : null;
-    if (origin.type !== TrackListOriginType.ARTIST || origin.uuid !== artist.uuid) return null;
-    const { genreUuid } = origin;
-    return genreUuid ? genrePlaylists.find((gp) => gp.criteria?.uuid === genreUuid)?.uuid ?? null : null;
-  }, [origin, artist, genrePlaylists]);
-  const play = useCallback(
-    async (genrePlaylist) => {
-      if (!artist) return playNewTrackListFromGenrePlaylist(genrePlaylist, scope);
-      if (!genrePlaylist.criteria) return;
-      return playNewTrackListFromArtist(artist, scope, { ordering: "title", genreUuid: genrePlaylist.criteria.uuid });
-    },
-    [artist, scope, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist]
-  );
+    if (!origin || origin.type !== TrackListOriginType.GENRE_PLAYLIST || origin.scope !== scope) return null;
+    const playlistOrigin = origin;
+    if (playlistOrigin.artistUuid !== artist?.uuid) return null;
+    const playlist = genrePlaylists.find((item) => item.uuid === origin.uuid) ?? playlistOrigin.criteriaPlaylist;
+    const expected = scope === "reference" && playlist && !("criteria" in playlist && playlist.criteria === null) ? defaultGenreMusicSelection(GenreCatalogueCountsSchema.parse(playlist)) : void 0;
+    if (playlistOrigin.selection && expected && genreMusicSelectionKey(playlistOrigin.selection).join() !== genreMusicSelectionKey(expected).join()) return null;
+    return origin.uuid;
+  }, [origin, artist, genrePlaylists, scope]);
+  const play = useCallback(async (playlist) => {
+    if (artist && !playlist.criteria) return;
+    const selection = scope === "reference" && playlist.criteria !== null ? defaultGenreMusicSelection(GenreCatalogueCountsSchema.parse(playlist)) : void 0;
+    return selection || artist ? playNewTrackListFromGenrePlaylist(playlist, scope, { selection, ...artist && { artistUuid: artist.uuid } }) : playNewTrackListFromGenrePlaylist(playlist, scope);
+  }, [artist, scope, playNewTrackListFromGenrePlaylist]);
   return useMemo(() => ({ playingNodeId, play }), [playingNodeId, play]);
 }
 
@@ -118,7 +122,7 @@ function GenrePlaylistTreePerRoot({
       id: genrePlaylist.uuid,
       parentId: genrePlaylist.parent?.uuid ?? null,
       name: genrePlaylist.name,
-      itemCount: genrePlaylist.tracksCount,
+      itemCount: genrePlaylistTrackCount2(genrePlaylist),
       actionable: Boolean(genrePlaylist.criteria),
       side: genrePlaylist.criteria?.side ?? void 0,
       wikidataId: genrePlaylist.criteria?.wikidataId ?? null,
@@ -134,7 +138,7 @@ function GenrePlaylistTreePerRoot({
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if (genrePlaylistTrackCount2(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -198,6 +202,7 @@ function GenrePlaylistTreePerRoot({
 }
 
 // src/genre-tree/playlist-tree/TreeWheel.tsx
+import { genrePlaylistTrackCount as genrePlaylistTrackCount3 } from "@behindthemusictree/app-kit/genre-tree";
 import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import {
   GenreTreeWheel
@@ -252,7 +257,7 @@ function GenrePlaylistTreeWheel({
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if (genrePlaylistTrackCount3(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -317,6 +322,7 @@ function GenrePlaylistTreeWheel({
 }
 
 // src/genre-tree/playlist-tree/TreeWheelRadialPopCore.tsx
+import { genrePlaylistTrackCount as genrePlaylistTrackCount4 } from "@behindthemusictree/app-kit/genre-tree";
 import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import {
   GenreTreeOutline,
@@ -364,7 +370,7 @@ function GenrePlaylistTreeWheelRadialPopCore(props) {
         setIsPlaying(!isPlaying);
         return;
       }
-      if (genrePlaylist.tracksCount === 0) {
+      if (genrePlaylistTrackCount4(genrePlaylist) === 0) {
         return;
       }
       play(genrePlaylist).catch((error) => {
@@ -665,6 +671,12 @@ function GenreSearch({
 }
 
 // src/genre-tree/GenreInfoPanelBody.tsx
+import {
+  genreMusicCount,
+  defaultGenreMusicSelection as defaultGenreMusicSelection2,
+  GenreCatalogueCountsSchema as GenreCatalogueCountsSchema2
+} from "@behindthemusictree/app-kit/genre-tree";
+import { useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
 import { usePlayer as usePlayer5 } from "@behindthemusictree/app-kit/player";
 
 // src/genre-tree/GenreActionBand.tsx
@@ -1030,6 +1042,7 @@ import { usePlayer as usePlayer4 } from "@behindthemusictree/app-kit/player";
 import { PlayStates } from "@behindthemusictree/app-kit/player";
 import { usePopup as usePopup4 } from "@behindthemusictree/app-kit/popup";
 import { ErrorCode as ErrorCode3 } from "@behindthemusictree/app-kit/transport";
+import { genreMusicQueryParams } from "@behindthemusictree/app-kit/genre-tree";
 import { genrePlaylistQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
 import { libraryEndpoints, libraryQueryKeys } from "@behindthemusictree/app-kit/genre-tree";
 import { isSong, songUnplayableReason, SongDetailedSchema } from "@behindthemusictree/app-kit/genre-tree";
@@ -1082,6 +1095,7 @@ var nextCursor = (next) => {
 function GenrePlaylistTracks({
   genreUuid,
   genrePlaylist,
+  selection,
   scope,
   getBackendBaseUrl,
   renderArtistLink,
@@ -1091,7 +1105,7 @@ function GenrePlaylistTracks({
   renderTracksToolbar,
   artist = null
 }) {
-  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist } = useTrackList2();
+  const { fetchGenrePlaylistTracksPage, playNewTrackListFromGenrePlaylist, playNewTrackListFromArtist, playNewTrackListFromGenreCatalogue } = useTrackList2();
   const { session, sessionRestored } = useSession();
   const { playerTrackObject, playState, handlePlayPauseAction } = usePlayer4();
   const { showPopup } = usePopup4();
@@ -1100,7 +1114,7 @@ function GenrePlaylistTracks({
   const { fetch } = useFetchWrapper(getBackendBaseUrl);
   const playback = usePlaybackContext();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
-    queryKey: [...scope === "me" ? genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), ...playback.key ? [playback.key] : []],
+    queryKey: [...scope === "me" ? genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), "artist", artist.uuid] : libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid, selection), ...playback.key ? [playback.key] : []],
     queryFn: async ({ pageParam }) => {
       if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
       const response = await fetch(
@@ -1108,7 +1122,7 @@ function GenrePlaylistTracks({
         true,
         false,
         {},
-        { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
+        { genre: genreUuid, ...genreMusicQueryParams(selection), ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
       );
       const parsed = parseWithLog(SongPageSchema, response, "GenrePlaylistTracks");
       return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
@@ -1132,7 +1146,12 @@ function GenrePlaylistTracks({
   const tracks = pages.flatMap((page) => page.tracks);
   const total = pages[0]?.total ?? void 0;
   const play = (startSongUuid) => {
-    const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
+    const started = artist ? playNewTrackListFromArtist(artist, scope, {
+      startSongUuid,
+      ordering: "title",
+      genreUuid,
+      ...selection && { selection }
+    }) : scope === "reference" ? playNewTrackListFromGenreCatalogue({ uuid: genreUuid, name: genrePlaylist.name }, scope, { startSongUuid, ...selection && { selection } }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
     started.catch((error) => {
       console.error("Failed to play genre playlist:", error);
       showPopup(/* @__PURE__ */ jsx16(InternalErrorPopup, { errorCode: ErrorCode3.CLIENT_UNKNOWN }));
@@ -1213,6 +1232,7 @@ import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-r
 function GenreDetailExtras({
   genreUuid,
   genrePlaylist,
+  selection,
   wikidataId,
   scope,
   getBackendBaseUrl,
@@ -1279,6 +1299,7 @@ function GenreDetailExtras({
       {
         genreUuid,
         genrePlaylist,
+        selection,
         scope,
         getBackendBaseUrl,
         renderArtistLink,
@@ -1308,7 +1329,7 @@ function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }) {
     GenreActionBand,
     {
       ...bandProps,
-      onPlayPause: genrePlaylist.tracksCount > 0 ? handlePlayPause : void 0,
+      onPlayPause: ("genreOnlyTracksCount" in genrePlaylist ? genreMusicCount(genrePlaylist) : genrePlaylist.tracksCount) > 0 ? handlePlayPause : void 0,
       isPlaying: isCurrentTrackList && isPlaying
     }
   );
@@ -1318,6 +1339,7 @@ function GenreInfoPanelBody({
   family,
   genreUuid,
   genrePlaylist,
+  catalogue,
   wikidataId,
   scope,
   getBackendBaseUrl,
@@ -1325,9 +1347,30 @@ function GenreInfoPanelBody({
   band,
   extras
 }) {
+  const noun = useTrackNoun3();
+  const summary = scope === "reference" ? GenreCatalogueCountsSchema2.parse(genrePlaylist) : void 0;
+  const selection = summary ? defaultGenreMusicSelection2(summary) : void 0;
+  const describeCounts = (counts) => {
+    const scopes = counts.genreAndSubgenresTracksCount;
+    return "canonical" in scopes ? `${counts.genreOnlyTracksCount} this genre only \xB7 ${scopes.canonical} with canonical subgenres \xB7 ${scopes.regional} with regional subgenres \xB7 ${scopes.all} with all subgenres` : `${counts.genreOnlyTracksCount} this genre only \xB7 ${scopes.all} with subgenres`;
+  };
   return /* @__PURE__ */ jsxs14(Fragment9, { children: [
     toolbar,
     /* @__PURE__ */ jsx18(GenreNodeActionBand, { ...band, genrePlaylist, playback }),
+    summary && catalogue && /* @__PURE__ */ jsxs14("div", { className: "px-3.5 py-3 text-sm text-[var(--color-text)]", children: [
+      /* @__PURE__ */ jsxs14("p", { children: [
+        "Catalogue ",
+        noun.plural,
+        ": ",
+        describeCounts(catalogue)
+      ] }),
+      /* @__PURE__ */ jsxs14("p", { children: [
+        "Playlist ",
+        noun.plural,
+        ": ",
+        describeCounts(summary)
+      ] })
+    ] }),
     /* @__PURE__ */ createElement(
       GenreDetailExtras,
       {
@@ -1336,6 +1379,7 @@ function GenreInfoPanelBody({
         family,
         genreUuid,
         genrePlaylist,
+        selection,
         wikidataId,
         scope,
         getBackendBaseUrl
@@ -2121,6 +2165,8 @@ function GenreTreeView({
   onArtistExpandedChange,
   getShareUrl,
   extraSearchGroups = [],
+  onSearchQueryChange,
+  onSearchFocus,
   artistSearch = true,
   onArtistSelect,
   artistSearchBaseUrl,
@@ -2418,6 +2464,7 @@ function GenreTreeView({
             ] }),
             genreUuid,
             genrePlaylist,
+            catalogue: genrePlaylist.catalogue,
             wikidataId: criteria.wikidataId,
             scope,
             getBackendBaseUrl,
@@ -2550,7 +2597,11 @@ function GenreTreeView({
         selectedName: selectedGenrePlaylist?.name ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
         onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
         onPrevious: handlePrevious,
-        onQueryChange: artistSearch || songSearch || extraSearchGroups.length > 0 ? setSearchText : void 0,
+        onQueryChange: (text) => {
+          setSearchText(text);
+          onSearchQueryChange?.(text);
+        },
+        onFocus: onSearchFocus,
         extraGroups
       }
     ),
@@ -2769,7 +2820,9 @@ import {
 import { DetailPanel as DetailPanel2, IconButton as IconButton2, Skeleton as Skeleton7 } from "@behindthemusictree/ui";
 import { Maximize2 as Maximize22, Minimize2 as Minimize22 } from "lucide-react";
 import {
-  useFetchGenreDetail
+  useFetchGenreDetail,
+  genreMusicCount as genreMusicCount2,
+  GenrePlaylistSummarySchema
 } from "@behindthemusictree/app-kit/genre-tree";
 import { Fragment as Fragment14, jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 var RELATIVE_ITEM_COUNT = 1;
@@ -2814,7 +2867,7 @@ function GenreDetailPanel({
         id: detail.uuid,
         parentId: detail.parent?.uuid ?? null,
         name: detail.name,
-        itemCount: detail.tracksCount,
+        itemCount: scope === "reference" ? genreMusicCount2(GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist)) : detail.tracksCount,
         wikidataId: detail.wikidataId
       },
       fill: rootColor,
@@ -2824,7 +2877,7 @@ function GenreDetailPanel({
         ({ ascendant }, index) => relative(ascendant, index === 0 ? null : ancestors2[index - 1].ascendant.uuid)
       )
     };
-  }, [detail]);
+  }, [detail, scope]);
   if (isError) {
     return /* @__PURE__ */ jsx33("div", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." });
   }
@@ -2877,7 +2930,8 @@ function GenreDetailPanel({
               ancestors
             ] }),
             genreUuid: detail.uuid,
-            genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+            genrePlaylist: scope === "reference" ? GenrePlaylistSummarySchema.parse(detail.criteriaPlaylist) : { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
+            catalogue: detail.catalogue,
             wikidataId: detail.wikidataId,
             scope,
             getBackendBaseUrl,
@@ -2905,7 +2959,7 @@ import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as
 import { ListMusic } from "lucide-react";
 import { useTrackList as useTrackList6 } from "@behindthemusictree/app-kit/genre-tree";
 import { TrackListOriginType as TrackListOriginType2 } from "@behindthemusictree/app-kit/genre-tree";
-import { useTrackNoun as useTrackNoun3 } from "@behindthemusictree/app-kit/track-noun";
+import { useTrackNoun as useTrackNoun4 } from "@behindthemusictree/app-kit/track-noun";
 import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect2;
 function TrackListSidebar({
@@ -2920,7 +2974,7 @@ function TrackListSidebar({
   renderSongLink
 }) {
   const { trackList, loadMore, autoAdvanceScrollRequest } = useTrackList6();
-  const trackNoun = useTrackNoun3();
+  const trackNoun = useTrackNoun4();
   const trackListRef = useRef4(null);
   const previousOriginRef = useRef4(trackList?.origin ?? null);
   const handledAutoAdvanceRequestIdRef = useRef4(null);
@@ -3361,4 +3415,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-FHGQGTCN.js.map
+//# sourceMappingURL=chunk-A7OWCEIK.js.map