@stream-io/video-react-sdk 0.0.1-alpha.78 → 0.0.1-alpha.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.d.ts +2 -1
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js +12 -3
- package/dist/src/components/CallParticipantsList/CallParticipantListingItem.js.map +1 -1
- package/dist/src/core/components/CallLayout/SpeakerLayout.js +2 -2
- package/dist/src/core/components/CallLayout/SpeakerLayout.js.map +1 -1
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts +3 -5
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js +7 -4
- package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map +1 -1
- package/dist/src/core/components/ParticipantView/ParticipantView.d.ts +16 -19
- package/dist/src/core/components/ParticipantView/ParticipantView.js +14 -10
- package/dist/src/core/components/ParticipantView/ParticipantView.js.map +1 -1
- package/dist/src/core/components/Video/BaseVideo.js +2 -2
- package/dist/src/core/components/Video/BaseVideo.js.map +1 -1
- package/dist/src/core/components/Video/Video.d.ts +5 -2
- package/dist/src/core/components/Video/Video.js +6 -5
- package/dist/src/core/components/Video/Video.js.map +1 -1
- package/dist/src/core/hooks/useTrackElementVisibility.js +4 -1
- package/dist/src/core/hooks/useTrackElementVisibility.js.map +1 -1
- package/dist/src/utilities/applyElementToRef.d.ts +2 -0
- package/dist/src/utilities/{applyElementRef.js → applyElementToRef.js} +2 -2
- package/dist/src/utilities/applyElementToRef.js.map +1 -0
- package/dist/src/utilities/index.d.ts +1 -1
- package/dist/src/utilities/index.js +1 -1
- package/dist/src/utilities/index.js.map +1 -1
- package/package.json +5 -5
- package/src/components/CallParticipantsList/CallParticipantListingItem.tsx +22 -1
- package/src/core/components/CallLayout/SpeakerLayout.tsx +3 -10
- package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx +11 -16
- package/src/core/components/ParticipantView/ParticipantView.tsx +58 -39
- package/src/core/components/Video/BaseVideo.tsx +2 -2
- package/src/core/components/Video/Video.tsx +9 -6
- package/src/core/hooks/useTrackElementVisibility.ts +6 -3
- package/src/utilities/{applyElementRef.ts → applyElementToRef.ts} +1 -1
- package/src/utilities/index.ts +1 -1
- package/dist/src/utilities/applyElementRef.d.ts +0 -2
- package/dist/src/utilities/applyElementRef.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.0.1-alpha.80](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.79...@stream-io/video-react-sdk-0.0.1-alpha.80) (2023-05-25)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## [0.0.1-alpha.79](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.78...@stream-io/video-react-sdk-0.0.1-alpha.79) (2023-05-25)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* **react-sdk:** ParticipantViewContext + other changes ([#549](https://github.com/GetStream/stream-video-js/issues/549)) ([51edbbc](https://github.com/GetStream/stream-video-js/commit/51edbbc999d405b7e822f094a35c1b5797a5d3df))
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
5
18
|
## [0.0.1-alpha.78](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.77...@stream-io/video-react-sdk-0.0.1-alpha.78) (2023-05-25)
|
|
6
19
|
|
|
7
20
|
|
|
@@ -9,7 +9,8 @@ type CallParticipantListingItemProps = {
|
|
|
9
9
|
}>;
|
|
10
10
|
};
|
|
11
11
|
export declare const CallParticipantListingItem: ({ participant, DisplayName, }: CallParticipantListingItemProps) => JSX.Element;
|
|
12
|
-
export declare const ParticipantActionsContextMenu: ({ participant, }: {
|
|
12
|
+
export declare const ParticipantActionsContextMenu: ({ participant, participantViewElement, }: {
|
|
13
13
|
participant: StreamVideoParticipant;
|
|
14
|
+
participantViewElement?: HTMLDivElement | null | undefined;
|
|
14
15
|
}) => JSX.Element;
|
|
15
16
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
3
|
+
import { forwardRef, useState } from 'react';
|
|
4
4
|
import { Restricted, useCall, useConnectedUser, } from '@stream-io/video-react-bindings';
|
|
5
5
|
import { OwnCapability, SfuModels, } from '@stream-io/video-client';
|
|
6
6
|
import { IconButton } from '../Button';
|
|
@@ -34,7 +34,8 @@ const DefaultDisplayName = ({ participant }) => {
|
|
|
34
34
|
const ToggleButton = forwardRef((props, ref) => {
|
|
35
35
|
return _jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
|
|
36
36
|
});
|
|
37
|
-
export const ParticipantActionsContextMenu = ({ participant, }) => {
|
|
37
|
+
export const ParticipantActionsContextMenu = ({ participant, participantViewElement, }) => {
|
|
38
|
+
const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
|
|
38
39
|
const activeCall = useCall();
|
|
39
40
|
const blockUser = () => {
|
|
40
41
|
activeCall === null || activeCall === void 0 ? void 0 : activeCall.blockUser(participant.userId);
|
|
@@ -71,6 +72,14 @@ export const ParticipantActionsContextMenu = ({ participant, }) => {
|
|
|
71
72
|
const toggleParticipantPinnedAt = () => {
|
|
72
73
|
activeCall === null || activeCall === void 0 ? void 0 : activeCall.setParticipantPinnedAt(participant.sessionId, participant.pinnedAt ? undefined : Date.now());
|
|
73
74
|
};
|
|
74
|
-
|
|
75
|
+
const toggleFullscreenMode = () => {
|
|
76
|
+
if (!fullscreenModeOn)
|
|
77
|
+
return participantViewElement === null || participantViewElement === void 0 ? void 0 : participantViewElement.requestFullscreen().then(() => setFullscreenModeOn(true)).catch(console.error);
|
|
78
|
+
document
|
|
79
|
+
.exitFullscreen()
|
|
80
|
+
.catch(console.error)
|
|
81
|
+
.finally(() => setFullscreenModeOn(false));
|
|
82
|
+
};
|
|
83
|
+
return (_jsxs(GenericMenu, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleParticipantPinnedAt }, { children: [_jsx(Icon, { icon: "pin" }), participant.pinnedAt ? 'Unpin' : 'Pin'] })), _jsx(Restricted, Object.assign({ requiredGrants: [OwnCapability.BLOCK_USERS] }, { children: _jsxs(GenericMenuButtonItem, Object.assign({ onClick: blockUser }, { children: [_jsx(Icon, { icon: "not-allowed" }), "Block"] })) })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.MUTE_USERS] }, { children: [_jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.VIDEO), onClick: muteVideo }, { children: [_jsx(Icon, { icon: "camera-off-outline" }), "Turn off video"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE), onClick: muteScreenShare }, { children: [_jsx(Icon, { icon: "screen-share-off" }), "Turn off screen share"] })), _jsxs(GenericMenuButtonItem, Object.assign({ disabled: !participant.publishedTracks.includes(SfuModels.TrackType.AUDIO), onClick: muteAudio }, { children: [_jsx(Icon, { icon: "no-audio" }), "Mute audio"] }))] })), _jsxs(GenericMenuButtonItem, Object.assign({ onClick: toggleFullscreenMode }, { children: [fullscreenModeOn ? 'Leave' : 'Enter', " fullscreen"] })), _jsxs(Restricted, Object.assign({ requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS] }, { children: [_jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_AUDIO) }, { children: "Allow audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SEND_VIDEO) }, { children: "Allow video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: grantPermission(OwnCapability.SCREENSHARE) }, { children: "Allow screen sharing" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_AUDIO) }, { children: "Disable audio" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SEND_VIDEO) }, { children: "Disable video" })), _jsx(GenericMenuButtonItem, Object.assign({ onClick: revokePermission(OwnCapability.SCREENSHARE) }, { children: "Disable screen sharing" }))] }))] }));
|
|
75
84
|
};
|
|
76
85
|
//# sourceMappingURL=CallParticipantListingItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallParticipantListingItem.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAiC,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CallParticipantListingItem.js","sourceRoot":"","sources":["../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ import { useCall, useLocalParticipant, useParticipants, } from '@stream-io/video
|
|
|
5
5
|
import { DefaultParticipantViewUI, ParticipantView, } from '../ParticipantView';
|
|
6
6
|
import { IconButton } from '../../../components';
|
|
7
7
|
import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
|
|
8
|
-
const DefaultParticipantViewUIBar = (
|
|
9
|
-
const DefaultParticipantViewUISpotlight = (
|
|
8
|
+
const DefaultParticipantViewUIBar = () => (_jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
|
|
9
|
+
const DefaultParticipantViewUISpotlight = () => _jsx(DefaultParticipantViewUI, {});
|
|
10
10
|
export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, }) => {
|
|
11
11
|
const call = useCall();
|
|
12
12
|
const [participantInSpotlight, ...otherParticipants] = useParticipants();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACL,SAAS,EACT,kBAAkB,EAElB,iBAAiB,EACjB,aAAa,EACb,SAAS,EACT,uBAAuB,GAExB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,eAAe,GAChB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,wBAAwB,EACxB,eAAe,
|
|
1
|
+
{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Placement } from '@floating-ui/react';
|
|
3
|
-
import { ParticipantViewProps } from './ParticipantView';
|
|
4
|
-
export type ParticipantViewUIProps = Pick<ParticipantViewProps, 'participant'>;
|
|
5
3
|
export type DefaultParticipantViewUIProps = {
|
|
6
4
|
/**
|
|
7
5
|
* Turns on/off the status indicator icons (mute, connection quality, etc...).
|
|
@@ -15,6 +13,6 @@ export type DefaultParticipantViewUIProps = {
|
|
|
15
13
|
* Option to show/hide menu button component
|
|
16
14
|
*/
|
|
17
15
|
showMenuButton?: boolean;
|
|
18
|
-
}
|
|
19
|
-
export declare const DefaultParticipantViewUI: ({
|
|
20
|
-
export declare const ParticipantDetails: ({
|
|
16
|
+
};
|
|
17
|
+
export declare const DefaultParticipantViewUI: ({ indicatorsVisible, menuPlacement, showMenuButton, }: DefaultParticipantViewUIProps) => JSX.Element;
|
|
18
|
+
export declare const ParticipantDetails: ({ indicatorsVisible, }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => JSX.Element;
|
|
@@ -8,19 +8,22 @@ import { Reaction } from '../../../components/Reaction';
|
|
|
8
8
|
import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
|
|
9
9
|
import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
|
|
10
10
|
import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
|
|
11
|
+
import { useParticipantViewContext } from './ParticipantView';
|
|
11
12
|
const ToggleButton = forwardRef((props, ref) => {
|
|
12
13
|
return _jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
|
|
13
14
|
});
|
|
14
|
-
export const DefaultParticipantViewUI = ({
|
|
15
|
+
export const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
|
|
15
16
|
const call = useCall();
|
|
17
|
+
const { participant, participantViewElement } = useParticipantViewContext();
|
|
16
18
|
const { reaction, sessionId } = participant;
|
|
17
|
-
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, {
|
|
19
|
+
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 })] }));
|
|
18
20
|
};
|
|
19
|
-
export const ParticipantDetails = ({
|
|
21
|
+
export const ParticipantDetails = ({ indicatorsVisible = true, }) => {
|
|
22
|
+
const { participant } = useParticipantViewContext();
|
|
20
23
|
const { isDominantSpeaker, isLoggedInUser, connectionQuality, publishedTracks, pinnedAt, sessionId, name, userId, videoStream, } = participant;
|
|
21
24
|
const call = useCall();
|
|
22
25
|
const connectionQualityAsString = !!connectionQuality &&
|
|
23
|
-
|
|
26
|
+
SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
|
|
24
27
|
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
25
28
|
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
26
29
|
const isPinned = !!pinnedAt;
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
1
|
+
{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { ComponentType, ReactElement } from 'react';
|
|
2
2
|
import { StreamVideoLocalParticipant, StreamVideoParticipant } from '@stream-io/video-client';
|
|
3
3
|
import { VideoProps } from '../Video';
|
|
4
|
-
|
|
4
|
+
export type ParticipantViewContextValue = Pick<ParticipantViewProps, 'participant'> & {
|
|
5
|
+
participantViewElement: HTMLDivElement | null;
|
|
6
|
+
};
|
|
7
|
+
export declare const useParticipantViewContext: () => ParticipantViewContextValue;
|
|
5
8
|
export type ParticipantViewProps = {
|
|
6
9
|
/**
|
|
7
10
|
* The participant bound to this component.
|
|
@@ -12,7 +15,7 @@ export type ParticipantViewProps = {
|
|
|
12
15
|
* pass `null` if you wish to not render anything
|
|
13
16
|
* @default DefaultParticipantViewUI
|
|
14
17
|
*/
|
|
15
|
-
ParticipantViewUI?: ComponentType
|
|
18
|
+
ParticipantViewUI?: ComponentType | ReactElement | null;
|
|
16
19
|
/**
|
|
17
20
|
* In supported browsers, this sets the default audio output.
|
|
18
21
|
* The value of this prop should be a valid Audio Output `deviceId`.
|
|
@@ -27,15 +30,12 @@ export type ParticipantViewProps = {
|
|
|
27
30
|
*/
|
|
28
31
|
muteAudio?: boolean;
|
|
29
32
|
/**
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* -
|
|
33
|
-
* -
|
|
34
|
-
* the VideoPlaceholder component.
|
|
35
|
-
*
|
|
36
|
-
* @param element the element ref.
|
|
33
|
+
* An object with set functions meant for exposing the "native" video
|
|
34
|
+
* and video placeholder elements to the integrators.
|
|
35
|
+
* - `refs.setVideoElement`
|
|
36
|
+
* - `refs.setVideoPlaceholderElement`
|
|
37
37
|
*/
|
|
38
|
-
|
|
38
|
+
refs?: VideoProps['refs'];
|
|
39
39
|
/**
|
|
40
40
|
* Custom class applied to the root DOM element.
|
|
41
41
|
*/
|
|
@@ -51,7 +51,7 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
|
|
|
51
51
|
* pass `null` if you wish to not render anything
|
|
52
52
|
* @default DefaultParticipantViewUI
|
|
53
53
|
*/
|
|
54
|
-
ParticipantViewUI?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<
|
|
54
|
+
ParticipantViewUI?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<{}> | null | undefined;
|
|
55
55
|
/**
|
|
56
56
|
* In supported browsers, this sets the default audio output.
|
|
57
57
|
* The value of this prop should be a valid Audio Output `deviceId`.
|
|
@@ -66,15 +66,12 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
|
|
|
66
66
|
*/
|
|
67
67
|
muteAudio?: boolean | undefined;
|
|
68
68
|
/**
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
* -
|
|
72
|
-
* -
|
|
73
|
-
* the VideoPlaceholder component.
|
|
74
|
-
*
|
|
75
|
-
* @param element the element ref.
|
|
69
|
+
* An object with set functions meant for exposing the "native" video
|
|
70
|
+
* and video placeholder elements to the integrators.
|
|
71
|
+
* - `refs.setVideoElement`
|
|
72
|
+
* - `refs.setVideoPlaceholderElement`
|
|
76
73
|
*/
|
|
77
|
-
|
|
74
|
+
refs?: VideoProps['refs'];
|
|
78
75
|
/**
|
|
79
76
|
* Custom class applied to the root DOM element.
|
|
80
77
|
*/
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useContext, useMemo } from 'react';
|
|
3
|
+
import { forwardRef, useState, createContext, } from 'react';
|
|
3
4
|
import clsx from 'clsx';
|
|
4
5
|
import { SfuModels, } from '@stream-io/video-client';
|
|
5
6
|
import { Audio } from '../Audio';
|
|
6
7
|
import { Video } from '../Video';
|
|
7
8
|
import { useTrackElementVisibility } from '../../hooks';
|
|
8
|
-
import { DefaultParticipantViewUI
|
|
9
|
-
import { isComponentType,
|
|
10
|
-
|
|
9
|
+
import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
|
|
10
|
+
import { isComponentType, applyElementToRef } from '../../../utilities';
|
|
11
|
+
const ParticipantViewContext = createContext(undefined);
|
|
12
|
+
export const useParticipantViewContext = () => useContext(ParticipantViewContext);
|
|
13
|
+
export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'video', muteAudio, refs, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
|
|
11
14
|
const { audioStream, isLoggedInUser, isSpeaking, publishedTracks, sessionId, } = participant;
|
|
12
15
|
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
13
16
|
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
@@ -17,13 +20,14 @@ export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'v
|
|
|
17
20
|
sessionId,
|
|
18
21
|
trackedElement,
|
|
19
22
|
});
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
const participantViewContextValue = useMemo(() => ({ participant, participantViewElement: trackedElement }), [participant, trackedElement]);
|
|
24
|
+
return (_jsx("div", Object.assign({ ref: (element) => {
|
|
25
|
+
applyElementToRef(ref, element);
|
|
22
26
|
setTrackedElement(element);
|
|
23
|
-
}, 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
|
|
24
|
-
// mute the local participant, as we don't want to hear ourselves
|
|
25
|
-
, {
|
|
27
|
+
}, 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: _jsxs(ParticipantViewContext.Provider, Object.assign({ value: participantViewContextValue }, { children: [_jsx(Audio
|
|
26
28
|
// mute the local participant, as we don't want to hear ourselves
|
|
27
|
-
|
|
29
|
+
, {
|
|
30
|
+
// mute the local participant, as we don't want to hear ourselves
|
|
31
|
+
muted: isLoggedInUser || muteAudio, sinkId: sinkId, audioStream: audioStream }), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoKind, refs: refs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] })) })));
|
|
28
32
|
});
|
|
29
33
|
//# sourceMappingURL=ParticipantView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,UAAU,EAEV,QAAQ,EAER,aAAa,GACd,MAAM,OAAO,CAAC;AACf,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,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AASxE,MAAM,sBAAsB,GAAG,aAAa,CAE1C,SAAS,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAC5C,UAAU,CAAC,sBAAsB,CAAgC,CAAC;AA6CpE,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,CACE,EACE,WAAW,EACX,MAAM,EACN,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GAAG,wBAAyC,GAC9D,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,iEAAiE;IACjE,yBAAyB,CAAC;QACxB,SAAS;QACT,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,2BAA2B,GAAG,OAAO,CACzC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,sBAAsB,EAAE,cAAc,EAAE,CAAC,EAC/D,CAAC,WAAW,EAAE,cAAc,CAAC,CAC9B,CAAC;IAEF,OAAO,CACL,4BACE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAChC,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,gBAED,MAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,2BAA2B,iBACjE,KAAC,KAAK;gBACJ,iEAAiE;;oBAAjE,iEAAiE;oBACjE,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,IAAI,EAAE,IAAI,EACV,QAAQ,SACR,EACD,eAAe,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACpC,KAAC,iBAAiB,KAAG,CACtB,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,KAC+B,IAC9B,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
|
|
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { forwardRef, useEffect, useState } from 'react';
|
|
14
14
|
import { Browsers } from '@stream-io/video-client';
|
|
15
|
-
import {
|
|
15
|
+
import { applyElementToRef } from '../../../utilities';
|
|
16
16
|
/**
|
|
17
17
|
* @description Extends video element with `stream` property
|
|
18
18
|
* (`srcObject`) to reactively handle stream changes
|
|
@@ -41,7 +41,7 @@ export const BaseVideo = forwardRef((_a, ref) => {
|
|
|
41
41
|
};
|
|
42
42
|
}, [stream, videoElement]);
|
|
43
43
|
return (_jsx("video", Object.assign({ autoPlay: true, playsInline: true }, rest, { ref: (element) => {
|
|
44
|
-
|
|
44
|
+
applyElementToRef(ref, element);
|
|
45
45
|
setVideoElement(element);
|
|
46
46
|
} })));
|
|
47
47
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMvD;;;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,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;YAChC,eAAe,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
|
|
@@ -4,7 +4,10 @@ import { VideoPlaceholderProps } from './DefaultVideoPlaceholder';
|
|
|
4
4
|
export type VideoProps = ComponentPropsWithoutRef<'video'> & {
|
|
5
5
|
kind: 'video' | 'screen';
|
|
6
6
|
participant: StreamVideoParticipant;
|
|
7
|
-
setVideoElementRef?: (element: HTMLElement | null) => void;
|
|
8
7
|
VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
|
|
8
|
+
refs?: {
|
|
9
|
+
setVideoElement?: (element: HTMLVideoElement | null) => void;
|
|
10
|
+
setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
|
|
11
|
+
};
|
|
9
12
|
};
|
|
10
|
-
export declare const Video: ({ kind, participant, className,
|
|
13
|
+
export declare const Video: ({ kind, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps) => JSX.Element | null;
|
|
@@ -17,7 +17,7 @@ import { DefaultVideoPlaceholder, } from './DefaultVideoPlaceholder';
|
|
|
17
17
|
import { BaseVideo } from './BaseVideo';
|
|
18
18
|
import { useCall } from '@stream-io/video-react-bindings';
|
|
19
19
|
export const Video = (_a) => {
|
|
20
|
-
var { kind, participant, className,
|
|
20
|
+
var { kind, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs } = _a, rest = __rest(_a, ["kind", "participant", "className", "VideoPlaceholder", "refs"]);
|
|
21
21
|
const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLoggedInUser, userId, } = participant;
|
|
22
22
|
const call = useCall();
|
|
23
23
|
const [videoElement, setVideoElement] = useState(null);
|
|
@@ -145,9 +145,10 @@ export const Video = (_a) => {
|
|
|
145
145
|
'str-video__video--tall': !isWideMode,
|
|
146
146
|
'str-video__video--mirror': isLoggedInUser && kind === 'video',
|
|
147
147
|
'str-video__video--screen-share': kind === 'screen',
|
|
148
|
-
}), "data-user-id": userId, "data-session-id": sessionId, ref: (
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
148
|
+
}), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
|
|
149
|
+
var _a;
|
|
150
|
+
setVideoElement(element);
|
|
151
|
+
(_a = refs === null || refs === void 0 ? void 0 : refs.setVideoElement) === null || _a === void 0 ? void 0 : _a.call(refs, element);
|
|
152
|
+
} })), displayPlaceholder && (_jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs === null || refs === void 0 ? void 0 : refs.setVideoPlaceholderElement }))] }));
|
|
152
153
|
};
|
|
153
154
|
//# sourceMappingURL=Video.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/Video.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAGL,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EACL,YAAY,EACZ,SAAS,EAET,eAAe,GAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EACL,uBAAuB,GAExB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/Video.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,7 +8,10 @@ export const useTrackElementVisibility = ({ trackedElement, viewportTracker: pro
|
|
|
8
8
|
if (!trackedElement || !viewportTracker || !call)
|
|
9
9
|
return;
|
|
10
10
|
const unobserve = viewportTracker.observe(trackedElement, (entry) => {
|
|
11
|
-
call.state.updateParticipant(sessionId, (p) => (Object.assign(Object.assign({}, p), { viewportVisibilityState:
|
|
11
|
+
call.state.updateParticipant(sessionId, (p) => (Object.assign(Object.assign({}, p), { viewportVisibilityState:
|
|
12
|
+
// observer triggers when element is "moved" to be a fullscreen element
|
|
13
|
+
// keep it VISIBLE if that happens to prevent fullscreen with placeholder
|
|
14
|
+
entry.isIntersecting || document.fullscreenElement === trackedElement
|
|
12
15
|
? VisibilityState.VISIBLE
|
|
13
16
|
: VisibilityState.INVISIBLE })));
|
|
14
17
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTrackElementVisibility.js","sourceRoot":"","sources":["../../../../src/core/hooks/useTrackElementVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAmB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,eAAe,EAAE,oBAAoB,EACrC,SAAS,GAKV,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,eAAe,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI;YAAE,OAAO;QAEzD,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YAClE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB,
|
|
1
|
+
{"version":3,"file":"useTrackElementVisibility.js","sourceRoot":"","sources":["../../../../src/core/hooks/useTrackElementVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAmB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,eAAe,EAAE,oBAAoB,EACrC,SAAS,GAKV,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,eAAe,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI;YAAE,OAAO;QAEzD,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YAClE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB;gBACrB,uEAAuE;gBACvE,yEAAyE;gBACzE,KAAK,CAAC,cAAc,IAAI,QAAQ,CAAC,iBAAiB,KAAK,cAAc;oBACnE,CAAC,CAAC,eAAe,CAAC,OAAO;oBACzB,CAAC,CAAC,eAAe,CAAC,SAAS,IAC/B,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,SAAS,EAAE,CAAC;YACZ,iDAAiD;YACjD,qDAAqD;YACrD,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB,EAAE,eAAe,CAAC,OAAO,IAChD,CAAC,CAAC;QACN,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export const
|
|
1
|
+
export const applyElementToRef = (ref, element) => {
|
|
2
2
|
if (!ref)
|
|
3
3
|
return;
|
|
4
4
|
if (typeof ref === 'function')
|
|
5
5
|
return ref(element);
|
|
6
6
|
ref.current = element;
|
|
7
7
|
};
|
|
8
|
-
//# sourceMappingURL=
|
|
8
|
+
//# sourceMappingURL=applyElementToRef.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"applyElementToRef.js","sourceRoot":"","sources":["../../../src/utilities/applyElementToRef.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAAoB,EACpB,OAAU,EACV,EAAE;IACF,IAAI,CAAC,GAAG;QAAE,OAAO;IAEjB,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;IAEnD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxB,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
|
package/package.json
CHANGED
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
"@floating-ui/react": "^0.22.0",
|
|
26
26
|
"@nivo/core": "^0.80.0",
|
|
27
27
|
"@nivo/line": "^0.80.0",
|
|
28
|
-
"@stream-io/i18n": "^0.0.1-alpha.
|
|
29
|
-
"@stream-io/video-client": "^0.0.1-alpha.
|
|
30
|
-
"@stream-io/video-react-bindings": "^0.0.1-alpha.
|
|
28
|
+
"@stream-io/i18n": "^0.0.1-alpha.62",
|
|
29
|
+
"@stream-io/video-client": "^0.0.1-alpha.186",
|
|
30
|
+
"@stream-io/video-react-bindings": "^0.0.1-alpha.73",
|
|
31
31
|
"clsx": "^1.2.1",
|
|
32
32
|
"rxjs": "~7.8.1"
|
|
33
33
|
},
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"react-dom": "^18.0.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@stream-io/video-styling": "^0.0.1-alpha.
|
|
39
|
+
"@stream-io/video-styling": "^0.0.1-alpha.58",
|
|
40
40
|
"@types/rimraf": "^3.0.2",
|
|
41
41
|
"react": "^18.2.0",
|
|
42
42
|
"react-dom": "^18.2.0",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"typedoc": "^0.24.7",
|
|
46
46
|
"typescript": "^4.9.5"
|
|
47
47
|
},
|
|
48
|
-
"version": "0.0.1-alpha.
|
|
48
|
+
"version": "0.0.1-alpha.80"
|
|
49
49
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
-
import { ComponentProps, ComponentType, forwardRef } from 'react';
|
|
2
|
+
import { ComponentProps, ComponentType, forwardRef, useState } from 'react';
|
|
3
3
|
import {
|
|
4
4
|
Restricted,
|
|
5
5
|
useCall,
|
|
@@ -119,9 +119,14 @@ const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
|
|
|
119
119
|
|
|
120
120
|
export const ParticipantActionsContextMenu = ({
|
|
121
121
|
participant,
|
|
122
|
+
participantViewElement,
|
|
122
123
|
}: {
|
|
123
124
|
participant: StreamVideoParticipant;
|
|
125
|
+
participantViewElement?: HTMLDivElement | null;
|
|
124
126
|
}) => {
|
|
127
|
+
const [fullscreenModeOn, setFullscreenModeOn] = useState(
|
|
128
|
+
!!document.fullscreenElement,
|
|
129
|
+
);
|
|
125
130
|
const activeCall = useCall();
|
|
126
131
|
|
|
127
132
|
const blockUser = () => {
|
|
@@ -168,6 +173,19 @@ export const ParticipantActionsContextMenu = ({
|
|
|
168
173
|
);
|
|
169
174
|
};
|
|
170
175
|
|
|
176
|
+
const toggleFullscreenMode = () => {
|
|
177
|
+
if (!fullscreenModeOn)
|
|
178
|
+
return participantViewElement
|
|
179
|
+
?.requestFullscreen()
|
|
180
|
+
.then(() => setFullscreenModeOn(true))
|
|
181
|
+
.catch(console.error);
|
|
182
|
+
|
|
183
|
+
document
|
|
184
|
+
.exitFullscreen()
|
|
185
|
+
.catch(console.error)
|
|
186
|
+
.finally(() => setFullscreenModeOn(false));
|
|
187
|
+
};
|
|
188
|
+
|
|
171
189
|
return (
|
|
172
190
|
<GenericMenu>
|
|
173
191
|
<GenericMenuButtonItem onClick={toggleParticipantPinnedAt}>
|
|
@@ -214,6 +232,9 @@ export const ParticipantActionsContextMenu = ({
|
|
|
214
232
|
Mute audio
|
|
215
233
|
</GenericMenuButtonItem>
|
|
216
234
|
</Restricted>
|
|
235
|
+
<GenericMenuButtonItem onClick={toggleFullscreenMode}>
|
|
236
|
+
{fullscreenModeOn ? 'Leave' : 'Enter'} fullscreen
|
|
237
|
+
</GenericMenuButtonItem>
|
|
217
238
|
<Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
|
|
218
239
|
<GenericMenuButtonItem
|
|
219
240
|
onClick={grantPermission(OwnCapability.SEND_AUDIO)}
|
|
@@ -20,7 +20,6 @@ import {
|
|
|
20
20
|
DefaultParticipantViewUI,
|
|
21
21
|
ParticipantView,
|
|
22
22
|
ParticipantViewProps,
|
|
23
|
-
ParticipantViewUIProps,
|
|
24
23
|
} from '../ParticipantView';
|
|
25
24
|
import { IconButton } from '../../../components';
|
|
26
25
|
import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
|
|
@@ -30,17 +29,11 @@ export type SpeakerLayoutProps = {
|
|
|
30
29
|
ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
|
|
31
30
|
} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
|
|
32
31
|
|
|
33
|
-
const DefaultParticipantViewUIBar = (
|
|
34
|
-
|
|
35
|
-
}: ParticipantViewUIProps) => (
|
|
36
|
-
<DefaultParticipantViewUI participant={participant} menuPlacement="top-end" />
|
|
32
|
+
const DefaultParticipantViewUIBar = () => (
|
|
33
|
+
<DefaultParticipantViewUI menuPlacement="top-end" />
|
|
37
34
|
);
|
|
38
35
|
|
|
39
|
-
const DefaultParticipantViewUISpotlight = (
|
|
40
|
-
participant,
|
|
41
|
-
}: ParticipantViewUIProps) => (
|
|
42
|
-
<DefaultParticipantViewUI participant={participant} />
|
|
43
|
-
);
|
|
36
|
+
const DefaultParticipantViewUISpotlight = () => <DefaultParticipantViewUI />;
|
|
44
37
|
|
|
45
38
|
export const SpeakerLayout = ({
|
|
46
39
|
ParticipantViewUIBar = DefaultParticipantViewUIBar,
|
|
@@ -12,13 +12,11 @@ import {
|
|
|
12
12
|
ToggleMenuButtonProps,
|
|
13
13
|
} from '../../../components';
|
|
14
14
|
import { Reaction } from '../../../components/Reaction';
|
|
15
|
-
import { ParticipantViewProps } from './ParticipantView';
|
|
16
15
|
|
|
17
16
|
import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
|
|
18
17
|
import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
|
|
19
18
|
import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
|
|
20
|
-
|
|
21
|
-
export type ParticipantViewUIProps = Pick<ParticipantViewProps, 'participant'>;
|
|
19
|
+
import { useParticipantViewContext } from './ParticipantView';
|
|
22
20
|
|
|
23
21
|
export type DefaultParticipantViewUIProps = {
|
|
24
22
|
/**
|
|
@@ -33,7 +31,7 @@ export type DefaultParticipantViewUIProps = {
|
|
|
33
31
|
* Option to show/hide menu button component
|
|
34
32
|
*/
|
|
35
33
|
showMenuButton?: boolean;
|
|
36
|
-
}
|
|
34
|
+
};
|
|
37
35
|
|
|
38
36
|
const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
|
|
39
37
|
(props, ref) => {
|
|
@@ -42,12 +40,12 @@ const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
|
|
|
42
40
|
);
|
|
43
41
|
|
|
44
42
|
export const DefaultParticipantViewUI = ({
|
|
45
|
-
participant,
|
|
46
43
|
indicatorsVisible = true,
|
|
47
44
|
menuPlacement = 'bottom-end',
|
|
48
45
|
showMenuButton = true,
|
|
49
46
|
}: DefaultParticipantViewUIProps) => {
|
|
50
47
|
const call = useCall()!;
|
|
48
|
+
const { participant, participantViewElement } = useParticipantViewContext();
|
|
51
49
|
const { reaction, sessionId } = participant;
|
|
52
50
|
|
|
53
51
|
return (
|
|
@@ -58,27 +56,24 @@ export const DefaultParticipantViewUI = ({
|
|
|
58
56
|
placement={menuPlacement}
|
|
59
57
|
ToggleButton={ToggleButton}
|
|
60
58
|
>
|
|
61
|
-
<ParticipantActionsContextMenu
|
|
59
|
+
<ParticipantActionsContextMenu
|
|
60
|
+
participantViewElement={participantViewElement}
|
|
61
|
+
participant={participant}
|
|
62
|
+
/>
|
|
62
63
|
</MenuToggle>
|
|
63
64
|
)}
|
|
64
65
|
{reaction && (
|
|
65
66
|
<Reaction reaction={reaction} sessionId={sessionId} call={call} />
|
|
66
67
|
)}
|
|
67
|
-
<ParticipantDetails
|
|
68
|
-
participant={participant}
|
|
69
|
-
indicatorsVisible={indicatorsVisible}
|
|
70
|
-
/>
|
|
68
|
+
<ParticipantDetails indicatorsVisible={indicatorsVisible} />
|
|
71
69
|
</>
|
|
72
70
|
);
|
|
73
71
|
};
|
|
74
72
|
|
|
75
73
|
export const ParticipantDetails = ({
|
|
76
|
-
participant,
|
|
77
74
|
indicatorsVisible = true,
|
|
78
|
-
}: Pick<
|
|
79
|
-
|
|
80
|
-
'participant' | 'indicatorsVisible'
|
|
81
|
-
>) => {
|
|
75
|
+
}: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => {
|
|
76
|
+
const { participant } = useParticipantViewContext();
|
|
82
77
|
const {
|
|
83
78
|
isDominantSpeaker,
|
|
84
79
|
isLoggedInUser,
|
|
@@ -94,7 +89,7 @@ export const ParticipantDetails = ({
|
|
|
94
89
|
|
|
95
90
|
const connectionQualityAsString =
|
|
96
91
|
!!connectionQuality &&
|
|
97
|
-
|
|
92
|
+
SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
|
|
98
93
|
|
|
99
94
|
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
100
95
|
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useContext, useMemo } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
forwardRef,
|
|
4
|
+
ComponentType,
|
|
5
|
+
useState,
|
|
6
|
+
ReactElement,
|
|
7
|
+
createContext,
|
|
8
|
+
} from 'react';
|
|
2
9
|
import clsx from 'clsx';
|
|
3
10
|
import {
|
|
4
11
|
SfuModels,
|
|
@@ -9,11 +16,22 @@ import {
|
|
|
9
16
|
import { Audio } from '../Audio';
|
|
10
17
|
import { Video, VideoProps } from '../Video';
|
|
11
18
|
import { useTrackElementVisibility } from '../../hooks';
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
|
|
20
|
+
import { isComponentType, applyElementToRef } from '../../../utilities';
|
|
21
|
+
|
|
22
|
+
export type ParticipantViewContextValue = Pick<
|
|
23
|
+
ParticipantViewProps,
|
|
24
|
+
'participant'
|
|
25
|
+
> & {
|
|
26
|
+
participantViewElement: HTMLDivElement | null;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const ParticipantViewContext = createContext<
|
|
30
|
+
ParticipantViewContextValue | undefined
|
|
31
|
+
>(undefined);
|
|
32
|
+
|
|
33
|
+
export const useParticipantViewContext = () =>
|
|
34
|
+
useContext(ParticipantViewContext) as ParticipantViewContextValue;
|
|
17
35
|
|
|
18
36
|
export type ParticipantViewProps = {
|
|
19
37
|
/**
|
|
@@ -26,10 +44,7 @@ export type ParticipantViewProps = {
|
|
|
26
44
|
* pass `null` if you wish to not render anything
|
|
27
45
|
* @default DefaultParticipantViewUI
|
|
28
46
|
*/
|
|
29
|
-
ParticipantViewUI?:
|
|
30
|
-
| ComponentType<ParticipantViewUIProps>
|
|
31
|
-
| ReactElement
|
|
32
|
-
| null;
|
|
47
|
+
ParticipantViewUI?: ComponentType | ReactElement | null;
|
|
33
48
|
|
|
34
49
|
/**
|
|
35
50
|
* In supported browsers, this sets the default audio output.
|
|
@@ -48,15 +63,12 @@ export type ParticipantViewProps = {
|
|
|
48
63
|
muteAudio?: boolean;
|
|
49
64
|
|
|
50
65
|
/**
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
* -
|
|
54
|
-
* -
|
|
55
|
-
* the VideoPlaceholder component.
|
|
56
|
-
*
|
|
57
|
-
* @param element the element ref.
|
|
66
|
+
* An object with set functions meant for exposing the "native" video
|
|
67
|
+
* and video placeholder elements to the integrators.
|
|
68
|
+
* - `refs.setVideoElement`
|
|
69
|
+
* - `refs.setVideoPlaceholderElement`
|
|
58
70
|
*/
|
|
59
|
-
|
|
71
|
+
refs?: VideoProps['refs'];
|
|
60
72
|
|
|
61
73
|
/**
|
|
62
74
|
* Custom class applied to the root DOM element.
|
|
@@ -71,10 +83,10 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
|
|
|
71
83
|
sinkId,
|
|
72
84
|
videoKind = 'video',
|
|
73
85
|
muteAudio,
|
|
74
|
-
|
|
86
|
+
refs,
|
|
75
87
|
className,
|
|
76
88
|
VideoPlaceholder,
|
|
77
|
-
ParticipantViewUI = DefaultParticipantViewUI as ComponentType
|
|
89
|
+
ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
|
|
78
90
|
},
|
|
79
91
|
ref,
|
|
80
92
|
) => {
|
|
@@ -99,10 +111,15 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
|
|
|
99
111
|
trackedElement,
|
|
100
112
|
});
|
|
101
113
|
|
|
114
|
+
const participantViewContextValue = useMemo(
|
|
115
|
+
() => ({ participant, participantViewElement: trackedElement }),
|
|
116
|
+
[participant, trackedElement],
|
|
117
|
+
);
|
|
118
|
+
|
|
102
119
|
return (
|
|
103
120
|
<div
|
|
104
121
|
ref={(element) => {
|
|
105
|
-
|
|
122
|
+
applyElementToRef(ref, element);
|
|
106
123
|
setTrackedElement(element);
|
|
107
124
|
}}
|
|
108
125
|
className={clsx(
|
|
@@ -113,24 +130,26 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
|
|
|
113
130
|
className,
|
|
114
131
|
)}
|
|
115
132
|
>
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
133
|
+
<ParticipantViewContext.Provider value={participantViewContextValue}>
|
|
134
|
+
<Audio
|
|
135
|
+
// mute the local participant, as we don't want to hear ourselves
|
|
136
|
+
muted={isLoggedInUser || muteAudio}
|
|
137
|
+
sinkId={sinkId}
|
|
138
|
+
audioStream={audioStream}
|
|
139
|
+
/>
|
|
140
|
+
<Video
|
|
141
|
+
VideoPlaceholder={VideoPlaceholder}
|
|
142
|
+
participant={participant}
|
|
143
|
+
kind={videoKind}
|
|
144
|
+
refs={refs}
|
|
145
|
+
autoPlay
|
|
146
|
+
/>
|
|
147
|
+
{isComponentType(ParticipantViewUI) ? (
|
|
148
|
+
<ParticipantViewUI />
|
|
149
|
+
) : (
|
|
150
|
+
ParticipantViewUI
|
|
151
|
+
)}
|
|
152
|
+
</ParticipantViewContext.Provider>
|
|
134
153
|
</div>
|
|
135
154
|
);
|
|
136
155
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithRef, forwardRef, useEffect, useState } from 'react';
|
|
2
2
|
import { Browsers } from '@stream-io/video-client';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { applyElementToRef } from '../../../utilities';
|
|
5
5
|
|
|
6
6
|
export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
|
|
7
7
|
stream?: MediaStream;
|
|
@@ -44,7 +44,7 @@ export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
|
|
|
44
44
|
playsInline
|
|
45
45
|
{...rest}
|
|
46
46
|
ref={(element) => {
|
|
47
|
-
|
|
47
|
+
applyElementToRef(ref, element);
|
|
48
48
|
setVideoElement(element);
|
|
49
49
|
}}
|
|
50
50
|
/>
|
|
@@ -23,16 +23,19 @@ import { useCall } from '@stream-io/video-react-bindings';
|
|
|
23
23
|
export type VideoProps = ComponentPropsWithoutRef<'video'> & {
|
|
24
24
|
kind: 'video' | 'screen';
|
|
25
25
|
participant: StreamVideoParticipant;
|
|
26
|
-
setVideoElementRef?: (element: HTMLElement | null) => void;
|
|
27
26
|
VideoPlaceholder?: ComponentType<VideoPlaceholderProps>;
|
|
27
|
+
refs?: {
|
|
28
|
+
setVideoElement?: (element: HTMLVideoElement | null) => void;
|
|
29
|
+
setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
|
|
30
|
+
};
|
|
28
31
|
};
|
|
29
32
|
|
|
30
33
|
export const Video = ({
|
|
31
34
|
kind,
|
|
32
35
|
participant,
|
|
33
36
|
className,
|
|
34
|
-
setVideoElementRef,
|
|
35
37
|
VideoPlaceholder = DefaultVideoPlaceholder,
|
|
38
|
+
refs,
|
|
36
39
|
...rest
|
|
37
40
|
}: VideoProps) => {
|
|
38
41
|
const {
|
|
@@ -232,16 +235,16 @@ export const Video = ({
|
|
|
232
235
|
})}
|
|
233
236
|
data-user-id={userId}
|
|
234
237
|
data-session-id={sessionId}
|
|
235
|
-
ref={(
|
|
236
|
-
setVideoElement(
|
|
237
|
-
|
|
238
|
+
ref={(element) => {
|
|
239
|
+
setVideoElement(element);
|
|
240
|
+
refs?.setVideoElement?.(element);
|
|
238
241
|
}}
|
|
239
242
|
/>
|
|
240
243
|
{displayPlaceholder && (
|
|
241
244
|
<VideoPlaceholder
|
|
242
245
|
style={{ position: 'absolute' }}
|
|
243
246
|
participant={participant}
|
|
244
|
-
ref={
|
|
247
|
+
ref={refs?.setVideoPlaceholderElement}
|
|
245
248
|
/>
|
|
246
249
|
)}
|
|
247
250
|
</>
|
|
@@ -21,9 +21,12 @@ export const useTrackElementVisibility = <T extends HTMLElement>({
|
|
|
21
21
|
const unobserve = viewportTracker.observe(trackedElement, (entry) => {
|
|
22
22
|
call.state.updateParticipant(sessionId, (p) => ({
|
|
23
23
|
...p,
|
|
24
|
-
viewportVisibilityState:
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
viewportVisibilityState:
|
|
25
|
+
// observer triggers when element is "moved" to be a fullscreen element
|
|
26
|
+
// keep it VISIBLE if that happens to prevent fullscreen with placeholder
|
|
27
|
+
entry.isIntersecting || document.fullscreenElement === trackedElement
|
|
28
|
+
? VisibilityState.VISIBLE
|
|
29
|
+
: VisibilityState.INVISIBLE,
|
|
27
30
|
}));
|
|
28
31
|
});
|
|
29
32
|
|
package/src/utilities/index.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"applyElementRef.js","sourceRoot":"","sources":["../../../src/utilities/applyElementRef.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAoB,EACpB,OAAU,EACV,EAAE;IACF,IAAI,CAAC,GAAG;QAAE,OAAO;IAEjB,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;IAEnD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxB,CAAC,CAAC"}
|