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

package/dist/src/core/components/CallLayout/SpeakerLayout.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { CallTypes, combineComparators, defaultSortPreset, screenSharing, SfuModels, speakerLayoutSortPreset, } from '@stream-io/video-client';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
+import { SfuModels } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { DefaultParticipantViewUI, ParticipantView, } from '../ParticipantView';
 import { IconButton } from '../../../components';
 import { useHorizontalScrollPosition, useVerticalScrollPosition, } from '../../../hooks';
+import { useSpeakerLayoutSortPreset } from './hooks';
 import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
-import { Audio } from '../Audio';
+import { ParticipantsAudio } from '../Audio';
 const DefaultParticipantViewUIBar = () => (_jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
 const DefaultParticipantViewUISpotlight = () => _jsx(DefaultParticipantViewUI, {});
 export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, }) => {
@@ -22,29 +23,14 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
     const hardLimit = useCalculateHardLimit(buttonsWrapperElement, participantsBarElement, participantsBarLimit);
     const isVertical = participantsBarPosition === 'left' || participantsBarPosition === 'right';
     const isHorizontal = participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
-    const isOneOnOneCall = otherParticipants.length === 1;
     useEffect(() => {
         if (!participantsBarWrapperElement || !call)
             return;
         const cleanup = call.setViewport(participantsBarWrapperElement);
         return () => cleanup();
     }, [participantsBarWrapperElement, call]);
-    useEffect(() => {
-        if (!call)
-            return;
-        // always show the remote participant in the spotlight
-        if (isOneOnOneCall) {
-            call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
-        }
-        else {
-            call.setSortParticipantsBy(speakerLayoutSortPreset);
-        }
-        return () => {
-            // reset the sorting to the default for the call type
-            const callConfig = CallTypes.get(call.type);
-            call.setSortParticipantsBy(callConfig.options.sortParticipantsBy || defaultSortPreset);
-        };
-    }, [call, isOneOnOneCall]);
+    const isOneOnOneCall = otherParticipants.length === 1;
+    useSpeakerLayoutSortPreset(call, isOneOnOneCall);
     let participantsWithAppliedLimit = otherParticipants;
     if (typeof participantsBarLimit !== 'undefined') {
         const hardLimitToApply = isVertical
@@ -57,7 +43,7 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
     }
     if (!call)
         return null;
-    return (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { participant: participant }, participant.sessionId))), _jsxs("div", Object.assign({ className: clsx('str-video__speaker-layout', participantsBarPosition &&
+    return (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: [_jsx(ParticipantsAudio, { participants: remoteParticipants }), _jsxs("div", Object.assign({ className: clsx('str-video__speaker-layout', participantsBarPosition &&
                     `str-video__speaker-layout--variant-${participantsBarPosition}`) }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), participantsWithAppliedLimit.length > 0 && participantsBarPosition && (_jsxs("div", Object.assign({ ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement }, { children: _jsxs("div", Object.assign({ ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar" }, { children: [isSpeakerScreenSharing && (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }), participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }), participant.sessionId)))] })) })), isVertical && (_jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), isHorizontal && (_jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] })))] }))] })));
 };
 const HorizontalScrollButtons = ({ scrollWrapper, }) => {
@@ -81,11 +67,4 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
     return (_jsxs(_Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (_jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (_jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
 };
 const hasScreenShare = (p) => !!(p === null || p === void 0 ? void 0 : p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE));
-const loggedIn = (a, b) => {
-    if (a.isLocalParticipant)
-        return 1;
-    if (b.isLocalParticipant)
-        return -1;
-    return 0;
-};
 //# sourceMappingURL=SpeakerLayout.js.map

package/dist/src/core/components/CallLayout/SpeakerLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,SAAS,EAA0B,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAE7E,OAAO,EACL,wBAAwB,EACxB,eAAe,GAEhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAiB7C,MAAM,2BAA2B,GAAG,GAAG,EAAE,CAAC,CACxC,KAAC,wBAAwB,IAAC,aAAa,EAAC,SAAS,GAAG,CACrD,CAAC;AAEF,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,KAAC,wBAAwB,KAAG,CAAC;AAE7E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,oBAAoB,GAAG,2BAA2B,EAClD,0BAA0B,GAAG,iCAAiC,EAC9D,gBAAgB,EAChB,uBAAuB,GAAG,QAAQ,EAClC,oBAAoB,GACD,EAAE,EAAE;IACvB,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,eAAe,EAAE,qBAAqB,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACvE,MAAM,CAAC,sBAAsB,EAAE,GAAG,iBAAiB,CAAC,GAAG,eAAe,EAAE,CAAC;IACzE,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;IACnD,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GACrE,QAAQ,CAAwB,IAAI,CAAC,CAAC;IACxC,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GACvD,QAAQ,CAAwB,IAAI,CAAC,CAAC;IACxC,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GACrD,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAExC,MAAM,sBAAsB,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,qBAAqB,CACrC,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,CACrB,CAAC;IAEF,MAAM,UAAU,GACd,uBAAuB,KAAK,MAAM,IAAI,uBAAuB,KAAK,OAAO,CAAC;IAC5E,MAAM,YAAY,GAChB,uBAAuB,KAAK,KAAK,IAAI,uBAAuB,KAAK,QAAQ,CAAC;IAE5E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,6BAA6B,IAAI,CAAC,IAAI;YAAE,OAAO;QAEpD,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,6BAA6B,CAAC,CAAC;QAChE,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1C,MAAM,cAAc,GAAG,iBAAiB,CAAC,MAAM,KAAK,CAAC,CAAC;IACtD,0BAA0B,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAEjD,IAAI,4BAA4B,GAAG,iBAAiB,CAAC;IAErD,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE;QAC/C,MAAM,gBAAgB,GAAG,UAAU;YACjC,CAAC,CAAC,SAAS,CAAC,QAAQ;YACpB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC;QAEzB,4BAA4B,GAAG,iBAAiB,CAAC,KAAK,CACpD,CAAC;QACD,6CAA6C;QAC7C,kEAAkE;QAClE,gBAAgB,GAAG,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACpD,CAAC;KACH;IAED,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACL,6BAAK,SAAS,EAAC,oCAAoC,iBACjD,KAAC,iBAAiB,IAAC,YAAY,EAAE,kBAAkB,GAAI,EACvD,6BACE,SAAS,EAAE,IAAI,CACb,2BAA2B,EAC3B,uBAAuB;oBACrB,sCAAsC,uBAAuB,EAAE,CAClE,iBAED,4BAAK,SAAS,EAAC,sCAAsC,gBAClD,sBAAsB,IAAI,CACzB,KAAC,eAAe,IACd,WAAW,EAAE,sBAAsB,EACnC,SAAS,EAAE,IAAI,EACf,SAAS,EACP,sBAAsB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,EAE5D,iBAAiB,EAAE,0BAA0B,EAC7C,gBAAgB,EAAE,gBAAgB,GAClC,CACH,IACG,EACL,4BAA4B,CAAC,MAAM,GAAG,CAAC,IAAI,uBAAuB,IAAI,CACrE,6BACE,GAAG,EAAE,wBAAwB,EAC7B,SAAS,EAAC,6DAA6D,iBAEvE,4BACE,SAAS,EAAC,qDAAqD,EAC/D,GAAG,EAAE,gCAAgC,gBAErC,6BACE,GAAG,EAAE,yBAAyB,EAC9B,SAAS,EAAC,6CAA6C,iBAEtD,sBAAsB,IAAI,CACzB,4BACE,SAAS,EAAC,6CAA6C,gBAGvD,KAAC,eAAe,IACd,WAAW,EAAE,sBAAsB,EACnC,iBAAiB,EAAE,oBAAoB,EACvC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,GACf,KAPG,sBAAsB,CAAC,SAAS,CAQjC,CACP,EACA,4BAA4B,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CACjD,4BACE,SAAS,EAAC,6CAA6C,gBAGvD,KAAC,eAAe,IACd,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,oBAAoB,EACvC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,GACf,KAPG,WAAW,CAAC,SAAS,CAQtB,CACP,CAAC,KACE,IACF,EACL,UAAU,IAAI,CACb,KAAC,qBAAqB,IACpB,aAAa,EAAE,6BAA6B,GAC5C,CACH,EACA,YAAY,IAAI,CACf,KAAC,uBAAuB,IACtB,aAAa,EAAE,6BAA6B,GAC5C,CACH,KACG,CACP,KACG,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,uBAAuB,GAAG,CAAwB,EACtD,aAAa,GACS,EAAE,EAAE;IAC1B,MAAM,cAAc,GAAG,2BAA2B,CAAC,aAAa,CAAC,CAAC;IAElE,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC;IACF,OAAO,CACL,8BACG,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,CAC/C,KAAC,UAAU,IACT,OAAO,EAAE,uBAAuB,EAChC,IAAI,EAAC,YAAY,EACjB,SAAS,EAAC,0DAA0D,GACpE,CACH,EACA,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,CAC7C,KAAC,UAAU,IACT,OAAO,EAAE,qBAAqB,EAC9B,IAAI,EAAC,aAAa,EAClB,SAAS,EAAC,2DAA2D,GACrE,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAwB,EACpD,aAAa,GACS,EAAE,EAAE;IAC1B,MAAM,cAAc,GAAG,yBAAyB,CAAC,aAAa,CAAC,CAAC;IAEhE,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,GAAG,EAAE;QACpC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;IACF,OAAO,CACL,8BACG,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,CAC7C,KAAC,UAAU,IACT,OAAO,EAAE,qBAAqB,EAC9B,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,yDAAyD,GACnE,CACH,EACA,cAAc,IAAI,cAAc,KAAK,QAAQ,IAAI,CAChD,KAAC,UAAU,IACT,OAAO,EAAE,wBAAwB,EACjC,IAAI,EAAC,YAAY,EACjB,SAAS,EAAC,4DAA4D,GACtE,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,CAA0B,EAAE,EAAE,CACpD,CAAC,CAAC,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA,CAAC"}

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

@@ -0,0 +1,3 @@
+import { Call } from '@stream-io/video-client';
+export declare const usePaginatedLayoutSortPreset: (call: Call | undefined) => void;
+export declare const useSpeakerLayoutSortPreset: (call: Call | undefined, isOneOnOneCall: boolean) => void;

package/dist/src/core/components/CallLayout/hooks.js

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { CallTypes, combineComparators, defaultSortPreset, paginatedLayoutSortPreset, screenSharing, speakerLayoutSortPreset, } from '@stream-io/video-client';
+export const usePaginatedLayoutSortPreset = (call) => {
+    useEffect(() => {
+        if (!call)
+            return;
+        call.setSortParticipantsBy(paginatedLayoutSortPreset);
+        return () => {
+            resetSortPreset(call);
+        };
+    }, [call]);
+};
+export const useSpeakerLayoutSortPreset = (call, isOneOnOneCall) => {
+    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) => {
+    // reset the sorting to the default for the call type
+    const callConfig = CallTypes.get(call.type);
+    call.setSortParticipantsBy(callConfig.options.sortParticipantsBy || defaultSortPreset);
+};
+const loggedIn = (a, b) => {
+    if (a.isLocalParticipant)
+        return 1;
+    if (b.isLocalParticipant)
+        return -1;
+    return 0;
+};
+//# sourceMappingURL=hooks.js.map

package/dist/src/core/components/CallLayout/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAEL,SAAS,EACT,kBAAkB,EAElB,iBAAiB,EACjB,yBAAyB,EACzB,aAAa,EACb,uBAAuB,GAExB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,IAAsB,EAAE,EAAE;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,CAAC,qBAAqB,CAAC,yBAAyB,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,IAAsB,EACtB,cAAuB,EACvB,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,sDAAsD;QACtD,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,qBAAqB,CAAC,kBAAkB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;SACzE;aAAM;YACL,IAAI,CAAC,qBAAqB,CAAC,uBAAuB,CAAC,CAAC;SACrD;QACD,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAU,EAAE,EAAE;IACrC,qDAAqD;IACrD,MAAM,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,IAAI,CAAC,qBAAqB,CACxB,UAAU,CAAC,OAAO,CAAC,kBAAkB,IAAI,iBAAiB,CAC3D,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAuC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAC5D,IAAI,CAAC,CAAC,kBAAkB;QAAE,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,CAAC,kBAAkB;QAAE,OAAO,CAAC,CAAC,CAAC;IACpC,OAAO,CAAC,CAAC;AACX,CAAC,CAAC"}

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

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

package/dist/src/core/components/CallLayout/index.js

@@ -1,3 +1,4 @@
+export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
 //# sourceMappingURL=index.js.map

package/dist/src/core/components/CallLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC"}

package/dist/src/translations/en.json

@@ -11,6 +11,7 @@
     "Speakers": "Speakers",
     "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.",

package/dist/src/translations/index.d.ts

@@ -12,6 +12,7 @@ export declare const translations: {
         Speakers: string;
         Video: string;
         "You are muted. Unmute to speak.": string;
+        Live: string;
         "You can now speak.": string;
         "Awaiting for an approval to speak.": string;
         "You can no longer speak.": string;

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.29";
+export declare const version = "0.3.30";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '0.3.29';
+export const version = '0.3.30';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.3.29",
+  "version": "0.3.30",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -33,8 +33,8 @@
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@stream-io/i18n": "^0.1.2",
-    "@stream-io/video-client": "^0.3.24",
-    "@stream-io/video-react-bindings": "^0.2.25",
+    "@stream-io/video-client": "^0.3.25",
+    "@stream-io/video-react-bindings": "^0.2.26",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "rxjs": "~7.8.1"
@@ -44,7 +44,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@stream-io/video-styling": "^0.1.9",
+    "@stream-io/video-styling": "^0.1.10",
     "@types/prop-types": "^15.7.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -211,11 +211,12 @@ export const ParticipantActionsContextMenu = ({
   };
 
   const toggleFullscreenMode = () => {
-    if (!fullscreenModeOn)
+    if (!fullscreenModeOn) {
       return participantViewElement
         ?.requestFullscreen()
         .then(() => setFullscreenModeOn(true))
         .catch(console.error);
+    }
 
     document
       .exitFullscreen()

package/src/core/components/Audio/ParticipantsAudio.tsx

@@ -0,0 +1,35 @@
+import { ComponentProps } from 'react';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { Audio } from './Audio';
+
+export type ParticipantsAudioProps = {
+  /**
+   * The participants to play audio for.
+   */
+  participants: StreamVideoParticipant[];
+
+  /**
+   * Props to pass to the underlying `Audio` components.
+   */
+  audioProps?: ComponentProps<typeof Audio>;
+};
+
+export const ParticipantsAudio = (props: ParticipantsAudioProps) => {
+  const { participants, audioProps } = props;
+  return (
+    <>
+      {participants.map(
+        (participant) =>
+          !participant.isLocalParticipant &&
+          participant.publishedTracks.includes(SfuModels.TrackType.AUDIO) &&
+          participant.audioStream && (
+            <Audio
+              {...audioProps}
+              participant={participant}
+              key={participant.sessionId}
+            />
+          ),
+      )}
+    </>
+  );
+};

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

@@ -1 +1,2 @@
 export * from './Audio';
+export * from './ParticipantsAudio';

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -0,0 +1,231 @@
+import clsx from 'clsx';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  useCall,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { ParticipantView, useParticipantViewContext } from '../ParticipantView';
+import { ParticipantsAudio } from '../Audio';
+import { usePaginatedLayoutSortPreset } from './hooks';
+
+/**
+ * The props for the {@link LivestreamLayout} component.
+ */
+export type LivestreamLayoutProps = {
+  /**
+   * Whether the livestream is muted. Defaults to `false`.
+   */
+  muted?: boolean;
+
+  /**
+   * Whether to show the participant count. Defaults to `true`.
+   */
+  showParticipantCount?: boolean;
+
+  /**
+   * Whether to enable fullscreen mode. Defaults to `true`.
+   */
+  enableFullScreen?: boolean;
+
+  /**
+   * Whether to show the duration of the call. Defaults to `true`.
+   */
+  showDuration?: boolean;
+
+  /**
+   * Whether to show the live badge. Defaults to `true`.
+   */
+  showLiveBadge?: boolean;
+
+  /**
+   * Whether to show the speaker name. Defaults to `false`.
+   */
+  showSpeakerName?: boolean;
+
+  /**
+   * The props to pass to the floating participant element.
+   */
+  floatingParticipantProps?: LivestreamLayoutProps & {
+    /**
+     * The position of the floating participant element. Defaults to `top-right`.
+     */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  };
+};
+
+export const LivestreamLayout = (props: LivestreamLayoutProps) => {
+  const { useParticipants, useRemoteParticipants, useHasOngoingScreenShare } =
+    useCallStateHooks();
+  const call = useCall();
+  const [currentSpeaker, ...otherParticipants] = useParticipants();
+  const remoteParticipants = useRemoteParticipants();
+  const hasOngoingScreenShare = useHasOngoingScreenShare();
+  const presenter = hasOngoingScreenShare
+    ? hasScreenShare(currentSpeaker) && currentSpeaker
+    : otherParticipants.find(hasScreenShare);
+
+  usePaginatedLayoutSortPreset(call);
+
+  const Overlay = (
+    <ParticipantOverlay
+      showParticipantCount={props.showParticipantCount}
+      showDuration={props.showDuration}
+      showLiveBadge={props.showLiveBadge}
+      showSpeakerName={props.showSpeakerName}
+    />
+  );
+
+  const { floatingParticipantProps } = props;
+  const FloatingParticipantOverlay = hasOngoingScreenShare && (
+    <ParticipantOverlay
+      // these elements aren't needed for the video feed
+      showParticipantCount={
+        floatingParticipantProps?.showParticipantCount ?? false
+      }
+      showDuration={floatingParticipantProps?.showDuration ?? false}
+      showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}
+      showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}
+    />
+  );
+
+  return (
+    <div className="str-video__livestream-layout__wrapper">
+      <ParticipantsAudio participants={remoteParticipants} />
+      {hasOngoingScreenShare && presenter && (
+        <ParticipantView
+          className="str-video__livestream-layout__screen-share"
+          participant={presenter}
+          ParticipantViewUI={Overlay}
+          trackType="screenShareTrack"
+          muteAudio // audio is rendered by ParticipantsAudio
+        />
+      )}
+      <ParticipantView
+        className={clsx(
+          hasOngoingScreenShare &&
+            'str-video__livestream-layout__floating-participant',
+          (hasOngoingScreenShare &&
+            floatingParticipantProps?.position &&
+            `str-video__livestream-layout__floating-participant--${floatingParticipantProps.position}`) ??
+            'str-video__livestream-layout__floating-participant--top-right',
+        )}
+        participant={currentSpeaker}
+        ParticipantViewUI={FloatingParticipantOverlay || Overlay}
+        muteAudio // audio is rendered by ParticipantsAudio
+      />
+    </div>
+  );
+};
+
+const hasScreenShare = (p?: StreamVideoParticipant) =>
+  !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+const ParticipantOverlay = (props: {
+  enableFullScreen?: boolean;
+  showParticipantCount?: boolean;
+  showDuration?: boolean;
+  showLiveBadge?: boolean;
+  showSpeakerName?: boolean;
+}) => {
+  const {
+    enableFullScreen = true,
+    showParticipantCount = true,
+    showDuration = true,
+    showLiveBadge = true,
+    showSpeakerName = false,
+  } = props;
+  const { participant } = useParticipantViewContext();
+  const { useParticipantCount } = useCallStateHooks();
+  const participantCount = useParticipantCount();
+  const duration = useUpdateCallDuration();
+  const toggleFullScreen = useToggleFullScreen();
+  const { t } = useI18n();
+  return (
+    <div className="str-video__livestream-layout__overlay">
+      <div className="str-video__livestream-layout__overlay__bar">
+        {showLiveBadge && (
+          <span className="str-video__livestream-layout__live-badge">
+            {t('Live')}
+          </span>
+        )}
+        {showParticipantCount && (
+          <span className="str-video__livestream-layout__viewers-count">
+            {participantCount}
+          </span>
+        )}
+        {showSpeakerName && (
+          <span
+            className="str-video__livestream-layout__speaker-name"
+            title={participant.name || participant.userId || ''}
+          >
+            {participant.name || participant.userId || ''}
+          </span>
+        )}
+        {showDuration && (
+          <span className="str-video__livestream-layout__duration">
+            {formatDuration(duration)}
+          </span>
+        )}
+        {enableFullScreen && (
+          <span
+            className="str-video__livestream-layout__go-fullscreen"
+            onClick={toggleFullScreen}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const useUpdateCallDuration = () => {
+  const { useIsCallLive, useCallSession } = useCallStateHooks();
+  const isCallLive = useIsCallLive();
+  const session = useCallSession();
+  const [duration, setDuration] = useState(() => {
+    if (!session || !session.live_started_at) return 0;
+    const liveStartTime = new Date(session.live_started_at);
+    const now = new Date();
+    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
+  });
+
+  useEffect(() => {
+    if (!isCallLive) return;
+    const interval = setInterval(() => {
+      setDuration((d) => d + 1);
+    }, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isCallLive]);
+
+  return duration;
+};
+
+const useToggleFullScreen = () => {
+  const { participantViewElement } = useParticipantViewContext();
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  return useCallback(() => {
+    if (isFullscreen) {
+      document.exitFullscreen().then(() => {
+        setIsFullscreen(false);
+      });
+    } else {
+      participantViewElement?.requestFullscreen().then(() => {
+        setIsFullscreen(true);
+      });
+    }
+  }, [isFullscreen, participantViewElement]);
+};
+
+const formatDuration = (durationInMs: number) => {
+  const days = Math.floor(durationInMs / 86400);
+  const hours = Math.floor(durationInMs / 3600);
+  const minutes = Math.floor((durationInMs % 3600) / 60);
+  const seconds = durationInMs % 60;
+
+  return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${
+    minutes < 10 ? '0' : ''
+  }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+};

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -11,9 +11,10 @@ import {
   ParticipantView,
   ParticipantViewProps,
 } from '../ParticipantView';
-import { Audio } from '../Audio';
+import { ParticipantsAudio } from '../Audio';
 import { IconButton } from '../../../components';
 import { chunk } from '../../../utilities';
+import { usePaginatedLayoutSortPreset } from './hooks';
 
 const GROUP_SIZE = 16;
 
@@ -85,6 +86,8 @@ export const PaginatedGridLayout = ({
   // used to render audio elements
   const remoteParticipants = useRemoteParticipants();
 
+  usePaginatedLayoutSortPreset(call);
+
   // only used to render video elements
   const participantGroups = useMemo(
     () =>
@@ -110,9 +113,7 @@ export const PaginatedGridLayout = ({
 
   return (
     <div className="str-video__paginated-grid-layout__wrapper">
-      {remoteParticipants.map((participant) => (
-        <Audio key={participant.sessionId} participant={participant} />
-      ))}
+      <ParticipantsAudio participants={remoteParticipants} />
       <div className="str-video__paginated-grid-layout">
         {pageArrowsVisible && pageCount > 1 && (
           <IconButton

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -1,16 +1,7 @@
 import { useEffect, useState } from 'react';
-import {
-  CallTypes,
-  combineComparators,
-  Comparator,
-  defaultSortPreset,
-  screenSharing,
-  SfuModels,
-  speakerLayoutSortPreset,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
 import {
   DefaultParticipantViewUI,
@@ -22,14 +13,15 @@ import {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
 } from '../../../hooks';
+import { useSpeakerLayoutSortPreset } from './hooks';
 import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
-import { Audio } from '../Audio';
+import { ParticipantsAudio } from '../Audio';
 
 export type SpeakerLayoutProps = {
   ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
   ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
   /**
-   * The position of the particpants who are not in focus.
+   * The position of the participants who are not in focus.
    * Providing `null` will hide the bar.
    */
   participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right' | null;
@@ -75,7 +67,6 @@ export const SpeakerLayout = ({
     participantsBarPosition === 'left' || participantsBarPosition === 'right';
   const isHorizontal =
     participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
-  const isOneOnOneCall = otherParticipants.length === 1;
 
   useEffect(() => {
     if (!participantsBarWrapperElement || !call) return;
@@ -84,23 +75,8 @@ export const SpeakerLayout = ({
     return () => cleanup();
   }, [participantsBarWrapperElement, call]);
 
-  useEffect(() => {
-    if (!call) return;
-    // always show the remote participant in the spotlight
-    if (isOneOnOneCall) {
-      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
-    } else {
-      call.setSortParticipantsBy(speakerLayoutSortPreset);
-    }
-
-    return () => {
-      // reset the sorting to the default for the call type
-      const callConfig = CallTypes.get(call.type);
-      call.setSortParticipantsBy(
-        callConfig.options.sortParticipantsBy || defaultSortPreset,
-      );
-    };
-  }, [call, isOneOnOneCall]);
+  const isOneOnOneCall = otherParticipants.length === 1;
+  useSpeakerLayoutSortPreset(call, isOneOnOneCall);
 
   let participantsWithAppliedLimit = otherParticipants;
 
@@ -121,9 +97,7 @@ export const SpeakerLayout = ({
 
   return (
     <div className="str-video__speaker-layout__wrapper">
-      {remoteParticipants.map((participant) => (
-        <Audio key={participant.sessionId} participant={participant} />
-      ))}
+      <ParticipantsAudio participants={remoteParticipants} />
       <div
         className={clsx(
           'str-video__speaker-layout',
@@ -272,9 +246,3 @@ const VerticalScrollButtons = <T extends HTMLElement>({
 
 const hasScreenShare = (p?: StreamVideoParticipant) =>
   !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
-
-const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
-  if (a.isLocalParticipant) return 1;
-  if (b.isLocalParticipant) return -1;
-  return 0;
-};