chore: update Discord-video-stream subproject to latest commit

frontend/src/components/media/MediaPanel.tsx

@@ -11,9 +11,18 @@ interface MediaPanelProps {
   onStartScreen: (source: string) => void;
   onSkip: () => void;
   onStop: () => void;
+  onVolumeChange: (volume: number) => void;
 }
 
-export function MediaPanel({ state, loading, onQueueMusic, onStartScreen, onSkip, onStop }: MediaPanelProps) {
+export function MediaPanel({
+  state,
+  loading,
+  onQueueMusic,
+  onStartScreen,
+  onSkip,
+  onStop,
+  onVolumeChange,
+}: MediaPanelProps) {
   return (
     <div className="grid gap-6 xl:grid-cols-[1fr_380px]">
       <Tabs defaultValue="music" className="min-w-0">
@@ -22,7 +31,14 @@ export function MediaPanel({ state, loading, onQueueMusic, onStartScreen, onSkip
           <TabsTrigger value="screen">Screen Share</TabsTrigger>
         </TabsList>
         <TabsContent value="music">
-          <MusicPlayer loading={loading} onQueue={onQueueMusic} onSkip={onSkip} onStop={onStop} />
+          <MusicPlayer
+            loading={loading}
+            volume={state.musicVolume}
+            onVolumeChange={onVolumeChange}
+            onQueue={onQueueMusic}
+            onSkip={onSkip}
+            onStop={onStop}
+          />
         </TabsContent>
         <TabsContent value="screen">
           <ScreenShare loading={loading} onStart={onStartScreen} onSkip={onSkip} onStop={onStop} />

frontend/src/components/media/MusicPlayer.tsx

@@ -1,18 +1,42 @@
 import { Music2 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "../ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
 import { Input } from "../ui/input";
 
 interface MusicPlayerProps {
   loading: boolean;
+  volume: number;
+  onVolumeChange: (volume: number) => void;
   onQueue: (source: string) => void;
   onSkip: () => void;
   onStop: () => void;
 }
 
-export function MusicPlayer({ loading, onQueue, onSkip, onStop }: MusicPlayerProps) {
+export function MusicPlayer({
+  loading,
+  volume,
+  onVolumeChange,
+  onQueue,
+  onSkip,
+  onStop,
+}: MusicPlayerProps) {
   const [source, setSource] = useState("");
+  const safeVolume = Number.isFinite(volume) ? Math.max(0, Math.min(1, volume)) : 1;
+  const [draftVolume, setDraftVolume] = useState(Math.round(safeVolume * 100));
+
+  useEffect(() => {
+    setDraftVolume(Math.round(safeVolume * 100));
+  }, [safeVolume]);
+
+  useEffect(() => {
+    const normalized = draftVolume / 100;
+    if (Math.abs(normalized - safeVolume) < 0.001) return;
+    const timer = window.setTimeout(() => {
+      onVolumeChange(normalized);
+    }, 150);
+    return () => window.clearTimeout(timer);
+  }, [draftVolume, onVolumeChange, safeVolume]);
 
   const submit = () => {
     const trimmed = source.trim();
@@ -34,6 +58,21 @@ export function MusicPlayer({ loading, onQueue, onSkip, onStop }: MusicPlayerPro
           onKeyDown={(event) => event.key === "Enter" && submit()}
           placeholder="YouTube URL, Spotify track, or search terms"
         />
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="font-medium">Volume</span>
+            <span className="text-muted-foreground">{draftVolume}%</span>
+          </div>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            step={1}
+            value={draftVolume}
+            onChange={(event) => setDraftVolume(Number(event.target.value))}
+            className="h-2 w-full cursor-pointer accent-primary"
+          />
+        </div>
         <div className="flex flex-wrap gap-2">
           <Button disabled={loading || !source.trim()} onClick={submit}>Queue / Play</Button>
           <Button variant="secondary" disabled={loading} onClick={onSkip}>Skip</Button>