@stream-io/video-react-sdk 0.4.7 → 0.4.8

package/dist/index.d.ts

@@ -2,6 +2,5 @@ export * from '@stream-io/video-client';
 export * from '@stream-io/video-react-bindings';
 export * from './src/core';
 export * from './src/components';
-export * from './src/types';
 export * from './src/translations';
 export { useHorizontalScrollPosition, useVerticalScrollPosition, useRequestPermission, usePersistedDevicePreferences, } from './src/hooks';

package/dist/index.es.js

@@ -3,7 +3,7 @@ export * from '@stream-io/video-client';
 import { useCall, useCallStateHooks, useHasPermissions, useI18n, Restricted, useConnectedUser, StreamCallProvider, StreamVideoProvider } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1, isValidElement, forwardRef, useLayoutEffect, useCallback, useRef, useMemo, createContext, useContext } from 'react';
+import { useState, useEffect, Fragment as Fragment$1, isValidElement, forwardRef, useLayoutEffect, useCallback, useRef, createContext, useContext, useMemo } from 'react';
 import clsx from 'clsx';
 import { useFloating, offset, shift, flip, size, autoUpdate } from '@floating-ui/react';
 import { ResponsiveLine } from '@nivo/line';
@@ -1417,20 +1417,21 @@ const PermissionRequests = () => {
     const [expanded, setExpanded] = useState(false);
     const [permissionRequests, setPermissionRequests] = useState([]);
     const canUpdateCallPermissions = useHasPermissions(OwnCapability.UPDATE_CALL_PERMISSIONS);
+    const localUserId = localParticipant?.userId;
     useEffect(() => {
         if (!call || !canUpdateCallPermissions)
             return;
         const unsubscribe = call.on('call.permission_request', (event) => {
             if (event.type !== 'call.permission_request')
                 return;
-            if (event.user.id !== localParticipant?.userId) {
+            if (event.user.id !== localUserId) {
                 setPermissionRequests((requests) => [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)));
             }
         });
         return () => {
             unsubscribe();
         };
-    }, [call, canUpdateCallPermissions, localParticipant]);
+    }, [call, canUpdateCallPermissions, localUserId]);
     const handleUpdatePermission = (request, type) => {
         return async () => {
             const { user, permissions } = request;
@@ -1525,128 +1526,6 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
     return (jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
 };
 
-const DebugParticipantPublishQuality = (props) => {
-    const { call, participant } = props;
-    const [quality, setQuality] = useState();
-    const [publishStats, setPublishStats] = useState(() => ({
-        f: true,
-        h: true,
-        q: true,
-    }));
-    useEffect(() => {
-        return call.on('changePublishQuality', (event) => {
-            if (event.eventPayload.oneofKind !== 'changePublishQuality')
-                return;
-            const { videoSenders } = event.eventPayload.changePublishQuality;
-            // FIXME OL: support additional layers (like screenshare)
-            const [videoLayer] = videoSenders.map(({ layers }) => {
-                return layers.map((l) => ({ [l.name]: l.active }));
-            });
-            setPublishStats((s) => ({
-                ...s,
-                ...videoLayer,
-            }));
-        });
-    }, [call]);
-    return (jsxs("select", { title: `Published tracks: ${JSON.stringify(publishStats)}`, value: quality, onChange: (e) => {
-            const value = e.target.value;
-            setQuality(value);
-            let w = 960;
-            let h = 540;
-            if (value === 'h') {
-                w = w / 2; // 480
-                h = h / 2; // 270
-            }
-            else if (value === 'q') {
-                w = w / 4; // 240
-                h = h / 4; // 135
-            }
-            call.updateSubscriptionsPartial('video', {
-                [participant.sessionId]: {
-                    dimension: {
-                        width: w,
-                        height: h,
-                    },
-                },
-            });
-        }, children: [jsx("option", { value: "f", children: "High (f)" }), jsx("option", { value: "h", children: "Medium (h)" }), jsx("option", { value: "q", children: "Low (q)" })] }));
-};
-
-const DebugStatsView = (props) => {
-    const { call, mediaStream, sessionId, userId } = props;
-    const { useCallStatsReport } = useCallStateHooks();
-    const callStatsReport = useCallStatsReport();
-    useEffect(() => {
-        call.startReportingStatsFor(sessionId);
-        return () => {
-            call.stopReportingStatsFor(sessionId);
-        };
-    }, [call, sessionId]);
-    const reportForTracks = callStatsReport?.participants[sessionId];
-    const trackStats = reportForTracks?.flatMap((report) => report.streams);
-    const previousWidth = useRef({ f: 0, h: 0, q: 0 });
-    const previousHeight = useRef({ f: 0, h: 0, q: 0 });
-    trackStats?.forEach((track) => {
-        if (track.kind !== 'video')
-            return;
-        const { frameWidth = 0, frameHeight = 0, rid = '' } = track;
-        if (frameWidth !== previousWidth.current[rid] ||
-            frameHeight !== previousHeight.current[rid]) {
-            const trackSize = `${frameWidth}x${frameHeight}`;
-            console.log(`Track stats (${userId}/${sessionId}): ${rid}(${trackSize})`);
-            previousWidth.current[rid] = frameWidth;
-            previousHeight.current[rid] = frameHeight;
-        }
-    });
-    const { refs, strategy, y, x } = useFloatingUIPreset({
-        placement: 'top',
-        strategy: 'absolute',
-    });
-    const [isPopperOpen, setIsPopperOpen] = useState(false);
-    const [videoTrack] = mediaStream?.getVideoTracks() ?? [];
-    const settings = videoTrack?.getSettings();
-    return (jsxs(Fragment, { children: [jsx("span", { className: "str-video__debug__track-stats-icon", tabIndex: 0, ref: refs.setReference, title: settings &&
-                    `${settings.width}x${settings.height}@${Math.round(settings.frameRate || 0)}`, onClick: () => {
-                    setIsPopperOpen((v) => !v);
-                } }), isPopperOpen && (jsxs("div", { className: "str-video__debug__track-stats str-video__call-stats", ref: refs.setFloating, style: {
-                    position: strategy,
-                    top: y ?? 0,
-                    left: x ?? 0,
-                    overflowY: 'auto',
-                }, children: [jsx("h3", { children: "Participant stats" }), jsx("div", { className: "str-video__call-stats__card-container", children: trackStats
-                            ?.map((track) => {
-                            if (track.kind === 'video') {
-                                return (jsx(StatCard, { label: `${track.kind}: ${track.codec} ` +
-                                        (track.rid ? ` (${track.rid})` : ''), value: `${track.frameWidth || 0}x${track.frameHeight || 0}@${track.framesPerSecond || 0}fps` }, `${track.rid}/${track.ssrc}/${track.codec}/${track.kind}`));
-                            }
-                            else if (track.kind === 'audio') {
-                                return (jsx(StatCard, { label: track.codec || 'N/A', value: `Jitter: ${track.jitter || 0}ms` }, `${track.ssrc}/${track.codec}/${track.kind}`));
-                            }
-                            return null;
-                        })
-                            .filter(Boolean) }), reportForTracks?.map((report, index) => (jsx("pre", { children: JSON.stringify(unwrapStats(report.rawStats), null, 2) }, index)))] }))] }));
-};
-const unwrapStats = (rawStats) => {
-    const decodedStats = {};
-    rawStats?.forEach((s) => {
-        decodedStats[s.id] = s;
-    });
-    return decodedStats;
-};
-
-const useQueryParams = () => {
-    return useMemo(() => typeof window === 'undefined'
-        ? null
-        : new URLSearchParams(window.location.search), []);
-};
-/**
- * Internal purpose hook. Enables certain development mode tools.
- */
-const useIsDebugMode = () => {
-    const params = useQueryParams();
-    return !!params?.get('debug');
-};
-
 const ParticipantViewContext = createContext(undefined);
 const useParticipantViewContext = () => useContext(ParticipantViewContext);
 
@@ -1674,18 +1553,18 @@ const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'b
 };
 const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const { participant } = useParticipantViewContext();
-    const { isDominantSpeaker, isLocalParticipant, connectionQuality, publishedTracks, pin, sessionId, name, userId, videoStream, } = participant;
+    const { isDominantSpeaker, isLocalParticipant, connectionQuality, publishedTracks, pin, sessionId, name, userId, } = participant;
     const call = useCall();
+    const { t } = useI18n();
     const connectionQualityAsString = !!connectionQuality &&
         SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
     const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
     const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
     const canUnpin = !!pin && pin.isLocalPin;
-    const isDebugMode = useIsDebugMode();
-    return (jsxs("div", { className: "str-video__participant-details", children: [jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isDominantSpeaker && (jsx("span", { className: "str-video__participant-details__name--dominant_speaker", title: "Dominant speaker" })), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
-                            connectionQuality === SfuModels.ConnectionQuality.POOR, message: "Poor connection quality. Please check your internet connection.", children: connectionQualityAsString && (jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) })), indicatorsVisible && !hasAudio && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
-                    // TODO: remove this monstrosity once we have a proper design
-                    jsx("span", { title: "Unpin", onClick: () => call?.unpin(sessionId), style: { cursor: 'pointer' }, className: "str-video__participant-details__name--pinned" }))] }), isDebugMode && (jsxs(Fragment, { children: [jsx(DebugParticipantPublishQuality, { participant: participant, call: call }), jsx(DebugStatsView, { call: call, sessionId: sessionId, userId: userId, mediaStream: videoStream })] }))] }));
+    return (jsx("div", { className: "str-video__participant-details", children: jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isDominantSpeaker && (jsx("span", { className: "str-video__participant-details__name--dominant_speaker", title: t('Dominant speaker') })), 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 })) })), indicatorsVisible && !hasAudio && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
+                // TODO: remove this monstrosity once we have a proper design
+                jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), style: { cursor: 'pointer' }, className: "str-video__participant-details__name--pinned" }))] }) }));
 };
 
 const ParticipantView = forwardRef(({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
@@ -1825,6 +1704,8 @@ var en = {
 	Leave: Leave,
 	"{{ direction }} fullscreen": "{{ direction }} fullscreen",
 	"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
+	"Dominant Speaker": "Dominant Speaker",
+	"Poor connection quality": "Poor connection quality. Please check your internet connection.",
 	Participants: Participants,
 	Anonymous: Anonymous,
 	"No participants found": "No participants found",
@@ -2114,7 +1995,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.4.7" ).split('.');
+const [major, minor, patch] = ("0.4.8" ).split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -2122,5 +2003,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, Avatar, AvatarFallback, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStatsButton, CancelCallButton, CompositeButton, CopyToClipboardButton, CopyToClipboardButtonWithPopup, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useHasBrowserPermissions, useHorizontalScrollPosition, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
+export { AcceptCallButton, Audio, Avatar, AvatarFallback, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CallStatsLatencyChart, CancelCallButton, CompositeButton, CopyToClipboardButton, CopyToClipboardButtonWithPopup, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useHasBrowserPermissions, useHorizontalScrollPosition, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map