@behindthemusictree/app-kit-ui 33.0.0 → 33.1.0

package/dist/genre-tree/index.cjs

@@ -784,7 +784,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)]"
@@ -1285,8 +1285,9 @@ function GenrePlaylistTracks({
   const trackNoun = (0, import_track_noun.useTrackNoun)();
   const { uuid } = genrePlaylist;
   const { fetch } = (0, import_transport3.useFetchWrapper)(getBackendBaseUrl);
+  const playback = (0, import_transport3.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(
@@ -1301,7 +1302,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] = (0, import_react11.useState)(null);
   (0, import_react11.useEffect)(() => {
@@ -3370,7 +3371,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;
@@ -3433,7 +3434,12 @@ function PlayerPanel({
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-zinc-800 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 truncate text-sm font-semibold", children: loadedTrackTitle || lastLoadedTrackTitle }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative w-full shrink-0", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_player13.PlayerVideoSurface, { className: "aspect-video w-full bg-black" }),
-                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: playerTrackObject.loadError })
+                  playerTrackObject?.loadError && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "absolute bottom-2 left-2 right-2 text-xs text-red-400", children: [
+                    playerTrackObject.loadError,
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: "ml-2 underline", onClick: () => {
+                      void retryPlayback();
+                    }, children: "Retry" })
+                  ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlayerControls, {})
               ] }),