feat: live-Volume während Wiedergabe (inlineVolume state) + Anzeige Gesamtanzahl Sounds

web/src/App.tsx

@@ -4,6 +4,7 @@ import type { VoiceChannelInfo, Sound } from './types';
 
 export default function App() {
   const [sounds, setSounds] = useState<Sound[]>([]);
+  const [total, setTotal] = useState<number>(0);
   const [channels, setChannels] = useState<VoiceChannelInfo[]>([]);
   const [query, setQuery] = useState('');
   const [selected, setSelected] = useState<string>('');
@@ -15,7 +16,8 @@ export default function App() {
     (async () => {
       try {
         const [s, c] = await Promise.all([fetchSounds(), fetchChannels()]);
-        setSounds(s);
+        setSounds(s.items);
+        setTotal(s.total);
         setChannels(c);
         if (c[0]) setSelected(`${c[0].guildId}:${c[0].channelId}`);
       } catch (e: any) {
@@ -26,7 +28,8 @@ export default function App() {
     const interval = setInterval(async () => {
       try {
         const s = await fetchSounds(query);
-        setSounds(s);
+        setSounds(s.items);
+        setTotal(s.total);
       } catch {}
     }, 10000);
     return () => clearInterval(interval);
@@ -101,6 +104,7 @@ export default function App() {
         ))}
         {filtered.length === 0 && <div className="hint">Keine Sounds gefunden.</div>}
       </section>
+      <div className="footer-info">Geladene Sounds: {total}</div>
     </div>
   );
 }

web/src/api.ts

@@ -1,8 +1,8 @@
-import type { Sound, VoiceChannelInfo } from './types';
+import type { Sound, SoundsResponse, VoiceChannelInfo } from './types';
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
 
-export async function fetchSounds(q?: string): Promise<Sound[]> {
+export async function fetchSounds(q?: string): Promise<SoundsResponse> {
   const url = new URL(`${API_BASE}/sounds`, window.location.origin);
   if (q) url.searchParams.set('q', q);
   const res = await fetch(url.toString());

web/src/styles.css

@@ -49,6 +49,12 @@ header p { opacity: .8; }
 
 .hint { opacity: .7; padding: 24px 0; }
 
+.footer-info {
+  margin-top: 14px;
+  opacity: .8;
+  font-size: 14px;
+}
+
 
 
 

web/src/types.ts

@@ -3,6 +3,11 @@ export type Sound = {
   name: string;
 };
 
+export type SoundsResponse = {
+  items: Sound[];
+  total: number;
+};
+
 export type VoiceChannelInfo = {
   guildId: string;
   guildName: string;