feat(media): loop mode + high-quality OggOpus music playback

- Loop: toggle via POST /api/media/loop → COMMAND_MEDIA_LOOP; gateway
  replays finished music track on natural end (queue untouched); status
  payload exposes loop flag; FE tombol Loop di music-player + mini-player.
- Kualitas suara: music playback sekarang di-transcode sekali via ffmpeg ke
  OggOpus 48kHz stereo 192kbps dengan volume di-bake ke encode — menghindari
  double lossy encode (inlineVolume) yang bikin suara buram. Screen share
  tetap pakai jalur lama.
- Backend: MediaState.loop, setLoop service, route + schema validation.

services/frontend/src/components/media/mini-player.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { Disc3, Music, SkipForward, Square } from "lucide-react";
+import { Disc3, Music, Repeat, SkipForward, Square } from "lucide-react";
 import { useMediaPlayer } from "@/lib/hooks/use-media-player";
 
 export function MiniPlayer() {
-  const { playing, current, queue, pending, skip, stop } = useMediaPlayer();
+  const { playing, current, queue, loop, pending, skip, stop, toggleLoop } =
+    useMediaPlayer();
 
   // Nothing to show if no track is playing and nothing is queued
   if (!current && queue.length === 0) return null;
@@ -59,6 +60,20 @@ export function MiniPlayer() {
             <SkipForward className="size-3.5" />
           </button>
         )}
+        <button
+          type="button"
+          onClick={() => toggleLoop()}
+          disabled={pending}
+          className={`size-8 flex items-center justify-center rounded-md transition-colors disabled:opacity-40 ${
+            loop
+              ? "text-primary bg-glass-bg"
+              : "text-text-secondary hover:text-text-primary hover:bg-glass-bg"
+          }`}
+          aria-label={loop ? "Loop on" : "Loop off"}
+          aria-pressed={loop}
+        >
+          <Repeat className="size-3.5" />
+        </button>
       </div>
     </div>
   );

services/frontend/src/components/media/music-player.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Disc3, Music, Play, SkipForward, Square } from "lucide-react";
+import { Disc3, Music, Play, Repeat, SkipForward, Square } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useState } from "react";
 
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import {
+  useMediaLoop,
   useMediaQueue,
   useMediaSkip,
   useMediaState,
@@ -28,6 +29,7 @@ export function MusicPlayer({ ws, initialData }: MusicPlayerProps) {
   const queueMut = useMediaQueue();
   const skipMut = useMediaSkip();
   const stopMut = useMediaStop();
+  const loopMut = useMediaLoop();
   const [queueUrl, setQueueUrl] = useState("");
   const [screenMode, setScreenMode] = useState(false);
 
@@ -131,6 +133,21 @@ export function MusicPlayer({ ws, initialData }: MusicPlayerProps) {
             <SkipForward className="size-4 mr-1" />
             Skip
           </Button>
+          <Button
+            variant={mediaState?.loop ? "default" : "outline"}
+            size="sm"
+            onClick={() => loopMut.mutate(!mediaState?.loop)}
+            disabled={loopMut.isPending}
+            title={
+              mediaState?.loop
+                ? "Loop enabled — replay current track"
+                : "Enable loop"
+            }
+            aria-pressed={mediaState?.loop}
+          >
+            <Repeat className="size-4 mr-1" />
+            Loop
+          </Button>
         </div>
 
         {mediaState && mediaState.queue.length > 0 && (