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 && (

services/frontend/src/hooks/index.ts

@@ -11,6 +11,7 @@ export {
 } from "./use-dashboard";
 export { useGuilds } from "./use-guilds";
 export {
+  useMediaLoop,
   useMediaQueue,
   useMediaSkip,
   useMediaState,

services/frontend/src/hooks/use-media.ts

@@ -38,6 +38,10 @@ export function useMediaStop() {
   return useMediaAction(() => mediaApi.stop());
 }
 
+export function useMediaLoop() {
+  return useMediaAction((loop: boolean) => mediaApi.loop(loop));
+}
+
 /** Subscribe to WS media_state events to keep cache fresh */
 export function useMediaWsSync(ws: WsHook) {
   const { mutate } = useSWRConfig();

services/frontend/src/lib/api/media.ts

@@ -7,4 +7,5 @@ export const mediaApi = {
     api.post<MediaState>("/api/media/queue", { source, mode }),
   skip: () => api.post<MediaState>("/api/media/skip", {}),
   stop: () => api.post<MediaState>("/api/media/stop", {}),
+  loop: (loop: boolean) => api.post<MediaState>("/api/media/loop", { loop }),
 };

services/frontend/src/lib/hooks/use-media-player.tsx

@@ -20,6 +20,8 @@ interface MediaPlayerContextValue {
   current: MediaItem | null;
   /** Upcoming queue */
   queue: MediaItem[];
+  /** Loop mode (replay current track on natural end) */
+  loop: boolean;
   /** True while a mutation is in flight */
   pending: boolean;
 
@@ -27,6 +29,8 @@ interface MediaPlayerContextValue {
   skip: () => void;
   /** Stop playback */
   stop: () => void;
+  /** Toggle loop mode */
+  toggleLoop: () => void;
   /** Queue a URL for playback */
   queueUrl: (url: string) => void;
 }
@@ -38,6 +42,7 @@ export function MediaPlayerProvider({ children }: { children: ReactNode }) {
   const [state, setState] = useState<MediaState>({
     playing: false,
     musicVolume: 0.3,
+    loop: false,
     current: null,
     queue: [],
   });
@@ -105,15 +110,30 @@ export function MediaPlayerProvider({ children }: { children: ReactNode }) {
       .finally(() => setPending(false));
   }, []);
 
+  const toggleLoop = useCallback(() => {
+    setPending(true);
+    mediaApi
+      .loop(!state.loop)
+      .then((data) => {
+        if (data) setState(data as MediaState);
+      })
+      .catch(() => {
+        // ignore
+      })
+      .finally(() => setPending(false));
+  }, [state.loop]);
+
   return (
     <MediaPlayerContext.Provider
       value={{
         playing: state.playing,
         current: state.current,
         queue: state.queue,
+        loop: state.loop,
         pending,
         skip,
         stop,
+        toggleLoop,
         queueUrl,
       }}
     >

services/frontend/src/lib/types/media.ts

@@ -13,6 +13,7 @@ export interface MediaState {
   playing: boolean;
   activeMode?: MediaMode | null;
   musicVolume: number;
+  loop: boolean;
   current: MediaItem | null;
   queue: MediaItem[];
 }