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

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

@@ -1,48 +1,50 @@
 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 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 clsx from 'clsx';
+import { useSpeakerLayoutSortPreset } from './hooks';
+import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
+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', }) => {
+export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, }) => {
     const call = useCall();
-    const { useParticipants } = useCallStateHooks();
+    const { useParticipants, useRemoteParticipants } = useCallStateHooks();
     const [participantInSpotlight, ...otherParticipants] = useParticipants();
-    const [scrollWrapper, setScrollWrapper] = useState(null);
-    const isOneOnOneCall = otherParticipants.length === 1;
+    const remoteParticipants = useRemoteParticipants();
+    const [participantsBarWrapperElement, setParticipantsBarWrapperElement] = useState(null);
+    const [participantsBarElement, setParticipantsBarElement] = useState(null);
+    const [buttonsWrapperElement, setButtonsWrapperElement] = useState(null);
+    const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+    const hardLimit = useCalculateHardLimit(buttonsWrapperElement, participantsBarElement, participantsBarLimit);
+    const isVertical = participantsBarPosition === 'left' || participantsBarPosition === 'right';
+    const isHorizontal = participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
     useEffect(() => {
-        if (!scrollWrapper || !call)
+        if (!participantsBarWrapperElement || !call)
             return;
-        const cleanup = call.setViewport(scrollWrapper);
+        const cleanup = call.setViewport(participantsBarWrapperElement);
         return () => cleanup();
-    }, [scrollWrapper, 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]);
+    }, [participantsBarWrapperElement, call]);
+    const isOneOnOneCall = otherParticipants.length === 1;
+    useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+    let participantsWithAppliedLimit = otherParticipants;
+    if (typeof participantsBarLimit !== 'undefined') {
+        const hardLimitToApply = isVertical
+            ? hardLimit.vertical
+            : hardLimit.horizontal;
+        participantsWithAppliedLimit = otherParticipants.slice(0, 
+        // subtract 1 if speaker is sharing screen as
+        // that one is rendered independently from otherParticipants array
+        hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0));
+    }
     if (!call)
         return null;
-    const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
-    return (_jsx("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: _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: isSpeakerScreenSharing, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && participantsBarPosition && (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-wrapper", ref: setScrollWrapper }, { children: _jsxs("div", Object.assign({ 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 }) }), participantInSpotlight.sessionId)), otherParticipants.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), (participantsBarPosition === 'left' ||
-                            participantsBarPosition === 'right') && (_jsx(VerticalScrollButtons, { scrollWrapper: scrollWrapper })), (participantsBarPosition === 'top' ||
-                            participantsBarPosition === 'bottom') && (_jsx(HorizontalScrollButtons, { scrollWrapper: scrollWrapper }))] })))] })) })));
+    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, }) => {
     const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
@@ -65,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":"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"}

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/core/hooks/useCalculateHardLimit.d.ts

@@ -0,0 +1,4 @@
+export declare const useCalculateHardLimit: (wrapperElement: HTMLDivElement | null, hostElement: HTMLDivElement | null, limit?: 'dynamic' | number) => {
+    vertical: number;
+    horizontal: number;
+};

package/dist/src/core/hooks/useCalculateHardLimit.js

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+export const useCalculateHardLimit = (
+/**
+ * Element that stretches to 100% of the whole layout component
+ */
+wrapperElement, 
+/**
+ * Element that directly hosts individual `ParticipantView` (or wrapper) elements
+ */
+hostElement, limit) => {
+    const [calculatedLimit, setCalculatedLimit] = useState({
+        vertical: typeof limit === 'number' ? limit : 1,
+        horizontal: typeof limit === 'number' ? limit : 1,
+    });
+    useEffect(() => {
+        if (!hostElement ||
+            !wrapperElement ||
+            typeof limit === 'number' ||
+            typeof limit === 'undefined')
+            return;
+        let childWidth = null;
+        let childHeight = null;
+        const resizeObserver = new ResizeObserver((entries, observer) => {
+            // this part should ideally run as little times as possible
+            // get child measurements and disconnect
+            // does not consider dynamically sized children
+            // this hook is for SpeakerLayout use only, where children in the bar are fixed size
+            if (entries.length > 1) {
+                const child = hostElement.firstChild;
+                if (child) {
+                    childHeight = child.clientHeight;
+                    childWidth = child.clientWidth;
+                    observer.unobserve(hostElement);
+                }
+            }
+            // keep the state at { vertical: 1, horizontal: 1 }
+            // until we get the proper child measurements
+            if (childHeight === null || childWidth === null)
+                return;
+            const vertical = Math.floor(wrapperElement.clientHeight / childHeight);
+            const horizontal = Math.floor(wrapperElement.clientWidth / childWidth);
+            setCalculatedLimit((pv) => {
+                if (pv.vertical !== vertical || pv.horizontal !== horizontal)
+                    return { vertical, horizontal };
+                return pv;
+            });
+        });
+        resizeObserver.observe(wrapperElement);
+        resizeObserver.observe(hostElement);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [hostElement, limit, wrapperElement]);
+    return calculatedLimit;
+};
+//# sourceMappingURL=useCalculateHardLimit.js.map

package/dist/src/core/hooks/useCalculateHardLimit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalculateHardLimit.js","sourceRoot":"","sources":["../../../../src/core/hooks/useCalculateHardLimit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG;AACnC;;GAEG;AACH,cAAqC;AACrC;;GAEG;AACH,WAAkC,EAClC,KAA0B,EAC1B,EAAE;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAGnD;QACD,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC/C,UAAU,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAClD,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IACE,CAAC,WAAW;YACZ,CAAC,cAAc;YACf,OAAO,KAAK,KAAK,QAAQ;YACzB,OAAO,KAAK,KAAK,WAAW;YAE5B,OAAO;QAET,IAAI,UAAU,GAAkB,IAAI,CAAC;QACrC,IAAI,WAAW,GAAkB,IAAI,CAAC;QAEtC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC9D,2DAA2D;YAC3D,wCAAwC;YACxC,+CAA+C;YAC/C,oFAAoF;YACpF,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gBACtB,MAAM,KAAK,GAAG,WAAW,CAAC,UAAgC,CAAC;gBAE3D,IAAI,KAAK,EAAE;oBACT,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC;oBACjC,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC;oBAC/B,QAAQ,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;iBACjC;aACF;YAED,mDAAmD;YACnD,6CAA6C;YAC7C,IAAI,WAAW,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI;gBAAE,OAAO;YAExD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;YACvE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;YAEvE,kBAAkB,CAAC,CAAC,EAAE,EAAE,EAAE;gBACxB,IAAI,EAAE,CAAC,QAAQ,KAAK,QAAQ,IAAI,EAAE,CAAC,UAAU,KAAK,UAAU;oBAC1D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;gBAClC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QACvC,cAAc,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IAEzC,OAAO,eAAe,CAAC;AACzB,CAAC,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.28";
+export declare const version = "0.3.30";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '0.3.28';
+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.28",
+  "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}`;
+};