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

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.4.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.3.6...@stream-io/video-react-sdk-1.4.0) (2024-09-19)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.7.0`
+* `@stream-io/video-filters-web` updated to version `0.1.4`
+* `@stream-io/video-react-bindings` updated to version `1.0.6`
+* `@stream-io/audio-filters-web` updated to version `0.2.2`
+
+### Features
+
+* React SDK cold-start optimizations ([#1488](https://github.com/GetStream/stream-video-js/issues/1488)) ([972e579](https://github.com/GetStream/stream-video-js/commit/972e5792b5a131a212b1031ade76dcb383897a46))
+
 ## [1.3.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.3.5...@stream-io/video-react-sdk-1.3.6) (2024-09-19)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -8,8 +8,6 @@ var clsx = require('clsx');
 var reactDom = require('react-dom');
 var videoFiltersWeb = require('@stream-io/video-filters-web');
 var react$1 = require('@floating-ui/react');
-var chart_js = require('chart.js');
-var reactChartjs2 = require('react-chartjs-2');
 
 const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     const call = videoReactBindings.useCall();
@@ -1202,89 +1200,15 @@ const CancelCallButton = ({ disabled, caption, onClick, onLeave, }) => {
 
 const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }), jsxRuntime.jsx(ToggleVideoPublishingButton, {}), jsxRuntime.jsx(ReactionsButton, {}), jsxRuntime.jsx(ScreenShareButton, {}), jsxRuntime.jsx(RecordCallButton, {}), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
 
-chart_js.Chart.register(chart_js.CategoryScale, chart_js.LinearScale, chart_js.LineElement, chart_js.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 = react.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 (jsxRuntime.jsx("div", { className: "str-video__call-stats-line-chart-container", children: jsxRuntime.jsx(reactChartjs2.Line, { options: options, data: data, className: "str-video__call-stats__latencychart" }) }));
-};
-
-exports.Statuses = void 0;
-(function (Statuses) {
-    Statuses["GOOD"] = "Good";
-    Statuses["OK"] = "Ok";
-    Statuses["BAD"] = "Bad";
-})(exports.Statuses || (exports.Statuses = {}));
-const statsStatus = ({ value, lowBound, highBound, }) => {
-    if (value <= lowBound) {
-        return exports.Statuses.GOOD;
-    }
-    if (value >= lowBound && value <= highBound) {
-        return exports.Statuses.OK;
-    }
-    if (value >= highBound) {
-        return exports.Statuses.BAD;
-    }
-    return exports.Statuses.GOOD;
-};
+const CallStatsLatencyChart = react.lazy(() => Promise.resolve().then(function () { return require('./latency-chart-CpL1M_s0.cjs.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] = react.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 (jsxRuntime.jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsxRuntime.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.') })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__latencychart", children: jsxRuntime.jsx(CallStatsLatencyChart, { values: latencyBuffer }) }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Call performance')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Review the key data points below to assess call performance') })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: t('Region'), value: callStatsReport.datacenter }), jsxRuntime.jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsxRuntime.jsx(StatCard, { label: t('Receive jitter'), value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
+    return (jsxRuntime.jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsxRuntime.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.') })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__latencychart", children: jsxRuntime.jsx(react.Suspense, { fallback: LatencyChartSuspenseFallback, children: jsxRuntime.jsx(CallStatsLatencyChart, { values: latencyBuffer }) }) }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__header", children: [jsxRuntime.jsxs("h3", { className: "str-video__call-stats__heading", children: [jsxRuntime.jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Call performance')] }), jsxRuntime.jsx("p", { className: "str-video__call-stats__description", children: t('Review the key data points below to assess call performance') })] }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: t('Region'), value: callStatsReport.datacenter }), jsxRuntime.jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsxRuntime.jsx(StatCard, { label: t('Receive jitter'), value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
                                 ...latencyComparison,
                                 value: callStatsReport.subscriberStats.averageJitterInMs,
                             } }), jsxRuntime.jsx(StatCard, { label: t('Publish jitter'), value: `${callStatsReport.publisherStats.averageJitterInMs} ms.`, comparison: {
                                 ...latencyComparison,
                                 value: callStatsReport.publisherStats.averageJitterInMs,
-                            } }), jsxRuntime.jsx(StatCard, { label: t('Publish resolution'), value: toFrameSize(callStatsReport.publisherStats) }), jsxRuntime.jsx(StatCard, { label: t('Publish quality drop reason'), value: callStatsReport.publisherStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Receiving resolution'), value: toFrameSize(callStatsReport.subscriberStats) }), jsxRuntime.jsx(StatCard, { label: t('Receive quality drop reason'), value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Publish bitrate'), value: publishBitrate }), jsxRuntime.jsx(StatCard, { label: t('Receiving bitrate'), value: subscribeBitrate })] })] })) }));
+                            } }), jsxRuntime.jsx(StatCard, { label: `${t('Publish resolution')}${showCodecInfo ? formatCodec(callStatsReport) : ''}`, value: toFrameSize(callStatsReport.publisherStats) }), jsxRuntime.jsx(StatCard, { label: t('Publish quality drop reason'), value: callStatsReport.publisherStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Receiving resolution'), value: toFrameSize(callStatsReport.subscriberStats) }), jsxRuntime.jsx(StatCard, { label: t('Receive quality drop reason'), value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: t('Publish bitrate'), value: publishBitrate }), jsxRuntime.jsx(StatCard, { label: t('Receiving bitrate'), value: subscribeBitrate })] })] })) }));
 };
 const StatCardExplanation = (props) => {
     const { description } = props;
@@ -1343,18 +1267,29 @@ const StatCardExplanation = (props) => {
     const { getReferenceProps, getFloatingProps } = react$1.useInteractions([hover]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__call-explanation", ref: refs.setReference, ...getReferenceProps(), children: jsxRuntime.jsx(Icon, { className: "str-video__call-explanation__icon", icon: "info" }) }), isOpen && (jsxRuntime.jsx("div", { className: "str-video__call-explanation__description", ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: description }))] }));
 };
-const StatsTag = ({ children, status = exports.Statuses.GOOD, }) => {
+const StatsTag = (props) => {
+    const { children, status } = props;
     return (jsxRuntime.jsx("div", { className: clsx('str-video__call-stats__tag', {
-            'str-video__call-stats__tag--good': status === exports.Statuses.GOOD,
-            'str-video__call-stats__tag--ok': status === exports.Statuses.OK,
-            'str-video__call-stats__tag--bad': status === exports.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: jsxRuntime.jsx("div", { className: "str-video__call-stats__tag__text", children: children }) }));
 };
 const StatCard = (props) => {
     const { label, value, description, comparison } = props;
     const { t } = videoReactBindings.useI18n();
-    const status = comparison ? statsStatus(comparison) : undefined;
-    return (jsxRuntime.jsxs("div", { className: "str-video__call-stats__card", children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-content", children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-label", children: [label, description && jsxRuntime.jsx(StatCardExplanation, { description: description })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__card-value", children: value })] }), comparison && status && jsxRuntime.jsx(StatsTag, { status: status, children: t(status) })] }));
+    const status = comparison ? toStatus(comparison) : undefined;
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-stats__card", children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-content", children: [jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-label", children: [label, description && jsxRuntime.jsx(StatCardExplanation, { description: description })] }), jsxRuntime.jsx("div", { className: "str-video__call-stats__card-value", children: value })] }), status && jsxRuntime.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 (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.3.6" ).split('.');
+const [major, minor, patch] = ("1.4.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -2629,7 +2571,6 @@ exports.CallRecordingListHeader = CallRecordingListHeader;
 exports.CallRecordingListItem = CallRecordingListItem;
 exports.CallStats = CallStats;
 exports.CallStatsButton = CallStatsButton;
-exports.CallStatsLatencyChart = CallStatsLatencyChart;
 exports.CancelCallButton = CancelCallButton;
 exports.CancelCallConfirmButton = CancelCallConfirmButton;
 exports.CompositeButton = CompositeButton;
@@ -2678,8 +2619,6 @@ exports.SpeakerLayout = SpeakerLayout;
 exports.SpeakingWhileMutedNotification = SpeakingWhileMutedNotification;
 exports.SpeechIndicator = SpeechIndicator;
 exports.StatCard = StatCard;
-exports.StatCardExplanation = StatCardExplanation;
-exports.StatsTag = StatsTag;
 exports.StreamCall = StreamCall;
 exports.StreamTheme = StreamTheme;
 exports.StreamVideo = StreamVideo;