@stream-io/video-react-sdk 1.25.1 → 1.26.0

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

@@ -0,0 +1 @@
+export declare const AudioVolumeIndicator: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
+import { PropsWithChildren } from 'react';
 export type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';
-export declare const DeviceSelector: (props: {
+export declare const DeviceSelector: (props: PropsWithChildren<{
     devices: MediaDeviceInfo[];
     icon: string;
     type: DeviceSelectorType;
@@ -7,4 +8,4 @@ export declare const DeviceSelector: (props: {
     title?: string;
     onChange?: (deviceId: string) => void;
     visualType?: "list" | "dropdown";
-}) => import("react/jsx-runtime").JSX.Element;
+}>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,9 @@
 export type DeviceSelectorAudioInputProps = {
     title?: string;
     visualType?: 'list' | 'dropdown';
+    volumeIndicatorVisible?: boolean;
 };
-export declare const DeviceSelectorAudioInput: ({ title, visualType, }: DeviceSelectorAudioInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeviceSelectorAudioInput: ({ title, visualType, volumeIndicatorVisible, }: DeviceSelectorAudioInputProps) => import("react/jsx-runtime").JSX.Element;
 export type DeviceSelectorAudioOutputProps = {
     title?: string;
     visualType?: 'list' | 'dropdown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.36.0",
+    "@stream-io/video-client": "1.36.1",
     "@stream-io/video-filters-web": "0.4.0",
-    "@stream-io/video-react-bindings": "1.10.4",
+    "@stream-io/video-react-bindings": "1.11.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -46,7 +46,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stream-io/audio-filters-web": "^0.6.0",
-    "@stream-io/video-styling": "^1.6.1",
+    "@stream-io/video-styling": "^1.7.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",

package/src/components/DeviceSettings/AudioVolumeIndicator.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { createSoundDetector } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Icon } from '../Icon';
+
+export const AudioVolumeIndicator = () => {
+  const { useMicrophoneState } = useCallStateHooks();
+  const { isEnabled, mediaStream } = useMicrophoneState();
+  const [audioLevel, setAudioLevel] = useState(0);
+
+  useEffect(() => {
+    if (!isEnabled || !mediaStream) return;
+    const disposeSoundDetector = createSoundDetector(
+      mediaStream,
+      ({ audioLevel: al }) => setAudioLevel(al),
+      { detectionFrequencyInMs: 80, destroyStreamOnStop: false },
+    );
+    return () => {
+      disposeSoundDetector().catch(console.error);
+    };
+  }, [isEnabled, mediaStream]);
+
+  return (
+    <div className="str-video__audio-volume-indicator">
+      <Icon icon={isEnabled ? 'mic' : 'mic-off'} />
+      <div className="str-video__audio-volume-indicator__bar">
+        <div
+          className="str-video__audio-volume-indicator__bar-value"
+          style={{ transform: `scaleX(${audioLevel / 100})` }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ChangeEventHandler, useCallback } from 'react';
+import { ChangeEventHandler, PropsWithChildren, useCallback } from 'react';
 
 import { useDeviceList } from '../../hooks';
 import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';
@@ -51,14 +51,23 @@ const DeviceSelectorOption = ({
 
 export type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';
 
-const DeviceSelectorList = (props: {
-  devices: MediaDeviceInfo[];
-  type: DeviceSelectorType;
-  selectedDeviceId?: string;
-  title?: string;
-  onChange?: (deviceId: string) => void;
-}) => {
-  const { devices = [], selectedDeviceId, title, type, onChange } = props;
+const DeviceSelectorList = (
+  props: PropsWithChildren<{
+    devices: MediaDeviceInfo[];
+    type: DeviceSelectorType;
+    selectedDeviceId?: string;
+    title?: string;
+    onChange?: (deviceId: string) => void;
+  }>,
+) => {
+  const {
+    devices = [],
+    selectedDeviceId,
+    title,
+    type,
+    onChange,
+    children,
+  } = props;
   const { close } = useMenuContext();
   const { deviceList } = useDeviceList(devices, selectedDeviceId);
 
@@ -88,6 +97,7 @@ const DeviceSelectorList = (props: {
           />
         );
       })}
+      {children}
     </div>
   );
 };
@@ -139,15 +149,17 @@ const DeviceSelectorDropdown = (props: {
   );
 };
 
-export const DeviceSelector = (props: {
-  devices: MediaDeviceInfo[];
-  icon: string;
-  type: DeviceSelectorType;
-  selectedDeviceId?: string;
-  title?: string;
-  onChange?: (deviceId: string) => void;
-  visualType?: 'list' | 'dropdown';
-}) => {
+export const DeviceSelector = (
+  props: PropsWithChildren<{
+    devices: MediaDeviceInfo[];
+    icon: string;
+    type: DeviceSelectorType;
+    selectedDeviceId?: string;
+    title?: string;
+    onChange?: (deviceId: string) => void;
+    visualType?: 'list' | 'dropdown';
+  }>,
+) => {
   const { visualType = 'list', icon, ...rest } = props;
 
   if (visualType === 'list') {

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -1,14 +1,17 @@
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { DeviceSelector } from './DeviceSelector';
+import { AudioVolumeIndicator } from './AudioVolumeIndicator';
 
 export type DeviceSelectorAudioInputProps = {
   title?: string;
   visualType?: 'list' | 'dropdown';
+  volumeIndicatorVisible?: boolean;
 };
 
 export const DeviceSelectorAudioInput = ({
   title,
   visualType,
+  volumeIndicatorVisible = true,
 }: DeviceSelectorAudioInputProps) => {
   const { useMicrophoneState } = useCallStateHooks();
   const { microphone, selectedDevice, devices } = useMicrophoneState();
@@ -24,7 +27,14 @@ export const DeviceSelectorAudioInput = ({
       title={title}
       visualType={visualType}
       icon="mic"
-    />
+    >
+      {volumeIndicatorVisible && (
+        <>
+          <hr className="str-video__device-settings__separator" />
+          <AudioVolumeIndicator />
+        </>
+      )}
+    </DeviceSelector>
   );
 };