refactor bar visualizer

Author: thomasyuill-livekit

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

@@ -1,41 +1,28 @@
-import { useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import { type LocalAudioTrack, type 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 { useBarAnimator } from './hooks/useBarAnimator';
 
-export const audioBarVisualizerVariants = cva(['relative flex items-center justify-center'], {
-  variants: {
-    size: {
-      icon: 'h-[24px] gap-[2px]',
-      sm: 'h-[56px] gap-[4px]',
-      md: 'h-[112px] gap-[8px]',
-      lg: 'h-[224px] gap-[16px]',
-      xl: 'h-[448px] gap-[32px]',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const audioBarVisualizerBarVariants = cva(
+export const audioBarVisualizerVariants = cva(
   [
-    'rounded-full transition-colors duration-250 ease-linear bg-(--audio-visualizer-idle) data-[lk-highlighted=true]:bg-(--audio-visualizer-active)',
+    'relative flex items-center justify-center',
+    '[&_>_*]:rounded-full [&_>_*]:transition-colors [&_>_*]:duration-250 [&_>_*]:ease-linear',
+    '[&_>_*]:bg-(--audio-visualizer-idle) [&_>_*]:data-[lk-highlighted=true]:bg-(--audio-visualizer-active)',
   ],
   {
     variants: {
       size: {
-        icon: 'w-[4px] min-h-[4px]',
-        sm: 'w-[8px] min-h-[8px]',
-        md: 'w-[16px] min-h-[16px]',
-        lg: 'w-[32px] min-h-[32px]',
-        xl: 'w-[64px] min-h-[64px]',
+        icon: ['h-[24px] gap-[2px]', '[&_>_*]:w-[4px] [&_>_*]:min-h-[4px]'],
+        sm: ['h-[56px] gap-[4px]', '[&_>_*]:w-[8px] [&_>_*]:min-h-[8px]'],
+        md: ['h-[112px] gap-[8px]', '[&_>_*]:w-[16px] [&_>_*]:min-h-[16px]'],
+        lg: ['h-[224px] gap-[16px]', '[&_>_*]:w-[32px] [&_>_*]:min-h-[32px]'],
+        xl: ['h-[448px] gap-[32px]', '[&_>_*]:w-[64px] [&_>_*]:min-h-[64px]'],
       },
     },
     defaultVariants: {
@@ -49,7 +36,7 @@ interface AudioBarVisualizerProps {
   barCount?: number;
   audioTrack?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder;
   className?: string;
-  barClassName?: string;
+  children?: ReactNode | ReactNode[];
 }
 
 export function AudioBarVisualizer({
@@ -58,7 +45,7 @@ export function AudioBarVisualizer({
   barCount,
   audioTrack,
   className,
-  barClassName,
+  children,
 }: AudioBarVisualizerProps & VariantProps<typeof audioBarVisualizerVariants>) {
   const _barCount = useMemo(() => {
     if (barCount) {
@@ -95,19 +82,27 @@ export function AudioBarVisualizer({
   }, [state, _barCount]);
 
   const highlightedIndices = useBarAnimator(state, _barCount, sequencerInterval);
-
   const bands = audioTrack ? volumeBands : new Array(_barCount).fill(0);
+
   return (
     <div className={cn(audioBarVisualizerVariants({ size }), className)}>
-      {bands.map((band, idx) => (
-        <div
-          key={idx}
-          data-lk-index={idx}
-          data-lk-highlighted={highlightedIndices.includes(idx)}
-          className={cn(audioBarVisualizerBarVariants({ size }), barClassName)}
-          style={{ height: `${band * 100}%` }}
-        />
-      ))}
+      {bands.map((band, idx) =>
+        children ? (
+          cloneSingleChild(children, {
+            key: idx,
+            'data-lk-index': idx,
+            'data-lk-highlighted': highlightedIndices.includes(idx),
+            style: { height: `${band * 100}%` },
+          })
+        ) : (
+          <div
+            key={idx}
+            data-lk-index={idx}
+            data-lk-highlighted={highlightedIndices.includes(idx)}
+            style={{ height: `${band * 100}%` }}
+          />
+        )
+      )}
     </div>
   );
 }

lib/utils.ts

@@ -1,4 +1,11 @@
-import { cache } from 'react';
+import {
+  type CSSProperties,
+  Children,
+  type ReactNode,
+  cache,
+  cloneElement,
+  isValidElement,
+} from 'react';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { APP_CONFIG_DEFAULTS } from '@/app-config';
@@ -86,3 +93,27 @@ export function getStyles(appConfig: AppConfig) {
     .filter(Boolean)
     .join('\n');
 }
+
+export function cloneSingleChild(
+  children: ReactNode | ReactNode[],
+  props?: Record<string, unknown>,
+  key?: unknown
+) {
+  return Children.map(children, (child) => {
+    // Checking isValidElement is the safe way and avoids a typescript error too.
+    if (isValidElement(child) && Children.only(children)) {
+      const childProps = child.props as Record<string, unknown>;
+      if (childProps.className) {
+        // make sure we retain classnames of both passed props and child
+        props ??= {};
+        props.className = cn(childProps.className as string, props.className as string);
+        props.style = {
+          ...(childProps.style as CSSProperties),
+          ...(props.style as CSSProperties),
+        };
+      }
+      return cloneElement(child, { ...props, key: key ? String(key) : undefined });
+    }
+    return child;
+  });
+}