Add dataprops and allow a template child for BarVisualizer @lukasIO (#965)

Author: lukasIO

.changeset/big-mugs-rhyme.md

@@ -0,0 +1,7 @@
+---
+"@livekit/components-core": patch
+"@livekit/components-react": patch
+"@livekit/components-styles": patch
+---
+
+Add dataprops and allow a template child for BarVisualizer  @lukasIO

examples/nextjs/turbo.json

@@ -11,7 +11,7 @@
     "build:react": "turbo run build --filter=@livekit/components-react...",
     "build:storybook": "turbo run build --filter=@livekit/component-docs-storybook...",
     "build:styles": "turbo run build --filter=@livekit/components-styles...",
-    "dev:next": "turbo watch dev --filter=@livekit/component-example-next",
+    "dev:next": "turbo run dev --filter=@livekit/component-example-next...",
     "dev:storybook": "turbo run dev --filter=@livekit/component-docs-storybook...",
     "format:check": "prettier --check \"**/src/**/*.{ts,tsx,md}\"",
     "format:write": "prettier --write \"**/src/**/*.{ts,tsx,md}\"",

package.json

@@ -2,5 +2,4 @@
 .DS_Store
 node_modules
 dist
-temp
-.turbo
+temp

packages/core/.gitignore

@@ -25,7 +25,7 @@
   ],
   "scripts": {
     "build": "tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
-    "dev": "tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
+    "dev": "tsup --watch --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
     "lint": "eslint -f unix \"src/**/*.{ts,tsx}\"",
     "test": "vitest --run",
     "test:watch": "vitest",

packages/core/package.json

@@ -4,4 +4,3 @@ node_modules
 .cache
 dist
 temp
-.turbo

packages/react/.gitignore

@@ -34,7 +34,7 @@
   ],
   "scripts": {
     "build": "pnpm gen:svg && tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
-    "dev": "tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
+    "dev": "tsup --watch --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
     "gen:icons": "rimraf -I -g ./src/assets/icons/*Icon.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/icons --typescript ../styles/assets/icons",
     "gen:images": "rimraf -I -g ./src/assets/images/*.tsx && svgr --template ./src/assets/template.js --out-dir ./src/assets/images --typescript --no-svgo ../styles/assets/images",
     "gen:svg": "pnpm gen:images && pnpm gen:icons",

packages/react/package.json

@@ -3,7 +3,7 @@ import { useBarAnimator } from './animators/useBarAnimator';
 import { useMultibandTrackVolume, type VoiceAssistantState } from '../../hooks';
 import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
 import { useMaybeTrackRefContext } from '../../context';
-import { mergeProps } from '../../utils';
+import { cloneSingleChild, mergeProps } from '../../utils';
 
 /**
  * @beta
@@ -25,6 +25,8 @@ export interface BarVisualizerProps extends React.HTMLProps<HTMLDivElement> {
   barCount?: number;
   trackRef?: TrackReferenceOrPlaceholder;
   options?: BarVisualizerOptions;
+  /** The template component to be used in the visualizer. */
+  children?: React.ReactNode;
 }
 
 const sequencerIntervals = new Map<VoiceAssistantState, number>([
@@ -76,7 +78,7 @@ const getSequencerInterval = (
  */
 export const BarVisualizer = /* @__PURE__ */ React.forwardRef<HTMLDivElement, BarVisualizerProps>(
   function BarVisualizer(
-    { state, options, barCount = 15, trackRef, ...props }: BarVisualizerProps,
+    { state, options, barCount = 15, trackRef, children, ...props }: BarVisualizerProps,
     ref,
   ) {
     const elementProps = mergeProps(props, { className: 'lk-audio-bar-visualizer' });
@@ -102,17 +104,28 @@ export const BarVisualizer = /* @__PURE__ */ React.forwardRef<HTMLDivElement, Ba
 
     return (
       <div ref={ref} {...elementProps} data-lk-va-state={state}>
-        {volumeBands.map((volume, idx) => (
-          <span
-            key={idx}
-            className={`lk-audio-bar ${highlightedIndices.includes(idx) && 'lk-highlighted'}`}
-            style={{
-              // TODO transform animations would be more performant, however the border-radius gets distorted when using scale transforms. a 9-slice approach (or 3 in this case) could work
-              // transform: `scale(1, ${Math.min(maxHeight, Math.max(minHeight, volume))}`,
-              height: `${Math.min(maxHeight, Math.max(minHeight, volume * 100 + 5))}%`,
-            }}
-          ></span>
-        ))}
+        {volumeBands.map((volume, idx) =>
+          children ? (
+            cloneSingleChild(children, {
+              'data-lk-highlighted': highlightedIndices.includes(idx),
+              'data-lk-bar-index': idx,
+              class: 'lk-audio-bar',
+              style: { height: `${Math.min(maxHeight, Math.max(minHeight, volume * 100 + 5))}%` },
+            })
+          ) : (
+            <span
+              key={idx}
+              data-lk-highlighted={highlightedIndices.includes(idx)}
+              data-lk-bar-index={idx}
+              className={`lk-audio-bar ${highlightedIndices.includes(idx) && 'lk-highlighted'}`}
+              style={{
+                // TODO transform animations would be more performant, however the border-radius gets distorted when using scale transforms. a 9-slice approach (or 3 in this case) could work
+                // transform: `scale(1, ${Math.min(maxHeight, Math.max(minHeight, volume))}`,
+                height: `${Math.min(maxHeight, Math.max(minHeight, volume * 100 + 5))}%`,
+              }}
+            ></span>
+          ),
+        )}
       </div>
     );
   },

packages/react/src/components/participant/BarVisualizer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { mergeProps as mergePropsReactAria } from './mergeProps';
 import { log } from '@livekit/components-core';
+import clsx from 'clsx';
 
 /** @internal */
 export function isProp<U extends HTMLElement, T extends React.HTMLAttributes<U>>(
@@ -27,6 +28,12 @@ export function cloneSingleChild(
     // Checking isValidElement is the safe way and avoids a typescript
     // error too.
     if (React.isValidElement(child) && React.Children.only(children)) {
+      if (child.props.class) {
+        // make sure we retain classnames of both passed props and child
+        props ??= {};
+        props.class = clsx(child.props.class, props.class);
+        props.style = { ...child.props.style, ...props.style };
+      }
       return React.cloneElement(child, { ...props, key });
     }
     return child;

packages/react/src/utils.ts

@@ -1,4 +1,3 @@
 dist/
 node_modules/
-.temp/
-.turbo
+.temp/

packages/styles/.gitignore

@@ -67,7 +67,7 @@
     "prebuild": "rimraf .temp dist",
     "build": "pnpm compile:sass && pnpm postcss && pnpm generate:types",
     "compile:sass": "sass scss:.temp/general --style compressed",
-    "dev": "pnpm build",
+    "dev": "nodemon -e scss,js -x \"pnpm build\"",
     "generate:types": "pnpm generate:types:unprefixed && pnpm generate:types:prefixed",
     "generate:types:prefixed": "cd dist && typed-scss-modules \"**/*.css\" --exportType default --outputFolder ../dist/types --nameFormat kebab",
     "generate:types:unprefixed": "cd scss && typed-scss-modules \"**/*.scss\" --exportType default --outputFolder ../dist/types_unprefixed --nameFormat kebab --exportTypeName UnprefixedClassNames",

packages/styles/package.json

@@ -49,7 +49,8 @@ deprecated
   }
 
   &[data-va-state='speaking'] > .audio-bar,
-  & > .audio-bar.highlighted {
+  & > .audio-bar.highlighted,
+  & > [data-highlighted='true'] {
     background-color: var(--fg, #fff);
     filter: drop-shadow(var(--drop-shadow, rgba(255, 255, 255, 0.2) 0px 0px 24px));
     transition: none;

packages/styles/scss/components/participant/_audio-visualizer.scss

@@ -3,15 +3,7 @@
   "tasks": {
     "build": {
       "dependsOn": ["^build"],
-      "outputs": [
-        "dist/**",
-        ".next/**",
-        "!.next/cache/**",
-        "storybook-static/**",
-        "lib/**",
-        "src/assets/icons/**",
-        "src/assets/images/**"
-      ]
+      "outputs": ["dist/**", ".next/**", "storybook-static/**", "lib/**"]
     },
     "lint": {
       "outputs": []
@@ -25,9 +17,8 @@
       "outputs": []
     },
     "dev": {
-      "dependsOn": ["^dev"],
       "cache": false,
-      "outputs": ["dist/**", ".next/**", "!.next/cache/**", "storybook-static/**", "lib/**"]
+      "persistent": true
     },
     "deploy": {
       "dependsOn": ["^build"]