@stream-io/video-react-sdk 1.26.0 → 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

@@ -1,4 +1,6 @@
+export * from './AudioVolumeIndicator';
 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/core/components/CallLayout/LivestreamLayout.tsx

@@ -1,5 +1,11 @@
 import clsx from 'clsx';
-import { useCallback, useEffect, useState } from 'react';
+import {
+  ComponentType,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import {
   useCall,
   useCallStateHooks,
@@ -62,6 +68,11 @@ export type LivestreamLayoutProps = {
      */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   };
+
+  /**
+   * Override the default participant view overlay UI.
+   */
+  ParticipantViewUI?: ComponentType | ReactElement | null;
 };
 
 export const LivestreamLayout = (props: LivestreamLayoutProps) => {
@@ -77,27 +88,31 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
 
   usePaginatedLayoutSortPreset(call);
 
-  const overlay = (
+  const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+  const overlay = ParticipantViewUI ?? (
     <ParticipantOverlay
       showParticipantCount={props.showParticipantCount}
       showDuration={props.showDuration}
       showLiveBadge={props.showLiveBadge}
       showSpeakerName={props.showSpeakerName}
+      enableFullScreen={props.enableFullScreen}
     />
   );
 
-  const { floatingParticipantProps, muted } = props;
-  const floatingParticipantOverlay = hasOngoingScreenShare && (
-    <ParticipantOverlay
-      // these elements aren't needed for the video feed
-      showParticipantCount={
-        floatingParticipantProps?.showParticipantCount ?? false
-      }
-      showDuration={floatingParticipantProps?.showDuration ?? false}
-      showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}
-      showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}
-    />
-  );
+  const floatingParticipantOverlay =
+    hasOngoingScreenShare &&
+    (ParticipantViewUI ?? (
+      <ParticipantOverlay
+        // these elements aren't needed for the video feed
+        showParticipantCount={
+          floatingParticipantProps?.showParticipantCount ?? false
+        }
+        showDuration={floatingParticipantProps?.showDuration ?? false}
+        showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}
+        showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}
+        enableFullScreen={floatingParticipantProps?.enableFullScreen ?? true}
+      />
+    ));
 
   return (
     <div className="str-video__livestream-layout__wrapper">
@@ -192,6 +207,12 @@ const ParticipantOverlay = (props: {
     showLiveBadge = true,
     showSpeakerName = false,
   } = props;
+  const overlayBarVisible =
+    enableFullScreen ||
+    showParticipantCount ||
+    showDuration ||
+    showLiveBadge ||
+    showSpeakerName;
   const { participant } = useParticipantViewContext();
   const { useParticipantCount } = useCallStateHooks();
   const participantCount = useParticipantCount();
@@ -200,37 +221,39 @@ const ParticipantOverlay = (props: {
   const { t } = useI18n();
   return (
     <div className="str-video__livestream-layout__overlay">
-      <div className="str-video__livestream-layout__overlay__bar">
-        {showLiveBadge && (
-          <span className="str-video__livestream-layout__live-badge">
-            {t('Live')}
-          </span>
-        )}
-        {showParticipantCount && (
-          <span className="str-video__livestream-layout__viewers-count">
-            {participantCount}
-          </span>
-        )}
-        {showSpeakerName && (
-          <span
-            className="str-video__livestream-layout__speaker-name"
-            title={participant.name || participant.userId || ''}
-          >
-            {participant.name || participant.userId || ''}
-          </span>
-        )}
-        {showDuration && (
-          <span className="str-video__livestream-layout__duration">
-            {formatDuration(duration)}
-          </span>
-        )}
-        {enableFullScreen && (
-          <span
-            className="str-video__livestream-layout__go-fullscreen"
-            onClick={toggleFullScreen}
-          />
-        )}
-      </div>
+      {overlayBarVisible && (
+        <div className="str-video__livestream-layout__overlay__bar">
+          {showLiveBadge && (
+            <span className="str-video__livestream-layout__live-badge">
+              {t('Live')}
+            </span>
+          )}
+          {showParticipantCount && (
+            <span className="str-video__livestream-layout__viewers-count">
+              {participantCount}
+            </span>
+          )}
+          {showSpeakerName && (
+            <span
+              className="str-video__livestream-layout__speaker-name"
+              title={participant.name || participant.userId || ''}
+            >
+              {participant.name || participant.userId || ''}
+            </span>
+          )}
+          {showDuration && (
+            <span className="str-video__livestream-layout__duration">
+              {formatDuration(duration)}
+            </span>
+          )}
+          {enableFullScreen && (
+            <span
+              className="str-video__livestream-layout__go-fullscreen"
+              onClick={toggleFullScreen}
+            />
+          )}
+        </div>
+      )}
     </div>
   );
 };

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",