allow localtrack passing

Author: lukasIO

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useBarAnimator } from './animators/useBarAnimator';
 import { useMultibandTrackVolume, type AgentState } from '../../hooks';
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core';
+import { isTrackReference, type TrackReferenceOrPlaceholder } from '@livekit/components-core';
 import { useMaybeTrackRefContext } from '../../context';
 import { cloneSingleChild, mergeProps } from '../../utils';
+import { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client';
 
 /**
  * @beta
@@ -23,7 +24,9 @@ export interface BarVisualizerProps extends React.HTMLProps<HTMLDivElement> {
   state?: AgentState;
   /** Number of bars that show up in the visualizer */
   barCount?: number;
+  /** @deprecated use `track` field instead */
   trackRef?: TrackReferenceOrPlaceholder;
+  track?: TrackReferenceOrPlaceholder | LocalAudioTrack | RemoteAudioTrack;
   options?: BarVisualizerOptions;
   /** The template component to be used in the visualizer. */
   children?: React.ReactNode;
@@ -106,17 +109,18 @@ const getSequencerInterval = (
  */
 export const BarVisualizer = /* @__PURE__ */ React.forwardRef<HTMLDivElement, BarVisualizerProps>(
   function BarVisualizer(
-    { state, options, barCount = 15, trackRef, children, ...props }: BarVisualizerProps,
+    { state, options, barCount = 15, trackRef, track, children, ...props }: BarVisualizerProps,
     ref,
   ) {
     const elementProps = mergeProps(props, { className: 'lk-audio-bar-visualizer' });
-    let trackReference = useMaybeTrackRefContext();
+    let targetTrack: TrackReferenceOrPlaceholder | LocalAudioTrack | RemoteAudioTrack | undefined =
+      useMaybeTrackRefContext();
 
-    if (trackRef) {
-      trackReference = trackRef;
+    if (trackRef || track) {
+      targetTrack = trackRef || track;
     }
 
-    const volumeBands = useMultibandTrackVolume(trackReference, {
+    const volumeBands = useMultibandTrackVolume(targetTrack, {
       bands: barCount,
       loPass: 100,
       hiPass: 200,

packages/react/src/prefabs/PreJoin.tsx

@@ -59,17 +59,19 @@ export function usePreviewTracks(
   options: CreateLocalTracksOptions,
   onError?: (err: Error) => void,
 ) {
-  const [tracks, setTracks] = React.useState<LocalTrack[]>();
+  const [tracks, setTracks] = React.useState<Array<LocalAudioTrack | LocalVideoTrack>>();
 
   const trackLock = React.useMemo(() => new Mutex(), []);
 
   React.useEffect(() => {
     let needsCleanup = false;
-    let localTracks: Array<LocalTrack> = [];
+    let localTracks: Array<LocalAudioTrack | LocalVideoTrack> = [];
     trackLock.lock().then(async (unlock) => {
       try {
         if (options.audio || options.video) {
-          localTracks = await createLocalTracks(options);
+          localTracks = (await createLocalTracks(options)) as Array<
+            LocalAudioTrack | LocalVideoTrack
+          >;
 
           if (needsCleanup) {
             localTracks.forEach((tr) => tr.stop());