refactor grid visualizer

Author: thomasyuill-livekit

app/ui/_components.tsx

@@ -23,7 +23,10 @@ import {
   AudioBarVisualizer,
   audioBarVisualizerVariants,
 } from '@/components/livekit/audio-visualizer/audio-bar-visualizer/audio-bar-visualizer';
-import { AudioGridVisualizer } from '@/components/livekit/audio-visualizer/audio-grid-visualizer/audio-grid-visualizer';
+import {
+  AudioGridVisualizer,
+  type GridOptions,
+} from '@/components/livekit/audio-visualizer/audio-grid-visualizer/audio-grid-visualizer';
 import { gridVariants } from '@/components/livekit/audio-visualizer/audio-grid-visualizer/demos';
 import { AudioOscilloscopeVisualizer } from '@/components/livekit/audio-visualizer/audio-oscilloscope-visualizer/audio-oscilloscope-visualizer';
 import {
@@ -294,7 +297,9 @@ export const COMPONENTS = {
               audioTrack={micTrackRef!}
               barCount={parseInt(barCount) || undefined}
               className="mx-auto"
-            />
+            >
+              <div className="data-[lk-highlighted=true]:!bg-primary rounded-full" />
+            </AudioBarVisualizer>
           </div>
           <details>
             <summary className="text-muted-foreground font-mono text-xs uppercase">
@@ -536,7 +541,7 @@ export const COMPONENTS = {
             key={`${demoIndex}-${rowCount}-${columnCount}`}
             state={state}
             audioTrack={micTrackRef!}
-            options={demoOptions}
+            {...(demoOptions as GridOptions)}
           />
         </div>
 

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

@@ -1,109 +1,148 @@
-import { CSSProperties, ComponentType, JSX, memo, useMemo } from 'react';
+import { CSSProperties, type ReactNode, memo, useMemo } from 'react';
+import { type VariantProps, cva } from 'class-variance-authority';
 import { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client';
 import {
   type AgentState,
   type TrackReferenceOrPlaceholder,
   useMultibandTrackVolume,
 } from '@livekit/components-react';
-import { cn } from '@/lib/utils';
+import { cloneSingleChild, cn } from '@/lib/utils';
 import { type Coordinate, useGridAnimator } from './hooks/useGridAnimator';
 
-type GridComponentType =
-  | ComponentType<{ style?: CSSProperties; className?: string }>
-  | keyof JSX.IntrinsicElements;
+export const audioGridVisualizerVariants = cva(
+  [
+    'grid',
+    '[&_>_*]:size-1 [&_>_*]:rounded-full',
+    '[&_>_*]:bg-foreground/10 [&_>_[data-lk-highlighted=true]]:bg-foreground [&_>_[data-lk-highlighted=true]]:scale-125 [&_>_[data-lk-highlighted=true]]:shadow-[0px_0px_10px_2px_rgba(255,255,255,0.4)]',
+  ],
+  {
+    variants: {
+      size: {
+        icon: ['gap-[2px] [&_>_*]:size-[4px]'],
+        sm: ['gap-[4px] [&_>_*]:size-[4px]'],
+        md: ['gap-[8px] [&_>_*]:size-[8px]'],
+        lg: ['gap-[8px] [&_>_*]:size-[8px]'],
+        xl: ['gap-[8px] [&_>_*]:size-[8px]'],
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
 
 export interface GridOptions {
   radius?: number;
   interval?: number;
   rowCount?: number;
   columnCount?: number;
-  className?: string;
-  baseClassName?: string;
-  offClassName?: string;
-  onClassName?: string;
-  GridComponent?: GridComponentType;
   transformer?: (index: number, rowCount: number, columnCount: number) => CSSProperties;
+  className?: string;
+  children?: ReactNode;
 }
 
-function useGrid(options: GridOptions) {
+const sizeDefaults = {
+  icon: 3,
+  sm: 5,
+  md: 5,
+  lg: 5,
+  xl: 5,
+};
+
+function useGrid(
+  size: VariantProps<typeof audioGridVisualizerVariants>['size'] = 'md',
+  columnCount = sizeDefaults[size as keyof typeof sizeDefaults],
+  rowCount = sizeDefaults[size as keyof typeof sizeDefaults]
+) {
   return useMemo(() => {
-    const { columnCount = 5, rowCount } = options;
-
     const _columnCount = columnCount;
     const _rowCount = rowCount ?? columnCount;
     const items = new Array(_columnCount * _rowCount).fill(0).map((_, idx) => idx);
 
     return { columnCount: _columnCount, rowCount: _rowCount, items };
-  }, [options]);
+  }, [columnCount, rowCount]);
 }
 
 interface GridCellProps {
   index: number;
   state: AgentState;
-  options: GridOptions;
+  interval: number;
+  transformer?: (index: number, rowCount: number, columnCount: number) => CSSProperties;
   rowCount: number;
-  volumeBands: number[];
   columnCount: number;
+  volumeBands: number[];
   highlightedCoordinate: Coordinate;
-  Component: GridComponentType;
+  children: ReactNode;
 }
 
 const GridCell = memo(function GridCell({
   index,
   state,
-  options,
+  interval,
+  transformer,
   rowCount,
-  volumeBands,
   columnCount,
+  volumeBands,
   highlightedCoordinate,
-  Component,
+  children,
 }: GridCellProps) {
-  const { interval = 100, baseClassName, onClassName, offClassName, transformer } = options;
-
   if (state === 'speaking') {
     const y = Math.floor(index / columnCount);
     const rowMidPoint = Math.floor(rowCount / 2);
     const volumeChunks = 1 / (rowMidPoint + 1);
     const distanceToMid = Math.abs(rowMidPoint - y);
     const threshold = distanceToMid * volumeChunks;
-    const isOn = volumeBands[index % columnCount] >= threshold;
+    const isHighlighted = volumeBands[index % columnCount] >= threshold;
 
-    return <Component className={cn(baseClassName, isOn ? onClassName : offClassName)} />;
+    return cloneSingleChild(children, {
+      'data-lk-index': index,
+      'data-lk-highlighted': isHighlighted,
+    });
   }
 
   let transformerStyle: CSSProperties | undefined;
   if (transformer) {
     transformerStyle = transformer(index, rowCount, columnCount);
   }
 
-  const isOn =
+  const isHighlighted =
     highlightedCoordinate.x === index % columnCount &&
     highlightedCoordinate.y === Math.floor(index / columnCount);
 
-  const transitionDurationInSeconds = interval / (isOn ? 1000 : 100);
-
-  return (
-    <Component
-      style={{
-        transitionProperty: 'all',
-        transitionDuration: `${transitionDurationInSeconds}s`,
-        transitionTimingFunction: 'ease-out',
-        ...transformerStyle,
-      }}
-      className={cn(baseClassName, isOn ? onClassName : offClassName)}
-    />
-  );
+  const transitionDurationInSeconds = interval / (isHighlighted ? 1000 : 100);
+
+  return cloneSingleChild(children, {
+    'data-lk-index': index,
+    'data-lk-highlighted': isHighlighted,
+    style: {
+      transitionProperty: 'all',
+      transitionDuration: `${transitionDurationInSeconds}s`,
+      transitionTimingFunction: 'ease-out',
+      ...transformerStyle,
+    },
+  });
 });
 
-export interface AudioGridVisualizerProps {
+export type AudioGridVisualizerProps = GridOptions & {
   state: AgentState;
-  options: GridOptions;
   audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
-}
+  className?: string;
+  children?: ReactNode;
+} & VariantProps<typeof audioGridVisualizerVariants>;
 
-export function AudioGridVisualizer({ state, options, audioTrack }: AudioGridVisualizerProps) {
-  const { radius, interval = 100, className, GridComponent = 'div' } = options;
-  const { columnCount, rowCount, items } = useGrid(options);
+export function AudioGridVisualizer({
+  size = 'md',
+  state,
+  radius,
+  rowCount: _rowCount = 5,
+  columnCount: _columnCount = 5,
+  transformer,
+  interval = 100,
+  className,
+  children,
+  audioTrack,
+}: AudioGridVisualizerProps) {
+  const { columnCount, rowCount, items } = useGrid(size, _columnCount, _rowCount);
   const highlightedCoordinate = useGridAnimator(state, rowCount, columnCount, interval, radius);
   const volumeBands = useMultibandTrackVolume(audioTrack, {
     bands: columnCount,
@@ -113,21 +152,23 @@ export function AudioGridVisualizer({ state, options, audioTrack }: AudioGridVis
 
   return (
     <div
-      className={cn('grid gap-1', className)}
+      className={cn(audioGridVisualizerVariants({ size }), className)}
       style={{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
     >
       {items.map((idx) => (
         <GridCell
           key={idx}
           index={idx}
           state={state}
-          options={options}
+          interval={interval}
+          transformer={transformer}
           rowCount={rowCount}
           columnCount={columnCount}
           volumeBands={volumeBands}
           highlightedCoordinate={highlightedCoordinate}
-          Component={GridComponent}
-        />
+        >
+          {children ?? <div />}
+        </GridCell>
       ))}
     </div>
   );