@stream-io/video-react-sdk 1.34.1 → 1.35.0

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

@@ -0,0 +1,6 @@
+import { DeviceListItem } from '../../hooks';
+export type DeviceAudioPreviewItemProps = {
+    device: DeviceListItem;
+    onSelect: (deviceId: string) => void;
+};
+export declare const DeviceAudioPreviewItem: ({ device, onSelect, }: DeviceAudioPreviewItemProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,5 +1,10 @@
-import { PropsWithChildren } from 'react';
+import { ComponentType, PropsWithChildren } from 'react';
+import { DeviceListItem } from '../../hooks';
 export type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';
+export type PreviewItemProps = {
+    device: DeviceListItem;
+    onSelect: (deviceId: string) => void;
+};
 export declare const DeviceSelector: (props: PropsWithChildren<{
     devices: MediaDeviceInfo[];
     icon: string;
@@ -7,5 +12,9 @@ export declare const DeviceSelector: (props: PropsWithChildren<{
     selectedDeviceId?: string;
     title?: string;
     onChange?: (deviceId: string) => void;
+}> & ({
     visualType?: "list" | "dropdown";
-}>) => import("react/jsx-runtime").JSX.Element;
+} | {
+    visualType: "preview";
+    PreviewItem: ComponentType<PreviewItemProps>;
+})) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,5 +1,5 @@
 export type DeviceSelectorVideoProps = {
     title?: string;
-    visualType?: 'list' | 'dropdown';
+    visualType?: 'list' | 'dropdown' | 'preview';
 };
 export declare const DeviceSelectorVideo: ({ title, visualType, }: DeviceSelectorVideoProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { DeviceListItem } from '../../hooks';
+export type DeviceVideoPreviewItemProps = {
+    device: DeviceListItem;
+    onSelect: (deviceId: string) => void;
+};
+export declare const DeviceVideoPreviewItem: ({ device, onSelect, }: DeviceVideoPreviewItemProps) => import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.34.1",
+  "version": "1.35.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.44.5",
-    "@stream-io/video-filters-web": "0.7.3",
-    "@stream-io/video-react-bindings": "1.13.14",
+    "@stream-io/video-client": "1.46.0",
+    "@stream-io/video-filters-web": "0.7.4",
+    "@stream-io/video-react-bindings": "1.14.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -61,7 +61,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stream-io/audio-filters-web": "^0.7.3",
-    "@stream-io/video-styling": "^1.12.0",
+    "@stream-io/video-styling": "^1.13.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",

package/src/components/DeviceSettings/DeviceAudioPreviewItem.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { createSoundDetector } from '@stream-io/video-client';
+import clsx from 'clsx';
+import { DeviceListItem } from '../../hooks';
+
+const LEVEL_BARS = 5;
+
+const DeviceLevelIndicator = ({ deviceId }: { deviceId: string }) => {
+  const [audioLevel, setAudioLevel] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    let dispose: (() => Promise<void>) | undefined;
+
+    navigator.mediaDevices
+      .getUserMedia({
+        audio: { deviceId: { exact: deviceId } },
+        video: false,
+      })
+      .then((mediaStream) => {
+        if (cancelled) {
+          mediaStream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        dispose = createSoundDetector(
+          mediaStream,
+          ({ audioLevel: al }) => setAudioLevel(al),
+          { detectionFrequencyInMs: 80 },
+        );
+      })
+      .catch(console.error);
+
+    return () => {
+      cancelled = true;
+      dispose?.().catch(console.error);
+    };
+  }, [deviceId]);
+
+  const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);
+
+  return (
+    <div className="str-video__device-level-indicator" aria-label="Audio level">
+      {Array.from({ length: LEVEL_BARS }, (_, i) => (
+        <div
+          key={i}
+          className={clsx('str-video__device-level-indicator__bar', {
+            'str-video__device-level-indicator__bar--active': i < activeBars,
+          })}
+        />
+      ))}
+    </div>
+  );
+};
+
+export type DeviceAudioPreviewItemProps = {
+  device: DeviceListItem;
+  onSelect: (deviceId: string) => void;
+};
+
+export const DeviceAudioPreviewItem = ({
+  device,
+  onSelect,
+}: DeviceAudioPreviewItemProps) => {
+  if (device.deviceId === 'default') return null;
+
+  return (
+    <label
+      className={`str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`}
+      htmlFor={`audioinput--${device.deviceId}`}
+    >
+      <input
+        type="radio"
+        name="audioinput"
+        value={device.deviceId}
+        id={`audioinput--${device.deviceId}`}
+        checked={device.isSelected}
+        onChange={(e) => onSelect(e.target.value)}
+      />
+      {device.label}
+      <DeviceLevelIndicator deviceId={device.deviceId} />
+    </label>
+  );
+};

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -1,7 +1,12 @@
 import clsx from 'clsx';
-import { ChangeEventHandler, PropsWithChildren, useCallback } from 'react';
+import {
+  ChangeEventHandler,
+  ComponentType,
+  PropsWithChildren,
+  useCallback,
+} from 'react';
 
-import { useDeviceList } from '../../hooks';
+import { DeviceListItem, useDeviceList } from '../../hooks';
 import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';
 import { useMenuContext } from '../Menu';
 
@@ -102,6 +107,59 @@ const DeviceSelectorList = (
   );
 };
 
+export type PreviewItemProps = {
+  device: DeviceListItem;
+  onSelect: (deviceId: string) => void;
+};
+
+const DeviceSelectorPreview = (
+  props: PropsWithChildren<{
+    devices: MediaDeviceInfo[];
+    selectedDeviceId?: string;
+    title?: string;
+    onChange?: (deviceId: string) => void;
+    PreviewItem: ComponentType<PreviewItemProps>;
+  }>,
+) => {
+  const {
+    devices = [],
+    selectedDeviceId,
+    title,
+    onChange,
+    children,
+    PreviewItem,
+  } = props;
+  const { close } = useMenuContext();
+  const { deviceList } = useDeviceList(devices, selectedDeviceId);
+
+  const onSelect = useCallback(
+    (deviceId: string) => {
+      if (deviceId === 'default') return;
+      onChange?.(deviceId);
+      close?.();
+    },
+    [onChange, close],
+  );
+
+  return (
+    <div className="str-video__device-settings__device-kind">
+      {title && (
+        <div className="str-video__device-settings__device-selector-title">
+          {title}
+        </div>
+      )}
+      {deviceList.map((device) => (
+        <PreviewItem
+          key={device.deviceId}
+          device={device}
+          onSelect={onSelect}
+        />
+      ))}
+      {children}
+    </div>
+  );
+};
+
 const DeviceSelectorDropdown = (props: {
   devices: MediaDeviceInfo[];
   selectedDeviceId?: string;
@@ -157,11 +215,18 @@ export const DeviceSelector = (
     selectedDeviceId?: string;
     title?: string;
     onChange?: (deviceId: string) => void;
-    visualType?: 'list' | 'dropdown';
-  }>,
+  }> &
+    (
+      | { visualType?: 'list' | 'dropdown' }
+      | { visualType: 'preview'; PreviewItem: ComponentType<PreviewItemProps> }
+    ),
 ) => {
-  const { visualType = 'list', icon, ...rest } = props;
+  if (props.visualType === 'preview') {
+    const { PreviewItem, ...rest } = props;
+    return <DeviceSelectorPreview {...rest} PreviewItem={PreviewItem} />;
+  }
 
+  const { visualType = 'list', icon, ...rest } = props;
   if (visualType === 'list') {
     return <DeviceSelectorList {...rest} />;
   }

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -1,11 +1,12 @@
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { DeviceAudioPreviewItem } from './DeviceAudioPreviewItem';
 import { DeviceSelector } from './DeviceSelector';
 import { AudioVolumeIndicator } from './AudioVolumeIndicator';
 import { SpeakerTest } from './SpeakerTest';
 
 export type DeviceSelectorAudioInputProps = {
   title?: string;
-  visualType?: 'list' | 'dropdown';
+  visualType?: 'list' | 'dropdown' | 'preview';
   volumeIndicatorVisible?: boolean;
 };
 
@@ -28,6 +29,7 @@ export const DeviceSelectorAudioInput = ({
       title={title}
       visualType={visualType}
       icon="mic"
+      PreviewItem={DeviceAudioPreviewItem}
     >
       {volumeIndicatorVisible && (
         <>

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -1,9 +1,11 @@
-import { DeviceSelector } from './DeviceSelector';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
+import { DeviceSelector } from './DeviceSelector';
+import { DeviceVideoPreviewItem } from './DeviceVideoPreviewItem';
+
 export type DeviceSelectorVideoProps = {
   title?: string;
-  visualType?: 'list' | 'dropdown';
+  visualType?: 'list' | 'dropdown' | 'preview';
 };
 
 export const DeviceSelectorVideo = ({
@@ -24,6 +26,7 @@ export const DeviceSelectorVideo = ({
       title={title}
       visualType={visualType}
       icon="camera"
+      PreviewItem={DeviceVideoPreviewItem}
     />
   );
 };

package/src/components/DeviceSettings/DeviceVideoPreviewItem.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { DeviceListItem } from '../../hooks';
+
+const DeviceVideoPreview = ({ deviceId }: { deviceId: string }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let stream: MediaStream | undefined;
+
+    navigator.mediaDevices
+      .getUserMedia({
+        video: { deviceId: { exact: deviceId } },
+        audio: false,
+      })
+      .then((mediaStream) => {
+        if (cancelled) {
+          mediaStream.getTracks().forEach((t) => t.stop());
+          return;
+        }
+
+        stream = mediaStream;
+        if (videoRef.current) {
+          videoRef.current.srcObject = mediaStream;
+        }
+      })
+      .catch(console.error);
+
+    return () => {
+      cancelled = true;
+      stream?.getTracks().forEach((t) => t.stop());
+    };
+  }, [deviceId]);
+
+  return (
+    <div className="str-video__device-video-preview">
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        muted
+        className="str-video__device-video-preview__video"
+      />
+    </div>
+  );
+};
+
+export type DeviceVideoPreviewItemProps = {
+  device: DeviceListItem;
+  onSelect: (deviceId: string) => void;
+};
+
+export const DeviceVideoPreviewItem = ({
+  device,
+  onSelect,
+}: DeviceVideoPreviewItemProps) => {
+  if (device.deviceId === 'default') return null;
+
+  return (
+    <button
+      type="button"
+      className={clsx('str-video__device-preview', {
+        'str-video__device-preview--selected': device.isSelected,
+      })}
+      onClick={() => onSelect(device.deviceId)}
+      aria-pressed={device.isSelected}
+    >
+      <DeviceVideoPreview deviceId={device.deviceId} />
+      <span className="str-video__device-preview__label">{device.label}</span>
+    </button>
+  );
+};

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

@@ -165,11 +165,10 @@ export const ParticipantDetails = ({
               className="str-video__participant-details__name--track-paused"
             />
           )}
-          {indicatorsVisible && canUnpin && (
-            // TODO: remove this monstrosity once we have a proper design
+          {indicatorsVisible && pin && (
             <span
-              title={t('Unpin')}
-              onClick={() => call?.unpin(sessionId)}
+              title={canUnpin ? t('Unpin') : t('Pinned')}
+              onClick={canUnpin ? () => call?.unpin(sessionId) : undefined}
               className="str-video__participant-details__name--pinned"
             />
           )}