use JS SDK's isLocal check (#1050)

Co-authored-by: lukasIO <[email protected]>

Author: davidzhao

.changeset/wise-ghosts-talk.md

@@ -0,0 +1,6 @@
+---
+"@livekit/components-core": patch
+"@livekit/components-react": patch
+---
+
+use JS SDK's isLocal check

packages/core/src/utils.ts

@@ -1,16 +1,15 @@
 import type { Participant, TrackPublication } from 'livekit-client';
-import { LocalParticipant, RemoteParticipant } from 'livekit-client';
 
-import type { PinState } from './types';
 import type { TrackReference } from './track-reference';
 import { isEqualTrackRef } from './track-reference';
+import type { PinState } from './types';
 
 export function isLocal(p: Participant) {
-  return p instanceof LocalParticipant;
+  return p.isLocal;
 }
 
 export function isRemote(p: Participant) {
-  return p instanceof RemoteParticipant;
+  return !p.isLocal;
 }
 
 export const attachIfSubscribed = (

packages/react/src/components/RoomAudioRenderer.tsx

@@ -1,4 +1,4 @@
-import { getTrackReferenceId, isLocal } from '@livekit/components-core';
+import { getTrackReferenceId } from '@livekit/components-core';
 import { Track } from 'livekit-client';
 import * as React from 'react';
 import { useTracks } from '../hooks';
@@ -36,7 +36,7 @@ export function RoomAudioRenderer({ volume, muted }: RoomAudioRendererProps) {
       updateOnlyOn: [],
       onlySubscribed: true,
     },
-  ).filter((ref) => !isLocal(ref.participant) && ref.publication.kind === Track.Kind.Audio);
+  ).filter((ref) => !ref.participant.isLocal && ref.publication.kind === Track.Kind.Audio);
 
   return (
     <div style={{ display: 'none' }}>

packages/react/src/hooks/useMediaTrackBySourceOrName.ts

@@ -1,6 +1,10 @@
 import type { TrackIdentifier } from '@livekit/components-core';
-import { isTrackReference } from '@livekit/components-core';
-import { setupMediaTrack, log, isLocal, getTrackByIdentifier } from '@livekit/components-core';
+import {
+  getTrackByIdentifier,
+  isTrackReference,
+  log,
+  setupMediaTrack,
+} from '@livekit/components-core';
 import * as React from 'react';
 import { mergeProps } from '../utils';
 
@@ -52,7 +56,7 @@ export function useMediaTrackBySourceOrName(
       }
       if (
         options.element?.current &&
-        !(isLocal(observerOptions.participant) && track?.kind === 'audio')
+        !(observerOptions.participant.isLocal && track?.kind === 'audio')
       ) {
         track.attach(options.element.current);
       }