@hashsome/ui 0.10.0 → 0.12.0

package/dist/use-media-browser.js

@@ -1,6 +1,18 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useReconnects } from './hooks.js';
 import { useClient } from './provider.js';
+/** The order the kinds of a search result are offered in: what is played most, first. */
+const KIND_ORDER = [
+    'track',
+    'playlist',
+    'album',
+    'artist',
+    'radio',
+    'folder',
+    'other',
+];
+/** The kinds among some items, in the order they are offered. */
+const kindsOf = (items) => KIND_ORDER.filter((candidate) => items.some((item) => item.kind === candidate));
 /** A top level that is nothing but folders to look inside is a set of shelves, which read better
  * as tabs than as a list that always looks the same. */
 const isShelves = (items) => items.length >= 2 && items.every((item) => item.expandable && !item.playable);
@@ -16,6 +28,12 @@ export function useMediaBrowser(ref) {
     const [trail, setTrail] = useState([{}]);
     const [text, setText] = useState('');
     const [tab, setTab] = useState();
+    // The kind of result chosen to narrow a search to; only counts while that kind is among the results.
+    const [kindChoice, setKindChoice] = useState();
+    // The search with no kind chosen: it says which kinds there are, and is the list while none is chosen.
+    const [overview, setOverview] = useState(null);
+    // The kinds the last answered search found, kept while the next one is on its way.
+    const [lastKinds, setLastKinds] = useState();
     // Answers are kept with the request they answer, so a stale one is never shown for a new one.
     const [top, setTop] = useState(null);
     const [answer, setAnswer] = useState(null);
@@ -34,13 +52,49 @@ export function useMediaBrowser(ref) {
     const atTop = trail.length === 1;
     const tabs = top && !top.error && isShelves(top.items) ? top.items : undefined;
     const selected = tabs ? (tabs.find((item) => item.id === tab) ?? tabs[0])?.id : undefined;
-    // What to ask for, if anything: a search, a folder, or the open tab. A top level that is not
-    // shelves is already in hand.
+    // The kinds the search found, once it has answered, and the one chosen if it is among them.
+    const overviewKey = `search:${needle}`;
+    const found = searching && overview?.key === overviewKey ? overview : null;
+    const foundKinds = found ? kindsOf(found.items) : undefined;
+    if (!searching && lastKinds !== undefined) {
+        setLastKinds(undefined);
+    }
+    // What to offer: this search's kinds once they are in, the last search's until then.
+    const kinds = searching ? (foundKinds ?? lastKinds) : undefined;
+    const kind = kinds && kindChoice !== undefined && kinds.includes(kindChoice) ? kindChoice : undefined;
+    // What to ask for, if anything: a folder, the open tab, or one kind of a search's results. A top level
+    // that is not shelves is already in hand, and so is the search with no kind chosen.
     const path = atTop ? selected : here.path;
-    const key = searching ? `search:${needle}` : `path:${path ?? ''}`;
+    const key = searching ? `search:${needle}:${kind ?? ''}` : `path:${path ?? ''}`;
     const result = answer?.key === key ? answer : null;
+    // The search with no kind chosen, always: its kinds are the choices, whichever one is showing.
     useEffect(() => {
-        const request = searching ? { search: needle } : path === undefined ? undefined : { path };
+        if (!searching) {
+            return;
+        }
+        let current = true;
+        const timer = setTimeout(() => {
+            client.browse(ref, { search: needle }).then((level) => {
+                if (current) {
+                    setOverview({ key: `search:${needle}`, ...level });
+                    setLastKinds(kindsOf(level.items));
+                }
+            }, (error) => current && setOverview({ key: `search:${needle}`, items: [], error: messageOf(error) }));
+        }, 300);
+        return () => {
+            current = false;
+            clearTimeout(timer);
+        };
+        // oxlint-disable-next-line react/exhaustive-effect-dependencies
+    }, [client, ref, searching, needle, reconnects]);
+    useEffect(() => {
+        const request = searching && kind
+            ? { search: needle, kind }
+            : searching
+                ? undefined
+                : path === undefined
+                    ? undefined
+                    : { path };
         if (!request) {
             return;
         }
@@ -48,18 +102,33 @@ export function useMediaBrowser(ref) {
         const timer = setTimeout(() => {
             client.browse(ref, request).then((level) => current && setAnswer({ key, ...level }), (error) => current && setAnswer({ key, items: [], error: messageOf(error) }));
         }, 
-        // Typing in the search box waits for a pause; opening a folder or a tab does not.
-        searching ? 300 : 0);
+        // Typing in the search box waits for a pause; opening a folder or a tab or choosing a kind does not.
+        0);
         return () => {
             current = false;
             clearTimeout(timer);
         };
         // oxlint-disable-next-line react/exhaustive-effect-dependencies
-    }, [client, ref, key, searching, needle, path, reconnects]);
-    const open = useCallback((item) => setTrail((levels) => [...levels, { path: item.id, title: item.title, item }]), []);
+    }, [client, ref, key, searching, needle, kind, path, reconnects]);
+    // Opening what a search found (an album, a playlist) shows it in place of the results: the search steps
+    // aside, and going back from it returns to the results.
+    const open = useCallback((item) => {
+        const from = text.trim();
+        setTrail((levels) => [
+            ...levels,
+            {
+                path: item.id,
+                title: item.title,
+                item,
+                ...(from !== '' ? { from: { text: from, kind } } : {}),
+            },
+        ]);
+        setText('');
+    }, [text, kind]);
     const selectTab = useCallback((id) => {
         setTab(id);
         setText('');
+        setKindChoice(undefined);
         setTrail([{}]);
     }, []);
     const back = useCallback(() => {
@@ -67,13 +136,18 @@ export function useMediaBrowser(ref) {
             setText('');
             return;
         }
+        const left = trail.at(-1);
         setTrail((levels) => (levels.length > 1 ? levels.slice(0, -1) : levels));
-    }, [text]);
+        if (trail.length > 1 && left?.from !== undefined) {
+            setText(left.from.text);
+            setKindChoice(left.from.kind);
+        }
+    }, [text, trail]);
     // The plain top-level list, when there are no shelves to make tabs of.
-    const listing = !searching && atTop && !tabs ? top : result;
+    const listing = searching && !kind ? found : !searching && atTop && !tabs ? top : result;
     return {
         items: listing?.items ?? [],
-        listKey: searching ? 'search' : `path:${path ?? 'top'}`,
+        listKey: searching ? `search:${kind ?? ''}` : `path:${path ?? 'top'}`,
         title: searching
             ? (result?.title ?? `Results for “${needle}”`)
             : atTop
@@ -91,5 +165,9 @@ export function useMediaBrowser(ref) {
         back,
         query: text,
         search: setText,
+        kinds: kinds && kinds.length >= 1 ? kinds : undefined,
+        kindsPending: searching && foundKinds === undefined && !(lastKinds && lastKinds.length >= 1),
+        kind,
+        filterBy: setKindChoice,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashsome/ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Design system components and hooks",
   "type": "module",
   "exports": {
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
-    "@hashsome/core": "0.10.0",
+    "@hashsome/core": "0.12.0",
     "e-prim": "2.0.1",
     "motion": "13.4.5",
     "react": "19.3.0",