feat(ui): add settings search queries (#91)

* feat(ui): add settings search queries
This commit gives users the ability to set the stream settings using query parameters.
---------
Co-authored-by: ryanontheinstide <ryanfosdick87@gmail.com>
Co-authored-by: Elite <john@eliteencoder.net>

Author: rickstaa

ui/src/components/settings.tsx

@@ -1,6 +1,7 @@
 /**
  * @file Contains a StreamSettings component for configuring stream settings.
  */
+import { useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -27,6 +28,7 @@ import { Label } from "@/components/ui/label";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+  Suspense,
   useCallback,
   useEffect,
   useState,
@@ -52,7 +54,7 @@ interface AVDevice {
   label: string;
 }
 
-export const DEFAULT_CONFIG: StreamConfig = {
+const DEFAULT_CONFIG: StreamConfig = {
   streamUrl:
     process.env.NEXT_PUBLIC_DEFAULT_STREAM_URL || "http://127.0.0.1:8889",
   frameRate: 30,
@@ -71,9 +73,27 @@ export function StreamSettings({
   onOpenChange,
   onSave,
 }: StreamSettingsProps) {
-  const isDesktop = useMediaQuery("(min-width: 768px)");
+  return (
+    <Suspense fallback={<div>Loading settings...</div>}>
+      <StreamSettingsInner open={open} onOpenChange={onOpenChange} onSave={onSave} />
+    </Suspense>
+  );
+}
 
-  const [config, setConfig] = useState<StreamConfig>(DEFAULT_CONFIG);
+function StreamSettingsInner({
+  open,
+  onOpenChange,
+  onSave,
+}: StreamSettingsProps) {
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const searchParams = useSearchParams();
+  
+  const initialConfig: StreamConfig = {
+    ...DEFAULT_CONFIG,
+    streamUrl: searchParams.get("streamUrl") || DEFAULT_CONFIG.streamUrl,
+    frameRate: parseInt(searchParams.get("frameRate") || `${DEFAULT_CONFIG.frameRate}`, 10),
+  }
+  const [config, setConfig] = useState<StreamConfig>(initialConfig);
 
   const handleSubmit = (config: StreamConfig) => {
     setConfig(config);