update AudioGridVisualizer

Author: thomasyuill-livekit

app/ui/_components.tsx

@@ -420,7 +420,7 @@ export const COMPONENTS = {
             options={gridVariants[demoIndex] as GridOptions}
           />
         </div>
-        <div className="border-border bg-muted rounded-xl border p-8">
+        <div className="border-border bg-muted overflow-x-auto rounded-xl border p-8">
           <pre className="text-muted-foreground text-sm">
             <code>{JSON.stringify(gridVariants[demoIndex], null, 2)}</code>
           </pre>

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

@@ -1,25 +1,97 @@
-import { CSSProperties, ComponentType } from 'react';
+import { CSSProperties, ComponentType, JSX, useMemo } from 'react';
 import { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client';
 import {
   type AgentState,
   type TrackReferenceOrPlaceholder,
   useMultibandTrackVolume,
 } from '@livekit/components-react';
+import { cn } from '@/lib/utils';
 import { type GridAnimationOptions, useGridAnimator } from './hooks/useGridAnimator';
 
+const DEFAULT_OPTIONS: GridOptions = {};
+
+type GridComponentType =
+  | ComponentType<{ style?: CSSProperties; className?: string }>
+  | keyof JSX.IntrinsicElements;
+
 export interface GridOptions {
-  baseStyle: CSSProperties;
-  gridComponent?: ComponentType<{ style: CSSProperties }>;
-  gridSpacing?: string;
-  onStyle?: CSSProperties;
-  offStyle?: CSSProperties;
-  transformer?: (distanceFromCenter: number, volumeBands: number[]) => CSSProperties;
   rowCount?: number;
+  className?: string;
+  baseClassName?: string;
+  offClassName?: string;
+  onClassName?: string;
   animationOptions?: GridAnimationOptions;
-  maxHeight?: number;
-  minHeight?: number;
-  radiusFactor?: number;
-  radial?: boolean;
+  gridComponent?: GridComponentType;
+  transformer?: (distanceFromCenter: number, volumeBands: number[]) => CSSProperties;
+}
+
+function useGrid(columnCount: number, rowCount?: number) {
+  return useMemo(() => {
+    const gridColumnCount = columnCount;
+    const gridRowCount = rowCount ?? columnCount;
+    const rowMidPoint = Math.floor(gridRowCount / 2);
+    const volumeChunks = 1 / (rowMidPoint + 1);
+    const items = new Array(gridColumnCount * gridRowCount).fill(0).map((_, idx) => idx);
+
+    return { gridColumnCount, gridRowCount, rowMidPoint, volumeChunks, items };
+  }, [columnCount, rowCount]);
+}
+
+function Dot({
+  index,
+  state,
+  gridColumnCount,
+  rowMidPoint,
+  volumeChunks,
+  volumeBands,
+  options,
+  Component,
+  highlightedIndex,
+}: {
+  index: number;
+  state: AgentState;
+  options: GridOptions;
+  rowMidPoint: number;
+  volumeChunks: number;
+  volumeBands: number[];
+  gridColumnCount: number;
+  highlightedIndex: { x: number; y: number };
+  Component: GridComponentType;
+}) {
+  const { baseClassName, onClassName, offClassName, transformer } = options;
+  if (state === 'speaking') {
+    const y = Math.floor(index / gridColumnCount);
+    const distanceToMid = Math.abs(rowMidPoint - y);
+    const threshold = distanceToMid * volumeChunks;
+    const isOn = volumeBands[index % gridColumnCount] >= threshold;
+
+    return <Component className={cn(baseClassName, isOn ? onClassName : offClassName)} />;
+  }
+
+  const distanceFromCenter = Math.sqrt(
+    Math.pow(rowMidPoint - (index % gridColumnCount), 2) +
+      Math.pow(rowMidPoint - Math.floor(index / gridColumnCount), 2)
+  );
+  const transformerStyle = transformer?.(distanceFromCenter, volumeBands);
+
+  const isOn =
+    highlightedIndex.x === index % gridColumnCount &&
+    highlightedIndex.y === Math.floor(index / gridColumnCount);
+
+  const transitionDurationInSeconds =
+    (options?.animationOptions?.interval ?? 100) / (isOn ? 1000 : 100);
+
+  return (
+    <Component
+      style={{
+        transitionProperty: 'all',
+        transitionDuration: `${transitionDurationInSeconds}s`,
+        transitionTimingFunction: 'ease-out',
+        ...transformerStyle,
+      }}
+      className={cn(baseClassName, isOn ? onClassName : offClassName)}
+    />
+  );
 }
 
 export interface AudioGridVisualizerProps {
@@ -34,91 +106,51 @@ export function AudioGridVisualizer({
   state,
   columnCount = 5,
   audioTrack,
-  options,
+  options = DEFAULT_OPTIONS,
 }: AudioGridVisualizerProps) {
+  const { gridColumnCount, gridRowCount, rowMidPoint, volumeChunks, items } = useGrid(
+    columnCount,
+    options?.rowCount
+  );
+
   const volumeBands = useMultibandTrackVolume(audioTrack, {
     bands: columnCount,
     loPass: 100,
     hiPass: 200,
   });
 
-  const gridColumns = volumeBands.length;
-  const gridRows = options?.rowCount ?? gridColumns;
-  const gridArray = Array.from({ length: gridColumns }).map((_, i) => i);
-  const gridRowsArray = Array.from({ length: gridRows }).map((_, i) => i);
   const highlightedIndex = useGridAnimator(
     state,
-    gridRows,
-    gridColumns,
+    gridRowCount,
+    gridColumnCount,
     options?.animationOptions?.interval ?? 100,
     state !== 'speaking' ? 'active' : 'paused',
     options?.animationOptions
   );
 
-  const rowMidPoint = Math.floor(gridRows / 2.0);
-  const volumeChunks = 1 / (rowMidPoint + 1);
-
-  const baseStyle = options?.baseStyle ?? {};
-  const onStyle = { ...baseStyle, ...(options?.onStyle ?? {}) };
-  const offStyle = { ...baseStyle, ...(options?.offStyle ?? {}) };
   const GridComponent = options?.gridComponent || 'div';
 
-  const grid = gridArray.map((x) => {
-    return (
-      <div
-        key={x}
-        className="flex flex-col"
-        style={{
-          gap: options?.gridSpacing ?? '4px',
-        }}
-      >
-        {gridRowsArray.map((y) => {
-          const distanceToMid = Math.abs(rowMidPoint - y);
-          const threshold = distanceToMid * volumeChunks;
-          let targetStyle: CSSProperties;
-          if (state !== 'speaking') {
-            if (highlightedIndex.x === x && highlightedIndex.y === y) {
-              targetStyle = {
-                transition: `all ${(options?.animationOptions?.interval ?? 100) / 1000}s ease-out`,
-                ...onStyle,
-              };
-            } else {
-              targetStyle = {
-                transition: `all ${(options?.animationOptions?.interval ?? 100) / 100}s ease-out`,
-                ...offStyle,
-              };
-            }
-          } else {
-            if (volumeBands[x] >= threshold) {
-              targetStyle = onStyle;
-            } else {
-              targetStyle = offStyle;
-            }
-          }
-
-          const distanceFromCenter = Math.sqrt(
-            Math.pow(rowMidPoint - x, 2) + Math.pow(rowMidPoint - y, 2)
-          );
-
-          return (
-            <GridComponent
-              style={{ ...targetStyle, ...options?.transformer?.(distanceFromCenter, volumeBands) }}
-              key={x + '-' + y}
-            />
-          );
-        })}
-      </div>
-    );
-  });
-
   return (
     <div
-      className="flex h-full items-center justify-center"
+      className={cn('grid gap-1', options?.className)}
       style={{
-        gap: options?.gridSpacing ?? '4px',
+        gridTemplateColumns: `repeat(${gridColumnCount}, 1fr)`,
       }}
     >
-      {grid}
+      {items.map((idx) => (
+        <Dot
+          key={idx}
+          index={idx}
+          state={state}
+          options={options}
+          volumeBands={volumeBands}
+          gridColumnCount={gridColumnCount}
+          rowMidPoint={rowMidPoint}
+          volumeChunks={volumeChunks}
+          highlightedIndex={highlightedIndex}
+          Component={GridComponent}
+        />
+      ))}
     </div>
   );
 }