@behindthemusictree/app-kit-ui 32.0.3 → 33.1.0

package/dist/{chunk-QGGVPIXY.js → chunk-2M4Q2IJU.js}

@@ -554,7 +554,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)]"
@@ -953,7 +953,7 @@ import { z } from "zod";
 import { FaPlay, FaPause } from "react-icons/fa";
 import { PanelSection, RingLoader, Skeleton } from "@behindthemusictree/ui";
 import { useSession } from "@behindthemusictree/app-kit/auth";
-import { useFetchWrapper } from "@behindthemusictree/app-kit/transport";
+import { usePlaybackContext, useFetchWrapper } from "@behindthemusictree/app-kit/transport";
 import { PaginatedResponseSchema } from "@behindthemusictree/app-kit/transport";
 import { parseWithLog } from "@behindthemusictree/app-kit/transport";
 import { usePlayer as usePlayer4 } from "@behindthemusictree/app-kit/player";
@@ -1028,8 +1028,9 @@ function GenrePlaylistTracks({
   const trackNoun = useTrackNoun();
   const { uuid } = genrePlaylist;
   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),
+    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] : []],
     queryFn: async ({ pageParam }) => {
       if (scope === "me") return fetchGenrePlaylistTracksPage(uuid, scope, Number(pageParam));
       const response = await fetch(
@@ -1044,7 +1045,7 @@ function GenrePlaylistTracks({
     },
     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] = useState5(null);
   useEffect3(() => {
@@ -2341,7 +2342,10 @@ function GenreTreeView({
     const ancestors = /* @__PURE__ */ jsx29(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__ */ jsxs22(Fragment11, { 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;
@@ -2362,7 +2366,10 @@ function GenreTreeView({
         /* @__PURE__ */ jsx29(
           GenreInfoPanelBody,
           {
-            family,
+            family: /* @__PURE__ */ jsxs22(Fragment11, { children: [
+              family,
+              ancestors
+            ] }),
             genreUuid,
             genrePlaylist,
             wikidataId: criteria.wikidataId,
@@ -2409,8 +2416,7 @@ function GenreTreeView({
           }
         ),
         renderDangerZone?.(node)
-      ] }),
-      aside: ancestors
+      ] })
     };
   };
   const isRotationControlled = controlledAllowWheelRotation !== void 0;
@@ -2427,11 +2433,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,
@@ -2720,7 +2725,7 @@ import { Maximize2 as Maximize22, Minimize2 as Minimize22 } from "lucide-react";
 import {
   useFetchGenreDetail
 } from "@behindthemusictree/app-kit/genre-tree";
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var RELATIVE_ITEM_COUNT = 1;
 function toNode(genre, parentId) {
   return {
@@ -2817,12 +2822,14 @@ function GenreDetailPanel({
       expanded,
       onExpandedChange,
       edgeTab,
-      aside: ancestors,
       children: [
         /* @__PURE__ */ jsx30(
           GenreInfoPanelBody,
           {
-            family,
+            family: /* @__PURE__ */ jsxs23(Fragment12, { children: [
+              family,
+              ancestors
+            ] }),
             genreUuid: detail.uuid,
             genrePlaylist: { ...detail.criteriaPlaylist, tracksCount: detail.tracksCount },
             wikidataId: detail.wikidataId,
@@ -3151,7 +3158,7 @@ function PlayerPanel({
   renderArtistLink,
   renderSongLink
 }) {
-  const { playerTrackObject } = usePlayer11();
+  const { playerTrackObject, retryPlayback } = usePlayer11();
   const { toggleTrackListSidebar, isTrackListSidebarVisible } = useTrackListSidebarVisibility();
   const [lastLoadedTrackTitle, setLastLoadedTrackTitle] = useState9("");
   const loadedTrackTitle = playerTrackObject?.track.title;
@@ -3214,7 +3221,12 @@ function PlayerPanel({
                 /* @__PURE__ */ jsx33("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ jsx33("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
                 /* @__PURE__ */ jsxs26("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ jsx33(PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ jsx33("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+                  playerTrackObject?.loadError && /* @__PURE__ */ jsxs26("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
+                    playerTrackObject.loadError,
+                    /* @__PURE__ */ jsx33("button", { type: "button", className: "ml-2 underline", onClick: () => {
+                      void retryPlayback();
+                    }, children: "Retry" })
+                  ] })
                 ] }),
                 /* @__PURE__ */ jsx33(PlayerControls, {})
               ] }),
@@ -3297,4 +3309,4 @@ export {
   GenreTreeViewSkeleton2 as GenreTreeViewSkeleton,
   GenreTreeOutlineSkeleton
 };
-//# sourceMappingURL=chunk-QGGVPIXY.js.map
+//# sourceMappingURL=chunk-2M4Q2IJU.js.map