Feat: query params

ui/src/app/page.tsx

@@ -4,9 +4,29 @@ import { Room } from "@/components/room";
 import { PromptContext } from "@/components/settings";
 import { useState, useEffect } from "react";
 
+// Read query params once at page load
+function getQueryParams() {
+  if (typeof window === 'undefined') return undefined;
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const frameRateParam = searchParams.get('frameRate');
+  const workflowParam = searchParams.get('workflow');
+
+  return {
+    streamUrl: searchParams.get('streamUrl') || undefined,
+    frameRate: frameRateParam ? parseInt(frameRateParam) : undefined,
+    videoDevice: searchParams.get('videoDevice') || undefined,
+    audioDevice: searchParams.get('audioDevice') || undefined,
+    workflowUrl: searchParams.get('workflowUrl') || undefined,
+    workflow: workflowParam ? JSON.parse(decodeURIComponent(workflowParam)) : undefined,
+    skipDialog: searchParams.get('skipDialog') === 'true'
+  };
+}
+
 export default function Page() {
   const [originalPrompts, setOriginalPrompts] = useState<any>(null);
   const [currentPrompts, setCurrentPrompts] = useState<any>(null);
+  const [queryParams] = useState(getQueryParams); // Read once on mount
 
   // Update currentPrompt whenever originalPrompt changes
   useEffect(() => {
@@ -24,7 +44,7 @@ export default function Page() {
     }}>
       <div className="flex flex-col">
         <div className="w-full">
-          <Room />
+          <Room initialParams={queryParams} />
         </div>
       </div>
     </PromptContext.Provider>

ui/src/components/room.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { PeerConnector } from "@/components/peer";
-import { StreamConfig, StreamSettings } from "@/components/settings";
+import { StreamConfig, StreamSettings, DEFAULT_CONFIG } from "@/components/settings";
 import { Webcam } from "@/components/webcam";
 import { usePeerContext } from "@/context/peer-context";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { toast } from "sonner";
 import {
   Tooltip,
@@ -13,6 +13,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { ControlPanelsContainer } from "@/components/control-panels-container";
+
 interface MediaStreamPlayerProps {
   stream: MediaStream;
 }
@@ -154,26 +155,42 @@ function Stage({ connected, onStreamReady }: StageProps) {
   );
 }
 
+interface RoomProps {
+  initialParams?: {
+    streamUrl?: string;
+    frameRate?: number;
+    videoDevice?: string;
+    audioDevice?: string;
+    workflowUrl?: string;
+    workflow?: any;
+    skipDialog?: boolean;
+  };
+}
+
 /**
  * Creates a room component for the user to stream their webcam to ComfyStream and
  * see the output stream.
  */
-export const Room = () => {
+export const Room = ({ initialParams }: RoomProps) => {
   const [connect, setConnect] = useState<boolean>(false);
   const [isConnected, setIsConnected] = useState<boolean>(false);
-  const [isStreamSettingsOpen, setIsStreamSettingsOpen] =
-    useState<boolean>(true);
+  const [isStreamSettingsOpen, setIsStreamSettingsOpen] = useState<boolean>(true);
   const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-  const [loadingToastId, setLoadingToastId] = useState<
-    string | number | undefined
-  >(undefined);
-
-  const [config, setConfig] = useState<StreamConfig>({
-    streamUrl: "",
-    frameRate: 0,
-    selectedVideoDeviceId: "",
-    selectedAudioDeviceId: "", // New property for audio device
-    prompts: null,
+  const [loadingToastId, setLoadingToastId] = useState<string | number | undefined>(undefined);
+
+  const [config, setConfig] = useState<StreamConfig>(() => {
+    // Initialize config with initial values, merging with defaults
+    const config = {
+      ...DEFAULT_CONFIG,
+      ...(initialParams?.streamUrl ? { streamUrl: initialParams.streamUrl } : {}),
+      ...(initialParams?.frameRate ? { frameRate: initialParams.frameRate } : {}),
+      ...(initialParams?.videoDevice ? { selectedVideoDeviceId: initialParams.videoDevice } : {}),
+      ...(initialParams?.audioDevice ? { selectedAudioDeviceId: initialParams.audioDevice } : {}),
+      ...(initialParams?.workflow ? { prompts: [initialParams.workflow] } : {}),
+    };
+    console.log('Room: initializing with params:', initialParams);
+    console.log('Room: initial config:', config);
+    return config;
   });
 
   const connectingRef = useRef(false);
@@ -268,6 +285,7 @@ export const Room = () => {
               open={isStreamSettingsOpen}
               onOpenChange={setIsStreamSettingsOpen}
               onSave={onStreamConfigSave}
+              currentConfig={config}
             />
           </div>
         </PeerConnector>

ui/src/components/settings.tsx

@@ -63,23 +63,17 @@ interface StreamSettingsProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSave: (config: StreamConfig) => void;
+  currentConfig?: StreamConfig;
 }
 
 export function StreamSettings({
   open,
   onOpenChange,
   onSave,
+  currentConfig,
 }: StreamSettingsProps) {
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
-  const [config, setConfig] = useState<StreamConfig>(DEFAULT_CONFIG);
-
-  const handleSubmit = (config: StreamConfig) => {
-    setConfig(config);
-    onSave(config);
-    onOpenChange(false);
-  };
-
   if (isDesktop) {
     return (
       <Dialog open={open} onOpenChange={onOpenChange}>
@@ -89,7 +83,7 @@ export function StreamSettings({
               <div className="mt-4">Stream Settings</div>
             </DialogTitle>
           </DialogHeader>
-          <ConfigForm config={config} onSubmit={handleSubmit} />
+          <ConfigForm onSubmit={onSave} currentConfig={currentConfig} />
         </DialogContent>
       </Dialog>
     );
@@ -102,7 +96,7 @@ export function StreamSettings({
           <DrawerTitle>Stream Settings</DrawerTitle>
         </DrawerHeader>
         <div className="px-4">
-          <ConfigForm config={config} onSubmit={handleSubmit} />
+          <ConfigForm onSubmit={onSave} currentConfig={currentConfig} />
         </div>
       </DrawerContent>
     </Drawer>
@@ -115,8 +109,8 @@ const formSchema = z.object({
 });
 
 interface ConfigFormProps {
-  config: StreamConfig;
   onSubmit: (config: StreamConfig) => void;
+  currentConfig?: StreamConfig;
 }
 
 interface PromptContextType {
@@ -135,17 +129,24 @@ export const PromptContext = createContext<PromptContextType>({
 
 export const usePrompt = () => useContext(PromptContext);
 
-function ConfigForm({ config, onSubmit }: ConfigFormProps) {
+function ConfigForm({ onSubmit, currentConfig }: ConfigFormProps) {
   const [prompts, setPrompts] = useState<any[]>([]);
   const { setOriginalPrompts } = usePrompt();
   const [videoDevices, setVideoDevices] = useState<AVDevice[]>([]);
   const [audioDevices, setAudioDevices] = useState<AVDevice[]>([]);
-  const [selectedVideoDevice, setSelectedVideoDevice] = useState<string | undefined>(config.selectedVideoDeviceId);
-  const [selectedAudioDevice, setSelectedAudioDevice] = useState<string | undefined>(config.selectedAudioDeviceId);
+  const [selectedVideoDevice, setSelectedVideoDevice] = useState<string | undefined>(
+    currentConfig?.selectedVideoDeviceId || DEFAULT_CONFIG.selectedVideoDeviceId
+  );
+  const [selectedAudioDevice, setSelectedAudioDevice] = useState<string | undefined>(
+    currentConfig?.selectedAudioDeviceId || DEFAULT_CONFIG.selectedAudioDeviceId
+  );
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: config,
+    defaultValues: {
+      streamUrl: currentConfig?.streamUrl || DEFAULT_CONFIG.streamUrl,
+      frameRate: currentConfig?.frameRate || DEFAULT_CONFIG.frameRate,
+    },
   });
 
   /**

ui/src/hooks/use-query-params.ts

@@ -0,0 +1,30 @@
+// Read params directly from window.location.search
+const cachedParams = typeof window !== 'undefined' ? (() => {
+  console.log('Reading query params from:', window.location.search);
+  const searchParams = new URLSearchParams(window.location.search);
+  const frameRateParam = searchParams.get('frameRate');
+
+  const params = {
+    streamUrl: searchParams.get('streamUrl'),
+    frameRate: frameRateParam ? parseInt(frameRateParam) : undefined,
+    videoDevice: searchParams.get('videoDevice'),
+    audioDevice: searchParams.get('audioDevice'),
+    workflowUrl: searchParams.get('workflowUrl'),
+    skipDialog: searchParams.get('skipDialog') === 'true'
+  };
+  console.log('Parsed params:', params);
+  return params;
+})() : {
+  streamUrl: null,
+  frameRate: undefined,
+  videoDevice: null,
+  audioDevice: null,
+  workflowUrl: null,
+  skipDialog: false
+};
+
+// Just return the cached params
+export function useQueryParams() {
+  console.log('useQueryParams called, returning:', cachedParams);
+  return cachedParams;
+}