add AudioGridVisualizer

Author: thomasyuill-livekit

app/ui/_components.tsx

@@ -327,8 +327,9 @@ export const COMPONENTS = {
     ] as AgentState[];
 
     const { microphoneTrack, localParticipant } = useLocalParticipant();
-    const [barCount, setBarCount] = useState<string>(barCounts[0]);
+    const [barCount, setBarCount] = useState(barCounts[0]);
     const [state, setState] = useState<AgentState>(states[0]);
+    const [demoIndex, setDemoIndex] = useState(0);
 
     const micTrackRef = useMemo<TrackReferenceOrPlaceholder | undefined>(() => {
       return state === 'speaking'
@@ -380,19 +381,42 @@ export const COMPONENTS = {
               </SelectContent>
             </Select>
           </div>
+
+          <div className="flex-1">
+            <label className="font-mono text-xs uppercase" htmlFor="demoIndex">
+              Demo
+            </label>
+            <Select
+              value={demoIndex.toString()}
+              onValueChange={(value) => setDemoIndex(parseInt(value))}
+            >
+              <SelectTrigger id="demoIndex" className="w-full">
+                <SelectValue placeholder="Select a demo" />
+              </SelectTrigger>
+              <SelectContent>
+                {gridVariants.map((_, idx) => (
+                  <SelectItem key={idx} value={idx.toString()}>
+                    Demo {String(idx + 1)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
 
-        <div className="relative flex flex-col justify-center gap-4">
-          {gridVariants.map((variant: GridOptions, idx) => (
-            <div key={idx} className="border-border grid place-items-center rounded-xl border p-8">
-              <AudioGridVisualizer
-                state={state}
-                audioTrack={micTrackRef!}
-                columnCount={parseInt(barCount) || 5}
-                options={variant}
-              />
-            </div>
-          ))}
+        <div className="grid h-48 place-items-center">
+          <AudioGridVisualizer
+            key={demoIndex}
+            state={state}
+            audioTrack={micTrackRef!}
+            columnCount={parseInt(barCount) || 5}
+            options={gridVariants[demoIndex] as GridOptions}
+          />
+        </div>
+        <div className="border-border bg-muted rounded-xl border p-8">
+          <pre className="text-muted-foreground text-sm">
+            <code>{JSON.stringify(gridVariants[demoIndex], null, 2)}</code>
+          </pre>
         </div>
       </Container>
     );

components/livekit/audio-visualizer/audio-grid-visualizer/audio-grid-visualizer.tsx

@@ -104,7 +104,7 @@ export function AudioGridVisualizer({
             <GridComponent
               style={{ ...targetStyle, ...options?.transformer?.(distanceFromCenter, volumeBands) }}
               key={x + '-' + y}
-            ></GridComponent>
+            />
           );
         })}
       </div>