@stream-io/video-react-sdk 1.31.8 → 1.32.1

package/dist/src/components/Notification/MicCaptureErrorNotification.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { Placement } from '@floating-ui/react';
+export type MicCaptureErrorNotificationProps = {
+    /**
+     * Text message displayed by the notification.
+     */
+    text?: string;
+    placement?: Placement;
+};
+export declare const MicCaptureErrorNotification: ({ children, text, placement, }: PropsWithChildren<MicCaptureErrorNotificationProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Notification/index.d.ts

@@ -2,3 +2,4 @@ export * from './Notification';
 export * from './PermissionNotification';
 export * from './SpeakingWhileMutedNotification';
 export * from './RecordingInProgressNotification';
+export * from './MicCaptureErrorNotification';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.31.8",
+  "version": "1.32.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -31,9 +31,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.41.3",
+    "@stream-io/video-client": "1.42.1",
     "@stream-io/video-filters-web": "0.7.2",
-    "@stream-io/video-react-bindings": "1.13.3",
+    "@stream-io/video-react-bindings": "1.13.5",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"

package/src/components/CallControls/CallControls.tsx

@@ -1,6 +1,9 @@
 import { OwnCapability } from '@stream-io/video-client';
 import { Restricted } from '@stream-io/video-react-bindings';
-import { SpeakingWhileMutedNotification } from '../Notification';
+import {
+  SpeakingWhileMutedNotification,
+  MicCaptureErrorNotification,
+} from '../Notification';
 import { RecordCallButton } from './RecordCallButton';
 import { ReactionsButton } from './ReactionsButton';
 import { ScreenShareButton } from './ScreenShareButton';
@@ -15,9 +18,11 @@ export type CallControlsProps = {
 export const CallControls = ({ onLeave }: CallControlsProps) => (
   <div className="str-video__call-controls">
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
-      <SpeakingWhileMutedNotification>
-        <ToggleAudioPublishingButton />
-      </SpeakingWhileMutedNotification>
+      <MicCaptureErrorNotification>
+        <SpeakingWhileMutedNotification>
+          <ToggleAudioPublishingButton />
+        </SpeakingWhileMutedNotification>
+      </MicCaptureErrorNotification>
     </Restricted>
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <ToggleVideoPublishingButton />

package/src/components/Notification/MicCaptureErrorNotification.tsx

@@ -0,0 +1,43 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { Placement } from '@floating-ui/react';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { Notification } from './Notification';
+
+export type MicCaptureErrorNotificationProps = {
+  /**
+   * Text message displayed by the notification.
+   */
+  text?: string;
+  placement?: Placement;
+};
+
+export const MicCaptureErrorNotification = ({
+  children,
+  text,
+  placement,
+}: PropsWithChildren<MicCaptureErrorNotificationProps>) => {
+  const call = useCall();
+  const { t } = useI18n();
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!call) return;
+    return call.on('mic.capture_report', (event) => {
+      setIsVisible(!event.capturesAudio);
+    });
+  }, [call]);
+
+  const message =
+    text ??
+    t('Your microphone is not capturing audio. Please check your setup.');
+
+  return (
+    <Notification
+      message={message}
+      isVisible={isVisible}
+      placement={placement}
+      close={() => setIsVisible(false)}
+    >
+      {children}
+    </Notification>
+  );
+};

package/src/components/Notification/Notification.tsx

@@ -43,7 +43,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
   }, [isVisible, resetIsVisible, visibilityTimeout]);
 
   return (
-    <div ref={refs.setReference}>
+    <div className="str-video__notification-wrapper" ref={refs.setReference}>
       {isVisible && (
         <div
           className={clsx('str-video__notification', className)}

package/src/components/Notification/index.ts

@@ -2,3 +2,4 @@ export * from './Notification';
 export * from './PermissionNotification';
 export * from './SpeakingWhileMutedNotification';
 export * from './RecordingInProgressNotification';
+export * from './MicCaptureErrorNotification';

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

@@ -247,7 +247,7 @@ const ParticipantOverlay = (props: {
     showLiveBadge ||
     showMuteButton ||
     showSpeakerName;
-  const { participant } = useParticipantViewContext();
+  const { participant, participantViewElement } = useParticipantViewContext();
   const { useParticipantCount, useSpeakerState } = useCallStateHooks();
   const participantCount = useParticipantCount();
   const duration = useUpdateCallDuration();
@@ -294,12 +294,14 @@ const ParticipantOverlay = (props: {
               onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}
             />
           )}
-          {enableFullScreen && (
-            <span
-              className="str-video__livestream-layout__go-fullscreen"
-              onClick={toggleFullScreen}
-            />
-          )}
+          {enableFullScreen &&
+            participantViewElement &&
+            typeof participantViewElement.requestFullscreen !== 'undefined' && (
+              <span
+                className="str-video__livestream-layout__go-fullscreen"
+                onClick={toggleFullScreen}
+              />
+            )}
         </div>
       )}
     </div>