@stream-io/video-client 0.3.24 → 0.3.26

package/src/sorting/__tests__/presets.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import * as TestData from './participant-data';
+import { VisibilityState } from '../../types';
+import { paginatedLayoutSortPreset } from '../presets';
+import { TrackType } from '../../gen/video/sfu/models/models';
+
+describe('presets', () => {
+  it('paginatedLayoutSortPreset', () => {
+    const ps = TestData.participants().map((p) => ({
+      ...p,
+      viewportVisibilityState: {
+        videoTrack: VisibilityState.UNKNOWN,
+        screenShareTrack: VisibilityState.UNKNOWN,
+      },
+    }));
+
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
+      'F',
+      'B',
+      'E',
+      'D',
+      'A',
+      'C',
+    ]);
+
+    // server-pin C
+    ps.at(-1)!.pin = {
+      isLocalPin: false,
+      pinnedAt: Date.now(),
+    };
+
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
+      'C',
+      'F',
+      'B',
+      'E',
+      'D',
+      'A',
+    ]);
+
+    ps.at(-3)!.publishedTracks = [TrackType.AUDIO]; // E
+    ps.at(-2)!.isDominantSpeaker = false; // D
+    ps.at(-1)!.isDominantSpeaker = true; // A
+
+    expect(ps.sort(paginatedLayoutSortPreset).map((p) => p.name)).toEqual([
+      'C',
+      'F',
+      'B',
+      'A',
+      'E',
+      'D',
+    ]);
+  });
+});

package/src/sorting/presets.ts

@@ -20,6 +20,19 @@ const ifInvisibleBy = conditional(
     b.viewportVisibilityState?.videoTrack === VisibilityState.INVISIBLE,
 );
 
+/**
+ * A comparator that applies the decorated comparator when a participant is
+ * either invisible or its visibility state isn't known.
+ * For visible participants, it ensures stable sorting.
+ */
+const ifInvisibleOrUnknownBy = conditional(
+  (a: StreamVideoParticipant, b: StreamVideoParticipant) =>
+    a.viewportVisibilityState?.videoTrack === VisibilityState.INVISIBLE ||
+    a.viewportVisibilityState?.videoTrack === VisibilityState.UNKNOWN ||
+    b.viewportVisibilityState?.videoTrack === VisibilityState.INVISIBLE ||
+    b.viewportVisibilityState?.videoTrack === VisibilityState.UNKNOWN,
+);
+
 /**
  * The default sorting preset.
  */
@@ -48,6 +61,21 @@ export const speakerLayoutSortPreset = combineComparators(
   // ifInvisibleBy(name),
 );
 
+/**
+ * The sorting preset for layouts that don't render all participants but
+ * instead, render them in pages.
+ */
+export const paginatedLayoutSortPreset = combineComparators(
+  pinned,
+  screenSharing,
+  dominantSpeaker,
+  ifInvisibleOrUnknownBy(speaking),
+  ifInvisibleOrUnknownBy(reactionType('raised-hand')),
+  ifInvisibleOrUnknownBy(publishingVideo),
+  ifInvisibleOrUnknownBy(publishingAudio),
+  // ifInvisibleOrUnknownBy(name),
+);
+
 /**
  * The sorting preset for livestreams and audio rooms.
  */

package/src/store/CallState.ts

@@ -12,7 +12,7 @@ import {
 import { CallStatsReport } from '../stats/types';
 import {
   BlockedUserEvent,
-  CallBroadcastingStartedEvent,
+  CallHLSBroadcastingStartedEvent,
   CallIngressResponse,
   CallMemberAddedEvent,
   CallMemberRemovedEvent,
@@ -27,6 +27,7 @@ import {
   EgressResponse,
   MemberResponse,
   OwnCapability,
+  ThumbnailResponse,
   UnblockedUserEvent,
   UpdatedCallPermissionsEvent,
   UserResponse,
@@ -125,6 +126,9 @@ export class CallState {
   private endedBySubject = new BehaviorSubject<UserResponse | undefined>(
     undefined,
   );
+  private thumbnailsSubject = new BehaviorSubject<
+    ThumbnailResponse | undefined
+  >(undefined);
   private membersSubject = new BehaviorSubject<MemberResponse[]>([]);
   private ownCapabilitiesSubject = new BehaviorSubject<OwnCapability[]>([]);
   private callingStateSubject = new BehaviorSubject<CallingState>(
@@ -298,6 +302,11 @@ export class CallState {
    */
   endedBy$: Observable<UserResponse | undefined>;
 
+  /**
+   * Will provide the thumbnails of this call.
+   */
+  thumbnails$: Observable<ThumbnailResponse | undefined>;
+
   readonly logger: Logger;
 
   /**
@@ -381,6 +390,7 @@ export class CallState {
     this.settings$ = this.settingsSubject.asObservable();
     this.transcribing$ = this.transcribingSubject.asObservable();
     this.endedBy$ = this.endedBySubject.asObservable();
+    this.thumbnails$ = this.thumbnailsSubject.asObservable();
 
     this.eventHandlers = {
       // these events are not updating the call state:
@@ -396,7 +406,10 @@ export class CallState {
       // events that update call state:
       'call.accepted': (e) => this.updateFromCallResponse(e.call),
       'call.created': (e) => this.updateFromCallResponse(e.call),
-      'call.notification': (e) => this.updateFromCallResponse(e.call),
+      'call.notification': (e) => {
+        this.updateFromCallResponse(e.call);
+        this.setMembers(e.members);
+      },
       'call.rejected': (e) => this.updateFromCallResponse(e.call),
       'call.ring': (e) => this.updateFromCallResponse(e.call),
       'call.live_started': (e) => this.updateFromCallResponse(e.call),
@@ -411,8 +424,8 @@ export class CallState {
         this.setCurrentValue(this.recordingSubject, true),
       'call.recording_stopped': () =>
         this.setCurrentValue(this.recordingSubject, false),
-      'call.broadcasting_started': this.updateFromBroadcastStarted,
-      'call.broadcasting_stopped': this.updateFromBroadcastStopped,
+      'call.hls_broadcasting_started': this.updateFromHLSBroadcastStarted,
+      'call.hls_broadcasting_stopped': this.updateFromHLSBroadcastStopped,
       'call.session_participant_joined':
         this.updateFromSessionParticipantJoined,
       'call.session_participant_left': this.updateFromSessionParticipantLeft,
@@ -740,6 +753,13 @@ export class CallState {
     return this.getCurrentValue(this.endedBy$);
   }
 
+  /**
+   * Will provide the thumbnails of this call, if enabled in the call settings.
+   */
+  get thumbnails() {
+    return this.getCurrentValue(this.thumbnails$);
+  }
+
   /**
    * Will try to find the participant with the given sessionId in the current call.
    *
@@ -943,6 +963,7 @@ export class CallState {
     this.setCurrentValue(this.sessionSubject, call.session);
     this.setCurrentValue(this.settingsSubject, call.settings);
     this.setCurrentValue(this.transcribingSubject, call.transcribing);
+    this.setCurrentValue(this.thumbnailsSubject, call.thumbnails);
   };
 
   private updateFromMemberRemoved = (event: CallMemberRemovedEvent) => {
@@ -958,15 +979,15 @@ export class CallState {
     ]);
   };
 
-  private updateFromBroadcastStopped = () => {
+  private updateFromHLSBroadcastStopped = () => {
     this.setCurrentValue(this.egressSubject, (egress) => ({
       ...egress!,
       broadcasting: false,
     }));
   };
 
-  private updateFromBroadcastStarted = (
-    event: CallBroadcastingStartedEvent,
+  private updateFromHLSBroadcastStarted = (
+    event: CallHLSBroadcastingStartedEvent,
   ) => {
     this.setCurrentValue(this.egressSubject, (egress) => ({
       ...egress!,

package/src/store/__tests__/CallState.test.ts

@@ -24,6 +24,8 @@ import {
 import * as TestData from '../../sorting/__tests__/participant-data';
 
 describe('CallState', () => {
+  // TODO OL add API verification test -> observable$ should have a getter!
+
   describe('sorting', () => {
     it('should emit sorted participants', () => {
       const state = new CallState();
@@ -471,7 +473,7 @@ describe('CallState', () => {
         expect(state.recording).toBe(false);
       });
 
-      it('handles call.broadcasting_started events', () => {
+      it('handles call.hls_broadcasting_started events', () => {
         const state = new CallState();
         state.updateFromCallResponse({
           // @ts-ignore
@@ -484,7 +486,7 @@ describe('CallState', () => {
         });
         // @ts-ignore
         state.updateFromEvent({
-          type: 'call.broadcasting_started',
+          type: 'call.hls_broadcasting_started',
           hls_playlist_url: 'https://example.com/playlist.m3u8',
         });
         expect(state.egress?.broadcasting).toBe(true);
@@ -493,13 +495,13 @@ describe('CallState', () => {
         );
       });
 
-      it('handles call.broadcasting_stopped events', () => {
+      it('handles call.hls_broadcasting_stopped events', () => {
         const state = new CallState();
         // @ts-ignore
         state.updateFromCallResponse({});
         // @ts-ignore
         state.updateFromEvent({
-          type: 'call.broadcasting_stopped',
+          type: 'call.hls_broadcasting_stopped',
         });
         expect(state.egress?.broadcasting).toBe(false);
       });