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

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;
@@ -2217,9 +2220,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 +2237,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 +2246,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 +2420,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 +2944,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.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,