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

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { hasAudio, hasScreenShareAudio, CallingState, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, getLogger, disposeOfMediaStream, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, setSdkInfo } from '@stream-io/video-client';
+import { hasAudio, hasScreenShareAudio, CallingState, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, getLogger, disposeOfMediaStream, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, setSdkInfo } from '@stream-io/video-client';
 export * from '@stream-io/video-client';
 import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, StreamCallProvider, StreamVideoProvider, useStreamVideoClient } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
@@ -787,7 +787,10 @@ const Video$1 = ({ enabled = true, mirror, trackType, participant, className, Vi
             : false;
     const isInvisible = 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'
         : mirror;
@@ -2217,9 +2220,11 @@ const DefaultScreenShareOverlay = () => {
     const call = useCall();
     const { t } = useI18n();
     const stopScreenShare = () => {
-        call?.screenShare.disable();
+        call?.screenShare.disable().catch((err) => {
+            console.error('Failed to stop screen sharing:', err);
+        });
     };
-    return (jsxs("div", { className: "str-video__screen-share-overlay", children: [jsx(Icon, { icon: "screen-share-off" }), jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxs("button", { onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
+    return (jsxs("div", { className: "str-video__screen-share-overlay", children: [jsx(Icon, { icon: "screen-share-off" }), jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxs("button", { onClick: stopScreenShare, type: "button", className: "str-video__screen-share-overlay__button", children: [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 (jsxs(Fragment, { children: [showMenuButton && (jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsx(ParticipantActionsContextMenu$1, {}) })), jsx(Reaction, { participant: participant }), 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 = useCall();
     const { t } = useI18n();
@@ -2241,7 +2246,8 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const hasAudioTrack = hasAudio(participant);
     const hasVideoTrack = hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
-    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
+    const isTrackPaused = trackType !== 'none' ? hasPausedTrack(participant, trackType) : false;
+    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (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
                         jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
                     connectionQuality === SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (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.12").split('.');
+const [major, minor, patch] = ("1.19.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,