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

package/dist/src/core/hooks/useTrackElementVisibility.d.ts

@@ -1,7 +1,6 @@
-import { DynascaleManager, VideoTrackType } from '@stream-io/video-client';
-export declare const useTrackElementVisibility: <T extends HTMLElement>({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }: {
+import { VideoTrackType } from '@stream-io/video-client';
+export declare const useTrackElementVisibility: <T extends HTMLElement>({ trackedElement, sessionId, trackType, }: {
     trackedElement: T | null;
     sessionId: string;
-    dynascaleManager?: DynascaleManager;
     trackType: VideoTrackType | "none";
 }) => void;

package/dist/src/translations/index.d.ts

@@ -56,8 +56,10 @@ export declare const translations: {
         Dismiss: string;
         "Microphone on": string;
         "Microphone off": string;
+        "Microphone is paused by your system": string;
         "Camera on": string;
         "Camera off": string;
+        "Camera is paused by your system": string;
         "No camera found": string;
         "Video is disabled": string;
         Pinned: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.36.1",
+  "version": "1.37.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.6",
-    "@stream-io/video-client": "1.49.0",
+    "@stream-io/video-client": "1.50.0",
     "@stream-io/video-filters-web": "0.7.4",
-    "@stream-io/video-react-bindings": "1.15.1",
+    "@stream-io/video-react-bindings": "1.16.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -60,8 +60,8 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@stream-io/audio-filters-web": "^0.7.3",
-    "@stream-io/video-styling": "^1.13.0",
+    "@stream-io/audio-filters-web": "^0.8.0",
+    "@stream-io/video-styling": "^1.14.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -1,4 +1,4 @@
-import { OwnCapability } from '@stream-io/video-client';
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import {
   Restricted,
   useCallStateHooks,
@@ -38,7 +38,7 @@ export const ToggleAudioPreviewButton = (
     ...restCompositeButtonProps
   } = props;
   const { t } = useI18n();
-  const { useMicrophoneState } = useCallStateHooks();
+  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
   const {
     microphone,
     hasBrowserPermission,
@@ -46,6 +46,10 @@ export const ToggleAudioPreviewButton = (
     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(),
@@ -56,7 +60,9 @@ export const ToggleAudioPreviewButton = (
       title={
         !hasBrowserPermission
           ? t('Check your browser audio permissions')
-          : (caption ?? t('Mic'))
+          : isSystemMuted
+            ? t('Microphone is paused by your system')
+            : (caption ?? t('Mic'))
       }
       tooltipDisabled={tooltipDisabled}
     >
@@ -99,6 +105,13 @@ export const ToggleAudioPreviewButton = (
             children="?"
           />
         )}
+        {isSystemMuted && hasBrowserPermission && (
+          <span
+            className="str-video__system-muted"
+            title={t('Microphone is paused by your system')}
+            children="!"
+          />
+        )}
       </CompositeButton>
     </WithTooltip>
   );
@@ -128,7 +141,7 @@ export const ToggleAudioPublishingButton = (
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_AUDIO);
 
-  const { useMicrophoneState } = useCallStateHooks();
+  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
   const {
     microphone,
     hasBrowserPermission,
@@ -136,6 +149,10 @@ export const ToggleAudioPublishingButton = (
     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 () => {
@@ -161,7 +178,9 @@ export const ToggleAudioPublishingButton = (
               ? t('You have no permission to share your audio')
               : !hasBrowserPermission
                 ? t('Check your browser mic permissions')
-                : (caption ?? t('Mic'))
+                : isSystemMuted
+                  ? t('Microphone is paused by your system')
+                  : (caption ?? t('Mic'))
           }
           tooltipDisabled={tooltipDisabled}
         >
@@ -200,6 +219,14 @@ export const ToggleAudioPublishingButton = (
                 ?
               </span>
             )}
+            {isSystemMuted && hasBrowserPermission && hasPermission && (
+              <span
+                className="str-video__system-muted"
+                title={t('Microphone is paused by your system')}
+              >
+                !
+              </span>
+            )}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -5,7 +5,7 @@ import {
   UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
-import { OwnCapability } from '@stream-io/video-client';
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import { CompositeButton, IconButtonWithMenuProps } from '../Button/';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
@@ -38,7 +38,7 @@ export const ToggleVideoPreviewButton = (
     ...restCompositeButtonProps
   } = props;
   const { t } = useI18n();
-  const { useCameraState } = useCallStateHooks();
+  const { useCameraState, useLocalParticipant } = useCallStateHooks();
   const {
     camera,
     hasBrowserPermission,
@@ -46,6 +46,10 @@ export const ToggleVideoPreviewButton = (
     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());
 
@@ -54,7 +58,9 @@ export const ToggleVideoPreviewButton = (
       title={
         !hasBrowserPermission
           ? t('Check your browser video permissions')
-          : (caption ?? t('Video'))
+          : isSystemMuted
+            ? t('Camera is paused by your system')
+            : (caption ?? t('Video'))
       }
       tooltipDisabled={tooltipDisabled}
     >
@@ -97,6 +103,13 @@ export const ToggleVideoPreviewButton = (
             children="?"
           />
         )}
+        {isSystemMuted && hasBrowserPermission && (
+          <span
+            className="str-video__system-muted"
+            title={t('Camera is paused by your system')}
+            children="!"
+          />
+        )}
       </CompositeButton>
     </WithTooltip>
   );
@@ -126,7 +139,8 @@ export const ToggleVideoPublishingButton = (
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_VIDEO);
 
-  const { useCameraState, useCallSettings } = useCallStateHooks();
+  const { useCameraState, useCallSettings, useLocalParticipant } =
+    useCallStateHooks();
   const {
     camera,
     optionsAwareIsMute,
@@ -134,6 +148,10 @@ export const ToggleVideoPublishingButton = (
     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);
@@ -164,7 +182,9 @@ export const ToggleVideoPublishingButton = (
                 ? t('Check your browser video permissions')
                 : !isPublishingVideoAllowed
                   ? t('Video publishing is disabled by the system')
-                  : caption || t('Video')
+                  : isSystemMuted
+                    ? t('Camera is paused by your system')
+                    : caption || t('Video')
           }
           tooltipDisabled={tooltipDisabled}
         >
@@ -205,6 +225,17 @@ export const ToggleVideoPublishingButton = (
                 ?
               </span>
             )}
+            {isSystemMuted &&
+              hasBrowserPermission &&
+              hasPermission &&
+              isPublishingVideoAllowed && (
+                <span
+                  className="str-video__system-muted"
+                  title={t('Camera is paused by your system')}
+                >
+                  !
+                </span>
+              )}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

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

@@ -195,13 +195,29 @@ export const BackstageLayout = (props: BackstageLayoutProps) => {
   const participantCount = useParticipantCount();
   const startsAt = useCallStartsAt();
   const { t } = useI18n();
+  const [startsAtPassed, setStartsAtPassed] = useState(
+    () => !!startsAt && startsAt.getTime() < Date.now(),
+  );
+
+  useEffect(() => {
+    if (!startsAt || startsAtPassed) return;
+
+    const check = () => {
+      if (startsAt.getTime() < Date.now()) {
+        setStartsAtPassed(true);
+      }
+    };
+
+    const interval = setInterval(check, 1000);
+    return () => clearInterval(interval);
+  }, [startsAt, startsAtPassed]);
 
   return (
     <div className="str-video__livestream-layout__wrapper">
       <div className="str-video__livestream-layout__backstage">
         {startsAt && (
           <span className="str-video__livestream-layout__starts-at">
-            {startsAt.getTime() < Date.now()
+            {startsAtPassed
               ? t('Livestream starts soon')
               : t('Livestream starts at {{ time }}', {
                   time: startsAt.toLocaleTimeString([], {

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

@@ -152,7 +152,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
 
     const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);
 
-    return () => cleanup();
+    return () => cleanup?.();
   }, [paginatedGridLayoutWrapperElement, call]);
 
   // only used to render video elements

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

@@ -149,7 +149,7 @@ export const SpeakerLayout = ({
 
     const cleanup = call.setViewport(participantsBarWrapperElement);
 
-    return () => cleanup();
+    return () => cleanup?.();
   }, [participantsBarWrapperElement, call]);
 
   const isOneOnOneCall = allParticipants.length === 2;

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -102,7 +102,6 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
     const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] =
       useState<HTMLDivElement | null>(null);
 
-    // TODO: allow to pass custom ViewportTracker instance from props
     useTrackElementVisibility({
       sessionId,
       trackedElement,

package/src/core/hooks/useTrackElementVisibility.ts

@@ -1,29 +1,19 @@
 import { useEffect } from 'react';
-import { DynascaleManager, VideoTrackType } from '@stream-io/video-client';
+import { VideoTrackType } from '@stream-io/video-client';
 import { useCall } from '@stream-io/video-react-bindings';
 
 export const useTrackElementVisibility = <T extends HTMLElement>({
   trackedElement,
-  dynascaleManager: propsDynascaleManager,
   sessionId,
   trackType,
 }: {
   trackedElement: T | null;
   sessionId: string;
-  dynascaleManager?: DynascaleManager;
   trackType: VideoTrackType | 'none';
 }) => {
   const call = useCall();
-  const manager = propsDynascaleManager ?? call?.dynascaleManager;
   useEffect(() => {
-    if (!trackedElement || !manager || !call || trackType === 'none') return;
-    const unobserve = manager.trackElementVisibility(
-      trackedElement,
-      sessionId,
-      trackType,
-    );
-    return () => {
-      unobserve();
-    };
-  }, [trackedElement, manager, call, sessionId, trackType]);
+    if (!trackedElement || !call || trackType === 'none') return;
+    return call.trackElementVisibility(trackedElement, sessionId, trackType);
+  }, [trackedElement, call, sessionId, trackType]);
 };

package/src/translations/en.json

@@ -60,8 +60,10 @@
 
   "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",