@stream-io/video-react-sdk 1.39.2 → 1.40.0

package/dist/src/core/components/CallLayout/hooks.d.ts

@@ -14,5 +14,4 @@ export declare const useFilteredParticipants: ({ excludeLocalParticipant, filter
 }) => StreamVideoParticipant[];
 export declare const applyParticipantsFilter: (participants: StreamVideoParticipant[], filter: ParticipantPredicate | ParticipantFilter) => StreamVideoParticipant[];
 export declare const usePaginatedLayoutSortPreset: (call: Call | undefined) => void;
-export declare const useSpeakerLayoutSortPreset: (call: Call | undefined, isOneOnOneCall: boolean) => void;
 export declare const useRawRemoteParticipants: () => StreamVideoParticipant[];

package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.d.ts

@@ -17,8 +17,21 @@ export type DefaultParticipantViewUIProps = {
      * Custom component to render the context menu
      */
     ParticipantActionsContextMenu?: ComponentType;
+    /**
+     * Rendered over the tile when this participant's audio is blocked by the
+     * browser's autoplay policy. Selecting it calls {@link Call.resumeAudio} to
+     * unblock audio. Defaults to
+     * {@link DefaultAudioBlockedNotification}; pass `null` to disable.
+     */
+    AudioBlockedNotification?: ComponentType | null;
 };
 export declare const DefaultScreenShareOverlay: () => import("react/jsx-runtime").JSX.Element;
-export declare const DefaultParticipantViewUI: ({ indicatorsVisible, menuPlacement, showMenuButton, ParticipantActionsContextMenu, }: DefaultParticipantViewUIProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Rendered over a remote participant's tile when the browser's autoplay policy
+ * has blocked their audio. Selecting it calls `call.resumeAudio()`, unblocking
+ * every blocked element at once.
+ */
+export declare const DefaultAudioBlockedNotification: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultParticipantViewUI: ({ indicatorsVisible, menuPlacement, showMenuButton, ParticipantActionsContextMenu, AudioBlockedNotification, }: DefaultParticipantViewUIProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ParticipantDetails: ({ indicatorsVisible, }: Pick<DefaultParticipantViewUIProps, "indicatorsVisible">) => import("react/jsx-runtime").JSX.Element;
 export declare const SpeechIndicator: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/translations/index.d.ts

@@ -51,6 +51,8 @@ export declare const translations: {
         "You have no permission to share your audio": string;
         "You are presenting your screen": string;
         "Stop Screen Sharing": string;
+        "Audio is blocked by your system": string;
+        "Click or tap to play audio": string;
         Allow: string;
         Revoke: string;
         Dismiss: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.39.2",
+  "version": "1.40.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.19",
-    "@stream-io/video-client": "1.55.1",
-    "@stream-io/video-filters-web": "0.8.2",
-    "@stream-io/video-react-bindings": "1.18.2",
+    "@stream-io/video-client": "1.56.0",
+    "@stream-io/video-filters-web": "0.8.4",
+    "@stream-io/video-react-bindings": "1.19.0",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
     "react-chartjs-2": "^5.3.1"
@@ -60,9 +60,9 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@stream-io/audio-filters-web": "^0.10.0",
+    "@stream-io/audio-filters-web": "^0.10.2",
     "@stream-io/typescript-config": "^0.0.0",
-    "@stream-io/video-styling": "^1.14.2",
+    "@stream-io/video-styling": "^1.15.0",
     "@types/node": "^25.9.3",
     "@types/react": "~19.2.15",
     "@types/react-dom": "~19.2.3",

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

@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { hasScreenShare } from '@stream-io/video-client';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import {
+  useCall,
+  useCallStateHooks,
+  useSpeakerLayoutSortPreset,
+} from '@stream-io/video-react-bindings';
 
 import {
   DefaultParticipantViewUI,
@@ -19,7 +23,6 @@ import {
   ParticipantPredicate,
   useFilteredParticipants,
   useRawRemoteParticipants,
-  useSpeakerLayoutSortPreset,
 } from './hooks';
 import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
 import { ParticipantsAudio } from '../Audio';

package/src/core/components/CallLayout/hooks.ts

@@ -2,16 +2,12 @@ import { useEffect, useMemo } from 'react';
 import {
   Call,
   CallTypes,
-  combineComparators,
-  Comparator,
   defaultSortPreset,
   hasAudio,
   hasScreenShare,
   hasVideo,
   isPinned,
   paginatedLayoutSortPreset,
-  screenSharing,
-  speakerLayoutSortPreset,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
@@ -94,24 +90,6 @@ export const usePaginatedLayoutSortPreset = (call: Call | undefined) => {
   }, [call]);
 };
 
-export const useSpeakerLayoutSortPreset = (
-  call: Call | undefined,
-  isOneOnOneCall: boolean,
-) => {
-  useEffect(() => {
-    if (!call) return;
-    // always show the remote participant in the spotlight
-    if (isOneOnOneCall) {
-      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
-    } else {
-      call.setSortParticipantsBy(speakerLayoutSortPreset);
-    }
-    return () => {
-      resetSortPreset(call);
-    };
-  }, [call, isOneOnOneCall]);
-};
-
 export const useRawRemoteParticipants = () => {
   const { useRawParticipants } = useCallStateHooks();
   const rawParticipants = useRawParticipants();
@@ -128,9 +106,3 @@ const resetSortPreset = (call: Call) => {
     callConfig.options.sortParticipantsBy || defaultSortPreset,
   );
 };
-
-const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
-  if (a.isLocalParticipant) return 1;
-  if (b.isLocalParticipant) return -1;
-  return 0;
-};

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

@@ -9,6 +9,7 @@ import {
 } from '@stream-io/video-client';
 import {
   useCall,
+  useCallStateHooks,
   useI18n,
   useIsAudioConnecting,
   useIsVideoConnecting,
@@ -44,6 +45,13 @@ export type DefaultParticipantViewUIProps = {
    * Custom component to render the context menu
    */
   ParticipantActionsContextMenu?: ComponentType;
+  /**
+   * Rendered over the tile when this participant's audio is blocked by the
+   * browser's autoplay policy. Selecting it calls {@link Call.resumeAudio} to
+   * unblock audio. Defaults to
+   * {@link DefaultAudioBlockedNotification}; pass `null` to disable.
+   */
+  AudioBlockedNotification?: ComponentType | null;
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
@@ -79,14 +87,52 @@ export const DefaultScreenShareOverlay = () => {
   );
 };
 
+/**
+ * Rendered over a remote participant's tile when the browser's autoplay policy
+ * has blocked their audio. Selecting it calls `call.resumeAudio()`, unblocking
+ * every blocked element at once.
+ */
+export const DefaultAudioBlockedNotification = () => {
+  const call = useCall();
+  const { t } = useI18n();
+
+  return (
+    <button
+      type="button"
+      className="str-video__audio-blocked-notification"
+      onClick={call?.resumeAudio}
+      aria-live="polite"
+    >
+      <span className="str-video__audio-blocked-notification__message">
+        <Icon icon="speaker" />
+        <span className="str-video__audio-blocked-notification__text">
+          <span className="str-video__audio-blocked-notification__title">
+            {t('Audio is blocked by your system')}
+          </span>
+          <span className="str-video__audio-blocked-notification__subtitle">
+            {t('Click or tap to play audio')}
+          </span>
+        </span>
+      </span>
+    </button>
+  );
+};
+
 export const DefaultParticipantViewUI = ({
   indicatorsVisible = true,
   menuPlacement = 'bottom-start',
   showMenuButton = true,
   ParticipantActionsContextMenu = DefaultParticipantActionsContextMenu,
+  AudioBlockedNotification = DefaultAudioBlockedNotification,
 }: DefaultParticipantViewUIProps) => {
   const { participant, trackType } = useParticipantViewContext();
+  const { useAutoplayBlockedSessionIds } = useCallStateHooks();
+  const blockedSessionIds = useAutoplayBlockedSessionIds();
   const isScreenSharing = hasScreenShare(participant);
+  const shouldShowAudioBlockedNotification =
+    !participant.isLocalParticipant &&
+    trackType !== 'screenShareTrack' &&
+    blockedSessionIds.includes(participant.sessionId);
 
   if (
     participant.isLocalParticipant &&
@@ -114,6 +160,9 @@ export const DefaultParticipantViewUI = ({
       )}
       <Reaction participant={participant} />
       <ParticipantDetails indicatorsVisible={indicatorsVisible} />
+      {AudioBlockedNotification && shouldShowAudioBlockedNotification && (
+        <AudioBlockedNotification />
+      )}
     </>
   );
 };

package/src/translations/en.json

@@ -54,6 +54,9 @@
   "You are presenting your screen": "You are presenting your screen",
   "Stop Screen Sharing": "Stop Screen Sharing",
 
+  "Audio is blocked by your system": "Audio is blocked by your system",
+  "Click or tap to play audio": "Click or tap to play audio",
+
   "Allow": "Allow",
   "Revoke": "Revoke",
   "Dismiss": "Dismiss",