@stream-io/video-react-sdk 0.0.1-alpha.33 → 0.0.1-alpha.34

package/dist/src/components/StreamCall/CallParticipantsView.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ParticipantBox } from '../../core/components/ParticipantBox/ParticipantBox';
+import { DefaultParticipantViewUI, ParticipantView } from '../../core';
 import { useLocalParticipant, useParticipants, } from '@stream-io/video-react-bindings';
 export const CallParticipantsView = (props) => {
-    const { call } = props;
     const localParticipant = useLocalParticipant();
     const participants = useParticipants();
     const grid = `str-video__grid-${participants.length || 1}`;
-    return (_jsx("div", Object.assign({ className: `str-video__call-participants-view ${grid}` }, { children: participants.map((participant) => (_jsx(ParticipantBox, { participant: participant, call: call, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId }, participant.sessionId))) })));
+    return (_jsx("div", Object.assign({ className: `str-video__call-participants-view ${grid}` }, { children: participants.map((participant) => (_jsx(ParticipantView, { participant: participant, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, ParticipantViewUI: DefaultParticipantViewUI }, participant.sessionId))) })));
 };
 //# sourceMappingURL=CallParticipantsView.js.map

package/dist/src/components/StreamCall/CallParticipantsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsView.js","sourceRoot":"","sources":["../../../../src/components/StreamCall/CallParticipantsView.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EACL,mBAAmB,EACnB,eAAe,GAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,IAAI,GAAG,mBAAmB,YAAY,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;IAC3D,OAAO,CACL,4BAAK,SAAS,EAAE,qCAAqC,IAAI,EAAE,gBACxD,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CACjC,KAAC,cAAc,IAEb,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,mBAAmB,IAHxC,WAAW,CAAC,SAAS,CAI1B,CACH,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CallParticipantsView.js","sourceRoot":"","sources":["../../../../src/components/StreamCall/CallParticipantsView.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,wBAAwB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvE,OAAO,EACL,mBAAmB,EACnB,eAAe,GAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC5D,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,IAAI,GAAG,mBAAmB,YAAY,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;IAC3D,OAAO,CACL,4BAAK,SAAS,EAAE,qCAAqC,IAAI,EAAE,gBACxD,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CACjC,KAAC,eAAe,IAEd,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,mBAAmB,EAC7C,iBAAiB,EAAE,wBAAwB,IAHtC,WAAW,CAAC,SAAS,CAI1B,CACH,CAAC,IACE,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ParticipantViewProps } from '../ParticipantView';
 export type PaginatedGridLayoutProps = {
     /**
      * The number of participants to display per page.
@@ -8,14 +9,9 @@ export type PaginatedGridLayoutProps = {
      * Whether to exclude the local participant from the grid.
      */
     excludeLocalParticipant?: boolean;
-    /**
-     * Turns on/off the status indicator icons (mute, connection quality, etc...)
-     * on the participant boxes.
-     */
-    indicatorsVisible?: boolean;
     /**
      * Turns on/off the pagination arrows.
      */
     pageArrowsVisible?: boolean;
-};
-export declare const PaginatedGridLayout: ({ groupSize, excludeLocalParticipant, indicatorsVisible, pageArrowsVisible, }: PaginatedGridLayoutProps) => JSX.Element | null;
+} & 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

@@ -2,18 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useState } from 'react';
 import { useCall, useLocalParticipant, useParticipants, useRemoteParticipants, } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
-import { ParticipantBox } from '../ParticipantBox';
+import { ParticipantView, DefaultParticipantViewUI, } from '../ParticipantView';
 import { Audio } from '../Audio';
 import { IconButton } from '../../../components';
+import { chunk } from '../../../utilities';
 const GROUP_SIZE = 16;
-const PaginatedGridLayoutGroup = ({ call, group, indicatorsVisible = true, }) => {
-    return (_jsx("div", Object.assign({ className: clsx('str-video__paginated-grid-layout--group', {
+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(ParticipantBox, { participant: participant, call: call, indicatorsVisible: indicatorsVisible, muteAudio: true }, participant.sessionId))) })));
+        }) }, { children: group.map((participant) => (_jsx(ParticipantView, { participant: participant, muteAudio: true, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) })));
 };
-export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalParticipant = false, indicatorsVisible = true, pageArrowsVisible = true, }) => {
+export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalParticipant = false, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }) => {
     const [page, setPage] = useState(0);
     const call = useCall();
     const localParticipant = useLocalParticipant();
@@ -32,11 +33,6 @@ export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalPartic
     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, { call: call, group: participantGroups[page], indicatorsVisible: indicatorsVisible })), pageArrowsVisible && pageCount > 1 && (_jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })) }))] }));
-};
-// TODO: move to utilities
-const chunk = (array, size = GROUP_SIZE) => {
-    const chunkCount = Math.ceil(array.length / size);
-    return Array.from({ length: chunkCount }, (_, index) => array.slice(size * index, size * index + size));
+    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

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

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

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

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } 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 { ParticipantBox } from '../ParticipantBox';
+import { ParticipantView, DefaultParticipantViewUI, } from '../ParticipantView';
 import { IconButton } from '../../../components';
 import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
-export const SpeakerLayout = () => {
+const DefaultParticipantViewUIBar = ({ participant, }) => (_jsx(DefaultParticipantViewUI, { participant: participant, menuPlacement: "top-end" }));
+const DefaultParticipantViewUISpotlight = ({ participant, }) => (_jsx(DefaultParticipantViewUI, { participant: participant }));
+export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, }) => {
     const call = useCall();
     const [participantInSpotlight, ...otherParticipants] = useParticipants();
     const [scrollWrapper, setScrollWrapper] = useState(null);
@@ -43,7 +45,7 @@ export const SpeakerLayout = () => {
     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: "str-video__speaker-layout" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout--spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantBox, { participant: participantInSpotlight, call: call, muteAudio: isSpeakerScreenSharing, videoKind: isSpeakerScreenSharing ? 'screen' : 'video', sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId })) })), otherParticipants.length > 0 && (_jsxs("div", Object.assign({ className: "str-video__speaker-layout--participants-bar-buttons-wrapper" }, { children: [scrollPosition && scrollPosition !== 'start' && (_jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout--participants-bar-button-left" })), _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(ParticipantBox, { participant: participantInSpotlight, call: call, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, toggleMenuPosition: "top" }) }), participantInSpotlight.sessionId)), otherParticipants.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout--participant-tile" }, { children: _jsx(ParticipantBox, { participant: participant, call: call, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, toggleMenuPosition: "top" }) }), participant.sessionId)))] })) })), scrollPosition && scrollPosition !== 'end' && (_jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout--participants-bar-button-right" }))] })))] })) })));
+    return (_jsx("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: "str-video__speaker-layout" }, { 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: [scrollPosition && scrollPosition !== 'start' && (_jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), _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)))] })) })), scrollPosition && scrollPosition !== 'end' && (_jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] })))] })) })));
 };
 const hasScreenShare = (p) => p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
 const loggedIn = (a, b) => {

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/ParticipantView/DefaultParticipantViewUI.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { Placement } from '@floating-ui/react';
+import { ParticipantViewProps } from './ParticipantView';
+export type ParticipantViewUIProps = Pick<ParticipantViewProps, 'participant'>;
+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;
+} & ParticipantViewUIProps;
+export declare const DefaultParticipantViewUI: ({ participant, indicatorsVisible, menuPlacement, showMenuButton, }: DefaultParticipantViewUIProps) => JSX.Element;
+export declare const ParticipantDetails: ({ participant, indicatorsVisible, }: Pick<DefaultParticipantViewUIProps, 'participant' | 'indicatorsVisible'>) => JSX.Element;

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

@@ -0,0 +1,33 @@
+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';
+const ToggleButton = forwardRef((props, ref) => {
+    return _jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+export const DefaultParticipantViewUI = ({ participant, indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
+    const call = useCall();
+    const { reaction, sessionId } = participant;
+    return (_jsxs(_Fragment, { children: [showMenuButton && (_jsx(MenuToggle, Object.assign({ strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton }, { children: _jsx(ParticipantActionsContextMenu, { participant: participant }) }))), reaction && (_jsx(Reaction, { reaction: reaction, sessionId: sessionId, call: call })), _jsx(ParticipantDetails, { participant: participant, indicatorsVisible: indicatorsVisible })] }));
+};
+export const ParticipantDetails = ({ participant, indicatorsVisible = true, }) => {
+    const { isDominantSpeaker, isLoggedInUser, connectionQuality, publishedTracks, pinnedAt, sessionId, name, userId, videoStream, } = participant;
+    const call = useCall();
+    const connectionQualityAsString = !!connectionQuality &&
+        String(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, kind: isLoggedInUser ? 'publisher' : 'subscriber', 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":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,6BAA6B,GAE9B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAGxD,OAAO,EAAE,8BAA8B,EAAE,MAAM,0DAA0D,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAmB1E,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CAAC;AAC5E,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,WAAW,EACX,iBAAiB,GAAG,IAAI,EACxB,aAAa,GAAG,YAAY,EAC5B,cAAc,GAAG,IAAI,GACS,EAAE,EAAE;IAClC,MAAM,IAAI,GAAG,OAAO,EAAG,CAAC;IACxB,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;IAE5C,OAAO,CACL,8BACG,cAAc,IAAI,CACjB,KAAC,UAAU,kBACT,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,aAAa,EACxB,YAAY,EAAE,YAAY,gBAE1B,KAAC,6BAA6B,IAAC,WAAW,EAAE,WAAW,GAAI,IAChD,CACd,EACA,QAAQ,IAAI,CACX,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAI,CACnE,EACD,KAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,GACpC,IACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,WAAW,EACX,iBAAiB,GAAG,IAAI,GAIzB,EAAE,EAAE;IACH,MAAM,EACJ,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,WAAW,GACZ,GAAG,WAAW,CAAC;IAChB,MAAM,IAAI,GAAG,OAAO,EAAG,CAAC;IAExB,MAAM,yBAAyB,GAC7B,CAAC,CAAC,iBAAiB;QACnB,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAEvE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;IAE5B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,OAAO,CACL,6BAAK,SAAS,EAAC,gCAAgC,iBAC7C,8BAAM,SAAS,EAAC,sCAAsC,iBACnD,IAAI,IAAI,MAAM,EACd,iBAAiB,IAAI,iBAAiB,IAAI,CACzC,eACE,SAAS,EAAC,wDAAwD,EAClE,KAAK,EAAC,kBAAkB,GACxB,CACH,EACA,iBAAiB,IAAI,CACpB,KAAC,YAAY,kBACX,SAAS,EACP,cAAc;4BACd,iBAAiB,KAAK,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAExD,OAAO,EAAC,iEAAiE,gBAExE,yBAAyB,IAAI,CAC5B,eACE,SAAS,EAAE,IAAI,CACb,oDAAoD,EACpD,uDAAuD,yBAAyB,EAAE,CACnF,EACD,KAAK,EAAE,yBAAyB,GAChC,CACH,IACY,CAChB,EACA,iBAAiB,IAAI,CAAC,QAAQ,IAAI,CACjC,eAAM,SAAS,EAAC,mDAAmD,GAAG,CACvE,EACA,iBAAiB,IAAI,CAAC,QAAQ,IAAI,CACjC,eAAM,SAAS,EAAC,mDAAmD,GAAG,CACvE,EACA,iBAAiB,IAAI,QAAQ,IAAI;oBAChC,6DAA6D;oBAC7D,eACE,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,sBAAsB,CAAC,SAAS,CAAC,EACtD,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,SAAS,EAAC,8CAA8C,GACxD,CACH,KACI,EACN,WAAW,IAAI,CACd,8BACE,KAAC,8BAA8B,IAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EACjD,WAAW,EAAE,WAAW,GACxB,IACD,CACJ,KACG,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,82 @@
+import { ComponentType, ReactElement } from 'react';
+import { StreamVideoLocalParticipant, StreamVideoParticipant } from '@stream-io/video-client';
+import { VideoProps } from '../Video';
+import { ParticipantViewUIProps } from './DefaultParticipantViewUI';
+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<ParticipantViewUIProps> | 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;
+    /**
+     * A function meant for exposing the "native" element ref to the integrators.
+     * The element can either be:
+     * - `<video />` for participants with enabled video.
+     * - `<div />` for participants with disabled video. This ref would point to
+     * the VideoPlaceholder component.
+     *
+     * @param element the element ref.
+     */
+    setVideoElementRef?: (element: HTMLElement | null) => void;
+    /**
+     * 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<ParticipantViewUIProps> | 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;
+    /**
+     * A function meant for exposing the "native" element ref to the integrators.
+     * The element can either be:
+     * - `<video />` for participants with enabled video.
+     * - `<div />` for participants with disabled video. This ref would point to
+     * the VideoPlaceholder component.
+     *
+     * @param element the element ref.
+     */
+    setVideoElementRef?: ((element: HTMLElement | null) => void) | undefined;
+    /**
+     * Custom class applied to the root DOM element.
+     */
+    className?: string | undefined;
+} & Pick<VideoProps, "VideoPlaceholder"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import clsx from 'clsx';
+import { SfuModels, } from '@stream-io/video-client';
+import { Audio } from '../Audio';
+import { Video } from '../Video';
+import { useTrackElementVisibility } from '../../hooks';
+import { DefaultParticipantViewUI, } from './DefaultParticipantViewUI';
+import { isComponentType, applyElementRef } from '../../../utilities';
+export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'video', muteAudio, setVideoElementRef, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
+    const { audioStream, isLoggedInUser, isSpeaking, publishedTracks, sessionId, } = participant;
+    const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+    const [trackedElement, setTrackedElement] = useState(null);
+    useTrackElementVisibility({
+        sessionId,
+        trackedElement,
+    });
+    return (_jsxs("div", Object.assign({ ref: (element) => {
+            applyElementRef(ref, element);
+            setTrackedElement(element);
+        }, className: clsx('str-video__participant-view', isSpeaking && 'str-video__participant-view--speaking', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className) }, { children: [_jsx(Audio
+            // mute the local participant, as we don't want to hear ourselves
+            , { 
+                // mute the local participant, as we don't want to hear ourselves
+                muted: isLoggedInUser || muteAudio, sinkId: sinkId, audioStream: audioStream }), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoKind, setVideoElementRef: setVideoElementRef, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, { participant: participant })) : (ParticipantViewUI)] })));
+});
+//# sourceMappingURL=ParticipantView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAiB,QAAQ,EAAgB,MAAM,OAAO,CAAC;AAC1E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,SAAS,GAGV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAmDtE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,WAAW,EACX,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,kBAAkB,EAClB,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GAAG,wBAAiE,GACtF,EACD,GAAG,EACH,EAAE;IACF,MAAM,EACJ,WAAW,EACX,cAAc,EACd,UAAU,EACV,eAAe,EACf,SAAS,GACV,GAAG,WAAW,CAAC;IAEhB,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAErE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,IAAI,CACL,CAAC;IAEF,yBAAyB,CAAC;QACxB,SAAS;QACT,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAC9B,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC,EACD,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,UAAU,IAAI,uCAAuC,EACrD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,CAAC,QAAQ,IAAI,uCAAuC,EACpD,SAAS,CACV,iBAED,KAAC,KAAK;YACJ,iEAAiE;;gBAAjE,iEAAiE;gBACjE,KAAK,EAAE,cAAc,IAAI,SAAS,EAClC,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,GACxB,EACF,KAAC,KAAK,IACJ,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,EACf,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,SACR,EACD,eAAe,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACpC,KAAC,iBAAiB,IAAC,WAAW,EAAE,WAAW,GAAI,CAChD,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,KACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './ParticipantView';
+export * from './DefaultParticipantViewUI';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC"}

package/dist/src/core/components/Video/BaseVideo.d.ts

@@ -1,9 +1,9 @@
-import { DetailedHTMLProps, VideoHTMLAttributes } from 'react';
-export type VideoProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {
+import { ComponentPropsWithRef } from 'react';
+export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
     stream?: MediaStream;
 };
 /**
  * @description Extends video element with `stream` property
  * (`srcObject`) to reactively handle stream changes
  */
-export declare const BaseVideo: import("react").ForwardRefExoticComponent<Omit<VideoProps, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;
+export declare const BaseVideo: import("react").ForwardRefExoticComponent<Omit<BaseVideoProps, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/src/core/components/Video/BaseVideo.js

@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState, } from 'react';
-import clsx from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
 import { Browsers } from '@stream-io/video-client';
+import { applyElementRef } from '../../../utilities';
 /**
  * @description Extends video element with `stream` property
  * (`srcObject`) to reactively handle stream changes
@@ -20,15 +20,6 @@ import { Browsers } from '@stream-io/video-client';
 export const BaseVideo = forwardRef((_a, ref) => {
     var { stream } = _a, rest = __rest(_a, ["stream"]);
     const [videoElement, setVideoElement] = useState(null);
-    const setRef = (instance) => {
-        setVideoElement(instance);
-        if (typeof ref === 'function') {
-            ref(instance);
-        }
-        else if (ref) {
-            ref.current = instance;
-        }
-    };
     useEffect(() => {
         if (!videoElement || !stream)
             return;
@@ -49,6 +40,9 @@ export const BaseVideo = forwardRef((_a, ref) => {
             videoElement.srcObject = null;
         };
     }, [stream, videoElement]);
-    return (_jsx("video", Object.assign({ autoPlay: true, playsInline: true }, rest, { className: clsx('str-video__base-video', rest.className), ref: setRef })));
+    return (_jsx("video", Object.assign({ autoPlay: true, playsInline: true }, rest, { ref: (element) => {
+            applyElementRef(ref, element);
+            setVideoElement(element);
+        } })));
 });
 //# sourceMappingURL=BaseVideo.js.map

package/dist/src/core/components/Video/BaseVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseVideo.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/BaseVideo.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAGL,UAAU,EACV,SAAS,EACT,QAAQ,GAET,MAAM,OAAO,CAAC;AACf,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AASnD;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,EAAmB,EAAE,GAAG,EAAE,EAAE;QAA5B,EAAE,MAAM,OAAW,EAAN,IAAI,cAAjB,UAAmB,CAAF;IAChB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL,CAAC;IACF,MAAM,MAAM,GAAmC,CAAC,QAAQ,EAAE,EAAE;QAC1D,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC1B,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC5B,GAAmD,CAAC,QAAQ,CAAC,CAAC;SAChE;aAAM,IAAI,GAAG,EAAE;YACd,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM;YAAE,OAAO;QACrC,IAAI,MAAM,KAAK,YAAY,CAAC,SAAS;YAAE,OAAO;QAE9C,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;QAChC,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,SAAS,EAAE,EAAE;YAC/C,4CAA4C;YAC5C,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;gBAChC,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC9B,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;gBAC5C,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,EAAE,CAAC;YACrB,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,8BACE,QAAQ,QACR,WAAW,UACP,IAAI,IACR,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,SAAS,CAAC,EACxD,GAAG,EAAE,MAAM,IACX,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"BaseVideo.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/BaseVideo.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAMrD;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,EAAmB,EAAE,GAAG,EAAE,EAAE;QAA5B,EAAE,MAAM,OAAW,EAAN,IAAI,cAAjB,UAAmB,CAAF;IAChB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM;YAAE,OAAO;QACrC,IAAI,MAAM,KAAK,YAAY,CAAC,SAAS;YAAE,OAAO;QAE9C,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;QAChC,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,SAAS,EAAE,EAAE;YAC/C,4CAA4C;YAC5C,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,SAAS,GAAG,MAAM,CAAC;gBAChC,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC9B,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;gBAC5C,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,CAAC,CAAC,CAAC;SACP;QAED,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,KAAK,EAAE,CAAC;YACrB,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,8BACE,QAAQ,QACR,WAAW,UACP,IAAI,IACR,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,eAAe,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAC9B,eAAe,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -1,8 +1,10 @@
-import { DetailedHTMLProps, VideoHTMLAttributes } from 'react';
-import { Call, StreamVideoParticipant } from '@stream-io/video-client';
-export declare const Video: (props: import("react").ClassAttributes<HTMLVideoElement> & VideoHTMLAttributes<HTMLVideoElement> & {
-    call: Call;
+import { ComponentType, ComponentPropsWithoutRef } from 'react';
+import { StreamVideoParticipant } from '@stream-io/video-client';
+import { VideoPlaceholderProps } from './VideoPlaceholder';
+export type VideoProps = ComponentPropsWithoutRef<'video'> & {
     kind: 'video' | 'screen';
     participant: StreamVideoParticipant;
-    setVideoElementRef?: ((element: HTMLElement | null) => void) | undefined;
-}) => JSX.Element;
+    setVideoElementRef?: (element: HTMLElement | null) => void;
+    VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
+};
+export declare const Video: ({ kind, participant, className, setVideoElementRef, VideoPlaceholder, ...rest }: VideoProps) => JSX.Element | null;

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

@@ -13,15 +13,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState, } from 'react';
 import { DebounceType, SfuModels, VisibilityState, } from '@stream-io/video-client';
 import clsx from 'clsx';
-import { VideoPlaceholder } from './VideoPlaceholder';
+import { VideoPlaceholder as DefaultVideoPlaceholder, } from './VideoPlaceholder';
 import { BaseVideo } from './BaseVideo';
-export const Video = (props) => {
-    const { call, kind, participant, className, setVideoElementRef } = props, rest = __rest(props, ["call", "kind", "participant", "className", "setVideoElementRef"]);
-    const { sessionId, videoStream, screenShareStream, publishedTracks } = participant;
+import { useCall } from '@stream-io/video-react-bindings';
+export const Video = (_a) => {
+    var { kind, participant, className, setVideoElementRef, VideoPlaceholder = DefaultVideoPlaceholder } = _a, rest = __rest(_a, ["kind", "participant", "className", "setVideoElementRef", "VideoPlaceholder"]);
+    const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLoggedInUser, userId, } = participant;
+    const call = useCall();
     const [videoElement, setVideoElement] = useState(null);
     // const [videoTrackMuted, setVideoTrackMuted] = useState(false);
     const [videoPlaying, setVideoPlaying] = useState(false);
-    const viewportVisibilityRef = useRef(participant.viewportVisibilityState);
+    const viewportVisibilityRef = useRef(viewportVisibilityState);
     const stream = kind === 'video' ? videoStream : screenShareStream;
     // TODO: handle track muting
     // useEffect(() => {
@@ -45,24 +47,25 @@ export const Video = (props) => {
         ? SfuModels.TrackType.VIDEO
         : SfuModels.TrackType.SCREEN_SHARE);
     const displayPlaceholder = !isPublishingTrack ||
-        (participant.viewportVisibilityState === VisibilityState.INVISIBLE &&
+        (viewportVisibilityState === VisibilityState.INVISIBLE &&
             !screenShareStream) ||
         !videoPlaying;
     const lastDimensionRef = useRef();
     const updateSubscription = useCallback((dimension, type = DebounceType.SLOW) => {
+        if (!call)
+            return;
         call.updateSubscriptionsPartial(kind, {
             [sessionId]: {
                 dimension,
             },
         }, type);
     }, [call, kind, sessionId]);
-    // handle generic subscription updates
     // handle visibility subscription updates
     useEffect(() => {
-        viewportVisibilityRef.current = participant.viewportVisibilityState;
-        if (!videoElement || !isPublishingTrack || participant.isLoggedInUser)
+        viewportVisibilityRef.current = viewportVisibilityState;
+        if (!videoElement || !isPublishingTrack || isLoggedInUser)
             return;
-        const isInvisibleVVS = participant.viewportVisibilityState === VisibilityState.INVISIBLE;
+        const isInvisibleVVS = viewportVisibilityState === VisibilityState.INVISIBLE;
         updateSubscription(isInvisibleVVS
             ? undefined
             : {
@@ -71,14 +74,14 @@ export const Video = (props) => {
             }, DebounceType.MEDIUM);
     }, [
         updateSubscription,
-        participant.viewportVisibilityState,
+        viewportVisibilityState,
         videoElement,
         isPublishingTrack,
-        participant.isLoggedInUser,
+        isLoggedInUser,
     ]);
     // handle resize subscription updates
     useEffect(() => {
-        if (!videoElement || !isPublishingTrack || participant.isLoggedInUser)
+        if (!videoElement || !isPublishingTrack || isLoggedInUser)
             return;
         const resizeObserver = new ResizeObserver(() => {
             const currentDimensions = `${videoElement.clientWidth},${videoElement.clientHeight}`;
@@ -102,12 +105,13 @@ export const Video = (props) => {
     }, [
         updateSubscription,
         videoElement,
-        participant.viewportVisibilityState,
+        viewportVisibilityState,
         isPublishingTrack,
-        participant.isLoggedInUser,
+        isLoggedInUser,
     ]);
+    // handle generic subscription updates
     useEffect(() => {
-        if (!isPublishingTrack || !videoElement || participant.isLoggedInUser)
+        if (!isPublishingTrack || !videoElement || isLoggedInUser)
             return;
         updateSubscription({
             height: videoElement.clientHeight,
@@ -116,12 +120,7 @@ export const Video = (props) => {
         return () => {
             updateSubscription(undefined, DebounceType.FAST);
         };
-    }, [
-        updateSubscription,
-        videoElement,
-        isPublishingTrack,
-        participant.isLoggedInUser,
-    ]);
+    }, [updateSubscription, videoElement, isPublishingTrack, isLoggedInUser]);
     const [isWideMode, setIsWideMode] = useState(true);
     useEffect(() => {
         if (!stream || !videoElement)
@@ -140,10 +139,13 @@ export const Video = (props) => {
             videoElement.removeEventListener('play', calculateVideoRatio);
         };
     }, [stream, videoElement]);
-    return (_jsxs(_Fragment, { children: [_jsx(BaseVideo, Object.assign({}, rest, { stream: stream, className: clsx(className, {
-                    'str-video__video--wide': isWideMode,
+    if (!call)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(BaseVideo, Object.assign({}, rest, { stream: stream, className: clsx(className, 'str-video__video', {
                     'str-video__video--tall': !isWideMode,
-                }), "data-user-id": participant.userId, "data-session-id": sessionId, ref: (ref) => {
+                    'str-video__video--mirror': isLoggedInUser && kind === 'video',
+                    'str-video__video--screen-share': kind === 'screen',
+                }), "data-user-id": userId, "data-session-id": sessionId, ref: (ref) => {
                     setVideoElement(ref);
                     setVideoElementRef === null || setVideoElementRef === void 0 ? void 0 : setVideoElementRef(ref);
                 } })), displayPlaceholder && (_jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: setVideoElementRef }))] }));

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

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