@stream-io/video-react-sdk 1.35.1 → 1.36.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.36.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.35.2...@stream-io/video-react-sdk-1.36.0) (2026-04-28)
+
+### Dependency Updates
+
+- `@stream-io/video-client` updated to version `1.48.0`
+- `@stream-io/video-react-bindings` updated to version `1.15.0`
+
+### Features
+
+- audio connecting hook in bindings and RN UI ([#2214](https://github.com/GetStream/stream-video-js/issues/2214)) ([44c38fa](https://github.com/GetStream/stream-video-js/commit/44c38faaccb5327f6cd5cd6e70781bad93deafaf))
+
+### Bug Fixes
+
+- **egress-composite:** adjust PaginatedGrid sizing ([#1966](https://github.com/GetStream/stream-video-js/issues/1966)) ([9c7009f](https://github.com/GetStream/stream-video-js/commit/9c7009f26d63ef4fcbc8441746e5cd3c2b1935b6))
+
+## [1.35.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.35.1...@stream-io/video-react-sdk-1.35.2) (2026-04-15)
+
+### Dependency Updates
+
+- `@stream-io/video-client` updated to version `1.47.0`
+- `@stream-io/video-react-bindings` updated to version `1.14.2`
+
+### Bug Fixes
+
+- **pronto:** use list visualType for device selection mobile devices ([#2202](https://github.com/GetStream/stream-video-js/issues/2202)) ([f6b6cd2](https://github.com/GetStream/stream-video-js/commit/f6b6cd2eeef3e776167cae515cc7beb2d566ccde))
+
 ## [1.35.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.35.0...@stream-io/video-react-sdk-1.35.1) (2026-04-09)
 
 ### Dependency Updates

package/dist/embedded.cjs.js

@@ -1207,7 +1207,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.35.1"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.36.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1884,8 +1884,7 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const hasVideoTrack = videoClient.hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
     const isTrackPaused = trackType !== 'none' ? videoClient.hasPausedTrack(participant, trackType) : false;
-    const isAudioTrackUnmuted = useIsTrackUnmuted(participant);
-    const isAudioConnecting = hasAudioTrack && !isAudioTrackUnmuted;
+    const isAudioConnecting = videoReactBindings.useIsAudioConnecting(participant);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && pin && (jsxRuntime.jsx("span", { title: canUnpin ? t('Unpin') : t('Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
                     connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
 };
@@ -1894,29 +1893,6 @@ const SpeechIndicator = () => {
     const { isSpeaking, isDominantSpeaker } = participant;
     return (jsxRuntime.jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" })] }));
 };
-const useIsTrackUnmuted = (participant) => {
-    const audioStream = participant.audioStream;
-    const [unmuted, setUnmuted] = react.useState(() => {
-        const track = audioStream?.getAudioTracks()[0];
-        return !!track && !track.muted;
-    });
-    react.useEffect(() => {
-        const track = audioStream?.getAudioTracks()[0];
-        if (!track)
-            return;
-        setUnmuted(!track.muted);
-        const handler = () => {
-            setUnmuted(!track.muted);
-        };
-        track.addEventListener('mute', handler);
-        track.addEventListener('unmute', handler);
-        return () => {
-            track.removeEventListener('mute', handler);
-            track.removeEventListener('unmute', handler);
-        };
-    }, [audioStream]);
-    return unmuted;
-};
 
 const ParticipantView = react.forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
     const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
@@ -2422,7 +2398,7 @@ const formatDuration = (durationInMs) => {
 
 const GROUP_SIZE = 16;
 const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI, }) => {
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__paginated-grid-layout__group', {
+    return (jsxRuntime.jsx("div", { "data-group-size": group.length, 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,