@stream-io/video-react-sdk 1.3.6 → 1.4.0

package/dist/index.es.js

@@ -3,13 +3,11 @@ export * from '@stream-io/video-client';
 import { useCall, useCallStateHooks, useI18n, Restricted, useConnectedUser, StreamCallProvider, StreamVideoProvider, useStreamVideoClient } 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, createContext, useContext, useCallback, useRef, useMemo, forwardRef, isValidElement, useLayoutEffect } from 'react';
+import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useRef, useMemo, forwardRef, isValidElement, lazy, Suspense, useLayoutEffect } from 'react';
 import clsx from 'clsx';
 import { flushSync } from 'react-dom';
 import { isPlatformSupported, loadTFLite, createRenderer } from '@stream-io/video-filters-web';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
-import { Chart, CategoryScale, LinearScale, LineElement, PointElement } from 'chart.js';
-import { Line } from 'react-chartjs-2';
 
 const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     const call = useCall();
@@ -1202,89 +1200,15 @@ const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
 
 const CallControls = ({ onLeave }) => (jsxs("div", { className: "str-video__call-controls", children: [jsx(SpeakingWhileMutedNotification, { children: jsx(ToggleAudioPublishingButton, {}) }), jsx(ToggleVideoPublishingButton, {}), jsx(ReactionsButton, {}), jsx(ScreenShareButton, {}), jsx(RecordCallButton, {}), jsx(CancelCallButton, { onLeave: onLeave })] }));
 
-Chart.register(CategoryScale, LinearScale, LineElement, PointElement);
-const CallStatsLatencyChart = (props) => {
-    const { values } = props;
-    let max = 0;
-    const data = {
-        labels: values.map((point) => {
-            const date = new Date(point.x * 1000);
-            return `${date.getHours()}:${date.getMinutes()}`;
-        }),
-        datasets: [
-            {
-                data: values.map((point) => {
-                    const { y } = point;
-                    max = Math.max(max, y);
-                    return point;
-                }),
-                borderColor: '#00e2a1',
-                backgroundColor: '#00e2a1',
-            },
-        ],
-    };
-    const options = useMemo(() => {
-        return {
-            maintainAspectRatio: false,
-            animation: {
-                duration: 0,
-            },
-            elements: {
-                line: {
-                    borderWidth: 1,
-                },
-                point: {
-                    radius: 2,
-                },
-            },
-            scales: {
-                y: {
-                    position: 'right',
-                    stacked: true,
-                    min: 0,
-                    max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
-                    grid: {
-                        display: true,
-                        color: '#979ca0',
-                    },
-                    ticks: {
-                        stepSize: 30,
-                    },
-                },
-                x: {
-                    grid: {
-                        display: false,
-                    },
-                    ticks: {
-                        display: false,
-                    },
-                },
-            },
-        };
-    }, [max]);
-    return (jsx("div", { className: "str-video__call-stats-line-chart-container", children: jsx(Line, { options: options, data: data, className: "str-video__call-stats__latencychart" }) }));
-};
-
-var Statuses;
-(function (Statuses) {
-    Statuses["GOOD"] = "Good";
-    Statuses["OK"] = "Ok";
-    Statuses["BAD"] = "Bad";
-})(Statuses || (Statuses = {}));
-const statsStatus = ({ value, lowBound, highBound, }) => {
-    if (value <= lowBound) {
-        return Statuses.GOOD;
-    }
-    if (value >= lowBound && value <= highBound) {
-        return Statuses.OK;
-    }
-    if (value >= highBound) {
-        return Statuses.BAD;
-    }
-    return Statuses.GOOD;
-};
+const CallStatsLatencyChart = lazy(() => import('./latency-chart-Bj5OSYzg.es.js'));
+var Status;
+(function (Status) {
+    Status["GOOD"] = "Good";
+    Status["OK"] = "Ok";
+    Status["BAD"] = "Bad";
+})(Status || (Status = {}));
 const CallStats = (props) => {
-    const { latencyLowBound = 75, latencyHighBound = 400 } = props;
+    const { latencyLowBound = 75, latencyHighBound = 400, showCodecInfo = false, LatencyChartSuspenseFallback = null, } = props;
     const [latencyBuffer, setLatencyBuffer] = useState(() => {
         const now = Date.now();
         return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
@@ -1324,13 +1248,13 @@ const CallStats = (props) => {
         highBound: latencyHighBound,
         value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
     };
-    return (jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__call-stats__header", children: [jsxs("h3", { className: "str-video__call-stats__heading", children: [jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsx("p", { className: "str-video__call-stats__description", children: t('Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.') })] }), jsx("div", { className: "str-video__call-stats__latencychart", children: jsx(CallStatsLatencyChart, { values: latencyBuffer }) }), jsxs("div", { className: "str-video__call-stats__header", children: [jsxs("h3", { className: "str-video__call-stats__heading", children: [jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Call performance')] }), jsx("p", { className: "str-video__call-stats__description", children: t('Review the key data points below to assess call performance') })] }), jsxs("div", { className: "str-video__call-stats__card-container", children: [jsx(StatCard, { label: t('Region'), value: callStatsReport.datacenter }), jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsx(StatCard, { label: t('Receive jitter'), value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
+    return (jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__call-stats__header", children: [jsxs("h3", { className: "str-video__call-stats__heading", children: [jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsx("p", { className: "str-video__call-stats__description", children: t('Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.') })] }), jsx("div", { className: "str-video__call-stats__latencychart", children: jsx(Suspense, { fallback: LatencyChartSuspenseFallback, children: jsx(CallStatsLatencyChart, { values: latencyBuffer }) }) }), jsxs("div", { className: "str-video__call-stats__header", children: [jsxs("h3", { className: "str-video__call-stats__heading", children: [jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Call performance')] }), jsx("p", { className: "str-video__call-stats__description", children: t('Review the key data points below to assess call performance') })] }), jsxs("div", { className: "str-video__call-stats__card-container", children: [jsx(StatCard, { label: t('Region'), value: callStatsReport.datacenter }), jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsx(StatCard, { label: t('Receive jitter'), value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
                                 ...latencyComparison,
                                 value: callStatsReport.subscriberStats.averageJitterInMs,
                             } }), jsx(StatCard, { label: t('Publish jitter'), value: `${callStatsReport.publisherStats.averageJitterInMs} ms.`, comparison: {
                                 ...latencyComparison,
                                 value: callStatsReport.publisherStats.averageJitterInMs,
-                            } }), jsx(StatCard, { label: t('Publish resolution'), value: toFrameSize(callStatsReport.publisherStats) }), jsx(StatCard, { label: t('Publish quality drop reason'), value: callStatsReport.publisherStats.qualityLimitationReasons }), jsx(StatCard, { label: t('Receiving resolution'), value: toFrameSize(callStatsReport.subscriberStats) }), jsx(StatCard, { label: t('Receive quality drop reason'), value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsx(StatCard, { label: t('Publish bitrate'), value: publishBitrate }), jsx(StatCard, { label: t('Receiving bitrate'), value: subscribeBitrate })] })] })) }));
+                            } }), jsx(StatCard, { label: `${t('Publish resolution')}${showCodecInfo ? formatCodec(callStatsReport) : ''}`, value: toFrameSize(callStatsReport.publisherStats) }), jsx(StatCard, { label: t('Publish quality drop reason'), value: callStatsReport.publisherStats.qualityLimitationReasons }), jsx(StatCard, { label: t('Receiving resolution'), value: toFrameSize(callStatsReport.subscriberStats) }), jsx(StatCard, { label: t('Receive quality drop reason'), value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsx(StatCard, { label: t('Publish bitrate'), value: publishBitrate }), jsx(StatCard, { label: t('Receiving bitrate'), value: subscribeBitrate })] })] })) }));
 };
 const StatCardExplanation = (props) => {
     const { description } = props;
@@ -1343,18 +1267,29 @@ const StatCardExplanation = (props) => {
     const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
     return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__call-explanation", ref: refs.setReference, ...getReferenceProps(), children: jsx(Icon, { className: "str-video__call-explanation__icon", icon: "info" }) }), isOpen && (jsx("div", { className: "str-video__call-explanation__description", ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: description }))] }));
 };
-const StatsTag = ({ children, status = Statuses.GOOD, }) => {
+const StatsTag = (props) => {
+    const { children, status } = props;
     return (jsx("div", { className: clsx('str-video__call-stats__tag', {
-            'str-video__call-stats__tag--good': status === Statuses.GOOD,
-            'str-video__call-stats__tag--ok': status === Statuses.OK,
-            'str-video__call-stats__tag--bad': status === Statuses.BAD,
+            'str-video__call-stats__tag--good': status === Status.GOOD,
+            'str-video__call-stats__tag--ok': status === Status.OK,
+            'str-video__call-stats__tag--bad': status === Status.BAD,
         }), children: jsx("div", { className: "str-video__call-stats__tag__text", children: children }) }));
 };
 const StatCard = (props) => {
     const { label, value, description, comparison } = props;
     const { t } = useI18n();
-    const status = comparison ? statsStatus(comparison) : undefined;
-    return (jsxs("div", { className: "str-video__call-stats__card", children: [jsxs("div", { className: "str-video__call-stats__card-content", children: [jsxs("div", { className: "str-video__call-stats__card-label", children: [label, description && jsx(StatCardExplanation, { description: description })] }), jsx("div", { className: "str-video__call-stats__card-value", children: value })] }), comparison && status && jsx(StatsTag, { status: status, children: t(status) })] }));
+    const status = comparison ? toStatus(comparison) : undefined;
+    return (jsxs("div", { className: "str-video__call-stats__card", children: [jsxs("div", { className: "str-video__call-stats__card-content", children: [jsxs("div", { className: "str-video__call-stats__card-label", children: [label, description && jsx(StatCardExplanation, { description: description })] }), jsx("div", { className: "str-video__call-stats__card-value", children: value })] }), status && jsx(StatsTag, { status: status, children: t(status) })] }));
+};
+const toStatus = (config) => {
+    const { value, lowBound, highBound } = config;
+    if (value <= lowBound)
+        return Status.GOOD;
+    if (value >= lowBound && value <= highBound)
+        return Status.OK;
+    if (value >= highBound)
+        return Status.BAD;
+    return Status.GOOD;
 };
 const toFrameSize = (stats) => {
     const { highestFrameWidth: w, highestFrameHeight: h, highestFramesPerSecond: fps, } = stats;
@@ -1367,6 +1302,13 @@ const toFrameSize = (stats) => {
     }
     return size;
 };
+const formatCodec = (callStatsReport) => {
+    const { codec } = callStatsReport.publisherStats;
+    if (!codec)
+        return '';
+    const [, name] = codec.split('/');
+    return name ? ` (${name})` : '';
+};
 const calculatePublishBitrate = (previousCallStatsReport, callStatsReport) => {
     const { publisherStats: { totalBytesSent: previousTotalBytesSent, timestamp: previousTimestamp, }, } = previousCallStatsReport;
     const { publisherStats: { totalBytesSent, timestamp }, } = callStatsReport;
@@ -2605,7 +2547,7 @@ const LivestreamPlayer = (props) => {
     return (jsx(StreamCall, { call: call, children: jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.3.6" ).split('.');
+const [major, minor, patch] = ("1.4.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -2613,5 +2555,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, Avatar, AvatarFallback, BackgroundFiltersProvider, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CallStatsLatencyChart, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StatCardExplanation, StatsTag, Statuses, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useBackgroundFilters, useHorizontalScrollPosition, useMenuContext, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
+export { AcceptCallButton, Audio, Avatar, AvatarFallback, BackgroundFiltersProvider, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useBackgroundFilters, useHorizontalScrollPosition, useMenuContext, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map