@stream-io/video-react-sdk 0.0.1-alpha.100

package/dist/src/components/Tooltip/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useEnterLeaveHandlers';
+//# sourceMappingURL=index.js.map

package/dist/src/components/Tooltip/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Tooltip/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/src/components/Tooltip/hooks/useEnterLeaveHandlers.d.ts

@@ -0,0 +1,6 @@
+import { MouseEventHandler } from 'react';
+export declare const useEnterLeaveHandlers: <T extends HTMLElement>({ onMouseEnter, onMouseLeave, }?: Partial<Record<"onMouseEnter" | "onMouseLeave", MouseEventHandler<T>>>) => {
+    handleMouseEnter: MouseEventHandler<T>;
+    handleMouseLeave: MouseEventHandler<T>;
+    tooltipVisible: boolean;
+};

package/dist/src/components/Tooltip/hooks/useEnterLeaveHandlers.js

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+export const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+    const handleMouseEnter = useCallback((e) => {
+        setTooltipVisible(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    }, [onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        setTooltipVisible(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    }, [onMouseLeave]);
+    return { handleMouseEnter, handleMouseLeave, tooltipVisible };
+};
+//# sourceMappingURL=useEnterLeaveHandlers.js.map

package/dist/src/components/Tooltip/hooks/useEnterLeaveHandlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnterLeaveHandlers.js","sourceRoot":"","sources":["../../../../../src/components/Tooltip/hooks/useEnterLeaveHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAwB,EAC3D,YAAY,EACZ,YAAY,MAGV,EAAE,EAAE,EAAE;IACR,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,gBAAgB,GAAyB,WAAW,CACxD,CAAC,CAAC,EAAE,EAAE;QACJ,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,gBAAgB,GAAyB,WAAW,CACxD,CAAC,CAAC,EAAE,EAAE;QACJ,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,CAAC,CAAC;IACpB,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAChE,CAAC,CAAC"}

package/dist/src/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './WithTooltip';

package/dist/src/components/Tooltip/index.js

@@ -0,0 +1,3 @@
+export * from './Tooltip';
+export * from './WithTooltip';
+//# sourceMappingURL=index.js.map

package/dist/src/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}

package/dist/src/components/Video/VideoPreview.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType } from 'react';
+type VideoErrorPreviewProps = {
+    message?: string;
+};
+export type VideoPreviewProps = {
+    /**
+     * Enforces mirroring of the video on the X axis. Defaults to true.
+     */
+    mirror?: boolean;
+    /**
+     * Component rendered when user turns off the video.
+     */
+    DisabledVideoPreview?: ComponentType;
+    /**
+     * Component rendered when no camera devices are available.
+     */
+    NoCameraPreview?: ComponentType;
+    /**
+     * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).
+     */
+    StartingCameraPreview?: ComponentType;
+    /**
+     * Component rendered when the video stream could not be retrieved.
+     */
+    VideoErrorPreview?: ComponentType<VideoErrorPreviewProps>;
+};
+export declare const VideoPreview: ({ mirror, DisabledVideoPreview, NoCameraPreview, StartingCameraPreview, VideoErrorPreview, }: VideoPreviewProps) => JSX.Element;
+export {};

package/dist/src/components/Video/VideoPreview.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, } from 'react';
+import clsx from 'clsx';
+import { disposeOfMediaStream } from '@stream-io/video-client';
+import { BaseVideo } from '../../core/components/Video';
+import { DEVICE_STATE, useMediaDevices, useOnUnavailableVideoDevices, useVideoDevices, } from '../../core';
+import { LoadingIndicator } from '../LoadingIndicator';
+const DefaultDisabledVideoPreview = () => {
+    return _jsx("div", { children: "Video is disabled" });
+};
+const DefaultNoCameraPreview = () => {
+    return _jsx("div", { children: "No camera found" });
+};
+const DefaultVideoErrorPreview = ({ message }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: "Error:" }), _jsx("p", { children: message || 'Unexpected error happened' })] }));
+};
+export const VideoPreview = ({ mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, VideoErrorPreview = DefaultVideoErrorPreview, }) => {
+    const [stream, setStream] = useState();
+    const { selectedVideoDeviceId, getVideoStream, initialVideoState, setInitialVideoState, } = useMediaDevices();
+    // When there are 0 video devices (e.g. when laptop lid closed),
+    // we do not restart the video automatically when the device is again available,
+    // but rather leave turning the video on manually to the user.
+    useOnUnavailableVideoDevices(() => setInitialVideoState(DEVICE_STATE.stopped));
+    const videoDevices = useVideoDevices();
+    useEffect(() => {
+        if (!initialVideoState.enabled)
+            return;
+        getVideoStream({ deviceId: selectedVideoDeviceId })
+            .then((s) => {
+            setStream((previousStream) => {
+                if (previousStream) {
+                    disposeOfMediaStream(previousStream);
+                }
+                return s;
+            });
+        })
+            .catch((e) => setInitialVideoState(Object.assign(Object.assign({}, DEVICE_STATE.error), { message: e.message })));
+        return () => {
+            setStream(undefined);
+        };
+    }, [
+        initialVideoState,
+        getVideoStream,
+        selectedVideoDeviceId,
+        setInitialVideoState,
+        videoDevices.length,
+    ]);
+    useEffect(() => {
+        if (initialVideoState.type === 'stopped') {
+            setStream(undefined);
+        }
+    }, [initialVideoState]);
+    const handleOnPlay = useCallback(() => {
+        setInitialVideoState(DEVICE_STATE.playing);
+    }, [setInitialVideoState]);
+    let contents;
+    if (initialVideoState.type === 'error') {
+        contents = _jsx(VideoErrorPreview, {});
+    }
+    else if (initialVideoState.type === 'stopped' && !videoDevices.length) {
+        contents = _jsx(NoCameraPreview, {});
+    }
+    else if (initialVideoState.enabled) {
+        const loading = initialVideoState.type === 'starting';
+        contents = (_jsxs(_Fragment, { children: [stream && (_jsx(BaseVideo, { stream: stream, className: clsx('str-video__video-preview', {
+                        'str-video__video-preview--mirror': mirror,
+                        'str-video__video-preview--loading': loading,
+                    }), onPlay: handleOnPlay })), loading && _jsx(StartingCameraPreview, {})] }));
+    }
+    else {
+        contents = _jsx(DisabledVideoPreview, {});
+    }
+    return (_jsx("div", Object.assign({ className: clsx('str-video__video-preview-container') }, { children: contents })));
+};
+//# sourceMappingURL=VideoPreview.js.map

package/dist/src/components/Video/VideoPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPreview.js","sourceRoot":"","sources":["../../../../src/components/Video/VideoPreview.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/Video/index.d.ts

@@ -0,0 +1,4 @@
+export * from '../../core/components/Video/Video';
+export * from '../../core/components/Video/BaseVideo';
+export * from '../../core/components/Video/DefaultVideoPlaceholder';
+export * from './VideoPreview';

package/dist/src/components/Video/index.js

@@ -0,0 +1,5 @@
+export * from '../../core/components/Video/Video';
+export * from '../../core/components/Video/BaseVideo';
+export * from '../../core/components/Video/DefaultVideoPlaceholder';
+export * from './VideoPreview';
+//# sourceMappingURL=index.js.map

package/dist/src/components/Video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Video/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,gBAAgB,CAAC"}

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

@@ -0,0 +1,16 @@
+export * from './Avatar';
+export * from './Button';
+export * from './CallControls';
+export * from './CallParticipantsList';
+export * from './CallRecordingList';
+export * from './DeviceSettings';
+export * from './LoadingIndicator';
+export * from './Menu';
+export * from './Notification';
+export * from './PendingCallPanel';
+export * from './Permissions';
+export * from './StreamCall';
+export * from './StreamTheme';
+export * from './Search';
+export * from './Tooltip';
+export * from './Video';

package/dist/src/components/index.js

@@ -0,0 +1,17 @@
+export * from './Avatar';
+export * from './Button';
+export * from './CallControls';
+export * from './CallParticipantsList';
+export * from './CallRecordingList';
+export * from './DeviceSettings';
+export * from './LoadingIndicator';
+export * from './Menu';
+export * from './Notification';
+export * from './PendingCallPanel';
+export * from './Permissions';
+export * from './StreamCall';
+export * from './StreamTheme';
+export * from './Search';
+export * from './Tooltip';
+export * from './Video';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/src/core/components/Audio/Audio.d.ts

@@ -0,0 +1,6 @@
+import { AudioHTMLAttributes, DetailedHTMLProps } from 'react';
+import { StreamVideoParticipant } from '@stream-io/video-client';
+export type AudioProps = DetailedHTMLProps<AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement> & Pick<StreamVideoParticipant, 'audioStream'> & {
+    sinkId?: string;
+};
+export declare const Audio: ({ audioStream, sinkId, ...rest }: AudioProps) => JSX.Element;

package/dist/src/core/components/Audio/Audio.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, } from 'react';
+// TODO: rename to BaseAudio
+export const Audio = (_a) => {
+    var { audioStream, sinkId } = _a, rest = __rest(_a, ["audioStream", "sinkId"]);
+    const audioRef = useRef(null);
+    useEffect(() => {
+        const $el = audioRef.current;
+        if (!($el && audioStream))
+            return;
+        console.log(`Attaching audio stream`, $el, audioStream);
+        $el.srcObject = audioStream;
+        return () => {
+            $el.srcObject = null;
+        };
+    }, [audioStream]);
+    useEffect(() => {
+        const $el = audioRef.current;
+        if (!$el || !sinkId)
+            return;
+        console.log(`Setting sinkId`, $el, sinkId);
+        if ($el.setSinkId) {
+            $el.setSinkId(sinkId);
+        }
+    }, [sinkId]);
+    return _jsx("audio", Object.assign({ autoPlay: true, ref: audioRef }, rest));
+};
+//# sourceMappingURL=Audio.js.map

package/dist/src/core/components/Audio/Audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Audio.js","sourceRoot":"","sources":["../../../../../src/core/components/Audio/Audio.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAGL,SAAS,EACT,MAAM,GACP,MAAM,OAAO,CAAC;AAWf,4BAA4B;AAC5B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAA4C,EAAE,EAAE;QAAhD,EAAE,WAAW,EAAE,MAAM,OAAuB,EAAlB,IAAI,cAA9B,yBAAgC,CAAF;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC;YAAE,OAAO;QAElC,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC;QACxD,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;QAC5B,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM;YAAE,OAAO;QAE5B,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC;QAC3C,IAAK,GAAW,CAAC,SAAS,EAAE;YACzB,GAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,8BAAO,QAAQ,QAAC,GAAG,EAAE,QAAQ,IAAM,IAAI,EAAI,CAAC;AACrD,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,2 @@
+export * from './Audio';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/components/Audio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ParticipantViewProps } from '../ParticipantView';
+export type PaginatedGridLayoutProps = {
+    /**
+     * The number of participants to display per page.
+     */
+    groupSize?: number;
+    /**
+     * Whether to exclude the local participant from the grid.
+     */
+    excludeLocalParticipant?: boolean;
+    /**
+     * Turns on/off the pagination arrows.
+     */
+    pageArrowsVisible?: boolean;
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
+export declare const PaginatedGridLayout: ({ groupSize, excludeLocalParticipant, pageArrowsVisible, VideoPlaceholder, ParticipantViewUI, }: PaginatedGridLayoutProps) => JSX.Element | null;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useCall, useLocalParticipant, useParticipants, useRemoteParticipants, } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import { ParticipantView, DefaultParticipantViewUI, } from '../ParticipantView';
+import { Audio } from '../Audio';
+import { IconButton } from '../../../components';
+import { chunk } from '../../../utilities';
+const GROUP_SIZE = 16;
+const PaginatedGridLayoutGroup = ({ group, VideoPlaceholder, ParticipantViewUI, }) => {
+    return (_jsx("div", Object.assign({ className: clsx('str-video__paginated-grid-layout__group', {
+            'str-video__paginated-grid-layout--one': group.length === 1,
+            'str-video__paginated-grid-layout--two-four': group.length >= 2 && group.length <= 4,
+            'str-video__paginated-grid-layout--five-nine': group.length >= 5 && group.length <= 9,
+        }) }, { children: group.map((participant) => (_jsx(ParticipantView, { participant: participant, muteAudio: true, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) })));
+};
+export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalParticipant = false, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }) => {
+    const [page, setPage] = useState(0);
+    const call = useCall();
+    const localParticipant = useLocalParticipant();
+    const participants = useParticipants();
+    // used to render audio elements
+    const remoteParticipants = useRemoteParticipants();
+    // only used to render video elements
+    const participantGroups = useMemo(() => chunk(excludeLocalParticipant ? remoteParticipants : participants, groupSize), [excludeLocalParticipant, remoteParticipants, participants, groupSize]);
+    const pageCount = participantGroups.length;
+    // update page when page count is reduced and selected page no longer exists
+    useEffect(() => {
+        if (page > pageCount - 1) {
+            setPage(Math.max(0, pageCount - 1));
+        }
+    }, [page, pageCount]);
+    const selectedGroup = participantGroups[page];
+    if (!call)
+        return null;
+    return (_jsxs(_Fragment, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { muted: false, audioStream: participant.audioStream, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId }, participant.sessionId))), _jsx("div", Object.assign({ className: "str-video__paginated-grid-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: "str-video__paginated-grid-layout" }, { children: [pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (_jsx(PaginatedGridLayoutGroup, { group: participantGroups[page], VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })) }))] }));
+};
+//# sourceMappingURL=PaginatedGridLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedGridLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ParticipantViewProps } from '../ParticipantView';
+export type SpeakerLayoutProps = {
+    ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
+    ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
+    participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right';
+} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
+export declare const SpeakerLayout: ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, }: SpeakerLayoutProps) => JSX.Element | null;

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

@@ -0,0 +1,74 @@
+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, useLocalParticipant, useParticipants, } from '@stream-io/video-react-bindings';
+import { DefaultParticipantViewUI, ParticipantView, } from '../ParticipantView';
+import { IconButton } from '../../../components';
+import { useHorizontalScrollPosition, useVerticalScrollPosition, } from '../../../hooks';
+import clsx from 'clsx';
+const DefaultParticipantViewUIBar = () => (_jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
+const DefaultParticipantViewUISpotlight = () => _jsx(DefaultParticipantViewUI, {});
+export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition = 'bottom', }) => {
+    const call = useCall();
+    const [participantInSpotlight, ...otherParticipants] = useParticipants();
+    const [scrollWrapper, setScrollWrapper] = useState(null);
+    const isOneOnOneCall = otherParticipants.length === 1;
+    const localParticipant = useLocalParticipant();
+    useEffect(() => {
+        if (!scrollWrapper || !call)
+            return;
+        const cleanup = call.viewportTracker.setViewport(scrollWrapper);
+        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]);
+    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', `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, videoKind: isSpeakerScreenSharing ? 'screen' : 'video', sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && (_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, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, 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, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), (participantsBarPosition === 'left' ||
+                            participantsBarPosition === 'right') && (_jsx(VerticalScrollButtons, { scrollWrapper: scrollWrapper })), (participantsBarPosition === 'top' ||
+                            participantsBarPosition === 'bottom') && (_jsx(HorizontalScrollButtons, { scrollWrapper: scrollWrapper }))] })))] })) })));
+};
+const HorizontalScrollButtons = ({ scrollWrapper, }) => {
+    const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
+    const scrollStartClickHandler = () => {
+        scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ left: -150, behavior: 'smooth' });
+    };
+    const scrollEndClickHandler = () => {
+        scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ left: 150, behavior: 'smooth' });
+    };
+    return (_jsxs(_Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (_jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (_jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
+};
+const VerticalScrollButtons = ({ scrollWrapper, }) => {
+    const scrollPosition = useVerticalScrollPosition(scrollWrapper);
+    const scrollTopClickHandler = () => {
+        scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ top: -150, behavior: 'smooth' });
+    };
+    const scrollBottomClickHandler = () => {
+        scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollBy({ top: 150, behavior: 'smooth' });
+    };
+    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.isLoggedInUser)
+        return 1;
+    if (b.isLoggedInUser)
+        return -1;
+    return 0;
+};
+//# sourceMappingURL=SpeakerLayout.js.map

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

@@ -0,0 +1 @@
+{"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/index.d.ts

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

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

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

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

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

package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Placement } from '@floating-ui/react';
+export type DefaultParticipantViewUIProps = {
+    /**
+     * Turns on/off the status indicator icons (mute, connection quality, etc...).
+     */
+    indicatorsVisible?: boolean;
+    /**
+     * Placement of the context menu component when opened
+     */
+    menuPlacement?: Placement;
+    /**
+     * Option to show/hide menu button component
+     */
+    showMenuButton?: boolean;
+};
+export declare const DefaultParticipantViewUI: ({ indicatorsVisible, menuPlacement, showMenuButton, }: DefaultParticipantViewUIProps) => JSX.Element;
+export declare const ParticipantDetails: ({ indicatorsVisible, }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => JSX.Element;

package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { SfuModels } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+import { clsx } from 'clsx';
+import { IconButton, MenuToggle, Notification, ParticipantActionsContextMenu, } from '../../../components';
+import { Reaction } from '../../../components/Reaction';
+import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
+import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
+import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
+import { useParticipantViewContext } from './ParticipantView';
+const ToggleButton = forwardRef((props, ref) => {
+    return _jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+export const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
+    const call = useCall();
+    const { participant, participantViewElement } = useParticipantViewContext();
+    const { reaction, sessionId } = participant;
+    return (_jsxs(_Fragment, { children: [showMenuButton && (_jsx(MenuToggle, Object.assign({ strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participantViewElement: participantViewElement, participant: participant }) }))), reaction && (_jsx(Reaction, { reaction: reaction, sessionId: sessionId, call: call })), _jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+};
+export const ParticipantDetails = ({ indicatorsVisible = true, }) => {
+    const { participant } = useParticipantViewContext();
+    const { isDominantSpeaker, isLoggedInUser, connectionQuality, publishedTracks, pinnedAt, sessionId, name, userId, videoStream, } = participant;
+    const call = useCall();
+    const connectionQualityAsString = !!connectionQuality &&
+        SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
+    const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+    const isPinned = !!pinnedAt;
+    const isDebugMode = useIsDebugMode();
+    return (_jsxs("div", Object.assign({ className: "str-video__participant-details" }, { children: [_jsxs("span", Object.assign({ className: "str-video__participant-details__name" }, { children: [name || userId, indicatorsVisible && isDominantSpeaker && (_jsx("span", { className: "str-video__participant-details__name--dominant_speaker", title: "Dominant speaker" })), indicatorsVisible && (_jsx(Notification, Object.assign({ isVisible: isLoggedInUser &&
+                            connectionQuality === SfuModels.ConnectionQuality.POOR, message: "Poor connection quality. Please check your internet connection." }, { children: connectionQualityAsString && (_jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))), indicatorsVisible && !hasAudio && (_jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (_jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isPinned && (
+                    // TODO: remove this monstrosity once we have a proper design
+                    _jsx("span", { title: "Unpin", onClick: () => call === null || call === void 0 ? void 0 : call.setParticipantPinnedAt(sessionId), style: { cursor: 'pointer' }, className: "str-video__participant-details__name--pinned" }))] })), isDebugMode && (_jsxs(_Fragment, { children: [_jsx(DebugParticipantPublishQuality, { participant: participant, call: call }), _jsx(DebugStatsView, { call: call, sessionId: sessionId, mediaStream: videoStream })] }))] })));
+};
+//# sourceMappingURL=DefaultParticipantViewUI.js.map

package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}

package/dist/src/core/components/ParticipantView/ParticipantView.d.ts

@@ -0,0 +1,79 @@
+import { ComponentType, ReactElement } from 'react';
+import { StreamVideoLocalParticipant, StreamVideoParticipant } from '@stream-io/video-client';
+import { VideoProps } from '../Video';
+export type ParticipantViewContextValue = Pick<ParticipantViewProps, 'participant'> & {
+    participantViewElement: HTMLDivElement | null;
+};
+export declare const useParticipantViewContext: () => ParticipantViewContextValue;
+export type ParticipantViewProps = {
+    /**
+     * The participant bound to this component.
+     */
+    participant: StreamVideoParticipant | StreamVideoLocalParticipant;
+    /**
+     * Component used to render user interface elements (details, network status...),
+     * pass `null` if you wish to not render anything
+     * @default DefaultParticipantViewUI
+     */
+    ParticipantViewUI?: ComponentType | ReactElement | null;
+    /**
+     * In supported browsers, this sets the default audio output.
+     * The value of this prop should be a valid Audio Output `deviceId`.
+     */
+    sinkId?: string;
+    /**
+     * The kind of video stream to play for the given participant.
+     */
+    videoKind?: 'video' | 'screen';
+    /**
+     * Turns on/off the audio for the participant.
+     */
+    muteAudio?: boolean;
+    /**
+     * An object with set functions meant for exposing the "native" video
+     * and video placeholder elements to the integrators.
+     * - `refs.setVideoElement`
+     * - `refs.setVideoPlaceholderElement`
+     */
+    refs?: VideoProps['refs'];
+    /**
+     * Custom class applied to the root DOM element.
+     */
+    className?: string;
+} & Pick<VideoProps, 'VideoPlaceholder'>;
+export declare const ParticipantView: import("react").ForwardRefExoticComponent<{
+    /**
+     * The participant bound to this component.
+     */
+    participant: StreamVideoParticipant | StreamVideoLocalParticipant;
+    /**
+     * Component used to render user interface elements (details, network status...),
+     * pass `null` if you wish to not render anything
+     * @default DefaultParticipantViewUI
+     */
+    ParticipantViewUI?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<{}> | null | undefined;
+    /**
+     * In supported browsers, this sets the default audio output.
+     * The value of this prop should be a valid Audio Output `deviceId`.
+     */
+    sinkId?: string | undefined;
+    /**
+     * The kind of video stream to play for the given participant.
+     */
+    videoKind?: "video" | "screen" | undefined;
+    /**
+     * Turns on/off the audio for the participant.
+     */
+    muteAudio?: boolean | undefined;
+    /**
+     * An object with set functions meant for exposing the "native" video
+     * and video placeholder elements to the integrators.
+     * - `refs.setVideoElement`
+     * - `refs.setVideoPlaceholderElement`
+     */
+    refs?: VideoProps['refs'];
+    /**
+     * Custom class applied to the root DOM element.
+     */
+    className?: string | undefined;
+} & Pick<VideoProps, "VideoPlaceholder"> & import("react").RefAttributes<HTMLDivElement>>;