@stream-io/video-react-sdk 1.39.3 → 1.40.1

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.3",
+  "version": "1.40.1",
   "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.2",
-    "@stream-io/video-filters-web": "0.8.3",
-    "@stream-io/video-react-bindings": "1.18.3",
+    "@stream-io/video-client": "1.56.0",
+    "@stream-io/video-filters-web": "0.8.5",
+    "@stream-io/video-react-bindings": "1.19.1",
     "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.1",
+    "@stream-io/audio-filters-web": "^0.10.3",
     "@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/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",