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

package/dist/index.cjs.js

@@ -787,7 +787,10 @@ const Video$1 = ({ enabled = true, mirror, trackType, participant, className, Vi
             : false;
     const isInvisible = trackType === 'none' ||
         viewportVisibilityState?.[trackType] === videoClient.VisibilityState.INVISIBLE;
-    const hasNoVideoOrInvisible = !enabled || !isPublishingTrack || isInvisible;
+    const hasNoVideoOrInvisible = !enabled ||
+        !isPublishingTrack ||
+        isInvisible ||
+        videoClient.hasPausedTrack(participant, trackType);
     const mirrorVideo = mirror === undefined
         ? isLocalParticipant && trackType === 'videoTrack'
         : mirror;
@@ -899,7 +902,7 @@ const BackgroundFiltersProvider = (props) => {
 };
 const BackgroundFilters = (props) => {
     const call = videoReactBindings.useCall();
-    const { children, start } = useRenderer(props.tfLite);
+    const { children, start } = useRenderer(props.tfLite, call);
     const { backgroundFilter, onError } = useBackgroundFilters();
     const handleErrorRef = react.useRef(undefined);
     handleErrorRef.current = onError;
@@ -913,7 +916,7 @@ const BackgroundFilters = (props) => {
     }, [backgroundFilter, call, start]);
     return children;
 };
-const useRenderer = (tfLite) => {
+const useRenderer = (tfLite, call) => {
     const { backgroundFilter, backgroundBlurLevel, backgroundImage } = useBackgroundFilters();
     const videoRef = react.useRef(null);
     const canvasRef = react.useRef(null);
@@ -950,6 +953,11 @@ const useRenderer = (tfLite) => {
                     width: trackSettings.width ?? 0,
                     height: trackSettings.height ?? 0,
                 }));
+                call?.tracer.trace('backgroundFilters.enable', {
+                    backgroundFilter,
+                    backgroundBlurLevel,
+                    backgroundImage,
+                });
                 renderer = videoFiltersWeb.createRenderer(tfLite, videoEl, canvasEl, {
                     backgroundFilter,
                     backgroundBlurLevel,
@@ -964,6 +972,7 @@ const useRenderer = (tfLite) => {
         return {
             output,
             stop: () => {
+                call?.tracer.trace('backgroundFilters.disable', null);
                 renderer?.dispose();
                 if (videoRef.current)
                     videoRef.current.srcObject = null;
@@ -971,7 +980,13 @@ const useRenderer = (tfLite) => {
                     videoClient.disposeOfMediaStream(outputStream);
             },
         };
-    }, [backgroundBlurLevel, backgroundFilter, backgroundImage, tfLite]);
+    }, [
+        backgroundBlurLevel,
+        backgroundFilter,
+        backgroundImage,
+        call?.tracer,
+        tfLite,
+    ]);
     const children = (jsxRuntime.jsxs("div", { className: "str-video__background-filters", children: [jsxRuntime.jsx("video", { className: clsx('str-video__background-filters__video', videoSize.height > videoSize.width &&
                     'str-video__background-filters__video--tall'), ref: videoRef, playsInline: true, muted: true, controls: false, ...videoSize }), backgroundImage && (jsxRuntime.jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: bgImageRef, src: backgroundImage, ...videoSize })), jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
     return {
@@ -2217,9 +2232,11 @@ const DefaultScreenShareOverlay = () => {
     const call = videoReactBindings.useCall();
     const { t } = videoReactBindings.useI18n();
     const stopScreenShare = () => {
-        call?.screenShare.disable();
+        call?.screenShare.disable().catch((err) => {
+            console.error('Failed to stop screen sharing:', err);
+        });
     };
-    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, type: "button", className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
 };
 const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, }) => {
     const { participant, trackType } = useParticipantViewContext();
@@ -2232,7 +2249,7 @@ const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'b
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showMenuButton && (jsxRuntime.jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsxRuntime.jsx(ParticipantActionsContextMenu$1, {}) })), jsxRuntime.jsx(Reaction, { participant: participant }), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
 };
 const ParticipantDetails = ({ indicatorsVisible = true, }) => {
-    const { participant } = useParticipantViewContext();
+    const { participant, trackType } = useParticipantViewContext();
     const { isLocalParticipant, connectionQuality, pin, sessionId, name, userId, } = participant;
     const call = videoReactBindings.useCall();
     const { t } = videoReactBindings.useI18n();
@@ -2241,7 +2258,8 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const hasAudioTrack = videoClient.hasAudio(participant);
     const hasVideoTrack = videoClient.hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
+    const isTrackPaused = trackType !== 'none' ? videoClient.hasPausedTrack(participant, trackType) : false;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("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
                         jsxRuntime.jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
                     connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
@@ -2414,6 +2432,7 @@ var en = {
 	"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
 	"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: Anonymous,
 	"No participants found": "No participants found",
@@ -2937,7 +2956,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.18.13").split('.');
+const [major, minor, patch] = ("1.19.1").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,