refactor: streamline data fetching in various hooks and components

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { voiceApi } from "@/lib/api";
 import type { MediaState } from "@/lib/types";
@@ -69,6 +69,10 @@ export function useMediaState(): UseMediaStateReturn {
     }
   }, []);
 
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
   return { mediaState, refresh, queue, skip, stop, setVolume };
 }