-
-
- ⏮
-
- {isPlaying ? '⏸' : '▶'}
-
- ⏭
- ⏹
- setQueueOpen(open => !open)}
- title="Queue"
- >
- ☰ {m.tracklist.length}
-
-
-
-
{m.volume ?? '--'}
-
-
-
m.setVolume(parseInt(e.target.value))}
- />
-
-
-
-
-
m.setRepeat(!m.repeat)} />
- m.setRandom(!m.random)} />
- m.setSingle(!m.single)} />
- m.setMute(!m.mute)} />
+
+
+ ⏮
+
+ {isPlaying ? '⏸' : '▶'}
+
+ ⏭
+ ⏹
+ setQueueOpen(o => !o)}
+ title="Queue"
+ >
+ ☰ {m.tracklist.length}
+
+
+
+
+
{m.volume ?? '--'}
+
+
+
m.setVolume(parseInt(e.target.value))}
+ />
-
+
+
+ m.setRepeat(!m.repeat)} />
+ m.setRandom(!m.random)} />
+ m.setSingle(!m.single)} />
+ m.setMute(!m.mute)} />
+
+
@@ -804,13 +792,62 @@ export function MopidyPanel() {
)}
+
+ );
+}
+
+// ── Library panel (right column) ──────────────────────────────────────────────
+
+export function LibraryPanel() {
+ const m = useMopidyContext();
+ const [notice, setNotice] = useState(null);
+ const noticeTimer = useRef(null);
+
+ useEffect(() => () => window.clearTimeout(noticeTimer.current), []);
+
+ const notify = (message) => {
+ setNotice(message);
+ window.clearTimeout(noticeTimer.current);
+ noticeTimer.current = window.setTimeout(() => setNotice(null), 1800);
+ };
+
+ const addTracksWithFeedback = async (uris, message = 'Added to queue') => {
+ if (!uris?.length) return;
+ notify('Adding…');
+ try {
+ await m.addTracks(uris);
+ notify(message);
+ } catch (e) {
+ notify(e.message || 'Could not add tracks');
+ throw e;
+ }
+ };
+
+ const playNowWithFeedback = async (uris) => {
+ if (!uris?.length) return;
+ try {
+ await m.playNow(uris);
+ } catch (e) {
+ notify(e.message || 'Could not play track');
+ }
+ };
+
+ return (
+
+ {notice &&
{notice}
}
+
+ {!m.connected && (
+
+ Mopidy unreachable
+
+ )}
);
diff --git a/audiocontrol/src/contexts/MopidyContext.jsx b/audiocontrol/src/contexts/MopidyContext.jsx
new file mode 100644
index 0000000..6607de9
--- /dev/null
+++ b/audiocontrol/src/contexts/MopidyContext.jsx
@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import { useMopidy } from '../hooks/useMopidy';
+
+const MopidyContext = createContext(null);
+
+export function MopidyProvider({ children }) {
+ const m = useMopidy();
+ return
{children};
+}
+
+export function useMopidyContext() {
+ return useContext(MopidyContext);
+}
diff --git a/audiocontrol/src/hooks/useMopidy.js b/audiocontrol/src/hooks/useMopidy.js
index f5f422e..6da3244 100644
--- a/audiocontrol/src/hooks/useMopidy.js
+++ b/audiocontrol/src/hooks/useMopidy.js
@@ -143,6 +143,12 @@ export function useMopidy() {
clearTracklist: async () => { await mopidy.clearTracklist(); refresh(); },
removeTrack: async (tlid) => { await mopidy.removeTracks({ tlid: [tlid] }); refresh(); },
addTracks: async (uris) => { await mopidy.addTracks(uris); refresh(); },
+ playNow: async (uris) => {
+ const added = await mopidy.addTracksAt(uris, 0);
+ const tlid = added?.[0]?.tlid;
+ if (tlid != null) await mopidy.play(tlid);
+ refresh();
+ },
search: mopidy.search,
};
: 'ALB'}
-