@stream-io/video-react-sdk 1.18.13 → 1.19.1

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

@@ -83,6 +83,7 @@ export declare const translations: {
         "{{ direction }} picture-in-picture": string;
         "Dominant Speaker": string;
         "Poor connection quality": string;
+        "Video paused due to insufficient bandwidth": string;
         Participants: string;
         Anonymous: string;
         "No participants found": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.18.13",
+  "version": "1.19.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.26.1",
+    "@stream-io/video-client": "1.27.1",
     "@stream-io/video-filters-web": "0.2.1",
-    "@stream-io/video-react-bindings": "1.7.8",
+    "@stream-io/video-react-bindings": "1.7.10",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -45,8 +45,8 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@stream-io/audio-filters-web": "^0.4.2",
-    "@stream-io/video-styling": "^1.3.0",
+    "@stream-io/audio-filters-web": "^0.4.3",
+    "@stream-io/video-styling": "^1.4.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "react": "19.0.0",

package/src/components/BackgroundFilters/BackgroundFilters.tsx

@@ -10,7 +10,7 @@ import {
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { useCall } from '@stream-io/video-react-bindings';
-import { disposeOfMediaStream, getLogger } from '@stream-io/video-client';
+import { Call, disposeOfMediaStream, getLogger } from '@stream-io/video-client';
 import {
   BackgroundBlurLevel,
   BackgroundFilter,
@@ -228,7 +228,7 @@ export const BackgroundFiltersProvider = (
 
 const BackgroundFilters = (props: { tfLite: TFLite }) => {
   const call = useCall();
-  const { children, start } = useRenderer(props.tfLite);
+  const { children, start } = useRenderer(props.tfLite, call);
   const { backgroundFilter, onError } = useBackgroundFilters();
   const handleErrorRef = useRef<((error: any) => void) | undefined>(undefined);
   handleErrorRef.current = onError;
@@ -246,7 +246,7 @@ const BackgroundFilters = (props: { tfLite: TFLite }) => {
   return children;
 };
 
-const useRenderer = (tfLite: TFLite) => {
+const useRenderer = (tfLite: TFLite, call: Call | undefined) => {
   const { backgroundFilter, backgroundBlurLevel, backgroundImage } =
     useBackgroundFilters();
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -297,6 +297,11 @@ const useRenderer = (tfLite: TFLite) => {
                 height: trackSettings.height ?? 0,
               }),
             );
+            call?.tracer.trace('backgroundFilters.enable', {
+              backgroundFilter,
+              backgroundBlurLevel,
+              backgroundImage,
+            });
             renderer = createRenderer(
               tfLite,
               videoEl,
@@ -320,13 +325,20 @@ const useRenderer = (tfLite: TFLite) => {
       return {
         output,
         stop: () => {
+          call?.tracer.trace('backgroundFilters.disable', null);
           renderer?.dispose();
           if (videoRef.current) videoRef.current.srcObject = null;
           if (outputStream) disposeOfMediaStream(outputStream);
         },
       };
     },
-    [backgroundBlurLevel, backgroundFilter, backgroundImage, tfLite],
+    [
+      backgroundBlurLevel,
+      backgroundFilter,
+      backgroundImage,
+      call?.tracer,
+      tfLite,
+    ],
   );
 
   const children = (

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

@@ -2,6 +2,7 @@ import { ComponentType, forwardRef } from 'react';
 import { Placement } from '@floating-ui/react';
 import {
   hasAudio,
+  hasPausedTrack,
   hasScreenShare,
   hasVideo,
   SfuModels,
@@ -50,7 +51,9 @@ export const DefaultScreenShareOverlay = () => {
   const { t } = useI18n();
 
   const stopScreenShare = () => {
-    call?.screenShare.disable();
+    call?.screenShare.disable().catch((err) => {
+      console.error('Failed to stop screen sharing:', err);
+    });
   };
 
   return (
@@ -61,6 +64,7 @@ export const DefaultScreenShareOverlay = () => {
       </span>
       <button
         onClick={stopScreenShare}
+        type="button"
         className="str-video__screen-share-overlay__button"
       >
         <Icon icon="close" /> {t('Stop Screen Sharing')}
@@ -111,7 +115,7 @@ export const DefaultParticipantViewUI = ({
 export const ParticipantDetails = ({
   indicatorsVisible = true,
 }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => {
-  const { participant } = useParticipantViewContext();
+  const { participant, trackType } = useParticipantViewContext();
   const {
     isLocalParticipant,
     connectionQuality,
@@ -130,6 +134,8 @@ export const ParticipantDetails = ({
   const hasAudioTrack = hasAudio(participant);
   const hasVideoTrack = hasVideo(participant);
   const canUnpin = !!pin && pin.isLocalPin;
+  const isTrackPaused =
+    trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
 
   return (
     <>
@@ -143,6 +149,12 @@ export const ParticipantDetails = ({
           {indicatorsVisible && !hasVideoTrack && (
             <span className="str-video__participant-details__name--video-muted" />
           )}
+          {indicatorsVisible && isTrackPaused && (
+            <span
+              title={t('Video paused due to insufficient bandwidth')}
+              className="str-video__participant-details__name--track-paused"
+            />
+          )}
           {indicatorsVisible && canUnpin && (
             // TODO: remove this monstrosity once we have a proper design
             <span

package/src/core/components/Video/Video.tsx

@@ -6,6 +6,7 @@ import {
   useState,
 } from 'react';
 import {
+  hasPausedTrack,
   hasScreenShare,
   hasVideo,
   StreamVideoParticipant,
@@ -171,7 +172,11 @@ export const Video = ({
     trackType === 'none' ||
     viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
 
-  const hasNoVideoOrInvisible = !enabled || !isPublishingTrack || isInvisible;
+  const hasNoVideoOrInvisible =
+    !enabled ||
+    !isPublishingTrack ||
+    isInvisible ||
+    hasPausedTrack(participant, trackType);
   const mirrorVideo =
     mirror === undefined
       ? isLocalParticipant && trackType === 'videoTrack'

package/src/translations/en.json

@@ -88,6 +88,7 @@
 
   "Dominant Speaker": "Dominant Speaker",
   "Poor connection quality": "Poor connection quality. Please check your internet connection.",
+  "Video paused due to insufficient bandwidth": "Video paused due to insufficient bandwidth",
 
   "Participants": "Participants",
   "Anonymous": ", and ({{ count }}) anonymous",