Initial release with i18n and theming

2026-07-22 06:25:41 +00:00 · 2026-03-09 19:02:57 +01:00
commit 65459e53f1
110 changed files with 29536 additions and 0 deletions
@@ -0,0 +1,159 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Search, Disc3, Users, Music } from 'lucide-react';
+import { search, SearchResults, buildCoverArtUrl } from '../api/subsonic';
+import { usePlayerStore } from '../store/playerStore';
+
+function debounce(fn: (q: string) => void, ms: number): (q: string) => void {
+  let timer: ReturnType<typeof setTimeout>;
+  return (q: string) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn(q), ms);
+  };
+}
+
+export default function LiveSearch() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResults | null>(null);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const playTrack = usePlayerStore(state => state.playTrack);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const doSearch = useCallback(
+    debounce(async (q: string) => {
+      if (!q.trim()) { setResults(null); setOpen(false); return; }
+      setLoading(true);
+      try {
+        const r = await search(q);
+        setResults(r);
+        setOpen(true);
+      } finally {
+        setLoading(false);
+      }
+    }, 300),
+    []
+  );
+
+  useEffect(() => { doSearch(query); }, [query, doSearch]);
+
+  // Close on click outside
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const hasResults = results && (results.artists.length || results.albums.length || results.songs.length);
+
+  return (
+    <div className="live-search" ref={ref} role="search">
+      <div className="live-search-input-wrap">
+        {loading ? (
+          <span className="live-search-icon animate-spin" style={{ opacity: 0.6 }}>
+            <div style={{ width: 16, height: 16, border: '2px solid var(--border)', borderTopColor: 'var(--accent)', borderRadius: '50%' }} />
+          </span>
+        ) : (
+          <Search size={16} className="live-search-icon" />
+        )}
+        <input
+          id="live-search-input"
+          className="input live-search-field"
+          type="search"
+          placeholder="Suchen nach Künstler, Album oder Song…"
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          onFocus={() => results && setOpen(true)}
+          aria-autocomplete="list"
+          aria-controls="search-results"
+          aria-expanded={open}
+          autoComplete="off"
+        />
+        {query && (
+          <button className="live-search-clear" onClick={() => { setQuery(''); setResults(null); setOpen(false); }} aria-label="Suche leeren">
+            ×
+          </button>
+        )}
+      </div>
+
+      {open && (
+        <div className="live-search-dropdown" id="search-results" role="listbox">
+          {!hasResults && !loading && (
+            <div className="search-empty">Keine Ergebnisse für „{query}"</div>
+          )}
+
+          {results?.artists.length ? (
+            <div className="search-section">
+              <div className="search-section-label"><Users size={12} /> Künstler</div>
+              {results.artists.map(a => (
+                <button
+                  key={a.id}
+                  className="search-result-item"
+                  onClick={() => { navigate(`/artist/${a.id}`); setOpen(false); setQuery(''); }}
+                  role="option"
+                >
+                  <div className="search-result-icon"><Users size={14} /></div>
+                  <span>{a.name}</span>
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          {results?.albums.length ? (
+            <div className="search-section">
+              <div className="search-section-label"><Disc3 size={12} /> Alben</div>
+              {results.albums.map(a => (
+                <button
+                  key={a.id}
+                  className="search-result-item"
+                  onClick={() => { navigate(`/album/${a.id}`); setOpen(false); setQuery(''); }}
+                  role="option"
+                >
+                  {a.coverArt ? (
+                    <img className="search-result-thumb" src={buildCoverArtUrl(a.coverArt, 40)} alt="" loading="lazy" />
+                  ) : (
+                    <div className="search-result-icon"><Disc3 size={14} /></div>
+                  )}
+                  <div>
+                    <div className="search-result-name">{a.name}</div>
+                    <div className="search-result-sub">{a.artist}</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          {results?.songs.length ? (
+            <div className="search-section">
+              <div className="search-section-label"><Music size={12} /> Songs</div>
+              {results.songs.map(s => (
+                <button
+                  key={s.id}
+                  className="search-result-item"
+                  onClick={() => {
+                    playTrack({ 
+                      id: s.id, title: s.title, artist: s.artist, album: s.album, 
+                      albumId: s.albumId, duration: s.duration, coverArt: s.coverArt,
+                      year: s.year, bitRate: s.bitRate, suffix: s.suffix, userRating: s.userRating
+                    });
+                    setOpen(false); setQuery('');
+                  }}
+                  role="option"
+                >
+                  <div className="search-result-icon"><Music size={14} /></div>
+                  <div>
+                    <div className="search-result-name">{s.title}</div>
+                    <div className="search-result-sub">{s.artist} · {s.album}</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}