@whereby.com/browser-sdk 3.12.8 → 3.12.10

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.
Files changed (4) hide show
  1. package/dist/cdn/v3-react.js +2 -2
  2. package/dist/react/index.cjs +46 -37
  3. package/dist/react/index.esm.js +47 -37
  4. package/package.json +2 -2
package/dist/react/index.cjs CHANGED
@@ -74,12 +74,28 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
74
74
  const useAppDispatch = useDispatch.withTypes();
75
75
  const useAppSelector = useSelector.withTypes();
76
76
 
77
+ const useAudioElement = ({ stream, muted }) => {
78
+ const audioEl = React.useRef(null);
79
+ const currentSpeakerId = useAppSelector(core.selectCurrentSpeakerDeviceId);
80
+ React.useEffect(() => {
81
+ if (!audioEl.current || muted || !stream || !currentSpeakerId) {
82
+ return;
83
+ }
84
+ if (audioEl.current.srcObject !== stream) {
85
+ audioEl.current.srcObject = stream;
86
+ }
87
+ if (audioEl.current.setSinkId) {
88
+ audioEl.current.setSinkId(currentSpeakerId);
89
+ }
90
+ }, [stream, audioEl, currentSpeakerId, muted]);
91
+ return audioEl;
92
+ };
93
+
77
94
  const VideoView = React__namespace.forwardRef((_a, ref) => {
78
95
  var { muted, mirror = false, stream, onVideoResize } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onVideoResize"]);
79
96
  const dispatch = useAppDispatch();
80
- const currentSpeakerId = useAppSelector(core.selectCurrentSpeakerDeviceId);
81
97
  const videoEl = React__namespace.useRef(null);
82
- const audioEl = React__namespace.useRef(null);
98
+ const audioEl = useAudioElement({ muted, stream });
83
99
  React__namespace.useImperativeHandle(ref, () => {
84
100
  return Object.assign(videoEl.current, {
85
101
  captureAspectRatio: () => {
@@ -133,17 +149,6 @@ const VideoView = React__namespace.forwardRef((_a, ref) => {
133
149
  videoEl.current.muted = Boolean(muted);
134
150
  }
135
151
  }, [muted, stream, videoEl]);
136
- React__namespace.useEffect(() => {
137
- if (!audioEl.current || muted || !stream || !currentSpeakerId) {
138
- return;
139
- }
140
- if (audioEl.current.srcObject !== stream) {
141
- audioEl.current.srcObject = stream;
142
- }
143
- if (audioEl.current.setSinkId) {
144
- audioEl.current.setSinkId(currentSpeakerId);
145
- }
146
- }, [stream, audioEl, currentSpeakerId, muted]);
147
152
  return (React__namespace.createElement(React__namespace.Fragment, null,
148
153
  React__namespace.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest, { style: Object.assign({ transform: mirror ? "scaleX(-1)" : "none", width: "100%", height: "100%" }, rest.style) })),
149
154
  React__namespace.createElement("audio", { ref: audioEl, autoPlay: true, playsInline: true })));
@@ -178,7 +183,7 @@ const selectRoomConnectionState = toolkit.createSelector(core.selectChatMessages
178
183
  return state;
179
184
  });
180
185
 
181
- const browserSdkVersion = "3.12.8";
186
+ const browserSdkVersion = "3.12.10";
182
187
 
183
188
  const defaultRoomConnectionOptions = {
184
189
  localMediaOptions: {
@@ -1955,26 +1960,29 @@ function Avatar(_a) {
1955
1960
  } }))));
1956
1961
  }
1957
1962
 
1958
- function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners }) {
1959
- return (React__namespace.createElement("div", { style: {
1960
- display: "flex",
1961
- flexDirection: "column",
1962
- alignItems: "center",
1963
- justifyContent: "center",
1964
- position: "absolute",
1965
- top: 0,
1966
- left: 0,
1967
- height: "100%",
1968
- width: "100%",
1969
- borderRadius: withRoundedCorners ? "8px" : "0",
1970
- } },
1963
+ function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners, stream, muted }) {
1964
+ const audioElRef = useAudioElement({ stream, muted });
1965
+ return (React__namespace.createElement(React__namespace.Fragment, null,
1971
1966
  React__namespace.createElement("div", { style: {
1972
- height: isSmallCell ? 60 : 80,
1973
- width: isSmallCell ? 60 : 80,
1974
- pointerEvents: "none",
1975
- position: "relative",
1967
+ display: "flex",
1968
+ flexDirection: "column",
1969
+ alignItems: "center",
1970
+ justifyContent: "center",
1971
+ position: "absolute",
1972
+ top: 0,
1973
+ left: 0,
1974
+ height: "100%",
1975
+ width: "100%",
1976
+ borderRadius: withRoundedCorners ? "8px" : "0",
1976
1977
  } },
1977
- React__namespace.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))));
1978
+ React__namespace.createElement("div", { style: {
1979
+ height: isSmallCell ? 60 : 80,
1980
+ width: isSmallCell ? 60 : 80,
1981
+ pointerEvents: "none",
1982
+ position: "relative",
1983
+ } },
1984
+ React__namespace.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))),
1985
+ React__namespace.createElement("audio", { ref: audioElRef, autoPlay: true, playsInline: true })));
1978
1986
  }
1979
1987
 
1980
1988
  const Popover = PopoverPrimitive__namespace.Root;
@@ -2172,8 +2180,8 @@ const GridVideoView = React__namespace.forwardRef((_a, ref) => {
2172
2180
  }
2173
2181
  }, [clientAspectRatios, participant.id, onSetClientAspectRatio]);
2174
2182
  const s = stream || participant.stream;
2175
- if (!s) {
2176
- return (React__namespace.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }));
2183
+ if (!s || !participant.isVideoEnabled) {
2184
+ return (React__namespace.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true, muted: participant.isLocalClient, stream: participant.stream }));
2177
2185
  }
2178
2186
  return (React__namespace.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign(Object.assign({ borderRadius: isConstrained ? 0 : "8px" }, (isConstrained ? { objectFit: "cover" } : {})), style), muted: participant.isLocalClient }, rest, { stream: s, onVideoResize: handleResize })));
2179
2187
  });
@@ -2185,9 +2193,10 @@ function renderCellView({ cellView, enableParticipantMenu, render }) {
2185
2193
  }
2186
2194
  switch (cellView.type) {
2187
2195
  case "video":
2188
- return (React__namespace.createElement(GridCell, { participant: participant }, participant.isVideoEnabled ? (React__namespace.createElement(React__namespace.Fragment, null, render ? (render({ participant })) : (React__namespace.createElement(React__namespace.Fragment, null,
2189
- React__namespace.createElement(GridVideoView, null),
2190
- enableParticipantMenu ? (React__namespace.createElement(DefaultParticipantMenu, { participant: participant })) : null)))) : (React__namespace.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }))));
2196
+ return (React__namespace.createElement(GridCell, { participant: participant },
2197
+ React__namespace.createElement(React__namespace.Fragment, null, render ? (render({ participant })) : (React__namespace.createElement(React__namespace.Fragment, null,
2198
+ React__namespace.createElement(GridVideoView, null),
2199
+ enableParticipantMenu ? React__namespace.createElement(DefaultParticipantMenu, { participant: participant }) : null)))));
2191
2200
  }
2192
2201
  }
2193
2202
  function Grid({ renderParticipant, renderFloatingParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, }) {
package/dist/react/index.esm.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { useRef, useEffect } from 'react';
2
3
  import { createStoreHook, createDispatchHook, createSelectorHook, Provider as Provider$1 } from 'react-redux';
3
4
  import { createServices, createStore, selectCurrentSpeakerDeviceId, debounce, doRtcReportStreamResolution, selectChatMessages, selectCloudRecordingRaw, selectBreakoutCurrentGroup, selectBreakoutActive, selectBreakoutGroupedParticipants, selectAllClientViewsInCurrentGroup, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, selectNotificationsEmitter, selectSpotlightedClientViews, doAppStop, doSendChatMessage, doKnockRoom, doSetDisplayName, toggleCameraEnabled, toggleMicrophoneEnabled, toggleLowDataModeEnabled, doSetLocalStickyReaction, doRequestAudioEnable, doRequestVideoEnable, doAcceptWaitingParticipant, doRejectWaitingParticipant, doStartCloudRecording, doStartScreenshare, doStopCloudRecording, doStopScreenshare, doAppStart, doLockRoom, doSpotlightParticipant, doRemoveSpotlight, doKickParticipant, doEndMeeting, doBreakoutJoin, selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, doStartLocalMedia, doStopLocalMedia, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId, setCurrentSpeakerDeviceId, selectAllClientViews, selectNumParticipants } from '@whereby.com/core';
4
5
  import { createSelector } from '@reduxjs/toolkit';
@@ -52,12 +53,28 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
52
53
  const useAppDispatch = useDispatch.withTypes();
53
54
  const useAppSelector = useSelector.withTypes();
54
55
 
56
+ const useAudioElement = ({ stream, muted }) => {
57
+ const audioEl = useRef(null);
58
+ const currentSpeakerId = useAppSelector(selectCurrentSpeakerDeviceId);
59
+ useEffect(() => {
60
+ if (!audioEl.current || muted || !stream || !currentSpeakerId) {
61
+ return;
62
+ }
63
+ if (audioEl.current.srcObject !== stream) {
64
+ audioEl.current.srcObject = stream;
65
+ }
66
+ if (audioEl.current.setSinkId) {
67
+ audioEl.current.setSinkId(currentSpeakerId);
68
+ }
69
+ }, [stream, audioEl, currentSpeakerId, muted]);
70
+ return audioEl;
71
+ };
72
+
55
73
  const VideoView = React.forwardRef((_a, ref) => {
56
74
  var { muted, mirror = false, stream, onVideoResize } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onVideoResize"]);
57
75
  const dispatch = useAppDispatch();
58
- const currentSpeakerId = useAppSelector(selectCurrentSpeakerDeviceId);
59
76
  const videoEl = React.useRef(null);
60
- const audioEl = React.useRef(null);
77
+ const audioEl = useAudioElement({ muted, stream });
61
78
  React.useImperativeHandle(ref, () => {
62
79
  return Object.assign(videoEl.current, {
63
80
  captureAspectRatio: () => {
@@ -111,17 +128,6 @@ const VideoView = React.forwardRef((_a, ref) => {
111
128
  videoEl.current.muted = Boolean(muted);
112
129
  }
113
130
  }, [muted, stream, videoEl]);
114
- React.useEffect(() => {
115
- if (!audioEl.current || muted || !stream || !currentSpeakerId) {
116
- return;
117
- }
118
- if (audioEl.current.srcObject !== stream) {
119
- audioEl.current.srcObject = stream;
120
- }
121
- if (audioEl.current.setSinkId) {
122
- audioEl.current.setSinkId(currentSpeakerId);
123
- }
124
- }, [stream, audioEl, currentSpeakerId, muted]);
125
131
  return (React.createElement(React.Fragment, null,
126
132
  React.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest, { style: Object.assign({ transform: mirror ? "scaleX(-1)" : "none", width: "100%", height: "100%" }, rest.style) })),
127
133
  React.createElement("audio", { ref: audioEl, autoPlay: true, playsInline: true })));
@@ -156,7 +162,7 @@ const selectRoomConnectionState = createSelector(selectChatMessages, selectCloud
156
162
  return state;
157
163
  });
158
164
 
159
- const browserSdkVersion = "3.12.8";
165
+ const browserSdkVersion = "3.12.10";
160
166
 
161
167
  const defaultRoomConnectionOptions = {
162
168
  localMediaOptions: {
@@ -1933,26 +1939,29 @@ function Avatar(_a) {
1933
1939
  } }))));
1934
1940
  }
1935
1941
 
1936
- function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners }) {
1937
- return (React.createElement("div", { style: {
1938
- display: "flex",
1939
- flexDirection: "column",
1940
- alignItems: "center",
1941
- justifyContent: "center",
1942
- position: "absolute",
1943
- top: 0,
1944
- left: 0,
1945
- height: "100%",
1946
- width: "100%",
1947
- borderRadius: withRoundedCorners ? "8px" : "0",
1948
- } },
1942
+ function VideoMutedIndicator({ avatarUrl, displayName, isSmallCell, withRoundedCorners, stream, muted }) {
1943
+ const audioElRef = useAudioElement({ stream, muted });
1944
+ return (React.createElement(React.Fragment, null,
1949
1945
  React.createElement("div", { style: {
1950
- height: isSmallCell ? 60 : 80,
1951
- width: isSmallCell ? 60 : 80,
1952
- pointerEvents: "none",
1953
- position: "relative",
1946
+ display: "flex",
1947
+ flexDirection: "column",
1948
+ alignItems: "center",
1949
+ justifyContent: "center",
1950
+ position: "absolute",
1951
+ top: 0,
1952
+ left: 0,
1953
+ height: "100%",
1954
+ width: "100%",
1955
+ borderRadius: withRoundedCorners ? "8px" : "0",
1954
1956
  } },
1955
- React.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))));
1957
+ React.createElement("div", { style: {
1958
+ height: isSmallCell ? 60 : 80,
1959
+ width: isSmallCell ? 60 : 80,
1960
+ pointerEvents: "none",
1961
+ position: "relative",
1962
+ } },
1963
+ React.createElement(Avatar, { variant: "square", avatarUrl: avatarUrl, name: displayName, size: isSmallCell ? 60 : 80 }))),
1964
+ React.createElement("audio", { ref: audioElRef, autoPlay: true, playsInline: true })));
1956
1965
  }
1957
1966
 
1958
1967
  const Popover = PopoverPrimitive.Root;
@@ -2150,8 +2159,8 @@ const GridVideoView = React.forwardRef((_a, ref) => {
2150
2159
  }
2151
2160
  }, [clientAspectRatios, participant.id, onSetClientAspectRatio]);
2152
2161
  const s = stream || participant.stream;
2153
- if (!s) {
2154
- return (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }));
2162
+ if (!s || !participant.isVideoEnabled) {
2163
+ return (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true, muted: participant.isLocalClient, stream: participant.stream }));
2155
2164
  }
2156
2165
  return (React.createElement(VideoView, Object.assign({ ref: videoEl, style: Object.assign(Object.assign({ borderRadius: isConstrained ? 0 : "8px" }, (isConstrained ? { objectFit: "cover" } : {})), style), muted: participant.isLocalClient }, rest, { stream: s, onVideoResize: handleResize })));
2157
2166
  });
@@ -2163,9 +2172,10 @@ function renderCellView({ cellView, enableParticipantMenu, render }) {
2163
2172
  }
2164
2173
  switch (cellView.type) {
2165
2174
  case "video":
2166
- return (React.createElement(GridCell, { participant: participant }, participant.isVideoEnabled ? (React.createElement(React.Fragment, null, render ? (render({ participant })) : (React.createElement(React.Fragment, null,
2167
- React.createElement(GridVideoView, null),
2168
- enableParticipantMenu ? (React.createElement(DefaultParticipantMenu, { participant: participant })) : null)))) : (React.createElement(VideoMutedIndicator, { isSmallCell: false, displayName: (participant === null || participant === void 0 ? void 0 : participant.displayName) || "Guest", withRoundedCorners: true }))));
2175
+ return (React.createElement(GridCell, { participant: participant },
2176
+ React.createElement(React.Fragment, null, render ? (render({ participant })) : (React.createElement(React.Fragment, null,
2177
+ React.createElement(GridVideoView, null),
2178
+ enableParticipantMenu ? React.createElement(DefaultParticipantMenu, { participant: participant }) : null)))));
2169
2179
  }
2170
2180
  }
2171
2181
  function Grid({ renderParticipant, renderFloatingParticipant, stageParticipantLimit, gridGap, videoGridGap, enableSubgrid, enableParticipantMenu, enableConstrainedGrid, }) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whereby.com/browser-sdk",
3
- "version": "3.12.8",
3
+ "version": "3.12.10",
4
4
  "description": "Modules for integration Whereby video in web apps",
5
5
  "author": "Whereby AS",
6
6
  "license": "MIT",
@@ -80,7 +80,7 @@
80
80
  "dependencies": {
81
81
  "@radix-ui/react-popover": "^1.0.7",
82
82
  "@reduxjs/toolkit": "^2.2.3",
83
- "@whereby.com/core": "0.33.3",
83
+ "@whereby.com/core": "0.33.4",
84
84
  "clsx": "^2.1.1",
85
85
  "heresy": "^1.0.4",
86
86
  "react-redux": "^9.1.1",