@behindthemusictree/app-kit-ui 32.0.3 → 33.1.0

package/dist/genre-tree/index.js

@@ -15,7 +15,7 @@ import {
   TrackListSidebar,
   TrackPositionPlayPause,
   useGenrePlaylistPlayback
-} from "../chunk-QGGVPIXY.js";
+} from "../chunk-2M4Q2IJU.js";
 import "../chunk-DKQQLLMY.js";
 export {
   GenreDetailPanel,

package/dist/index.cjs

@@ -402,18 +402,21 @@ function InternalErrorPopup({ errorCode, contactEmail, ...rest }) {
 
 // src/popup/NetworkErrorPopup.tsx
 var import_lucide_react4 = require("lucide-react");
+var import_transport = require("@behindthemusictree/app-kit/transport");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function NetworkErrorPopup(props) {
+var OFFLINE_MESSAGE = "It seems that you are not connected to the internet. Please check your connection and try again.";
+var UNREACHABLE_MESSAGE = "We couldn't reach the server. Please try again in a moment.";
+function NetworkErrorPopup({ errorCode, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     BasePopup,
     {
-      ...props,
+      ...rest,
       title: "Network Error",
       isDismissable: false,
       icon: import_lucide_react4.AlertTriangle,
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col items-center space-y-6 py-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.AlertTriangle, { className: "h-16 w-16 text-[var(--color-neutral-600)]", strokeWidth: 1.5 }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-center text-[var(--color-neutral-700)]", children: "It seems that you are not connected to the internet. Please check your connection and try again." })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-center text-[var(--color-neutral-700)]", children: errorCode === import_transport.ErrorCode.NETWORK_OFFLINE ? OFFLINE_MESSAGE : UNREACHABLE_MESSAGE })
       ] })
     }
   );
@@ -483,7 +486,7 @@ function AuthPopup({
 var import_fa2 = require("react-icons/fa");
 var import_ui5 = require("@behindthemusictree/ui");
 var import_lucide_react6 = require("lucide-react");
-var import_transport = require("@behindthemusictree/app-kit/transport");
+var import_transport2 = require("@behindthemusictree/app-kit/transport");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function SpotifyAuthErrorPopup({
   message,
@@ -492,7 +495,7 @@ function SpotifyAuthErrorPopup({
   contactEmail = null,
   ...rest
 }) {
-  const requestAccessHref = (0, import_transport.getSpotifyAllowlistMailtoHref)(contactEmail);
+  const requestAccessHref = (0, import_transport2.getSpotifyAllowlistMailtoHref)(contactEmail);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     BasePopup,
     {
@@ -619,7 +622,7 @@ var import_react4 = require("react");
 var import_genre_tree_view = require("@behindthemusictree/genre-tree-view");
 var import_player = require("@behindthemusictree/app-kit/player");
 var import_popup2 = require("@behindthemusictree/app-kit/popup");
-var import_transport2 = require("@behindthemusictree/app-kit/transport");
+var import_transport3 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/playlist-tree/useGenrePlaylistPlayback.ts
 var import_react3 = require("react");
@@ -701,7 +704,7 @@ function GenrePlaylistTreePerRoot({
       }
       play(genrePlaylist).catch((error) => {
         console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InternalErrorPopup, { errorCode: import_transport2.ErrorCode.CLIENT_UNKNOWN }));
+        showPopup(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InternalErrorPopup, { errorCode: import_transport3.ErrorCode.CLIENT_UNKNOWN }));
       });
     },
     [
@@ -764,7 +767,7 @@ var import_react5 = require("react");
 var import_genre_tree_view2 = require("@behindthemusictree/genre-tree-view");
 var import_player2 = require("@behindthemusictree/app-kit/player");
 var import_popup3 = require("@behindthemusictree/app-kit/popup");
-var import_transport3 = require("@behindthemusictree/app-kit/transport");
+var import_transport4 = require("@behindthemusictree/app-kit/transport");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function GenrePlaylistTreeWheel({
   scope,
@@ -817,7 +820,7 @@ function GenrePlaylistTreeWheel({
       }
       play(genrePlaylist).catch((error) => {
         console.error("Failed to load genre playlist tracks:", error);
-        showPopup(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InternalErrorPopup, { errorCode: import_transport3.ErrorCode.CLIENT_UNKNOWN }));
+        showPopup(/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InternalErrorPopup, { errorCode: import_transport4.ErrorCode.CLIENT_UNKNOWN }));
       });
     },
     [
@@ -1106,7 +1109,7 @@ function GenreSearch({
         onPick: handlePick,
         status,
         loading: loading ? "Searching\u2026" : void 0,
-        inputClassName: `h-[var(--layout-search-h,3rem)] ${onPrevious ? "pl-11" : "pl-6"} pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md`,
+        inputClassName: `h-[var(--layout-search-h,3rem)] ${onPrevious ? "pl-11" : "pl-6"} pr-20 text-base transition-[padding] duration-200 ease-out motion-reduce:transition-none bg-[var(--color-surface)] border-[var(--color-border)] rounded-full shadow-md focus-visible:ring-0`,
         className: "genre-search-results z-40 rounded-xl shadow-md",
         listClassName: "max-h-[min(20rem,50dvh)]",
         optionClassName: "[@media(pointer:coarse)]:min-h-[var(--layout-touch-target)]"
@@ -1505,13 +1508,13 @@ var import_zod = require("zod");
 var import_fa4 = require("react-icons/fa");
 var import_ui7 = require("@behindthemusictree/ui");
 var import_auth2 = require("@behindthemusictree/app-kit/auth");
-var import_transport4 = require("@behindthemusictree/app-kit/transport");
 var import_transport5 = require("@behindthemusictree/app-kit/transport");
 var import_transport6 = require("@behindthemusictree/app-kit/transport");
+var import_transport7 = require("@behindthemusictree/app-kit/transport");
 var import_player4 = require("@behindthemusictree/app-kit/player");
 var import_player5 = require("@behindthemusictree/app-kit/player");
 var import_popup5 = require("@behindthemusictree/app-kit/popup");
-var import_transport7 = require("@behindthemusictree/app-kit/transport");
+var import_transport8 = require("@behindthemusictree/app-kit/transport");
 var import_genre_tree4 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree5 = require("@behindthemusictree/app-kit/genre-tree");
 var import_genre_tree6 = require("@behindthemusictree/app-kit/genre-tree");
@@ -1546,7 +1549,7 @@ var import_genre_tree8 = require("@behindthemusictree/app-kit/genre-tree");
 var import_track_noun2 = require("@behindthemusictree/app-kit/track-noun");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var CATALOGUE_PAGE_SIZE = 100;
-var SongPageSchema = (0, import_transport5.PaginatedResponseSchema)(import_genre_tree6.SongDetailedSchema).extend({
+var SongPageSchema = (0, import_transport6.PaginatedResponseSchema)(import_genre_tree6.SongDetailedSchema).extend({
   overallTotal: import_zod.z.number().nullable(),
   page: import_zod.z.number().nullable(),
   totalPages: import_zod.z.number().nullable()
@@ -1579,9 +1582,10 @@ function GenrePlaylistTracks({
   const { showPopup } = (0, import_popup5.usePopup)();
   const trackNoun = (0, import_track_noun2.useTrackNoun)();
   const { uuid } = genrePlaylist;
-  const { fetch } = (0, import_transport4.useFetchWrapper)(getBackendBaseUrl);
+  const { fetch } = (0, import_transport5.useFetchWrapper)(getBackendBaseUrl);
+  const playback = (0, import_transport5.usePlaybackContext)();
   const { data, isPending, isError, refetch, hasNextPage, isFetchingNextPage, fetchNextPage } = (0, import_react_query.useInfiniteQuery)({
-    queryKey: scope === "me" ? import_genre_tree4.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid),
+    queryKey: [...scope === "me" ? import_genre_tree4.genrePlaylistQueryKeys.me.tracks(uuid) : artist ? [...import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), "artist", artist.uuid] : import_genre_tree5.libraryQueryKeys.reference.songs.byGenre(getBackendBaseUrl(), genreUuid), ...playback.key ? [playback.key] : []],
     queryFn: async ({ pageParam }) => {
       if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
       const response = await fetch(
@@ -1591,12 +1595,12 @@ function GenrePlaylistTracks({
         {},
         { genre: genreUuid, ...artist && { artist: artist.uuid }, pageSize: CATALOGUE_PAGE_SIZE, withTotal: false, ...pageParam && { cursor: pageParam } }
       );
-      const parsed = (0, import_transport6.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
+      const parsed = (0, import_transport7.parseWithLog)(SongPageSchema, response, "GenrePlaylistTracks");
       return { tracks: parsed.results, total: parsed.overallTotal, nextPage: parsed.next ? nextCursor(parsed.next) : null };
     },
     initialPageParam: scope === "me" ? 1 : "",
     getNextPageParam: (lastPage) => lastPage.nextPage ?? void 0,
-    enabled: scope !== "me" || sessionRestored && !!session?.accessToken
+    enabled: playback.ready && (scope !== "me" || sessionRestored && !!session?.accessToken)
   });
   const [sentinel, setSentinel] = (0, import_react11.useState)(null);
   (0, import_react11.useEffect)(() => {
@@ -1616,7 +1620,7 @@ function GenrePlaylistTracks({
     const started = artist ? playNewTrackListFromArtist(artist, scope, { startSongUuid, ordering: "title", genreUuid }) : playNewTrackListFromGenrePlaylist(genrePlaylist, scope, { startSongUuid });
     started.catch((error) => {
       console.error("Failed to play genre playlist:", error);
-      showPopup(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InternalErrorPopup, { errorCode: import_transport7.ErrorCode.CLIENT_UNKNOWN }));
+      showPopup(/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InternalErrorPopup, { errorCode: import_transport8.ErrorCode.CLIENT_UNKNOWN }));
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui7.PanelSection, { title: `${(0, import_track_noun2.capitalize)(trackNoun.plural)}${total !== void 0 ? ` (${total})` : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
@@ -2050,7 +2054,7 @@ var import_lucide_react13 = require("lucide-react");
 var import_ui13 = require("@behindthemusictree/ui");
 var import_player10 = require("@behindthemusictree/app-kit/player");
 var import_genre_tree14 = require("@behindthemusictree/app-kit/genre-tree");
-var import_transport8 = require("@behindthemusictree/app-kit/transport");
+var import_transport9 = require("@behindthemusictree/app-kit/transport");
 
 // src/genre-tree/track-list-sidebar/TrackItem.tsx
 var import_player9 = require("@behindthemusictree/app-kit/player");
@@ -2178,7 +2182,7 @@ function TrackItem({
 
 // src/genre-tree/artist/ArtistSongs.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var SongPageSchema2 = (0, import_transport8.PaginatedResponseSchema)(import_genre_tree14.SongDetailedSchema);
+var SongPageSchema2 = (0, import_transport9.PaginatedResponseSchema)(import_genre_tree14.SongDetailedSchema);
 var SORTS = [
   { ordering: "title", label: "Title" },
   { ordering: "-albumYear", label: "Year" }
@@ -2186,10 +2190,10 @@ var SORTS = [
 function ArtistSongs({ artist, getBackendBaseUrl, renderArtistLink, renderSongLink }) {
   const [page, setPage] = (0, import_react14.useState)(1);
   const [ordering, setOrdering] = (0, import_react14.useState)("title");
-  const { fetch } = (0, import_transport8.useFetchWrapper)(getBackendBaseUrl);
+  const { fetch } = (0, import_transport9.useFetchWrapper)(getBackendBaseUrl);
   const { playNewTrackListFromArtist } = (0, import_genre_tree14.useTrackList)();
   const { playerTrackObject } = (0, import_player10.usePlayer)();
-  const { data, isPending, isError } = (0, import_transport8.useQueryWithParse)({
+  const { data, isPending, isError } = (0, import_transport9.useQueryWithParse)({
     queryKey: ["referenceSongs", "artist", artist.uuid, ordering, page],
     queryFn: () => fetch(import_genre_tree14.libraryEndpoints.reference.songs.list(), true, false, void 0, {
       artist: artist.uuid,
@@ -2868,7 +2872,10 @@ function GenreTreeView({
     const ancestors = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: relation.ancestorNodes, onSelectNode: selectGenreFromPanel });
     const genrePlaylist = genrePlaylistByNodeId.get(node.id);
     const criteria = genrePlaylist?.criteria;
-    if (!genrePlaylist || !criteria) return { primary: family, aside: ancestors };
+    if (!genrePlaylist || !criteria) return { primary: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+      family,
+      ancestors
+    ] }) };
     const genreUuid = criteria.uuid;
     const parentPlaylist = visibleGenrePlaylists.find(({ uuid }) => uuid === genrePlaylist.parent?.uuid);
     const canToggleSide = !readOnly && parentPlaylist !== void 0 && parentPlaylist.parent === null;
@@ -2889,7 +2896,10 @@ function GenreTreeView({
         /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           GenreInfoPanelBody,
           {
-            family,
+            family: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+              family,
+              ancestors
+            ] }),
             genreUuid,
             genrePlaylist,
             wikidataId: criteria.wikidataId,
@@ -2936,8 +2946,7 @@ function GenreTreeView({
           }
         ),
         renderDangerZone?.(node)
-      ] }),
-      aside: ancestors
+      ] })
     };
   };
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
@@ -2954,11 +2963,10 @@ function GenreTreeView({
       compact: false
     };
   } else if (relations) {
-    const { primary, aside } = renderGenreBody(relations);
+    const { primary } = renderGenreBody(relations);
     activePanel = {
       title: relations.node.name,
       content: primary,
-      aside,
       expanded: isExpanded,
       onExpandedChange: changeExpanded,
       onClose: clearSelection,
@@ -3335,12 +3343,14 @@ function GenreDetailPanel({
       expanded,
       onExpandedChange,
       edgeTab,
-      aside: ancestors,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           GenreInfoPanelBody,
           {
-            family,
+            family: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+              family,
+              ancestors
+            ] }),
             genreUuid: detail.uuid,
             genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
             wikidataId: detail.wikidataId,
@@ -3659,7 +3669,7 @@ function PlayerPanel({
   renderArtistLink,
   renderSongLink
 }) {
-  const { playerTrackObject } = (0, import_player13.usePlayer)();
+  const { playerTrackObject, retryPlayback } = (0, import_player13.usePlayer)();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = (0, import_genre_tree24.useTrackListSidebarVisibility)();
   const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = (0, import_react19.useState)("");
   const loadedTrackTitle = playerTrackObject?.track.title;
@@ -3722,7 +3732,12 @@ function PlayerPanel({
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_player13.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
+                    playerTrackObject.loadError,
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "ml-2 underline", onClick: () => {
+                      void retryPlayback();
+                    }, children: "Retry" })
+                  ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PlayerControls, {})
               ] }),