@stream-io/video-react-sdk 0.0.1-alpha.80 → 0.0.1-alpha.82

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.1-alpha.82](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.81...@stream-io/video-react-sdk-0.0.1-alpha.82) (2023-05-25)
+
+
+### Features
+
+* show simulcast track stats in debug view ([#553](https://github.com/GetStream/stream-video-js/issues/553)) ([2c993f5](https://github.com/GetStream/stream-video-js/commit/2c993f53cfe7e76b789bc57d6034b01ff57de8d4))
+
+
+
+## [0.0.1-alpha.81](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.80...@stream-io/video-react-sdk-0.0.1-alpha.81) (2023-05-25)
+
+
+
 ## [0.0.1-alpha.80](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.0.1-alpha.79...@stream-io/video-react-sdk-0.0.1-alpha.80) (2023-05-25)
 
 

package/dist/css/styles.css

@@ -2421,7 +2421,7 @@
   height: 1.5rem;
   background-position: center;
   background-repeat: no-repeat;
-  background-image: var(--str-video__icon--network-quality);
+  background-image: var(--str-video__icon--stats);
   cursor: pointer;
 }
 

package/dist/src/components/CallControls/CallStatsButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CallStats } from '../StreamCall/CallStats';
+import { CallStats } from '../CallStats';
 import { CompositeButton, IconButton } from '../Button/';
 import { MenuToggle } from '../Menu';
 export const CallStatsButton = ({ caption = 'Stats', }) => {

package/dist/src/components/CallControls/CallStatsButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallStatsButton.js","sourceRoot":"","sources":["../../../../src/components/CallControls/CallStatsButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,UAAU,EAAyB,MAAM,SAAS,CAAC;AAM5D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,OAAO,GAAG,OAAO,GACI,EAAE,EAAE;IACzB,OAAO,CACL,KAAC,UAAU,kBAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAE,gBAAgB,gBAC5D,KAAC,SAAS,KAAG,IACF,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACxB,KAAC,eAAe,kBAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,gBAC5D,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,GAAG,IAC9B,CACnB,CAAC,CAAC"}
+{"version":3,"file":"CallStatsButton.js","sourceRoot":"","sources":["../../../../src/components/CallControls/CallStatsButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,UAAU,EAAyB,MAAM,SAAS,CAAC;AAM5D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,OAAO,GAAG,OAAO,GACI,EAAE,EAAE;IACzB,OAAO,CACL,KAAC,UAAU,kBAAC,SAAS,EAAC,SAAS,EAAC,YAAY,EAAE,gBAAgB,gBAC5D,KAAC,SAAS,KAAG,IACF,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACxB,KAAC,eAAe,kBAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,gBAC5D,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,GAAG,IAC9B,CACnB,CAAC,CAAC"}

package/dist/src/components/CallStats/CallStats.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const CallStats: () => JSX.Element;
+export declare const StatCard: (props: {
+    label: string;
+    value: string;
+}) => JSX.Element;

package/dist/src/components/{StreamCall → CallStats}/CallStats.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { useCurrentCallStatsReport } from '@stream-io/video-react-bindings';
+import { useCallStatsReport } from '@stream-io/video-react-bindings';
 import { CallStatsLatencyChart } from './CallStatsLatencyChart';
 export const CallStats = () => {
     const [latencyBuffer, setLatencyBuffer] = useState(() => {
@@ -10,7 +10,7 @@ export const CallStats = () => {
     const [publishBitrate, setPublishBitrate] = useState('-');
     const [subscribeBitrate, setSubscribeBitrate] = useState('-');
     const previousStats = useRef();
-    const callStatsReport = useCurrentCallStatsReport();
+    const callStatsReport = useCallStatsReport();
     useEffect(() => {
         if (!callStatsReport)
             return;
@@ -37,7 +37,7 @@ export const CallStats = () => {
     }, [callStatsReport]);
     return (_jsx("div", Object.assign({ className: "str-video__call-stats" }, { children: callStatsReport && (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Call Latency" }), _jsx(CallStatsLatencyChart, { values: latencyBuffer }), _jsx("h3", { children: "Call performance" }), _jsxs("div", Object.assign({ className: "str-video__call-stats__card-container" }, { children: [_jsx(StatCard, { label: "Region", value: callStatsReport.datacenter }), _jsx(StatCard, { label: "Latency", value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.` }), _jsx(StatCard, { label: "Receive jitter", value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.` }), _jsx(StatCard, { label: "Publish jitter", value: `${callStatsReport.publisherStats.averageJitterInMs} ms.` }), _jsx(StatCard, { label: "Publish resolution", value: toFrameSize(callStatsReport.publisherStats) }), _jsx(StatCard, { label: "Publish quality drop reason", value: callStatsReport.publisherStats.qualityLimitationReasons }), _jsx(StatCard, { label: "Receiving resolution", value: toFrameSize(callStatsReport.subscriberStats) }), _jsx(StatCard, { label: "Receive quality drop reason", value: callStatsReport.subscriberStats.qualityLimitationReasons }), _jsx(StatCard, { label: "Publish bitrate", value: publishBitrate }), _jsx(StatCard, { label: "Receiving bitrate", value: subscribeBitrate })] }))] })) })));
 };
-const StatCard = (props) => {
+export const StatCard = (props) => {
     const { label, value } = props;
     return (_jsxs("div", Object.assign({ className: "str-video__call-stats__card" }, { children: [_jsx("div", Object.assign({ className: "str-video__call-stats__card_label" }, { children: label })), _jsx("div", Object.assign({ className: "str-video__call-stats__card_value" }, { children: value }))] })));
 };

package/dist/src/components/CallStats/CallStats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallStats.js","sourceRoot":"","sources":["../../../../src/components/CallStats/CallStats.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/CallStats/CallStatsLatencyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallStatsLatencyChart.js","sourceRoot":"","sources":["../../../../src/components/CallStats/CallStatsLatencyChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAErC,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAChC,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;QACpB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QACvB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IACH,OAAO,CACL,4BAAK,SAAS,EAAC,4CAA4C,gBACzD,KAAC,cAAc,IACb,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAC3B,IAAI,EAAE;gBACJ;oBACE,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,IAAI;iBACX;aACF,EACD,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAClD,YAAY,QACZ,WAAW,EAAE,KAAK,EAClB,WAAW,QACX,YAAY,EAAC,GAAG,EAChB,aAAa,QACb,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EACzB,MAAM,EAAE;gBACN,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE;gBAC/B,IAAI,EAAE,IAAI;aACX,EACD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,IAAI,EAAE;4BACJ,IAAI,EAAE,SAAS;yBAChB;wBACD,IAAI,EAAE;4BACJ,MAAM,EAAE,SAAS;yBAClB;qBACF;iBACF;gBACD,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,WAAW,EAAE,GAAG;qBACjB;iBACF;aACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallStats/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CallStats';
+export * from './CallStatsLatencyChart';

package/dist/src/components/CallStats/index.js

@@ -0,0 +1,3 @@
+export * from './CallStats';
+export * from './CallStatsLatencyChart';
+//# sourceMappingURL=index.js.map

package/dist/src/components/CallStats/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CallStats/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC"}

package/dist/src/components/Debug/DebugStatsView.d.ts

@@ -2,6 +2,6 @@
 import { Call } from '@stream-io/video-client';
 export declare const DebugStatsView: (props: {
     call: Call;
-    kind: 'subscriber' | 'publisher';
     mediaStream?: MediaStream;
+    sessionId: string;
 }) => JSX.Element;

package/dist/src/components/Debug/DebugStatsView.js

@@ -1,11 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useRtcStats } from '../../hooks/useRtcStats';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { useFloatingUIPreset } from '../../hooks';
+import { StatCard } from '../CallStats';
+import { useCallStatsReport } from '@stream-io/video-react-bindings';
 export const DebugStatsView = (props) => {
     var _a;
-    const { call, kind, mediaStream } = props;
-    const stats = useRtcStats(call, kind, mediaStream);
+    const { call, mediaStream, sessionId } = props;
+    const callStatsReport = useCallStatsReport();
+    useEffect(() => {
+        call.startReportingStatsFor(sessionId);
+        return () => {
+            call.stopReportingStatsFor(sessionId);
+        };
+    }, [call, sessionId]);
+    const reportForTracks = callStatsReport === null || callStatsReport === void 0 ? void 0 : callStatsReport.participants[sessionId];
+    const trackStats = reportForTracks === null || reportForTracks === void 0 ? void 0 : reportForTracks.flatMap((report) => report.streams);
     const { refs, strategy, y, x } = useFloatingUIPreset({
         placement: 'top',
         strategy: 'absolute',
@@ -16,11 +25,27 @@ export const DebugStatsView = (props) => {
     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 && (_jsx("div", Object.assign({ className: "str-video__debug__track-stats", ref: refs.setFloating, style: {
+                } }), isPopperOpen && (_jsxs("div", Object.assign({ className: "str-video__debug__track-stats str-video__call-stats", ref: refs.setFloating, style: {
                     position: strategy,
                     top: y !== null && y !== void 0 ? y : 0,
                     left: x !== null && x !== void 0 ? x : 0,
                     overflowY: 'auto',
-                } }, { children: _jsx("pre", { children: JSON.stringify(stats, null, 2) }) })))] }));
+                } }, { children: [_jsx("h3", { children: "Participant stats" }), _jsx("div", Object.assign({ className: "str-video__call-stats__card-container" }, { children: trackStats === null || trackStats === void 0 ? void 0 : 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 === null || reportForTracks === void 0 ? void 0 : reportForTracks.map((report, index) => (_jsx("pre", { children: JSON.stringify(unwrapStats(report.rawStats), null, 2) }, index)))] })))] }));
+};
+const unwrapStats = (rawStats) => {
+    const decodedStats = {};
+    rawStats === null || rawStats === void 0 ? void 0 : rawStats.forEach((s) => {
+        decodedStats[s.id] = s;
+    });
+    return decodedStats;
 };
 //# sourceMappingURL=DebugStatsView.js.map

package/dist/src/components/Debug/DebugStatsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugStatsView.js","sourceRoot":"","sources":["../../../../src/components/Debug/DebugStatsView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAI9B,EAAE,EAAE;;IACH,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IAEnD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,mBAAmB,CAAC;QACnD,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,CAAC,UAAU,CAAC,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,EAAE,mCAAI,EAAE,CAAC;IACzD,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,EAAE,CAAC;IAC3C,OAAO,CACL,8BACE,eACE,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,KAAK,EACH,QAAQ;oBACR,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAChD,QAAQ,CAAC,SAAS,IAAI,CAAC,CACxB,EAAE,EAEL,OAAO,EAAE,GAAG,EAAE;oBACZ,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC7B,CAAC,GACD,EACD,YAAY,IAAI,CACf,4BACE,SAAS,EAAC,+BAA+B,EACzC,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;oBACL,QAAQ,EAAE,QAAQ;oBAClB,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;oBACX,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;oBACZ,SAAS,EAAE,MAAM;iBAClB,gBAED,wBAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,IACvC,CACP,IACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"DebugStatsView.js","sourceRoot":"","sources":["../../../../src/components/Debug/DebugStatsView.tsx"],"names":[],"mappings":"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"}

package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js

@@ -31,6 +31,6 @@ export const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     return (_jsxs("div", Object.assign({ className: "str-video__participant-details" }, { children: [_jsxs("span", Object.assign({ 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, Object.assign({ isVisible: isLoggedInUser &&
                             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 && isPinned && (
                     // TODO: remove this monstrosity once we have a proper design
-                    _jsx("span", { title: "Unpin", onClick: () => call === null || call === void 0 ? void 0 : call.setParticipantPinnedAt(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, kind: isLoggedInUser ? 'publisher' : 'subscriber', mediaStream: videoStream })] }))] })));
+                    _jsx("span", { title: "Unpin", onClick: () => call === null || call === void 0 ? void 0 : call.setParticipantPinnedAt(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, mediaStream: videoStream })] }))] })));
 };
 //# sourceMappingURL=DefaultParticipantViewUI.js.map

package/dist/src/core/components/ParticipantView/DefaultParticipantViewUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DefaultParticipantViewUI.js","sourceRoot":"","sources":["../../../../../src/core/components/ParticipantView/DefaultParticipantViewUI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,6BAA6B,GAE9B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,EAAE,8BAA8B,EAAE,MAAM,0DAA0D,CAAC;AAC1G,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAiB9D,MAAM,YAAY,GAAG,UAAU,CAC7B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,OAAO,KAAC,UAAU,IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,GAAI,CAAC;AAC5E,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,iBAAiB,GAAG,IAAI,EACxB,aAAa,GAAG,YAAY,EAC5B,cAAc,GAAG,IAAI,GACS,EAAE,EAAE;IAClC,MAAM,IAAI,GAAG,OAAO,EAAG,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,EAAE,CAAC;IAC5E,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;IAE5C,OAAO,CACL,8BACG,cAAc,IAAI,CACjB,KAAC,UAAU,kBACT,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,aAAa,EACxB,YAAY,EAAE,YAAY,gBAE1B,KAAC,6BAA6B,IAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,WAAW,EAAE,WAAW,GACxB,IACS,CACd,EACA,QAAQ,IAAI,CACX,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAI,CACnE,EACD,KAAC,kBAAkB,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,IAC3D,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,iBAAiB,GAAG,IAAI,GACiC,EAAE,EAAE;IAC7D,MAAM,EAAE,WAAW,EAAE,GAAG,yBAAyB,EAAE,CAAC;IACpD,MAAM,EACJ,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,WAAW,GACZ,GAAG,WAAW,CAAC;IAChB,MAAM,IAAI,GAAG,OAAO,EAAG,CAAC;IAExB,MAAM,yBAAyB,GAC7B,CAAC,CAAC,iBAAiB;QACnB,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,WAAW,EAAE,CAAC;IAE/D,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACrE,MAAM,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC;IAE5B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,OAAO,CACL,6BAAK,SAAS,EAAC,gCAAgC,iBAC7C,8BAAM,SAAS,EAAC,sCAAsC,iBACnD,IAAI,IAAI,MAAM,EACd,iBAAiB,IAAI,iBAAiB,IAAI,CACzC,eACE,SAAS,EAAC,wDAAwD,EAClE,KAAK,EAAC,kBAAkB,GACxB,CACH,EACA,iBAAiB,IAAI,CACpB,KAAC,YAAY,kBACX,SAAS,EACP,cAAc;4BACd,iBAAiB,KAAK,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAExD,OAAO,EAAC,iEAAiE,gBAExE,yBAAyB,IAAI,CAC5B,eACE,SAAS,EAAE,IAAI,CACb,oDAAoD,EACpD,uDAAuD,yBAAyB,EAAE,CACnF,EACD,KAAK,EAAE,yBAAyB,GAChC,CACH,IACY,CAChB,EACA,iBAAiB,IAAI,CAAC,QAAQ,IAAI,CACjC,eAAM,SAAS,EAAC,mDAAmD,GAAG,CACvE,EACA,iBAAiB,IAAI,CAAC,QAAQ,IAAI,CACjC,eAAM,SAAS,EAAC,mDAAmD,GAAG,CACvE,EACA,iBAAiB,IAAI,QAAQ,IAAI;oBAChC,6DAA6D;oBAC7D,eACE,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,sBAAsB,CAAC,SAAS,CAAC,EACtD,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC5B,SAAS,EAAC,8CAA8C,GACxD,CACH,KACI,EACN,WAAW,IAAI,CACd,8BACE,KAAC,8BAA8B,IAC7B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,IACD,CACJ,KACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/hooks/index.d.ts

@@ -1,2 +1 @@
-export * from './useRtcStats';
 export * from './useFloatingUIPreset';

package/dist/src/hooks/index.js

@@ -1,3 +1,2 @@
-export * from './useRtcStats';
 export * from './useFloatingUIPreset';
 //# sourceMappingURL=index.js.map

package/dist/src/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -25,9 +25,9 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/i18n": "^0.0.1-alpha.62",
-    "@stream-io/video-client": "^0.0.1-alpha.186",
-    "@stream-io/video-react-bindings": "^0.0.1-alpha.73",
+    "@stream-io/i18n": "^0.0.1-alpha.64",
+    "@stream-io/video-client": "^0.0.1-alpha.188",
+    "@stream-io/video-react-bindings": "^0.0.1-alpha.75",
     "clsx": "^1.2.1",
     "rxjs": "~7.8.1"
   },
@@ -36,8 +36,10 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@stream-io/video-styling": "^0.0.1-alpha.58",
+    "@stream-io/video-styling": "^0.0.1-alpha.60",
+    "@types/prop-types": "^15.7.5",
     "@types/rimraf": "^3.0.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "replace-in-file": "^6.3.5",
@@ -45,5 +47,5 @@
     "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.80"
+  "version": "0.0.1-alpha.82"
 }

package/src/components/CallControls/CallStatsButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { CallStats } from '../StreamCall/CallStats';
+import { CallStats } from '../CallStats';
 import { CompositeButton, IconButton } from '../Button/';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 

package/src/components/{StreamCall → CallStats}/CallStats.tsx

@@ -3,7 +3,7 @@ import {
   AggregatedStatsReport,
   CallStatsReport,
 } from '@stream-io/video-client';
-import { useCurrentCallStatsReport } from '@stream-io/video-react-bindings';
+import { useCallStatsReport } from '@stream-io/video-react-bindings';
 import { CallStatsLatencyChart } from './CallStatsLatencyChart';
 
 export const CallStats = () => {
@@ -17,7 +17,7 @@ export const CallStats = () => {
   const [publishBitrate, setPublishBitrate] = useState('-');
   const [subscribeBitrate, setSubscribeBitrate] = useState('-');
   const previousStats = useRef<CallStatsReport>();
-  const callStatsReport = useCurrentCallStatsReport();
+  const callStatsReport = useCallStatsReport();
 
   useEffect(() => {
     if (!callStatsReport) return;
@@ -95,7 +95,7 @@ export const CallStats = () => {
   );
 };
 
-const StatCard = (props: { label: string; value: string }) => {
+export const StatCard = (props: { label: string; value: string }) => {
   const { label, value } = props;
   return (
     <div className="str-video__call-stats__card">

package/src/components/CallStats/index.ts

@@ -0,0 +1,2 @@
+export * from './CallStats';
+export * from './CallStatsLatencyChart';

package/src/components/Debug/DebugStatsView.tsx

@@ -1,15 +1,26 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Call } from '@stream-io/video-client';
-import { useRtcStats } from '../../hooks/useRtcStats';
 import { useFloatingUIPreset } from '../../hooks';
+import { StatCard } from '../CallStats';
+import { useCallStatsReport } from '@stream-io/video-react-bindings';
 
 export const DebugStatsView = (props: {
   call: Call;
-  kind: 'subscriber' | 'publisher';
   mediaStream?: MediaStream;
+  sessionId: string;
 }) => {
-  const { call, kind, mediaStream } = props;
-  const stats = useRtcStats(call, kind, mediaStream);
+  const { call, mediaStream, sessionId } = props;
+  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 { refs, strategy, y, x } = useFloatingUIPreset({
     placement: 'top',
@@ -38,7 +49,7 @@ export const DebugStatsView = (props: {
       />
       {isPopperOpen && (
         <div
-          className="str-video__debug__track-stats"
+          className="str-video__debug__track-stats str-video__call-stats"
           ref={refs.setFloating}
           style={{
             position: strategy,
@@ -47,9 +58,51 @@ export const DebugStatsView = (props: {
             overflowY: 'auto',
           }}
         >
-          <pre>{JSON.stringify(stats, null, 2)}</pre>
+          <h3>Participant stats</h3>
+          <div className="str-video__call-stats__card-container">
+            {trackStats
+              ?.map((track) => {
+                if (track.kind === 'video') {
+                  return (
+                    <StatCard
+                      key={`${track.rid}/${track.ssrc}/${track.codec}/${track.kind}`}
+                      label={
+                        `${track.kind}: ${track.codec} ` +
+                        (track.rid ? ` (${track.rid})` : '')
+                      }
+                      value={`${track.frameWidth || 0}x${
+                        track.frameHeight || 0
+                      }@${track.framesPerSecond || 0}fps`}
+                    />
+                  );
+                } else if (track.kind === 'audio') {
+                  return (
+                    <StatCard
+                      key={`${track.ssrc}/${track.codec}/${track.kind}`}
+                      label={track.codec || 'N/A'}
+                      value={`Jitter: ${track.jitter || 0}ms`}
+                    />
+                  );
+                }
+                return null;
+              })
+              .filter(Boolean)}
+          </div>
+          {reportForTracks?.map((report, index) => (
+            <pre key={index}>
+              {JSON.stringify(unwrapStats(report.rawStats), null, 2)}
+            </pre>
+          ))}
         </div>
       )}
     </>
   );
 };
+
+const unwrapStats = (rawStats?: RTCStatsReport) => {
+  const decodedStats: Record<string, string> = {};
+  rawStats?.forEach((s) => {
+    decodedStats[s.id] = s;
+  });
+  return decodedStats;
+};

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -150,7 +150,7 @@ export const ParticipantDetails = ({
           />
           <DebugStatsView
             call={call}
-            kind={isLoggedInUser ? 'publisher' : 'subscriber'}
+            sessionId={sessionId}
             mediaStream={videoStream}
           />
         </>

package/src/hooks/index.ts

@@ -1,2 +1 @@
-export * from './useRtcStats';
 export * from './useFloatingUIPreset';

package/dist/src/components/StreamCall/CallStats.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const CallStats: () => JSX.Element;

package/dist/src/components/StreamCall/CallStats.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CallStats.js","sourceRoot":"","sources":["../../../../src/components/StreamCall/CallStats.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/StreamCall/CallStatsLatencyChart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CallStatsLatencyChart.js","sourceRoot":"","sources":["../../../../src/components/StreamCall/CallStatsLatencyChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAErC,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAChC,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;QACpB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QACvB,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IACH,OAAO,CACL,4BAAK,SAAS,EAAC,4CAA4C,gBACzD,KAAC,cAAc,IACb,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAC3B,IAAI,EAAE;gBACJ;oBACE,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,IAAI;iBACX;aACF,EACD,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAClD,YAAY,QACZ,WAAW,EAAE,KAAK,EAClB,WAAW,QACX,YAAY,EAAC,GAAG,EAChB,aAAa,QACb,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EACzB,MAAM,EAAE;gBACN,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE;gBAC/B,IAAI,EAAE,IAAI;aACX,EACD,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,IAAI,EAAE;4BACJ,IAAI,EAAE,SAAS;yBAChB;wBACD,IAAI,EAAE;4BACJ,MAAM,EAAE,SAAS;yBAClB;qBACF;iBACF;gBACD,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,WAAW,EAAE,GAAG;qBACjB;iBACF;aACF,GACD,IACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/hooks/useRtcStats.d.ts

@@ -1,11 +0,0 @@
-import { Call } from '@stream-io/video-client';
-/**
- *
- * @param call
- * @param kind
- * @param mediaStream
- * @returns
- *
- * @category Call State
- */
-export declare const useRtcStats: (call: Call, kind: 'subscriber' | 'publisher', mediaStream?: MediaStream) => Record<string, string> | undefined;

package/dist/src/hooks/useRtcStats.js

@@ -1,39 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { useEffect, useState } from 'react';
-/**
- *
- * @param call
- * @param kind
- * @param mediaStream
- * @returns
- *
- * @category Call State
- */
-export const useRtcStats = (call, kind, mediaStream) => {
-    const [stats, setStats] = useState();
-    useEffect(() => {
-        const intervalId = setInterval(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            const [track] = (_a = mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.getVideoTracks()) !== null && _a !== void 0 ? _a : [];
-            const rawStats = yield call.getStats(kind, track);
-            const decodedStats = {};
-            rawStats === null || rawStats === void 0 ? void 0 : rawStats.forEach((s) => {
-                decodedStats[s.id] = s;
-            });
-            setStats(decodedStats);
-        }), 1500);
-        return () => {
-            clearInterval(intervalId);
-        };
-    }, [call, kind, mediaStream]);
-    return stats;
-};
-//# sourceMappingURL=useRtcStats.js.map

package/dist/src/hooks/useRtcStats.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRtcStats.js","sourceRoot":"","sources":["../../../src/hooks/useRtcStats.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,IAAU,EACV,IAAgC,EAChC,WAAyB,EACzB,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAA0B,CAAC;IAC7D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAS,EAAE;;YACxC,MAAM,CAAC,KAAK,CAAC,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,EAAE,mCAAI,EAAE,CAAC;YACpD,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAClD,MAAM,YAAY,GAA2B,EAAE,CAAC;YAChD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACtB,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;YACzB,CAAC,CAAC,CAAC;YACH,QAAQ,CAAC,YAAY,CAAC,CAAC;QACzB,CAAC,CAAA,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,UAAU,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9B,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}

package/src/hooks/useRtcStats.ts

@@ -1,36 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Call } from '@stream-io/video-client';
-
-/**
- *
- * @param call
- * @param kind
- * @param mediaStream
- * @returns
- *
- * @category Call State
- */
-export const useRtcStats = (
-  call: Call,
-  kind: 'subscriber' | 'publisher',
-  mediaStream?: MediaStream,
-) => {
-  const [stats, setStats] = useState<Record<string, string>>();
-  useEffect(() => {
-    const intervalId = setInterval(async () => {
-      const [track] = mediaStream?.getVideoTracks() ?? [];
-      const rawStats = await call.getStats(kind, track);
-      const decodedStats: Record<string, string> = {};
-      rawStats?.forEach((s) => {
-        decodedStats[s.id] = s;
-      });
-      setStats(decodedStats);
-    }, 1500);
-
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, [call, kind, mediaStream]);
-
-  return stats;
-};