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

package/dist/embedded.es.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
 import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, useIsAudioConnecting, StreamCallProvider, StreamVideoProvider, useEffectEvent } from '@stream-io/video-react-bindings';
-import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, SfuModels, combineComparators, screenSharing, speakerLayoutSortPreset, paginatedLayoutSortPreset, CallTypes, defaultSortPreset, humanize, StreamVideoClient } from '@stream-io/video-client';
+import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, combineComparators, screenSharing, speakerLayoutSortPreset, paginatedLayoutSortPreset, CallTypes, defaultSortPreset, humanize, StreamVideoClient } from '@stream-io/video-client';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList } from '@floating-ui/react';
 import clsx from 'clsx';
 
@@ -663,17 +663,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 = useCall();
-    const manager = propsDynascaleManager ?? call?.dynascaleManager;
     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 }) => {
@@ -1205,7 +1201,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = useRef(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const { t } = 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.1"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -1314,25 +1310,31 @@ forwardRef(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {
 const ToggleAudioPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { t } = useI18n();
-    const { useMicrophoneState } = useCallStateHooks();
+    const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
     const { microphone, hasBrowserPermission, isPromptingPermission, optionsAwareIsMute, isTogglePending, } = useMicrophoneState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.AUDIO);
     const [tooltipDisabled, setTooltipDisabled] = useState(false);
     const handleClick = createCallControlHandler(props, () => microphone.toggle());
     return (jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser audio permissions')
-            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: 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: 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: [jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }));
 };
 const ToggleAudioPublishingButton = (props) => {
     const { t } = useI18n();
     const { caption, Menu = jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SEND_AUDIO);
-    const { useMicrophoneState } = useCallStateHooks();
+    const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
     const { microphone, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useMicrophoneState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.AUDIO);
     const [tooltipDisabled, setTooltipDisabled] = useState(false);
     const handleClick = createCallControlHandler(props, async () => {
         if (!hasPermission) {
@@ -1346,37 +1348,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: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                        : isSystemMuted
+                            ? t('Microphone is paused by your system')
+                            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: 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: [jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
+                    }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && hasPermission && (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 } = useI18n();
-    const { useCameraState } = useCallStateHooks();
+    const { useCameraState, useLocalParticipant } = useCallStateHooks();
     const { camera, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useCameraState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.VIDEO);
     const [tooltipDisabled, setTooltipDisabled] = useState(false);
     const handleClick = createCallControlHandler(props, () => camera.toggle());
     return (jsx(WithTooltip, { title: !hasBrowserPermission
             ? t('Check your browser video permissions')
-            : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: 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: 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: [jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }));
 };
 const ToggleVideoPublishingButton = (props) => {
     const { t } = useI18n();
     const { caption, Menu = jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SEND_VIDEO);
-    const { useCameraState, useCallSettings } = useCallStateHooks();
+    const { useCameraState, useCallSettings, useLocalParticipant } = useCallStateHooks();
     const { camera, optionsAwareIsMute, hasBrowserPermission, isPromptingPermission, isTogglePending, } = useCameraState({ optimisticUpdates });
+    const localParticipant = useLocalParticipant();
+    const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.VIDEO);
     const callSettings = useCallSettings();
     const isPublishingVideoAllowed = callSettings?.video.enabled;
     const [tooltipDisabled, setTooltipDisabled] = useState(false);
@@ -1394,7 +1404,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: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                            : isSystemMuted
+                                ? t('Camera is paused by your system')
+                                : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: 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) => {
@@ -1402,7 +1414,10 @@ const ToggleVideoPublishingButton = (props) => {
                         onMenuToggle?.(shown);
                     }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
                             !hasPermission ||
-                            !isPublishingVideoAllowed) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
+                            !isPublishingVideoAllowed) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
+                            hasBrowserPermission &&
+                            hasPermission &&
+                            isPublishingVideoAllowed && (jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }));
 };
 
 const EndCallMenu = (props) => {
@@ -1900,7 +1915,6 @@ const ParticipantView = forwardRef(function ParticipantView({ participant, track
     const [trackedElement, setTrackedElement] = useState(null);
     const [contextVideoElement, setContextVideoElement] = useState(null);
     const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] = useState(null);
-    // TODO: allow to pass custom ViewportTracker instance from props
     useTrackElementVisibility({
         sessionId,
         trackedElement,
@@ -2031,8 +2045,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,
@@ -2419,7 +2435,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 = useMemo(() => chunk(participants, groupSize), [participants, groupSize]);
@@ -2511,7 +2527,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);