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

package/dist/src/components/DeviceSettings/DeviceSelectorVideo.d.ts

@@ -1,5 +1,11 @@
 export type DeviceSelectorVideoProps = {
     title?: string;
+    /**
+     * The visual style used to render the device selector.
+     *
+     * Note: `'preview'` is not reliable on mobile browsers. Use `'list'` or
+     * `'dropdown'` on mobile devices.
+     */
     visualType?: 'list' | 'dropdown' | 'preview';
 };
 export declare const DeviceSelectorVideo: ({ title, visualType, }: DeviceSelectorVideoProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.35.1",
+  "version": "1.36.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -45,9 +45,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.46.1",
+    "@stream-io/video-client": "1.48.0",
     "@stream-io/video-filters-web": "0.7.4",
-    "@stream-io/video-react-bindings": "1.14.1",
+    "@stream-io/video-react-bindings": "1.15.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -5,6 +5,12 @@ import { DeviceVideoPreviewItem } from './DeviceVideoPreviewItem';
 
 export type DeviceSelectorVideoProps = {
   title?: string;
+  /**
+   * The visual style used to render the device selector.
+   *
+   * Note: `'preview'` is not reliable on mobile browsers. Use `'list'` or
+   * `'dropdown'` on mobile devices.
+   */
   visualType?: 'list' | 'dropdown' | 'preview';
 };
 

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -41,6 +41,7 @@ const PaginatedGridLayoutGroup = ({
 }: PaginatedGridLayoutGroupProps) => {
   return (
     <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':

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, forwardRef, useEffect, useState } from 'react';
+import { ComponentType, forwardRef } from 'react';
 import { Placement } from '@floating-ui/react';
 import {
   hasAudio,
@@ -6,9 +6,12 @@ import {
   hasScreenShare,
   hasVideo,
   SfuModels,
-  StreamVideoParticipant,
 } from '@stream-io/video-client';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import {
+  useCall,
+  useI18n,
+  useIsAudioConnecting,
+} from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
 
 import {
@@ -139,8 +142,7 @@ export const ParticipantDetails = ({
   const isTrackPaused =
     trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
 
-  const isAudioTrackUnmuted = useIsTrackUnmuted(participant);
-  const isAudioConnecting = hasAudioTrack && !isAudioTrackUnmuted;
+  const isAudioConnecting = useIsAudioConnecting(participant);
 
   return (
     <>
@@ -215,33 +217,3 @@ export const SpeechIndicator = () => {
     </span>
   );
 };
-
-const useIsTrackUnmuted = (participant: StreamVideoParticipant) => {
-  const audioStream = participant.audioStream;
-
-  const [unmuted, setUnmuted] = useState(() => {
-    const track = audioStream?.getAudioTracks()[0];
-    return !!track && !track.muted;
-  });
-
-  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;
-};