@stream-io/video-react-sdk 0.3.29 → 0.3.30

package/src/core/components/CallLayout/hooks.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import {
+  Call,
+  CallTypes,
+  combineComparators,
+  Comparator,
+  defaultSortPreset,
+  paginatedLayoutSortPreset,
+  screenSharing,
+  speakerLayoutSortPreset,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+
+export const usePaginatedLayoutSortPreset = (call: Call | undefined) => {
+  useEffect(() => {
+    if (!call) return;
+    call.setSortParticipantsBy(paginatedLayoutSortPreset);
+    return () => {
+      resetSortPreset(call);
+    };
+  }, [call]);
+};
+
+export const useSpeakerLayoutSortPreset = (
+  call: Call | undefined,
+  isOneOnOneCall: boolean,
+) => {
+  useEffect(() => {
+    if (!call) return;
+    // always show the remote participant in the spotlight
+    if (isOneOnOneCall) {
+      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
+    } else {
+      call.setSortParticipantsBy(speakerLayoutSortPreset);
+    }
+    return () => {
+      resetSortPreset(call);
+    };
+  }, [call, isOneOnOneCall]);
+};
+
+const resetSortPreset = (call: Call) => {
+  // reset the sorting to the default for the call type
+  const callConfig = CallTypes.get(call.type);
+  call.setSortParticipantsBy(
+    callConfig.options.sortParticipantsBy || defaultSortPreset,
+  );
+};
+
+const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
+  if (a.isLocalParticipant) return 1;
+  if (b.isLocalParticipant) return -1;
+  return 0;
+};

package/src/core/components/CallLayout/index.ts

@@ -1,2 +1,3 @@
+export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';

package/src/translations/en.json

@@ -12,6 +12,8 @@
   "Video": "Video",
   "You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
 
+  "Live": "Live",
+
   "You can now speak.": "You can now speak.",
   "Awaiting for an approval to speak.": "Awaiting for an approval to speak.",
   "You can no longer speak.": "You can no longer speak.",