@stream-io/video-react-sdk 1.36.1 → 1.37.0

package/dist/index.cjs.js

@@ -807,17 +807,13 @@ const Video$1 = ({ enabled = true, mirror, trackType, participant, className, Vi
 };
 Video$1.displayName = 'Video';
 
-const useTrackElementVisibility = ({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }) => {
+const useTrackElementVisibility = ({ trackedElement, sessionId, trackType, }) => {
     const call = videoReactBindings.useCall();
-    const manager = propsDynascaleManager ?? call?.dynascaleManager;
     react.useEffect(() => {
-        if (!trackedElement || !manager || !call || trackType === 'none')
+        if (!trackedElement || !call || trackType === 'none')
             return;
-        const unobserve = manager.trackElementVisibility(trackedElement, sessionId, trackType);
-        return () => {
-            unobserve();
-        };
-    }, [trackedElement, manager, call, sessionId, trackType]);
+        return call.trackElementVisibility(trackedElement, sessionId, trackType);
+    }, [trackedElement, call, sessionId, trackType]);
 };
 
 const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
@@ -1403,7 +1399,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.36.1"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.37.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1519,25 +1515,31 @@ const ToggleDeviceSettingsMenuButton = react.forwardRef(function ToggleDeviceSet
 const ToggleAudioPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { t } = videoReactBindings.useI18n();
-    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { useMicrophoneState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { microphone, hasBrowserPermission, isPromptingPermission, optionsAwareIsMute, isTogglePending, } = useMicrophoneState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.AUDIO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => microphone.toggle());
     return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser audio permissions')
-            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
+            : isSystemMuted
+                ? t('Microphone is paused by your system')
+                : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
                 ? 'preview-audio-unmute-button'
                 : 'preview-audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }));
 };
 const ToggleAudioPublishingButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
-    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { useMicrophoneState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { microphone, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useMicrophoneState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.AUDIO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, async () => {
         if (!hasPermission) {
@@ -1551,37 +1553,45 @@ const ToggleAudioPublishingButton = (props) => {
                     ? t('You have no permission to share your audio')
                     : !hasBrowserPermission
                         ? t('Check your browser mic permissions')
-                        : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                        : isSystemMuted
+                            ? t('Microphone is paused by your system')
+                            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         // disable button while the toggle action is pending when not using optimistic updates
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && hasPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }) }) }));
 };
 
 const ToggleVideoPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { t } = videoReactBindings.useI18n();
-    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { useCameraState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { camera, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useCameraState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.VIDEO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => camera.toggle());
     return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser video permissions')
-            : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
+            : isSystemMuted
+                ? t('Camera is paused by your system')
+                : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
                 ? 'preview-video-unmute-button'
                 : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }));
 };
 const ToggleVideoPublishingButton = (props) => {
     const { t } = videoReactBindings.useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_VIDEO);
-    const { useCameraState, useCallSettings } = videoReactBindings.useCallStateHooks();
+    const { useCameraState, useCallSettings, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { camera, optionsAwareIsMute, hasBrowserPermission, isPromptingPermission, isTogglePending, } = useCameraState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.VIDEO);
     const callSettings = useCallSettings();
     const isPublishingVideoAllowed = callSettings?.video.enabled;
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
@@ -1599,7 +1609,9 @@ const ToggleVideoPublishingButton = (props) => {
                         ? t('Check your browser video permissions')
                         : !isPublishingVideoAllowed
                             ? t('Video publishing is disabled by the system')
-                            : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                            : isSystemMuted
+                                ? t('Camera is paused by your system')
+                                : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         !isPublishingVideoAllowed ||
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
@@ -1607,7 +1619,10 @@ const ToggleVideoPublishingButton = (props) => {
                         onMenuToggle?.(shown);
                     }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
                             !hasPermission ||
-                            !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
+                            !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
+                            hasBrowserPermission &&
+                            hasPermission &&
+                            isPublishingVideoAllowed && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }));
 };
 
 const EndCallMenu = (props) => {
@@ -2398,7 +2413,6 @@ const ParticipantView = react.forwardRef(function ParticipantView({ participant,
     const [trackedElement, setTrackedElement] = react.useState(null);
     const [contextVideoElement, setContextVideoElement] = react.useState(null);
     const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] = react.useState(null);
-    // TODO: allow to pass custom ViewportTracker instance from props
     useTrackElementVisibility({
         sessionId,
         trackedElement,
@@ -2529,8 +2543,10 @@ var en = {
 	Dismiss: Dismiss,
 	"Microphone on": "Microphone on",
 	"Microphone off": "Microphone off",
+	"Microphone is paused by your system": "Microphone is paused by your system",
 	"Camera on": "Camera on",
 	"Camera off": "Camera off",
+	"Camera is paused by your system": "Camera is paused by your system",
 	"No camera found": "No camera found",
 	"Video is disabled": "Video is disabled",
 	Pinned: Pinned,
@@ -2937,7 +2953,7 @@ const PaginatedGridLayout = (props) => {
         if (!paginatedGridLayoutWrapperElement || !call)
             return;
         const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);
-        return () => cleanup();
+        return () => cleanup?.();
     }, [paginatedGridLayoutWrapperElement, call]);
     // only used to render video elements
     const participantGroups = react.useMemo(() => chunk(participants, groupSize), [participants, groupSize]);
@@ -3029,7 +3045,7 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
         if (!participantsBarWrapperElement || !call)
             return;
         const cleanup = call.setViewport(participantsBarWrapperElement);
-        return () => cleanup();
+        return () => cleanup?.();
     }, [participantsBarWrapperElement, call]);
     const isOneOnOneCall = allParticipants.length === 2;
     useSpeakerLayoutSortPreset(call, isOneOnOneCall);
@@ -3236,7 +3252,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.36.1").split('.');
+const [major, minor, patch] = ("1.37.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,