@stream-io/video-react-sdk 0.0.32 → 0.0.33
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/core/components/Audio/Audio.js +0 -2
- package/dist/src/core/components/Audio/Audio.js.map +1 -1
- package/dist/src/core/components/CallLayout/PaginatedGridLayout.js +2 -3
- package/dist/src/core/components/CallLayout/PaginatedGridLayout.js.map +1 -1
- package/dist/src/core/components/CallLayout/SpeakerLayout.js +2 -3
- package/dist/src/core/components/CallLayout/SpeakerLayout.js.map +1 -1
- package/dist/src/core/components/ParticipantView/ParticipantView.d.ts +0 -12
- package/dist/src/core/components/ParticipantView/ParticipantView.js +4 -2
- package/dist/src/core/components/ParticipantView/ParticipantView.js.map +1 -1
- package/package.json +4 -4
- package/src/core/components/Audio/Audio.tsx +0 -2
- package/src/core/components/CallLayout/PaginatedGridLayout.tsx +0 -3
- package/src/core/components/CallLayout/SpeakerLayout.tsx +1 -9
- package/src/core/components/ParticipantView/ParticipantView.tsx +3 -9
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.33](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.32...@stream-io/video-react-sdk-0.0.33) (2023-06-16)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `@stream-io/i18n` updated to version `0.0.4`
|
|
10
|
+
* `@stream-io/video-client` updated to version `0.0.1`
|
|
11
|
+
* `@stream-io/video-react-bindings` updated to version `0.0.16`
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* Logging ([#654](https://github.com/GetStream/stream-video-js/issues/654)) ([30fc8f2](https://github.com/GetStream/stream-video-js/commit/30fc8f28e2f5829247256f24b040ea4a10336186))
|
|
16
|
+
* Remove unnecessary sinkId prop from ParticipantView ([#656](https://github.com/GetStream/stream-video-js/issues/656)) ([ba5ac37](https://github.com/GetStream/stream-video-js/commit/ba5ac3758afb316e9a77f677eeba6bbc46ed0094))
|
|
17
|
+
|
|
5
18
|
### [0.0.32](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.31...@stream-io/video-react-sdk-0.0.32) (2023-06-16)
|
|
6
19
|
|
|
7
20
|
### Dependency Updates
|
|
@@ -19,7 +19,6 @@ export const Audio = (_a) => {
|
|
|
19
19
|
const $el = audioRef.current;
|
|
20
20
|
if (!($el && audioStream))
|
|
21
21
|
return;
|
|
22
|
-
console.log(`Attaching audio stream`, $el, audioStream);
|
|
23
22
|
$el.srcObject = audioStream;
|
|
24
23
|
return () => {
|
|
25
24
|
$el.srcObject = null;
|
|
@@ -29,7 +28,6 @@ export const Audio = (_a) => {
|
|
|
29
28
|
const $el = audioRef.current;
|
|
30
29
|
if (!$el || !sinkId)
|
|
31
30
|
return;
|
|
32
|
-
console.log(`Setting sinkId`, $el, sinkId);
|
|
33
31
|
if ($el.setSinkId) {
|
|
34
32
|
$el.setSinkId(sinkId);
|
|
35
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Audio.js","sourceRoot":"","sources":["../../../../../src/core/components/Audio/Audio.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAGL,SAAS,EACT,MAAM,GACP,MAAM,OAAO,CAAC;AAWf,4BAA4B;AAC5B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAA4C,EAAE,EAAE;QAAhD,EAAE,WAAW,EAAE,MAAM,OAAuB,EAAlB,IAAI,cAA9B,yBAAgC,CAAF;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC;YAAE,OAAO;QAElC,
|
|
1
|
+
{"version":3,"file":"Audio.js","sourceRoot":"","sources":["../../../../../src/core/components/Audio/Audio.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAGL,SAAS,EACT,MAAM,GACP,MAAM,OAAO,CAAC;AAWf,4BAA4B;AAC5B,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAA4C,EAAE,EAAE;QAAhD,EAAE,WAAW,EAAE,MAAM,OAAuB,EAAlB,IAAI,cAA9B,yBAAgC,CAAF;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,CAAC,GAAG,IAAI,WAAW,CAAC;YAAE,OAAO;QAElC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;QAC5B,OAAO,GAAG,EAAE;YACV,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM;YAAE,OAAO;QAE5B,IAAK,GAAW,CAAC,SAAS,EAAE;YACzB,GAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SAChC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,8BAAO,QAAQ,QAAC,GAAG,EAAE,QAAQ,IAAM,IAAI,EAAI,CAAC;AACrD,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useMemo, useState } from 'react';
|
|
3
|
-
import { useCall,
|
|
3
|
+
import { useCall, useParticipants, useRemoteParticipants, } from '@stream-io/video-react-bindings';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { ParticipantView, DefaultParticipantViewUI, } from '../ParticipantView';
|
|
6
6
|
import { Audio } from '../Audio';
|
|
@@ -17,7 +17,6 @@ const PaginatedGridLayoutGroup = ({ group, VideoPlaceholder, ParticipantViewUI,
|
|
|
17
17
|
export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalParticipant = false, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }) => {
|
|
18
18
|
const [page, setPage] = useState(0);
|
|
19
19
|
const call = useCall();
|
|
20
|
-
const localParticipant = useLocalParticipant();
|
|
21
20
|
const participants = useParticipants();
|
|
22
21
|
// used to render audio elements
|
|
23
22
|
const remoteParticipants = useRemoteParticipants();
|
|
@@ -33,6 +32,6 @@ export const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalPartic
|
|
|
33
32
|
const selectedGroup = participantGroups[page];
|
|
34
33
|
if (!call)
|
|
35
34
|
return null;
|
|
36
|
-
return (_jsxs(_Fragment, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { muted: false, audioStream: participant.audioStream
|
|
35
|
+
return (_jsxs(_Fragment, { children: [remoteParticipants.map((participant) => (_jsx(Audio, { muted: false, audioStream: participant.audioStream }, 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)) }))] })) }))] }));
|
|
37
36
|
};
|
|
38
37
|
//# sourceMappingURL=PaginatedGridLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginatedGridLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,OAAO,EACP,
|
|
1
|
+
{"version":3,"file":"PaginatedGridLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { CallTypes, combineComparators, defaultSortPreset, screenSharing, SfuModels, speakerLayoutSortPreset, } from '@stream-io/video-client';
|
|
4
|
-
import { useCall,
|
|
4
|
+
import { useCall, useParticipants } from '@stream-io/video-react-bindings';
|
|
5
5
|
import { DefaultParticipantViewUI, ParticipantView, } from '../ParticipantView';
|
|
6
6
|
import { IconButton } from '../../../components';
|
|
7
7
|
import { useHorizontalScrollPosition, useVerticalScrollPosition, } from '../../../hooks';
|
|
@@ -13,7 +13,6 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
|
|
|
13
13
|
const [participantInSpotlight, ...otherParticipants] = useParticipants();
|
|
14
14
|
const [scrollWrapper, setScrollWrapper] = useState(null);
|
|
15
15
|
const isOneOnOneCall = otherParticipants.length === 1;
|
|
16
|
-
const localParticipant = useLocalParticipant();
|
|
17
16
|
useEffect(() => {
|
|
18
17
|
if (!scrollWrapper || !call)
|
|
19
18
|
return;
|
|
@@ -40,7 +39,7 @@ export const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIB
|
|
|
40
39
|
return null;
|
|
41
40
|
const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
|
|
42
41
|
return (_jsx("div", Object.assign({ className: "str-video__speaker-layout__wrapper" }, { children: _jsxs("div", Object.assign({ className: clsx('str-video__speaker-layout', participantsBarPosition &&
|
|
43
|
-
`str-video__speaker-layout--variant-${participantsBarPosition}`) }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: isSpeakerScreenSharing, videoKind: isSpeakerScreenSharing ? 'screen' : 'video',
|
|
42
|
+
`str-video__speaker-layout--variant-${participantsBarPosition}`) }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__spotlight" }, { children: participantInSpotlight && (_jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: isSpeakerScreenSharing, videoKind: isSpeakerScreenSharing ? 'screen' : 'video', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) })), otherParticipants.length > 0 && participantsBarPosition && (_jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-buttons-wrapper" }, { children: [_jsx("div", Object.assign({ className: "str-video__speaker-layout__participants-bar-wrapper", ref: setScrollWrapper }, { children: _jsxs("div", Object.assign({ className: "str-video__speaker-layout__participants-bar" }, { children: [isSpeakerScreenSharing && (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participantInSpotlight.sessionId)), otherParticipants.map((participant) => (_jsx("div", Object.assign({ className: "str-video__speaker-layout__participant-tile" }, { children: _jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder }) }), participant.sessionId)))] })) })), (participantsBarPosition === 'left' ||
|
|
44
43
|
participantsBarPosition === 'right') && (_jsx(VerticalScrollButtons, { scrollWrapper: scrollWrapper })), (participantsBarPosition === 'top' ||
|
|
45
44
|
participantsBarPosition === 'bottom') && (_jsx(HorizontalScrollButtons, { scrollWrapper: scrollWrapper }))] })))] })) })));
|
|
46
45
|
};
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"SpeakerLayout.js","sourceRoot":"","sources":["../../../../../src/core/components/CallLayout/SpeakerLayout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,12 +18,6 @@ export type ParticipantViewProps = {
|
|
|
18
18
|
* @default DefaultParticipantViewUI
|
|
19
19
|
*/
|
|
20
20
|
ParticipantViewUI?: ComponentType | ReactElement | null;
|
|
21
|
-
/**
|
|
22
|
-
* In supported browsers, this sets the default audio output.
|
|
23
|
-
* The value of this prop should be a valid audio output device ID.
|
|
24
|
-
* You can set this using `audioOutputDeviceId` field of the local participant.
|
|
25
|
-
*/
|
|
26
|
-
sinkId?: string;
|
|
27
21
|
/**
|
|
28
22
|
* The kind of video stream to play for the given participant.
|
|
29
23
|
*/
|
|
@@ -55,12 +49,6 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
|
|
|
55
49
|
* @default DefaultParticipantViewUI
|
|
56
50
|
*/
|
|
57
51
|
ParticipantViewUI?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<{}> | null | undefined;
|
|
58
|
-
/**
|
|
59
|
-
* In supported browsers, this sets the default audio output.
|
|
60
|
-
* The value of this prop should be a valid audio output device ID.
|
|
61
|
-
* You can set this using `audioOutputDeviceId` field of the local participant.
|
|
62
|
-
*/
|
|
63
|
-
sinkId?: string | undefined;
|
|
64
52
|
/**
|
|
65
53
|
* The kind of video stream to play for the given participant.
|
|
66
54
|
*/
|
|
@@ -8,10 +8,12 @@ import { Video } from '../Video';
|
|
|
8
8
|
import { useTrackElementVisibility } from '../../hooks';
|
|
9
9
|
import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
|
|
10
10
|
import { isComponentType, applyElementToRef } from '../../../utilities';
|
|
11
|
+
import { useLocalParticipant } from '@stream-io/video-react-bindings';
|
|
11
12
|
const ParticipantViewContext = createContext(undefined);
|
|
12
13
|
export const useParticipantViewContext = () => useContext(ParticipantViewContext);
|
|
13
|
-
export const ParticipantView = forwardRef(({ participant,
|
|
14
|
+
export const ParticipantView = forwardRef(({ participant, videoKind = 'video', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
|
|
14
15
|
const { audioStream, isLocalParticipant, isSpeaking, publishedTracks, sessionId, } = participant;
|
|
16
|
+
const localParticipant = useLocalParticipant();
|
|
15
17
|
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
16
18
|
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
17
19
|
const [trackedElement, setTrackedElement] = useState(null);
|
|
@@ -52,6 +54,6 @@ export const ParticipantView = forwardRef(({ participant, sinkId, videoKind = 'v
|
|
|
52
54
|
// mute the local participant, as we don't want to hear ourselves
|
|
53
55
|
, {
|
|
54
56
|
// mute the local participant, as we don't want to hear ourselves
|
|
55
|
-
muted: isLocalParticipant || muteAudio, sinkId:
|
|
57
|
+
muted: isLocalParticipant || muteAudio, sinkId: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.audioOutputDeviceId, audioStream: audioStream }), _jsx(Video, { VideoPlaceholder: VideoPlaceholder, participant: participant, kind: videoKind, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (_jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] })) })));
|
|
56
58
|
});
|
|
57
59
|
//# 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,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;
|
|
1
|
+
{"version":3,"file":"ParticipantView.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/ParticipantView.tsx"],"names":[],"mappings":"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"}
|
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.
|
|
29
|
-
"@stream-io/video-client": "^0.0.
|
|
30
|
-
"@stream-io/video-react-bindings": "^0.0.
|
|
28
|
+
"@stream-io/i18n": "^0.0.4",
|
|
29
|
+
"@stream-io/video-client": "^0.0.15",
|
|
30
|
+
"@stream-io/video-react-bindings": "^0.0.16",
|
|
31
31
|
"clsx": "^1.2.1",
|
|
32
32
|
"rxjs": "~7.8.1"
|
|
33
33
|
},
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"typedoc": "^0.24.7",
|
|
48
48
|
"typescript": "^4.9.5"
|
|
49
49
|
},
|
|
50
|
-
"version": "0.0.
|
|
50
|
+
"version": "0.0.33"
|
|
51
51
|
}
|
|
@@ -21,7 +21,6 @@ export const Audio = ({ audioStream, sinkId, ...rest }: AudioProps) => {
|
|
|
21
21
|
const $el = audioRef.current;
|
|
22
22
|
if (!($el && audioStream)) return;
|
|
23
23
|
|
|
24
|
-
console.log(`Attaching audio stream`, $el, audioStream);
|
|
25
24
|
$el.srcObject = audioStream;
|
|
26
25
|
return () => {
|
|
27
26
|
$el.srcObject = null;
|
|
@@ -32,7 +31,6 @@ export const Audio = ({ audioStream, sinkId, ...rest }: AudioProps) => {
|
|
|
32
31
|
const $el = audioRef.current;
|
|
33
32
|
if (!$el || !sinkId) return;
|
|
34
33
|
|
|
35
|
-
console.log(`Setting sinkId`, $el, sinkId);
|
|
36
34
|
if (($el as any).setSinkId) {
|
|
37
35
|
($el as any).setSinkId(sinkId);
|
|
38
36
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { useEffect, useMemo, useState } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
useCall,
|
|
4
|
-
useLocalParticipant,
|
|
5
4
|
useParticipants,
|
|
6
5
|
useRemoteParticipants,
|
|
7
6
|
} from '@stream-io/video-react-bindings';
|
|
@@ -85,7 +84,6 @@ export const PaginatedGridLayout = ({
|
|
|
85
84
|
const [page, setPage] = useState(0);
|
|
86
85
|
|
|
87
86
|
const call = useCall();
|
|
88
|
-
const localParticipant = useLocalParticipant();
|
|
89
87
|
const participants = useParticipants();
|
|
90
88
|
// used to render audio elements
|
|
91
89
|
const remoteParticipants = useRemoteParticipants();
|
|
@@ -120,7 +118,6 @@ export const PaginatedGridLayout = ({
|
|
|
120
118
|
muted={false}
|
|
121
119
|
key={participant.sessionId}
|
|
122
120
|
audioStream={participant.audioStream}
|
|
123
|
-
sinkId={localParticipant?.audioOutputDeviceId}
|
|
124
121
|
/>
|
|
125
122
|
))}
|
|
126
123
|
<div className="str-video__paginated-grid-layout__wrapper">
|
|
@@ -10,11 +10,7 @@ import {
|
|
|
10
10
|
speakerLayoutSortPreset,
|
|
11
11
|
StreamVideoParticipant,
|
|
12
12
|
} from '@stream-io/video-client';
|
|
13
|
-
import {
|
|
14
|
-
useCall,
|
|
15
|
-
useLocalParticipant,
|
|
16
|
-
useParticipants,
|
|
17
|
-
} from '@stream-io/video-react-bindings';
|
|
13
|
+
import { useCall, useParticipants } from '@stream-io/video-react-bindings';
|
|
18
14
|
|
|
19
15
|
import {
|
|
20
16
|
DefaultParticipantViewUI,
|
|
@@ -56,7 +52,6 @@ export const SpeakerLayout = ({
|
|
|
56
52
|
null,
|
|
57
53
|
);
|
|
58
54
|
const isOneOnOneCall = otherParticipants.length === 1;
|
|
59
|
-
const localParticipant = useLocalParticipant();
|
|
60
55
|
|
|
61
56
|
useEffect(() => {
|
|
62
57
|
if (!scrollWrapper || !call) return;
|
|
@@ -102,7 +97,6 @@ export const SpeakerLayout = ({
|
|
|
102
97
|
participant={participantInSpotlight}
|
|
103
98
|
muteAudio={isSpeakerScreenSharing}
|
|
104
99
|
videoKind={isSpeakerScreenSharing ? 'screen' : 'video'}
|
|
105
|
-
sinkId={localParticipant?.audioOutputDeviceId}
|
|
106
100
|
ParticipantViewUI={ParticipantViewUISpotlight}
|
|
107
101
|
VideoPlaceholder={VideoPlaceholder}
|
|
108
102
|
/>
|
|
@@ -122,7 +116,6 @@ export const SpeakerLayout = ({
|
|
|
122
116
|
>
|
|
123
117
|
<ParticipantView
|
|
124
118
|
participant={participantInSpotlight}
|
|
125
|
-
sinkId={localParticipant?.audioOutputDeviceId}
|
|
126
119
|
ParticipantViewUI={ParticipantViewUIBar}
|
|
127
120
|
VideoPlaceholder={VideoPlaceholder}
|
|
128
121
|
/>
|
|
@@ -135,7 +128,6 @@ export const SpeakerLayout = ({
|
|
|
135
128
|
>
|
|
136
129
|
<ParticipantView
|
|
137
130
|
participant={participant}
|
|
138
|
-
sinkId={localParticipant?.audioOutputDeviceId}
|
|
139
131
|
ParticipantViewUI={ParticipantViewUIBar}
|
|
140
132
|
VideoPlaceholder={VideoPlaceholder}
|
|
141
133
|
/>
|
|
@@ -18,6 +18,7 @@ import { Video, VideoProps } from '../Video';
|
|
|
18
18
|
import { useTrackElementVisibility } from '../../hooks';
|
|
19
19
|
import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
|
|
20
20
|
import { isComponentType, applyElementToRef } from '../../../utilities';
|
|
21
|
+
import { useLocalParticipant } from '@stream-io/video-react-bindings';
|
|
21
22
|
|
|
22
23
|
export type ParticipantViewContextValue = Required<
|
|
23
24
|
Pick<ParticipantViewProps, 'participant' | 'videoKind'>
|
|
@@ -47,13 +48,6 @@ export type ParticipantViewProps = {
|
|
|
47
48
|
*/
|
|
48
49
|
ParticipantViewUI?: ComponentType | ReactElement | null;
|
|
49
50
|
|
|
50
|
-
/**
|
|
51
|
-
* In supported browsers, this sets the default audio output.
|
|
52
|
-
* The value of this prop should be a valid audio output device ID.
|
|
53
|
-
* You can set this using `audioOutputDeviceId` field of the local participant.
|
|
54
|
-
*/
|
|
55
|
-
sinkId?: string;
|
|
56
|
-
|
|
57
51
|
/**
|
|
58
52
|
* The kind of video stream to play for the given participant.
|
|
59
53
|
*/
|
|
@@ -82,7 +76,6 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
|
|
|
82
76
|
(
|
|
83
77
|
{
|
|
84
78
|
participant,
|
|
85
|
-
sinkId,
|
|
86
79
|
videoKind = 'video',
|
|
87
80
|
muteAudio,
|
|
88
81
|
refs: { setVideoElement, setVideoPlaceholderElement } = {},
|
|
@@ -99,6 +92,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
|
|
|
99
92
|
publishedTracks,
|
|
100
93
|
sessionId,
|
|
101
94
|
} = participant;
|
|
95
|
+
const localParticipant = useLocalParticipant();
|
|
102
96
|
|
|
103
97
|
const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
|
|
104
98
|
const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
|
|
@@ -168,7 +162,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
|
|
|
168
162
|
<Audio
|
|
169
163
|
// mute the local participant, as we don't want to hear ourselves
|
|
170
164
|
muted={isLocalParticipant || muteAudio}
|
|
171
|
-
sinkId={
|
|
165
|
+
sinkId={localParticipant?.audioOutputDeviceId}
|
|
172
166
|
audioStream={audioStream}
|
|
173
167
|
/>
|
|
174
168
|
<Video
|