Skip to content

Commit

Permalink
Add dataprops and allow a template child for BarVisualizer @lukasIO (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
lukasIO authored Sep 12, 2024
1 parent c2ae183 commit a77a52e
Show file tree
Hide file tree
Showing 13 changed files with 50 additions and 42 deletions.
7 changes: 7 additions & 0 deletions .changeset/big-mugs-rhyme.md
Original file line number Diff line number Diff line change
@@ -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
8 changes: 0 additions & 8 deletions examples/nextjs/turbo.json

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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}\"",
Expand Down
3 changes: 1 addition & 2 deletions packages/core/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,4 @@
.DS_Store
node_modules
dist
temp
.turbo
temp
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion packages/react/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,3 @@ node_modules
.cache
dist
temp
.turbo
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
39 changes: 26 additions & 13 deletions packages/react/src/components/participant/BarVisualizer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>([
Expand Down Expand Up @@ -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' });
Expand All @@ -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>
);
},
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/utils.ts
Original file line number Diff line number Diff line change
@@ -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>>(
Expand All @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions packages/styles/.gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
dist/
node_modules/
.temp/
.turbo
.temp/
2 changes: 1 addition & 1 deletion packages/styles/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 2 additions & 11 deletions turbo.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": []
Expand All @@ -25,9 +17,8 @@
"outputs": []
},
"dev": {
"dependsOn": ["^dev"],
"cache": false,
"outputs": ["dist/**", ".next/**", "!.next/cache/**", "storybook-static/**", "lib/**"]
"persistent": true
},
"deploy": {
"dependsOn": ["^build"]
Expand Down

0 comments on commit a77a52e

Please sign in to comment.