Allow localtrack passing on BarVisualizer (#1222)

Author: lukasIO

.changeset/chilled-zebras-jump.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+allow localtrack passing on bar visualizer

package.json

@@ -17,7 +17,7 @@
     "format:write": "prettier --write \"**/src/**/*.{ts,tsx,md}\"",
     "gen:docs": "turbo run gen:docs",
     "gen:docs:watch": "nodemon --watch \"tooling/api-documenter/src/**/*\" --watch \"packages/react/src/**/*\" --ignore \"packages/react/src/assets/**/*\" -e js,jsx,ts,tsx -x \"pnpm gen:docs\"",
-    "lint": "turbo run lint",
+    "lint": "turbo run lint -- --quiet",
     "preinstall": "npx only-allow pnpm",
     "ci:publish": "turbo run build --filter=./packages/* && pnpm gen:docs && changeset publish",
     "start:next": "turbo run start --filter=@livekit/component-example-next...",

packages/core/etc/components-core.api.md

@@ -11,6 +11,7 @@ import { ConnectionQuality } from 'livekit-client';
 import { ConnectionState } from 'livekit-client';
 import { DataPacket_Kind } from 'livekit-client';
 import { DataPublishOptions } from 'livekit-client';
+import { Encryption_Type } from 'livekit-client';
 import { LocalAudioTrack } from 'livekit-client';
 import { LocalParticipant } from 'livekit-client';
 import { LocalVideoTrack } from 'livekit-client';
@@ -114,7 +115,7 @@ export function createChatObserver(room: Room): Observable<[message: ChatMessage
 export function createConnectionQualityObserver(participant: Participant): Observable<ConnectionQuality>;
 
 // @public (undocumented)
-export function createDataObserver(room: Room): Observable<[payload: Uint8Array<ArrayBufferLike>, participant?: RemoteParticipant | undefined, kind?: DataPacket_Kind | undefined, topic?: string | undefined]>;
+export function createDataObserver(room: Room): Observable<[payload: Uint8Array<ArrayBufferLike>, participant?: RemoteParticipant | undefined, kind?: DataPacket_Kind | undefined, topic?: string | undefined, encryptionType?: Encryption_Type | undefined]>;
 
 // @public (undocumented)
 export const createDefaultGrammar: () => {
@@ -320,6 +321,20 @@ export function observeRoomEvents(room: Room, ...events: RoomEvent[]): Observabl
 // @public (undocumented)
 export function observeTrackEvents(track: TrackPublication, ...events: TrackEvent_2[]): Observable<TrackPublication>;
 
+// @public
+export enum ParticipantAgentAttributes {
+    // (undocumented)
+    AgentState = "lk.agent.state",
+    // (undocumented)
+    PublishOnBehalf = "lk.publish_on_behalf",
+    // (undocumented)
+    TranscribedTrackId = "lk.transcribed_track_id",
+    // (undocumented)
+    TranscriptionFinal = "lk.transcription_final",
+    // (undocumented)
+    TranscriptionSegmentId = "lk.segment_id"
+}
+
 // @public (undocumented)
 export function participantAttributesObserver(participant: Participant): Observable<{
     changed: Readonly<Record<string, string>>;
@@ -410,26 +425,39 @@ export const PIN_DEFAULT_STATE: PinState;
 // @public (undocumented)
 export type PinState = TrackReferenceOrPlaceholder[];
 
+// Warning: (ae-forgotten-export) The symbol "ReceivedMessageWithType" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
-export interface ReceivedChatMessage extends ChatMessage {
-    // (undocumented)
-    attributes?: Record<string, string>;
-    // (undocumented)
+export type ReceivedAgentTranscriptionMessage = ReceivedMessageWithType<'agentTranscript', {
+    message: string;
+}>;
+
+// @public (undocumented)
+export type ReceivedChatMessage = ReceivedMessageWithType<'chatMessage', ChatMessage & {
     from?: Participant;
-}
+    attributes?: Record<string, string>;
+}>;
 
 // @public (undocumented)
 export interface ReceivedDataMessage<T extends string | undefined = string> extends BaseDataMessage<T> {
     // (undocumented)
     from?: Participant;
 }
 
+// @public (undocumented)
+export type ReceivedMessage = ReceivedUserTranscriptionMessage | ReceivedAgentTranscriptionMessage | ReceivedChatMessage;
+
 // @public (undocumented)
 export type ReceivedTranscriptionSegment = TranscriptionSegment & {
     receivedAtMediaTimestamp: number;
     receivedAt: number;
 };
 
+// @public (undocumented)
+export type ReceivedUserTranscriptionMessage = ReceivedMessageWithType<'userTranscript', {
+    message: string;
+}>;
+
 // @public (undocumented)
 export function recordingStatusObservable(room: Room): Observable<boolean>;
 
@@ -479,6 +507,9 @@ export function selectGridLayout(layoutDefinitions: GridLayoutDefinition[], part
 // @public
 export function sendMessage(localParticipant: LocalParticipant, payload: Uint8Array, options?: DataPublishOptions): Promise<void>;
 
+// @public (undocumented)
+export type SentMessage = ChatMessage;
+
 // @public (undocumented)
 export function setDifference<T>(setA: Set<T>, setB: Set<T>): Set<T>;
 

packages/react/etc/components-react.api.md

@@ -23,7 +23,6 @@ import { isTrackReference } from '@livekit/components-core';
 import { KrispNoiseFilterProcessor } from '@livekit/krisp-noise-filter';
 import { LocalAudioTrack } from 'livekit-client';
 import { LocalParticipant } from 'livekit-client';
-import { LocalTrack } from 'livekit-client';
 import { LocalTrackPublication } from 'livekit-client';
 import { LocalUserChoices } from '@livekit/components-core';
 import { LocalVideoTrack } from 'livekit-client';
@@ -165,6 +164,8 @@ export interface BarVisualizerProps extends React_2.HTMLProps<HTMLDivElement> {
     options?: BarVisualizerOptions;
     state?: AgentState;
     // (undocumented)
+    track?: TrackReferenceOrPlaceholder | LocalAudioTrack | RemoteAudioTrack;
+    // @deprecated (undocumented)
     trackRef?: TrackReferenceOrPlaceholder;
 }
 
@@ -1147,7 +1148,7 @@ export function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(en
 };
 
 // @public (undocumented)
-export function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): LocalTrack<Track.Kind>[] | undefined;
+export function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): (LocalAudioTrack | LocalVideoTrack)[] | undefined;
 
 // @public
 export function useRemoteParticipant(identifier: ParticipantIdentifier, options?: UseRemoteParticipantOptions): RemoteParticipant | undefined;

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 { 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

@@ -1,7 +1,6 @@
 import type {
   CreateLocalTracksOptions,
   LocalAudioTrack,
-  LocalTrack,
   LocalVideoTrack,
   TrackProcessor,
 } from 'livekit-client';
@@ -59,17 +58,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());