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

package/dist/embedded.cjs.js

@@ -1210,7 +1210,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.39.3"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.40.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1896,15 +1896,30 @@ const DefaultScreenShareOverlay = () => {
     };
     return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, type: "button", className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
 };
-const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, }) => {
+/**
+ * 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.
+ */
+const DefaultAudioBlockedNotification = () => {
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("button", { type: "button", className: "str-video__audio-blocked-notification", onClick: call?.resumeAudio, "aria-live": "polite", children: jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__message", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__text", children: [jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__title", children: t('Audio is blocked by your system') }), jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__subtitle", children: t('Click or tap to play audio') })] })] }) }));
+};
+const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, AudioBlockedNotification = DefaultAudioBlockedNotification, }) => {
     const { participant, trackType } = useParticipantViewContext();
+    const { useAutoplayBlockedSessionIds } = videoReactBindings.useCallStateHooks();
+    const blockedSessionIds = useAutoplayBlockedSessionIds();
     const isScreenSharing = videoClient.hasScreenShare(participant);
+    const shouldShowAudioBlockedNotification = !participant.isLocalParticipant &&
+        trackType !== 'screenShareTrack' &&
+        blockedSessionIds.includes(participant.sessionId);
     if (participant.isLocalParticipant &&
         isScreenSharing &&
         trackType === 'screenShareTrack') {
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DefaultScreenShareOverlay, {}), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showMenuButton && (jsxRuntime.jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsxRuntime.jsx(ParticipantActionsContextMenu$1, {}) })), jsxRuntime.jsx(Reaction, { participant: participant }), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showMenuButton && (jsxRuntime.jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsxRuntime.jsx(ParticipantActionsContextMenu$1, {}) })), jsxRuntime.jsx(Reaction, { participant: participant }), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible }), AudioBlockedNotification && shouldShowAudioBlockedNotification && (jsxRuntime.jsx(AudioBlockedNotification, {}))] }));
 };
 const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const { participant, trackType } = useParticipantViewContext();
@@ -2061,6 +2076,8 @@ var en = {
 	"You have no permission to share your audio": "You have no permission to share your audio",
 	"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,