@livekit/components-core - npm Package Compare versions

Comparing version 0.6.15 to 0.7.0

dist/components/chat.d.ts

@@ -10,2 +10,6 @@ import type { Participant, Room } from 'livekit-client';
 }
+/** @public */
+export type MessageEncoder = (message: ChatMessage) => Uint8Array;
+/** @public */
+export type MessageDecoder = (message: Uint8Array) => ReceivedChatMessage;
 export declare function setupChat(room: Room, options?: {
@@ -12,0 +16,0 @@ messageEncoder?: (message: ChatMessage) => Uint8Array;

dist/components/connectionQualityIndicator.d.ts

 import type { Participant } from 'livekit-client';
 export declare function setupConnectionQualityIndicator(participant: Participant): {
-    className: "lk-rotate" | "lk-audio-conference" | "lk-audio-conference-stage" | "lk-audio-container" | "lk-button" | "lk-button-group" | "lk-button-group-container" | "lk-camera-off-note" | "lk-chat" | "lk-chat-entry" | "lk-chat-form" | "lk-chat-form-input" | "lk-chat-messages" | "lk-control-bar" | "lk-focus-layout-wrapper" | "lk-form-control" | "lk-grid-layout-wrapper" | "lk-join-button" | "lk-list" | "lk-message-body" | "lk-meta-data" | "lk-participant-name" | "lk-prejoin" | "lk-timestamp" | "lk-username-container" | "lk-video-conference" | "lk-video-conference-inner" | "lk-video-container" | "lk-audio-visualizer" | "lk-button-group-menu" | "lk-button-menu" | "lk-carousel" | "lk-chat-toggle" | "lk-connection-quality" | "lk-device-menu" | "lk-device-menu-heading" | "lk-disconnect-button" | "lk-focus-layout" | "lk-focus-toggle-button" | "lk-focused-participant" | "lk-grid-layout" | "lk-media-device-select" | "lk-pagination-control" | "lk-pagination-count" | "lk-pagination-indicator" | "lk-participant-media-audio" | "lk-participant-media-video" | "lk-participant-metadata" | "lk-participant-metadata-item" | "lk-participant-placeholder" | "lk-participant-tile" | "lk-pip-track" | "lk-room-container" | "lk-spinner" | "lk-start-audio-button" | "lk-toast" | "lk-track-muted-indicator-camera" | "lk-track-muted-indicator-microphone";
+    className: "lk-connection-quality";
     connectionQualityObserver: import("rxjs").Observable<import("livekit-client").ConnectionQuality>;
 };
 //# sourceMappingURL=connectionQualityIndicator.d.ts.map

dist/components/trackMutedIndicator.d.ts

@@ -1,4 +0,3 @@
-import type { Participant } from 'livekit-client';
-import { Track } from 'livekit-client';
-export declare function setupTrackMutedIndicator(participant: Participant, source: Track.Source): {
+import type { TrackReferenceOrPlaceholder } from '../track-reference';
+export declare function setupTrackMutedIndicator(trackRef: TrackReferenceOrPlaceholder): {
     className: string;
@@ -5,0 +4,0 @@ mediaMutedObserver: import("rxjs").Observable<boolean>;

dist/observables/participant.d.ts

 import type { Participant, RemoteParticipant, Room, TrackPublication } from 'livekit-client';
-import { ParticipantEvent, RoomEvent, Track } from 'livekit-client';
+import { ParticipantEvent, RoomEvent } from 'livekit-client';
 import { Observable } from 'rxjs';
 import type { ParticipantEventCallbacks } from 'livekit-client/dist/src/room/participant/Participant';
 import type { TrackIdentifier } from '../types';
+import { TrackReferenceOrPlaceholder } from '../track-reference';
 export declare function observeParticipantEvents<T extends Participant>(participant: T, ...events: ParticipantEvent[]): Observable<T>;
@@ -30,3 +31,3 @@ export interface ParticipantMedia<T extends Participant = Participant> {
 export declare function participantEventSelector<T extends ParticipantEvent>(participant: Participant, event: T): Observable<Parameters<ParticipantEventCallbacks[Extract<T, keyof ParticipantEventCallbacks>]>>;
-export declare function mutedObserver(participant: Participant, source: Track.Source): Observable<boolean>;
+export declare function mutedObserver(trackRef: TrackReferenceOrPlaceholder): Observable<boolean>;
 export declare function createIsSpeakingObserver(participant: Participant): Observable<boolean>;
@@ -33,0 +34,0 @@ type ConnectedParticipantsObserverOptions = {

dist/styles-interface/class-prefixer.d.ts

@@ -1,7 +0,4 @@
-import type { ClassNames as ComponentClasses } from '@livekit/components-styles/dist/types/general/index.css';
-import type { ClassNames as PrefabClasses } from '@livekit/components-styles/dist/types/general/prefabs/index.css';
 import type { UnprefixedClassNames as ComponentNoPrefixClasses } from '@livekit/components-styles/dist/types_unprefixed/index.scss';
 import type { UnprefixedClassNames as PrefabNoPrefixClasses } from '@livekit/components-styles/dist/types_unprefixed/prefabs/index.scss';
 type UnprefixedClassNames = ComponentNoPrefixClasses | PrefabNoPrefixClasses;
-type Classes = PrefabClasses | ComponentClasses;
 /**
@@ -12,5 +9,4 @@ * This function is a type safe way to add a prefix to a HTML class attribute.
  */
-export declare function prefixClass(unprefixedClassName: UnprefixedClassNames): Classes;
-export declare function kebabize(str: string): string;
+export declare function prefixClass<T extends UnprefixedClassNames>(unprefixedClassName: T): `lk-${T}`;
 export {};
 //# sourceMappingURL=class-prefixer.d.ts.map

dist/track-reference/track-reference.utils.d.ts

 import type { Track } from 'livekit-client';
 import type { PinState } from '../types';
 import type { TrackReferenceOrPlaceholder } from './track-reference.types';
-/** Returns a id to identify the `TrackReference` based on participant and source. */
+/**
+ * Returns a id to identify the `TrackReference` or `TrackReferencePlaceholder` based on
+ * participant, track source and trackSid.
+ * @remarks
+ * The id pattern is: `${participantIdentity}_${trackSource}_${trackSid}` for `TrackReference`
+ * and `${participantIdentity}_${trackSource}_placeholder` for `TrackReferencePlaceholder`.
+ */
 export declare function getTrackReferenceId(trackReference: TrackReferenceOrPlaceholder | number): string;
+export type TrackReferenceId = ReturnType<typeof getTrackReferenceId>;
 /** Returns the Source of the TrackReference. */
@@ -13,2 +20,8 @@ export declare function getTrackReferenceSource(trackReference: TrackReferenceOrPlaceholder): Track.Source;
 export declare function isTrackReferencePinned(trackReference: TrackReferenceOrPlaceholder, pinState: PinState | undefined): boolean;
+/**
+ * Check if the current `currentTrackRef` is the placeholder for next `nextTrackRef`.
+ * Based on the participant identity and the source.
+ * @internal
+ */
+export declare function isPlaceholderReplacement(currentTrackRef: TrackReferenceOrPlaceholder, nextTrackRef: TrackReferenceOrPlaceholder): boolean;
 //# sourceMappingURL=track-reference.utils.d.ts.map

dist/utils.d.ts

 import type { Participant, Track, TrackPublication } from 'livekit-client';
 import type { PinState } from './types';
+import type { TrackReference } from './track-reference';
 export declare function isLocal(p: Participant): boolean;
@@ -8,5 +9,10 @@ export declare function isRemote(p: Participant): boolean;
  * Check if the participant track source is pinned.
+ * @deprecated Use {@link isParticipantTrackReferencePinned} instead.
  */
 export declare function isParticipantSourcePinned(participant: Participant, source: Track.Source, pinState: PinState | undefined): boolean;
 /**
+ * Check if the participant track reference is pinned.
+ */
+export declare function isParticipantTrackReferencePinned(trackRef: TrackReference, pinState: PinState | undefined): boolean;
+/**
  * Calculates the scrollbar width by creating two HTML elements
@@ -13,0 +19,0 @@ * and messaging the difference.

package.json

 {
   "name": "@livekit/components-core",
-  "version": "0.6.15",
+  "version": "0.7.0",
   "license": "Apache-2.0",
@@ -55,3 +55,3 @@ "author": "LiveKit",
     "tsup": "^7.0.0",
-    "typescript": "5.1.6",
+    "typescript": "5.2.2",
     "vitest": "^0.34.0"
@@ -58,0 +58,0 @@ },

src/components/chat.ts

@@ -16,2 +16,7 @@ /* eslint-disable camelcase */
 
+/** @public */
+export type MessageEncoder = (message: ChatMessage) => Uint8Array;
+/** @public */
+export type MessageDecoder = (message: Uint8Array) => ReceivedChatMessage;
+
 const encoder = new TextEncoder();
@@ -18,0 +23,0 @@ const decoder = new TextDecoder();

src/components/trackMutedIndicator.ts

 import type { Styles } from '@livekit/components-styles/dist/types_unprefixed/index.scss';
-import type { Participant } from 'livekit-client';
 import { Track } from 'livekit-client';
 import { mutedObserver } from '../observables/participant';
 import { prefixClass } from '../styles-interface';
+import type { TrackReferenceOrPlaceholder } from '../track-reference';
 
-export function setupTrackMutedIndicator(participant: Participant, source: Track.Source) {
+export function setupTrackMutedIndicator(trackRef: TrackReferenceOrPlaceholder) {
   let classForSource: keyof Styles = 'track-muted-indicator-camera';
-  switch (source) {
+  switch (trackRef.source) {
     case Track.Source.Camera:
@@ -21,5 +21,5 @@ classForSource = 'track-muted-indicator-camera';
   const className: string = prefixClass(classForSource);
-  const mediaMutedObserver = mutedObserver(participant, source);
+  const mediaMutedObserver = mutedObserver(trackRef);
 
   return { className, mediaMutedObserver };
 }

src/observables/participant.ts

@@ -10,2 +10,3 @@ import type { Participant, RemoteParticipant, Room, TrackPublication } from 'livekit-client';
 import { getTrackByIdentifier } from '../components/mediaTrack';
+import { TrackReferenceOrPlaceholder } from '../track-reference';
 
@@ -145,5 +146,5 @@ export function observeParticipantEvents<T extends Participant>(
 
-export function mutedObserver(participant: Participant, source: Track.Source) {
+export function mutedObserver(trackRef: TrackReferenceOrPlaceholder) {
   return observeParticipantEvents(
-    participant,
+    trackRef.participant,
     ParticipantEvent.TrackMuted,
@@ -157,6 +158,10 @@ ParticipantEvent.TrackUnmuted,
     map((participant) => {
-      const pub = participant.getTrack(source);
+      const pub = trackRef.publication ?? participant.getTrack(trackRef.source);
       return pub?.isMuted ?? true;
     }),
-    startWith(participant.getTrack(source)?.isMuted ?? true),
+    startWith(
+      trackRef.publication?.isMuted ??
+        trackRef.participant.getTrack(trackRef.source)?.isMuted ??
+        true,
+    ),
   );
@@ -163,0 +168,0 @@ }

src/observables/track.ts

@@ -104,2 +104,3 @@ import type {
       RoomEvent.ParticipantConnected,
+      RoomEvent.ParticipantDisconnected,
       RoomEvent.ConnectionStateChanged,
@@ -106,0 +107,0 @@ RoomEvent.LocalTrackPublished,

src/sorting/tile-array-update.test.ts

@@ -341,2 +341,3 @@ import { Track } from 'livekit-client';
 
+  // FIXME: mute for implementation unmute before production.
   test.each([
@@ -343,0 +344,0 @@ {

src/sorting/tile-array-update.ts

 import { differenceBy, chunk, zip } from '../helper/array-helper';
 import { log } from '../logger';
 import type { TrackReferenceOrPlaceholder } from '../track-reference';
-import { getTrackReferenceId } from '../track-reference';
+import {
+  getTrackReferenceId,
+  isPlaceholderReplacement,
+  isTrackReference,
+  isTrackReferencePlaceholder,
+} from '../track-reference';
 import { flatTrackReferenceArray } from '../track-reference/test-utils';
@@ -83,8 +88,8 @@
 
-  if (currentList.length < nextList.length) {
+  if (updatedList.length < nextList.length) {
     // Items got added: Find newly added items and add them to the end of the list.
-    const addedItems = differenceBy(nextList, currentList, getTrackReferenceId);
+    const addedItems = differenceBy(nextList, updatedList, getTrackReferenceId);
     updatedList = [...updatedList, ...addedItems];
   }
-  const currentPages = divideIntoPages(currentList, maxItemsOnPage);
+  const currentPages = divideIntoPages(updatedList, maxItemsOnPage);
   const nextPages = divideIntoPages(nextList, maxItemsOnPage);
@@ -135,3 +140,3 @@
     // Items got removed: Find items that got completely removed from the list.
-    const missingItems = differenceBy(currentList, nextList, getTrackReferenceId);
+    const missingItems = differenceBy(updatedList, nextList, getTrackReferenceId);
     updatedList = updatedList.filter(
@@ -146,3 +151,5 @@ (item) => !missingItems.map(getTrackReferenceId).includes(getTrackReferenceId(item)),
 /**
- * Update the first list with the items from the second list whenever the ids are the same.
+ * Update the current list with the items from the next list whenever the item ids are the same
+ * or the current item is a placeholder and we find a track reference in the next list
+ * to replace the placeholder with.
  * @remarks
@@ -154,10 +161,13 @@ * This is needed because `TrackReference`s can change their internal state while keeping the same id.
     const updateForCurrentItem = nextList.find(
-      (newItem_) => getTrackReferenceId(currentItem) === getTrackReferenceId(newItem_),
+      (newItem_) =>
+        // If the IDs match or ..
+        getTrackReferenceId(currentItem) === getTrackReferenceId(newItem_) ||
+        // ... if the current item is a placeholder and the new item is the track reference can replace it.
+        (typeof currentItem !== 'number' &&
+          isTrackReferencePlaceholder(currentItem) &&
+          isTrackReference(newItem_) &&
+          isPlaceholderReplacement(currentItem, newItem_)),
     );
-    if (updateForCurrentItem) {
-      return updateForCurrentItem;
-    } else {
-      return currentItem;
-    }
+    return updateForCurrentItem ?? currentItem;
   });
 }

src/styles-interface/class-prefixer.ts

@@ -1,3 +0,1 @@
-import type { ClassNames as ComponentClasses } from '@livekit/components-styles/dist/types/general/index.css';
-import type { ClassNames as PrefabClasses } from '@livekit/components-styles/dist/types/general/prefabs/index.css';
 import type { UnprefixedClassNames as ComponentNoPrefixClasses } from '@livekit/components-styles/dist/types_unprefixed/index.scss';
@@ -8,3 +6,2 @@ import type { UnprefixedClassNames as PrefabNoPrefixClasses } from '@livekit/components-styles/dist/types_unprefixed/prefabs/index.scss';
 type UnprefixedClassNames = ComponentNoPrefixClasses | PrefabNoPrefixClasses;
-type Classes = PrefabClasses | ComponentClasses;
 
@@ -16,9 +13,4 @@ /**
  */
-export function prefixClass(unprefixedClassName: UnprefixedClassNames): Classes {
-  // @ts-ignore
-  return `${cssPrefix}-${unprefixedClassName}`;
+export function prefixClass<T extends UnprefixedClassNames>(unprefixedClassName: T) {
+  return `${cssPrefix}-${unprefixedClassName}` as const;
 }
-
-export function kebabize(str: string) {
-  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
-}

src/track-reference/test-utils.test.ts

 import { describe, test, expect, expectTypeOf } from 'vitest';
-import { mockTrackReferenceSubscribed } from './test-utils';
-import type { Participant, TrackPublication } from 'livekit-client';
+import { mockTrackReferencePlaceholder, mockTrackReferenceSubscribed } from './test-utils';
+import { Participant, TrackPublication } from 'livekit-client';
 import { Track } from 'livekit-client';
+import { getTrackReferenceId } from './track-reference.utils';
 
@@ -26,1 +27,34 @@ describe('Test mocking functions ', () => {
 });
+
+describe('Test mockTrackReferencePlaceholder() produces valid id with getTrackReferenceId()', () => {
+  test.each([
+    {
+      participantId: 'participantA',
+      trackSource: Track.Source.Camera,
+      expected: 'participantA_camera_placeholder',
+    },
+  ])('mockTrackReferencePlaceholder id', ({ participantId, trackSource, expected }) => {
+    const mock = mockTrackReferencePlaceholder(participantId, trackSource);
+    const trackRefId = getTrackReferenceId(mock);
+    expect(trackRefId.startsWith(participantId));
+    expect(trackRefId.endsWith('_placeholder'));
+    expect(trackRefId).toBe(expected);
+  });
+});
+
+describe('Test mockTrackReferenceSubscribed() produces valid id with getTrackReferenceId()', () => {
+  test.each([
+    {
+      participantId: 'participantA',
+      trackSource: Track.Source.Camera,
+      expected: 'participantA_camera_publicationId(participantA)',
+    },
+  ])('mockTrackReferencePlaceholder id', ({ participantId, trackSource, expected }) => {
+    const mock = mockTrackReferenceSubscribed(participantId, trackSource, {
+      mockPublication: true,
+    });
+    const trackRefId = getTrackReferenceId(mock);
+    expect(trackRefId.startsWith(participantId));
+    expect(trackRefId).toBe(expected);
+  });
+});

src/track-reference/test-utils.ts

@@ -54,3 +54,3 @@ /**
     publication: options.mockPublication
-      ? (mockTrackPublication(id, kind, source) as TrackPublication)
+      ? (mockTrackPublication(`publicationId(${id})`, kind, source) as TrackPublication)
       : publication,
@@ -57,0 +57,0 @@ source,

src/track-reference/track-reference.utils.ts

@@ -6,13 +6,23 @@ import type { Track } from 'livekit-client';
 
-/** Returns a id to identify the `TrackReference` based on participant and source. */
-export function getTrackReferenceId(trackReference: TrackReferenceOrPlaceholder | number): string {
+/**
+ * Returns a id to identify the `TrackReference` or `TrackReferencePlaceholder` based on
+ * participant, track source and trackSid.
+ * @remarks
+ * The id pattern is: `${participantIdentity}_${trackSource}_${trackSid}` for `TrackReference`
+ * and `${participantIdentity}_${trackSource}_placeholder` for `TrackReferencePlaceholder`.
+ */
+export function getTrackReferenceId(trackReference: TrackReferenceOrPlaceholder | number) {
   if (typeof trackReference === 'string' || typeof trackReference === 'number') {
     return `${trackReference}`;
+  } else if (isTrackReferencePlaceholder(trackReference)) {
+    return `${trackReference.participant.identity}_${trackReference.source}_placeholder`;
   } else if (isTrackReference(trackReference)) {
-    return `${trackReference.participant.identity}_${trackReference.publication.source}`;
+    return `${trackReference.participant.identity}_${trackReference.publication.source}_${trackReference.publication.trackSid}`;
   } else {
-    return `${trackReference.participant.identity}_${trackReference.source}`;
+    throw new Error(`Can't generate a id for the given track reference: ${trackReference}`);
   }
 }
 
+export type TrackReferenceId = ReturnType<typeof getTrackReferenceId>;
+
 /** Returns the Source of the TrackReference. */
@@ -31,8 +41,10 @@ export function getTrackReferenceSource(trackReference: TrackReferenceOrPlaceholder): Track.Source {
 ): boolean {
+  if (a === undefined || b === undefined) {
+    return false;
+  }
   if (isTrackReference(a) && isTrackReference(b)) {
     return a.publication.trackSid === b.publication.trackSid;
-  } else if (isTrackReferencePlaceholder(a) && isTrackReferencePlaceholder(b)) {
-    return a.participant.identity === b.participant.identity && a.source === b.source;
+  } else {
+    return getTrackReferenceId(a) === getTrackReferenceId(b);
   }
-  return false;
 }
@@ -68,1 +80,21 @@
 }
+
+/**
+ * Check if the current `currentTrackRef` is the placeholder for next `nextTrackRef`.
+ * Based on the participant identity and the source.
+ * @internal
+ */
+export function isPlaceholderReplacement(
+  currentTrackRef: TrackReferenceOrPlaceholder,
+  nextTrackRef: TrackReferenceOrPlaceholder,
+) {
+  // if (typeof nextTrackRef === 'number' || typeof currentTrackRef === 'number') {
+  //   return false;
+  // }
+  return (
+    isTrackReferencePlaceholder(currentTrackRef) &&
+    isTrackReference(nextTrackRef) &&
+    nextTrackRef.participant.identity === currentTrackRef.participant.identity &&
+    nextTrackRef.source === currentTrackRef.source
+  );
+}

src/utils.ts

@@ -5,2 +5,4 @@ import type { Participant, Track, TrackPublication } from 'livekit-client';
 import type { PinState } from './types';
+import type { TrackReference } from './track-reference';
+import { isEqualTrackRef } from './track-reference';
 
@@ -32,2 +34,3 @@ export function isLocal(p: Participant) {
  * Check if the participant track source is pinned.
+ * @deprecated Use {@link isParticipantTrackReferencePinned} instead.
  */
@@ -50,2 +53,16 @@ export function isParticipantSourcePinned(
 /**
+ * Check if the participant track reference is pinned.
+ */
+export function isParticipantTrackReferencePinned(
+  trackRef: TrackReference,
+  pinState: PinState | undefined,
+): boolean {
+  if (pinState === undefined) {
+    return false;
+  }
+
+  return pinState.some((pinnedTrackRef) => isEqualTrackRef(pinnedTrackRef, trackRef));
+}
+
+/**
  * Calculates the scrollbar width by creating two HTML elements
@@ -52,0 +69,0 @@ * and messaging the difference.

No alert changes

Improved metrics

Total package byte prevSize

515120

increased by2.77%

Number of package files

165

increased by1.85%

Lines of code

7046

increased by2.94%

No dependency changes