@stream-io/video-react-sdk 1.26.1 → 1.27.0

package/src/components/DeviceSettings/SpeakerTest.tsx

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { CompositeButton } from '../Button';
+import { Icon } from '../Icon';
+
+/**
+ * SpeakerTest component that plays a test audio through the selected speaker.
+ * This allows users to verify their audio output device is working correctly.
+ */
+export const SpeakerTest = (props: { audioUrl?: string }) => {
+  const { useSpeakerState } = useCallStateHooks();
+  const { selectedDevice } = useSpeakerState();
+  const audioElementRef = useRef<HTMLAudioElement | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const { t } = useI18n();
+
+  const {
+    audioUrl = `https://unpkg.com/${process.env.PKG_NAME}@${process.env.PKG_VERSION}/assets/piano.mp3`,
+  } = props;
+
+  // Update audio output device when selection changes
+  useEffect(() => {
+    const audio = audioElementRef.current;
+    if (!audio || !selectedDevice) return;
+
+    // Set the sinkId to route audio to the selected speaker
+    if ('setSinkId' in audio) {
+      audio.setSinkId(selectedDevice).catch((err) => {
+        console.error('Failed to set audio output device:', err);
+      });
+    }
+  }, [selectedDevice]);
+
+  const handleStartTest = useCallback(async () => {
+    const audio = audioElementRef.current;
+    if (!audio) return;
+
+    audio.src = audioUrl;
+
+    try {
+      if (isPlaying) {
+        audio.pause();
+        audio.currentTime = 0;
+        setIsPlaying(false);
+      } else {
+        await audio.play();
+        setIsPlaying(true);
+      }
+    } catch (err) {
+      console.error('Failed to play test audio:', err);
+      setIsPlaying(false);
+    }
+  }, [isPlaying, audioUrl]);
+
+  const handleAudioEnded = useCallback(() => setIsPlaying(false), []);
+  return (
+    <div className="str-video__speaker-test">
+      <audio
+        ref={audioElementRef}
+        onEnded={handleAudioEnded}
+        onPause={handleAudioEnded}
+      />
+      <CompositeButton
+        className="str-video__speaker-test__button"
+        onClick={handleStartTest}
+        type="button"
+      >
+        <div className="str-video__speaker-test__button-content">
+          <Icon icon="speaker" />
+          {isPlaying ? t('Stop test') : t('Test speaker')}
+        </div>
+      </CompositeButton>
+    </div>
+  );
+};

package/src/components/DeviceSettings/index.ts

@@ -3,3 +3,4 @@ export * from './DeviceSettings';
 export * from './DeviceSelector';
 export * from './DeviceSelectorAudio';
 export * from './DeviceSelectorVideo';
+export * from './SpeakerTest';

package/src/components/Notification/Notification.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode, useEffect } from 'react';
+import clsx from 'clsx';
 import { Placement } from '@floating-ui/react';
-
 import { useFloatingUIPreset } from '../../hooks';
 
 export type NotificationProps = {
@@ -9,6 +9,7 @@ export type NotificationProps = {
   visibilityTimeout?: number;
   resetIsVisible?: () => void;
   placement?: Placement;
+  className?: string;
   iconClassName?: string | null;
   close?: () => void;
 };
@@ -21,6 +22,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
     visibilityTimeout,
     resetIsVisible,
     placement = 'top',
+    className,
     iconClassName = 'str-video__notification__icon',
     close,
   } = props;
@@ -44,7 +46,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
     <div ref={refs.setReference}>
       {isVisible && (
         <div
-          className="str-video__notification"
+          className={clsx('str-video__notification', className)}
           ref={refs.setFloating}
           style={{
             position: strategy,

package/src/translations/en.json

@@ -11,6 +11,7 @@
   "Speakers": "Speakers",
   "Video": "Video",
   "You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
+  "Background filters performance is degraded. Consider disabling filters for better performance.": "Background filters performance is degraded. Consider disabling filters for better performance.",
 
   "Live": "Live",
   "Livestream starts soon": "Livestream starts soon",