@stream-io/video-react-sdk 1.41.0 → 2.0.0-beta.0

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

@@ -0,0 +1,180 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { lazy, useState, useRef, useEffect, Suspense } from 'react';
+import clsx from 'clsx';
+import { SfuModels } from '@stream-io/video-client';
+import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useFloating, useHover, useInteractions } from '@floating-ui/react';
+import { Icon } from '../Icon/Icon.js';
+
+const CallStatsLatencyChart = lazy(() => import('./CallStatsLatencyChart.js'));
+var Status;
+(function (Status) {
+    Status["GOOD"] = "Good";
+    Status["OK"] = "Ok";
+    Status["BAD"] = "Bad";
+})(Status || (Status = {}));
+const CallStats = (props) => {
+    const { latencyLowBound = 75, latencyHighBound = 400, audioJitterLowBound = 10, audioJitterHighBound = 30, videoJitterLowBound = 20, videoJitterHighBound = 50, showCodecInfo = false, LatencyChartSuspenseFallback = null, } = props;
+    const [latencyBuffer, setLatencyBuffer] = useState(() => {
+        const now = Date.now();
+        return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
+    });
+    const { t } = useI18n();
+    const [publishBitrate, setPublishBitrate] = useState('-');
+    const [subscribeBitrate, setSubscribeBitrate] = useState('-');
+    const [publishAudioBitrate, setPublishAudioBitrate] = useState('-');
+    const [subscribeAudioBitrate, setSubscribeAudioBitrate] = useState('-');
+    const previousStats = useRef(undefined);
+    const { useCallStatsReport } = useCallStateHooks();
+    const callStatsReport = useCallStatsReport();
+    useEffect(() => {
+        if (!callStatsReport)
+            return;
+        if (!previousStats.current) {
+            previousStats.current = callStatsReport;
+            return;
+        }
+        const previousCallStatsReport = previousStats.current;
+        setPublishBitrate(() => {
+            return calculatePublishBitrate(previousCallStatsReport, callStatsReport);
+        });
+        setSubscribeBitrate(() => {
+            return calculateSubscribeBitrate(previousCallStatsReport, callStatsReport);
+        });
+        setPublishAudioBitrate(() => {
+            return calculatePublishAudioBitrate(previousCallStatsReport, callStatsReport);
+        });
+        setSubscribeAudioBitrate(() => {
+            return calculateSubscribeAudioBitrate(previousCallStatsReport, callStatsReport);
+        });
+        setLatencyBuffer((latencyBuf) => {
+            const newLatencyBuffer = latencyBuf.slice(-19);
+            newLatencyBuffer.push({
+                x: callStatsReport.timestamp,
+                y: callStatsReport.publisherStats.averageRoundTripTimeInMs ||
+                    callStatsReport.publisherAudioStats.averageRoundTripTimeInMs,
+            });
+            return newLatencyBuffer;
+        });
+        previousStats.current = callStatsReport;
+    }, [callStatsReport]);
+    const latencyComparison = {
+        lowBound: latencyLowBound,
+        highBound: latencyHighBound,
+        value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
+    };
+    const audioJitterComparison = {
+        lowBound: audioJitterLowBound,
+        highBound: audioJitterHighBound,
+    };
+    const videoJitterComparison = {
+        lowBound: videoJitterLowBound,
+        highBound: videoJitterHighBound,
+    };
+    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('Video 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: {
+                                ...videoJitterComparison,
+                                value: callStatsReport.subscriberStats.averageJitterInMs,
+                            } }), jsx(StatCard, { label: t('Publish jitter'), value: `${callStatsReport.publisherStats.averageJitterInMs} ms.`, comparison: {
+                                ...videoJitterComparison,
+                                value: callStatsReport.publisherStats.averageJitterInMs,
+                            } }), 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 })] }), 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: "mic" }), t('Audio Performance')] }), jsx("p", { className: "str-video__call-stats__description", children: t('Review the key audio data points below to assess audio performance') })] }), jsxs("div", { className: "str-video__call-stats__card-container", children: [jsx(StatCard, { label: t('Latency'), value: `${callStatsReport.publisherAudioStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsx(StatCard, { label: t('Audio codec'), value: formatAudioCodec(callStatsReport) }), jsx(StatCard, { label: t('Audio bitrate (publish)'), value: publishAudioBitrate }), jsx(StatCard, { label: t('Audio bitrate (receive)'), value: subscribeAudioBitrate }), jsx(StatCard, { label: t('Audio jitter (publish)'), value: `${callStatsReport.publisherAudioStats.averageJitterInMs} ms.`, comparison: {
+                                ...audioJitterComparison,
+                                value: callStatsReport.publisherAudioStats.averageJitterInMs,
+                            } }), jsx(StatCard, { label: t('Audio jitter (receive)'), value: `${callStatsReport.subscriberAudioStats.averageJitterInMs} ms.`, comparison: {
+                                ...audioJitterComparison,
+                                value: callStatsReport.subscriberAudioStats.averageJitterInMs,
+                            } })] })] })) }));
+};
+const StatCardExplanation = (props) => {
+    const { description } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+    });
+    const hover = useHover(context);
+    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 = (props) => {
+    const { children, status } = props;
+    return (jsx("div", { className: clsx('str-video__call-stats__tag', {
+            '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 ? 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;
+    let size = `-`;
+    if (w && h) {
+        size = `${w}x${h}`;
+        if (fps) {
+            size += `@${fps}fps.`;
+        }
+    }
+    return size;
+};
+const formatCodec = (callStatsReport) => {
+    const { codecPerTrackType } = callStatsReport.publisherStats;
+    if (!codecPerTrackType || !codecPerTrackType[SfuModels.TrackType.VIDEO]) {
+        return '';
+    }
+    const [, name] = codecPerTrackType[SfuModels.TrackType.VIDEO].split('/');
+    return name ? ` (${name})` : '';
+};
+const formatAudioCodec = (callStatsReport) => {
+    const { codecPerTrackType } = callStatsReport.publisherAudioStats;
+    if (!codecPerTrackType || !codecPerTrackType[SfuModels.TrackType.AUDIO]) {
+        return '';
+    }
+    const [, name] = codecPerTrackType[SfuModels.TrackType.AUDIO].split('/');
+    return name ?? '';
+};
+const calculatePublishBitrate = (previousCallStatsReport, callStatsReport) => {
+    const { publisherStats: { totalBytesSent: previousTotalBytesSent, timestamp: previousTimestamp, }, } = previousCallStatsReport;
+    const { publisherStats: { totalBytesSent, timestamp }, } = callStatsReport;
+    const bytesSent = totalBytesSent - previousTotalBytesSent;
+    const timeElapsed = timestamp - previousTimestamp;
+    return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+const calculateSubscribeBitrate = (previousCallStatsReport, callStatsReport) => {
+    const { subscriberStats: { totalBytesReceived: previousTotalBytesReceived, timestamp: previousTimestamp, }, } = previousCallStatsReport;
+    const { subscriberStats: { totalBytesReceived, timestamp }, } = callStatsReport;
+    const bytesReceived = totalBytesReceived - previousTotalBytesReceived;
+    const timeElapsed = timestamp - previousTimestamp;
+    return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+const calculatePublishAudioBitrate = (previousCallStatsReport, callStatsReport) => {
+    const previousAudioStats = previousCallStatsReport.publisherAudioStats;
+    const audioStats = callStatsReport.publisherAudioStats;
+    const bytesSent = audioStats.totalBytesSent - previousAudioStats.totalBytesSent;
+    const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
+    return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+const calculateSubscribeAudioBitrate = (previousCallStatsReport, callStatsReport) => {
+    const previousAudioStats = previousCallStatsReport.subscriberAudioStats;
+    const audioStats = callStatsReport.subscriberAudioStats;
+    const bytesReceived = audioStats.totalBytesReceived - previousAudioStats.totalBytesReceived;
+    const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;
+    return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+
+export { CallStats, StatCard };
+//# sourceMappingURL=CallStats.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallStats.js","sources":["../../../../../../../src/components/CallStats/CallStats.tsx"],"sourcesContent":["import { lazy, ReactNode, Suspense, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport {\n  AggregatedStatsReport,\n  CallStatsReport,\n  SfuModels,\n} from '@stream-io/video-client';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { useFloating, useHover, useInteractions } from '@floating-ui/react';\nimport { Icon } from '../Icon';\n\nconst CallStatsLatencyChart = lazy(() => import('./CallStatsLatencyChart'));\n\nenum Status {\n  GOOD = 'Good',\n  OK = 'Ok',\n  BAD = 'Bad',\n}\n\nexport type CallStatsProps = {\n  latencyLowBound?: number;\n  latencyHighBound?: number;\n  audioJitterLowBound?: number;\n  audioJitterHighBound?: number;\n  videoJitterLowBound?: number;\n  videoJitterHighBound?: number;\n  showCodecInfo?: boolean;\n  LatencyChartSuspenseFallback?: ReactNode;\n};\n\nexport const CallStats = (props: CallStatsProps) => {\n  const {\n    latencyLowBound = 75,\n    latencyHighBound = 400,\n    audioJitterLowBound = 10,\n    audioJitterHighBound = 30,\n    videoJitterLowBound = 20,\n    videoJitterHighBound = 50,\n    showCodecInfo = false,\n    LatencyChartSuspenseFallback = null,\n  } = props;\n  const [latencyBuffer, setLatencyBuffer] = useState<\n    Array<{ x: number; y: number }>\n  >(() => {\n    const now = Date.now();\n    return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));\n  });\n\n  const { t } = useI18n();\n  const [publishBitrate, setPublishBitrate] = useState('-');\n  const [subscribeBitrate, setSubscribeBitrate] = useState('-');\n  const [publishAudioBitrate, setPublishAudioBitrate] = useState('-');\n  const [subscribeAudioBitrate, setSubscribeAudioBitrate] = useState('-');\n  const previousStats = useRef<CallStatsReport>(undefined);\n  const { useCallStatsReport } = useCallStateHooks();\n  const callStatsReport = useCallStatsReport();\n\n  useEffect(() => {\n    if (!callStatsReport) return;\n    if (!previousStats.current) {\n      previousStats.current = callStatsReport;\n      return;\n    }\n    const previousCallStatsReport = previousStats.current;\n    setPublishBitrate(() => {\n      return calculatePublishBitrate(previousCallStatsReport, callStatsReport);\n    });\n    setSubscribeBitrate(() => {\n      return calculateSubscribeBitrate(\n        previousCallStatsReport,\n        callStatsReport,\n      );\n    });\n    setPublishAudioBitrate(() => {\n      return calculatePublishAudioBitrate(\n        previousCallStatsReport,\n        callStatsReport,\n      );\n    });\n    setSubscribeAudioBitrate(() => {\n      return calculateSubscribeAudioBitrate(\n        previousCallStatsReport,\n        callStatsReport,\n      );\n    });\n\n    setLatencyBuffer((latencyBuf) => {\n      const newLatencyBuffer = latencyBuf.slice(-19);\n      newLatencyBuffer.push({\n        x: callStatsReport.timestamp,\n        y:\n          callStatsReport.publisherStats.averageRoundTripTimeInMs ||\n          callStatsReport.publisherAudioStats.averageRoundTripTimeInMs,\n      });\n      return newLatencyBuffer;\n    });\n\n    previousStats.current = callStatsReport;\n  }, [callStatsReport]);\n\n  const latencyComparison = {\n    lowBound: latencyLowBound,\n    highBound: latencyHighBound,\n    value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,\n  };\n\n  const audioJitterComparison = {\n    lowBound: audioJitterLowBound,\n    highBound: audioJitterHighBound,\n  };\n\n  const videoJitterComparison = {\n    lowBound: videoJitterLowBound,\n    highBound: videoJitterHighBound,\n  };\n\n  return (\n    <div className=\"str-video__call-stats\">\n      {callStatsReport && (\n        <>\n          <div className=\"str-video__call-stats__header\">\n            <h3 className=\"str-video__call-stats__heading\">\n              <Icon\n                className=\"str-video__call-stats__icon\"\n                icon=\"call-latency\"\n              />\n              {t('Call Latency')}\n            </h3>\n            <p className=\"str-video__call-stats__description\">\n              {t(\n                'Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.',\n              )}\n            </p>\n          </div>\n\n          <div className=\"str-video__call-stats__latencychart\">\n            <Suspense fallback={LatencyChartSuspenseFallback}>\n              <CallStatsLatencyChart values={latencyBuffer} />\n            </Suspense>\n          </div>\n\n          <div className=\"str-video__call-stats__header\">\n            <h3 className=\"str-video__call-stats__heading\">\n              <Icon\n                className=\"str-video__call-stats__icon\"\n                icon=\"network-quality\"\n              />\n              {t('Video performance')}\n            </h3>\n            <p className=\"str-video__call-stats__description\">\n              {t('Review the key data points below to assess call performance')}\n            </p>\n          </div>\n\n          <div className=\"str-video__call-stats__card-container\">\n            <StatCard label={t('Region')} value={callStatsReport.datacenter} />\n            <StatCard\n              label={t('Latency')}\n              value={`${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`}\n              comparison={latencyComparison}\n            />\n            <StatCard\n              label={t('Receive jitter')}\n              value={`${callStatsReport.subscriberStats.averageJitterInMs} ms.`}\n              comparison={{\n                ...videoJitterComparison,\n                value: callStatsReport.subscriberStats.averageJitterInMs,\n              }}\n            />\n            <StatCard\n              label={t('Publish jitter')}\n              value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}\n              comparison={{\n                ...videoJitterComparison,\n                value: callStatsReport.publisherStats.averageJitterInMs,\n              }}\n            />\n            <StatCard\n              label={`${t('Publish resolution')}${showCodecInfo ? formatCodec(callStatsReport) : ''}`}\n              value={toFrameSize(callStatsReport.publisherStats)}\n            />\n            <StatCard\n              label={t('Publish quality drop reason')}\n              value={callStatsReport.publisherStats.qualityLimitationReasons}\n            />\n            <StatCard\n              label={t('Receiving resolution')}\n              value={toFrameSize(callStatsReport.subscriberStats)}\n            />\n            <StatCard\n              label={t('Receive quality drop reason')}\n              value={callStatsReport.subscriberStats.qualityLimitationReasons}\n            />\n            <StatCard label={t('Publish bitrate')} value={publishBitrate} />\n            <StatCard label={t('Receiving bitrate')} value={subscribeBitrate} />\n          </div>\n\n          <div className=\"str-video__call-stats__header\">\n            <h3 className=\"str-video__call-stats__heading\">\n              <Icon className=\"str-video__call-stats__icon\" icon=\"mic\" />\n              {t('Audio Performance')}\n            </h3>\n            <p className=\"str-video__call-stats__description\">\n              {t(\n                'Review the key audio data points below to assess audio performance',\n              )}\n            </p>\n          </div>\n\n          <div className=\"str-video__call-stats__card-container\">\n            <StatCard\n              label={t('Latency')}\n              value={`${callStatsReport.publisherAudioStats.averageRoundTripTimeInMs} ms.`}\n              comparison={latencyComparison}\n            />\n            <StatCard\n              label={t('Audio codec')}\n              value={formatAudioCodec(callStatsReport)}\n            />\n            <StatCard\n              label={t('Audio bitrate (publish)')}\n              value={publishAudioBitrate}\n            />\n            <StatCard\n              label={t('Audio bitrate (receive)')}\n              value={subscribeAudioBitrate}\n            />\n            <StatCard\n              label={t('Audio jitter (publish)')}\n              value={`${callStatsReport.publisherAudioStats.averageJitterInMs} ms.`}\n              comparison={{\n                ...audioJitterComparison,\n                value: callStatsReport.publisherAudioStats.averageJitterInMs,\n              }}\n            />\n            <StatCard\n              label={t('Audio jitter (receive)')}\n              value={`${callStatsReport.subscriberAudioStats.averageJitterInMs} ms.`}\n              comparison={{\n                ...audioJitterComparison,\n                value: callStatsReport.subscriberAudioStats.averageJitterInMs,\n              }}\n            />\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nconst StatCardExplanation = (props: { description: string }) => {\n  const { description } = props;\n  const [isOpen, setIsOpen] = useState(false);\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n  });\n\n  const hover = useHover(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([hover]);\n\n  return (\n    <>\n      <div\n        className=\"str-video__call-explanation\"\n        ref={refs.setReference}\n        {...getReferenceProps()}\n      >\n        <Icon className=\"str-video__call-explanation__icon\" icon=\"info\" />\n      </div>\n      {isOpen && (\n        <div\n          className=\"str-video__call-explanation__description\"\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          {description}\n        </div>\n      )}\n    </>\n  );\n};\n\nconst StatsTag = (props: { children: ReactNode; status: Status }) => {\n  const { children, status } = props;\n  return (\n    <div\n      className={clsx('str-video__call-stats__tag', {\n        'str-video__call-stats__tag--good': status === Status.GOOD,\n        'str-video__call-stats__tag--ok': status === Status.OK,\n        'str-video__call-stats__tag--bad': status === Status.BAD,\n      })}\n    >\n      <div className=\"str-video__call-stats__tag__text\">{children}</div>\n    </div>\n  );\n};\n\nexport const StatCard = (props: {\n  label: string;\n  value: string | ReactNode;\n  description?: string;\n  comparison?: { value: number; highBound: number; lowBound: number };\n}) => {\n  const { label, value, description, comparison } = props;\n\n  const { t } = useI18n();\n  const status = comparison ? toStatus(comparison) : undefined;\n\n  return (\n    <div className=\"str-video__call-stats__card\">\n      <div className=\"str-video__call-stats__card-content\">\n        <div className=\"str-video__call-stats__card-label\">\n          {label}\n          {description && <StatCardExplanation description={description} />}\n        </div>\n        <div className=\"str-video__call-stats__card-value\">{value}</div>\n      </div>\n      {status && <StatsTag status={status}>{t(status)}</StatsTag>}\n    </div>\n  );\n};\n\nconst toStatus = (config: {\n  value: number;\n  lowBound: number;\n  highBound: number;\n}): Status => {\n  const { value, lowBound, highBound } = config;\n  if (value <= lowBound) return Status.GOOD;\n  if (value >= lowBound && value <= highBound) return Status.OK;\n  if (value >= highBound) return Status.BAD;\n  return Status.GOOD;\n};\n\nconst toFrameSize = (stats: AggregatedStatsReport) => {\n  const {\n    highestFrameWidth: w,\n    highestFrameHeight: h,\n    highestFramesPerSecond: fps,\n  } = stats;\n  let size = `-`;\n  if (w && h) {\n    size = `${w}x${h}`;\n    if (fps) {\n      size += `@${fps}fps.`;\n    }\n  }\n  return size;\n};\n\nconst formatCodec = (callStatsReport: CallStatsReport): string => {\n  const { codecPerTrackType } = callStatsReport.publisherStats;\n  if (!codecPerTrackType || !codecPerTrackType[SfuModels.TrackType.VIDEO]) {\n    return '';\n  }\n  const [, name] = codecPerTrackType[SfuModels.TrackType.VIDEO].split('/');\n  return name ? ` (${name})` : '';\n};\n\nconst formatAudioCodec = (callStatsReport: CallStatsReport): string => {\n  const { codecPerTrackType } = callStatsReport.publisherAudioStats;\n  if (!codecPerTrackType || !codecPerTrackType[SfuModels.TrackType.AUDIO]) {\n    return '';\n  }\n  const [, name] = codecPerTrackType[SfuModels.TrackType.AUDIO].split('/');\n  return name ?? '';\n};\n\nconst calculatePublishBitrate = (\n  previousCallStatsReport: CallStatsReport,\n  callStatsReport: CallStatsReport,\n) => {\n  const {\n    publisherStats: {\n      totalBytesSent: previousTotalBytesSent,\n      timestamp: previousTimestamp,\n    },\n  } = previousCallStatsReport;\n\n  const {\n    publisherStats: { totalBytesSent, timestamp },\n  } = callStatsReport;\n\n  const bytesSent = totalBytesSent - previousTotalBytesSent;\n  const timeElapsed = timestamp - previousTimestamp;\n  return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;\n};\n\nconst calculateSubscribeBitrate = (\n  previousCallStatsReport: CallStatsReport,\n  callStatsReport: CallStatsReport,\n) => {\n  const {\n    subscriberStats: {\n      totalBytesReceived: previousTotalBytesReceived,\n      timestamp: previousTimestamp,\n    },\n  } = previousCallStatsReport;\n\n  const {\n    subscriberStats: { totalBytesReceived, timestamp },\n  } = callStatsReport;\n\n  const bytesReceived = totalBytesReceived - previousTotalBytesReceived;\n  const timeElapsed = timestamp - previousTimestamp;\n  return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;\n};\n\nconst calculatePublishAudioBitrate = (\n  previousCallStatsReport: CallStatsReport,\n  callStatsReport: CallStatsReport,\n) => {\n  const previousAudioStats = previousCallStatsReport.publisherAudioStats;\n  const audioStats = callStatsReport.publisherAudioStats;\n\n  const bytesSent =\n    audioStats.totalBytesSent - previousAudioStats.totalBytesSent;\n  const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;\n\n  return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;\n};\n\nconst calculateSubscribeAudioBitrate = (\n  previousCallStatsReport: CallStatsReport,\n  callStatsReport: CallStatsReport,\n) => {\n  const previousAudioStats = previousCallStatsReport.subscriberAudioStats;\n  const audioStats = callStatsReport.subscriberAudioStats;\n\n  const bytesReceived =\n    audioStats.totalBytesReceived - previousAudioStats.totalBytesReceived;\n  const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;\n\n  return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/{latency-chart-Bj5OSYzg.es.js → esm/src/components/CallStats/CallStatsLatencyChart.js}

@@ -54,4 +54,4 @@ const getLineOptions = (max) => ({
 });
 
 export { CallStatsLatencyChart as default };
-//# sourceMappingURL=latency-chart-Bj5OSYzg.es.js.map
+//# sourceMappingURL=CallStatsLatencyChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallStatsLatencyChart.js","sources":["../../../../../../../src/components/CallStats/CallStatsLatencyChart.tsx"],"sourcesContent":["import {\n  CategoryScale,\n  Chart as ChartJS,\n  ChartData,\n  ChartOptions,\n  LinearScale,\n  LineElement,\n  PointElement,\n} from 'chart.js';\nimport { Line } from 'react-chartjs-2';\nimport { useMemo } from 'react';\n\n// NOTE: this is a side effect by definition, but this component is\n// isolated in a separate chunk, and it won't affect the rest of the app.\n// See CallStats.tsx for more details.\nChartJS.register(CategoryScale, LinearScale, LineElement, PointElement);\n\nconst CallStatsLatencyChart = (props: {\n  values: Array<{ x: number; y: number }>;\n}) => {\n  const { values } = props;\n  let max = 0;\n  const data: ChartData<'line'> = {\n    labels: values.map((point) => {\n      const date = new Date(point.x * 1000);\n      return `${date.getHours()}:${date.getMinutes()}`;\n    }),\n    datasets: [\n      {\n        data: values.map((point) => {\n          const { y } = point;\n          max = Math.max(max, y);\n          return point;\n        }),\n        borderColor: '#00e2a1',\n        backgroundColor: '#00e2a1',\n      },\n    ],\n  };\n\n  const options = useMemo(() => getLineOptions(max), [max]);\n  return (\n    <div className=\"str-video__call-stats-line-chart-container\">\n      <Line\n        options={options}\n        data={data}\n        className=\"str-video__call-stats__latencychart\"\n      />\n    </div>\n  );\n};\n\nexport default CallStatsLatencyChart;\n\nconst getLineOptions = (max: number): ChartOptions<'line'> => ({\n  maintainAspectRatio: false,\n  animation: { duration: 0 },\n  elements: {\n    line: { borderWidth: 1 },\n    point: { radius: 2 },\n  },\n  scales: {\n    y: {\n      position: 'right',\n      stacked: true,\n      min: 0,\n      max: Math.max(180, Math.ceil((max + 10) / 10) * 10),\n      grid: { display: true, color: '#979ca0' },\n      ticks: { stepSize: 30 },\n    },\n    x: {\n      grid: { display: false },\n      ticks: { display: false },\n    },\n  },\n});\n"],"names":["ChartJS","_jsx"],"mappings":";;;;;AAYA;AACA;AACA;AACAA,KAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC;AAEvE,MAAM,qBAAqB,GAAG,CAAC,KAE9B,KAAI;AACH,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK;IACxB,IAAI,GAAG,GAAG,CAAC;AACX,IAAA,MAAM,IAAI,GAAsB;QAC9B,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;YAC3B,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;YACrC,OAAO,CAAA,EAAG,IAAI,CAAC,QAAQ,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,UAAU,EAAE,CAAA,CAAE;AAClD,QAAA,CAAC,CAAC;AACF,QAAA,QAAQ,EAAE;AACR,YAAA;gBACE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACzB,oBAAA,MAAM,EAAE,CAAC,EAAE,GAAG,KAAK;oBACnB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;AACtB,oBAAA,OAAO,KAAK;AACd,gBAAA,CAAC,CAAC;AACF,gBAAA,WAAW,EAAE,SAAS;AACtB,gBAAA,eAAe,EAAE,SAAS;AAC3B,aAAA;AACF,SAAA;KACF;AAED,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACzD,QACEC,aAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EACzDA,GAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,qCAAqC,EAAA,CAC/C,EAAA,CACE;AAEV;AAIA,MAAM,cAAc,GAAG,CAAC,GAAW,MAA4B;AAC7D,IAAA,mBAAmB,EAAE,KAAK;AAC1B,IAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC1B,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;AACxB,QAAA,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;AACrB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,CAAC,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC;YACnD,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;AACzC,YAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;AACxB,SAAA;AACD,QAAA,CAAC,EAAE;AACD,YAAA,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;AACxB,YAAA,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;AAC1B,SAAA;AACF,KAAA;AACF,CAAA,CAAC;;;;"}

package/dist/esm/src/components/DeviceSettings/AudioVolumeIndicator.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { createSoundDetector } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Icon } from '../Icon/Icon.js';
+
+const AudioVolumeIndicator = () => {
+    const { useMicrophoneState } = useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const barRef = useRef(null);
+    useEffect(() => {
+        if (!isEnabled || !mediaStream)
+            return;
+        const disposeSoundDetector = createSoundDetector(mediaStream, ({ audioLevel: al }) => {
+            if (barRef.current) {
+                barRef.current.style.transform = `scaleX(${al / 100})`;
+            }
+        }, { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        return () => {
+            disposeSoundDetector().catch(console.error);
+        };
+    }, [isEnabled, mediaStream]);
+    return (jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsx("div", { ref: barRef, className: "str-video__audio-volume-indicator__bar-value" }) })] }));
+};
+
+export { AudioVolumeIndicator };
+//# sourceMappingURL=AudioVolumeIndicator.js.map

package/dist/esm/src/components/DeviceSettings/AudioVolumeIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioVolumeIndicator.js","sources":["../../../../../../../src/components/DeviceSettings/AudioVolumeIndicator.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { createSoundDetector } from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { Icon } from '../Icon';\n\nexport const AudioVolumeIndicator = () => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { isEnabled, mediaStream } = useMicrophoneState();\n  const barRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isEnabled || !mediaStream) return;\n    const disposeSoundDetector = createSoundDetector(\n      mediaStream,\n      ({ audioLevel: al }) => {\n        if (barRef.current) {\n          barRef.current.style.transform = `scaleX(${al / 100})`;\n        }\n      },\n      { detectionFrequencyInMs: 80, destroyStreamOnStop: false },\n    );\n    return () => {\n      disposeSoundDetector().catch(console.error);\n    };\n  }, [isEnabled, mediaStream]);\n\n  return (\n    <div className=\"str-video__audio-volume-indicator\">\n      <Icon icon={isEnabled ? 'mic' : 'mic-off'} />\n      <div className=\"str-video__audio-volume-indicator__bar\">\n        <div\n          ref={barRef}\n          className=\"str-video__audio-volume-indicator__bar-value\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKO,MAAM,oBAAoB,GAAG,MAAK;AACvC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClD,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,kBAAkB,EAAE;AACvD,IAAA,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC;IAE3C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW;YAAE;AAChC,QAAA,MAAM,oBAAoB,GAAG,mBAAmB,CAC9C,WAAW,EACX,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,KAAI;AACrB,YAAA,IAAI,MAAM,CAAC,OAAO,EAAE;AAClB,gBAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,EAAE,GAAG,GAAG,CAAA,CAAA,CAAG;YACxD;QACF,CAAC,EACD,EAAE,sBAAsB,EAAE,EAAE,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAC3D;AACD,QAAA,OAAO,MAAK;YACV,oBAAoB,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAC7C,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE5B,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EAAA,CAAI,EAC7CA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACrDA,aACE,GAAG,EAAE,MAAM,EACX,SAAS,EAAC,8CAA8C,GACxD,EAAA,CACE,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/components/DeviceSettings/DeviceAudioPreviewItem.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { createSoundDetector } from '@stream-io/video-client';
+import clsx from 'clsx';
+
+const LEVEL_BARS = 5;
+const DeviceLevelIndicator = ({ deviceId }) => {
+    const [audioLevel, setAudioLevel] = useState(0);
+    useEffect(() => {
+        let cancelled = false;
+        let dispose;
+        navigator.mediaDevices
+            .getUserMedia({
+            audio: { deviceId: { exact: deviceId } },
+            video: false,
+        })
+            .then((mediaStream) => {
+            if (cancelled) {
+                mediaStream.getTracks().forEach((t) => t.stop());
+                return;
+            }
+            dispose = createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80 });
+        })
+            .catch(console.error);
+        return () => {
+            cancelled = true;
+            dispose?.().catch(console.error);
+        };
+    }, [deviceId]);
+    const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);
+    return (jsx("div", { className: "str-video__device-level-indicator", "aria-label": "Audio level", children: Array.from({ length: LEVEL_BARS }, (_, i) => (jsx("div", { className: clsx('str-video__device-level-indicator__bar', {
+                'str-video__device-level-indicator__bar--active': i < activeBars,
+            }) }, i))) }));
+};
+const DeviceAudioPreviewItem = ({ device, onSelect, }) => {
+    if (device.deviceId === 'default')
+        return null;
+    return (jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), device.label, jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
+};
+
+export { DeviceAudioPreviewItem };
+//# sourceMappingURL=DeviceAudioPreviewItem.js.map

package/dist/esm/src/components/DeviceSettings/DeviceAudioPreviewItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceAudioPreviewItem.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceAudioPreviewItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { createSoundDetector } from '@stream-io/video-client';\nimport clsx from 'clsx';\nimport { DeviceListItem } from '../../hooks';\n\nconst LEVEL_BARS = 5;\n\nconst DeviceLevelIndicator = ({ deviceId }: { deviceId: string }) => {\n  const [audioLevel, setAudioLevel] = useState(0);\n\n  useEffect(() => {\n    let cancelled = false;\n    let dispose: (() => Promise<void>) | undefined;\n\n    navigator.mediaDevices\n      .getUserMedia({\n        audio: { deviceId: { exact: deviceId } },\n        video: false,\n      })\n      .then((mediaStream) => {\n        if (cancelled) {\n          mediaStream.getTracks().forEach((t) => t.stop());\n          return;\n        }\n        dispose = createSoundDetector(\n          mediaStream,\n          ({ audioLevel: al }) => setAudioLevel(al),\n          { detectionFrequencyInMs: 80 },\n        );\n      })\n      .catch(console.error);\n\n    return () => {\n      cancelled = true;\n      dispose?.().catch(console.error);\n    };\n  }, [deviceId]);\n\n  const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);\n\n  return (\n    <div className=\"str-video__device-level-indicator\" aria-label=\"Audio level\">\n      {Array.from({ length: LEVEL_BARS }, (_, i) => (\n        <div\n          key={i}\n          className={clsx('str-video__device-level-indicator__bar', {\n            'str-video__device-level-indicator__bar--active': i < activeBars,\n          })}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type DeviceAudioPreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nexport const DeviceAudioPreviewItem = ({\n  device,\n  onSelect,\n}: DeviceAudioPreviewItemProps) => {\n  if (device.deviceId === 'default') return null;\n\n  return (\n    <label\n      className={`str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`}\n      htmlFor={`audioinput--${device.deviceId}`}\n    >\n      <input\n        type=\"radio\"\n        name=\"audioinput\"\n        value={device.deviceId}\n        id={`audioinput--${device.deviceId}`}\n        checked={device.isSelected}\n        onChange={(e) => onSelect(e.target.value)}\n      />\n      {device.label}\n      <DeviceLevelIndicator deviceId={device.deviceId} />\n    </label>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC;AAEpB,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,KAAK;AACrB,QAAA,IAAI,OAA0C;AAE9C,QAAA,SAAS,CAAC;AACP,aAAA,YAAY,CAAC;YACZ,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;AACxC,YAAA,KAAK,EAAE,KAAK;SACb;AACA,aAAA,IAAI,CAAC,CAAC,WAAW,KAAI;YACpB,IAAI,SAAS,EAAE;AACb,gBAAA,WAAW,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChD;YACF;YACA,OAAO,GAAG,mBAAmB,CAC3B,WAAW,EACX,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,aAAa,CAAC,EAAE,CAAC,EACzC,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAC/B;AACH,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEvB,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,IAAI;YAChB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAClC,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,GAAG,IAAI,UAAU,CAAC;AAE9D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,YAAA,EAAY,aAAa,EAAA,QAAA,EACxE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MACvCA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,IAAI,CAAC,wCAAwC,EAAE;gBACxD,gDAAgD,EAAE,CAAC,GAAG,UAAU;AACjE,aAAA,CAAC,IAHG,CAAC,CAIN,CACH,CAAC,EAAA,CACE;AAEV,CAAC;AAOM,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,QAAQ,GACoB,KAAI;AAChC,IAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;AAE9C,IAAA,QACEC,IAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,CAAA,kCAAA,EAAqC,MAAM,CAAC,UAAU,GAAG,+CAA+C,GAAG,EAAE,CAAA,CAAE,EAC1H,OAAO,EAAE,CAAA,YAAA,EAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,aAEzCD,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,EAAE,EAAE,CAAA,YAAA,EAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,EACpC,OAAO,EAAE,MAAM,CAAC,UAAU,EAC1B,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAA,CACzC,EACD,MAAM,CAAC,KAAK,EACbA,GAAA,CAAC,oBAAoB,EAAA,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC7C;AAEZ;;;;"}

package/dist/esm/src/components/DeviceSettings/DeviceSelector.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import '@floating-ui/react';
+import '@stream-io/video-react-bindings';
+import { useDeviceList } from '../../hooks/useDeviceList.js';
+import '@stream-io/video-client';
+import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect/DropdownSelect.js';
+import { useMenuContext } from '../Menu/MenuToggle.js';
+
+const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, defaultChecked, value, }) => {
+    return (jsxs("label", { className: clsx('str-video__device-settings__option', {
+            'str-video__device-settings__option--selected': selected,
+            'str-video__device-settings__option--disabled': disabled,
+        }), htmlFor: id, children: [jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
+};
+const DeviceSelectorList = (props) => {
+    const { devices = [], selectedDeviceId, title, type, onChange, children, } = props;
+    const { close } = useMenuContext();
+    const { deviceList } = useDeviceList(devices, selectedDeviceId);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), deviceList.map((device) => {
+                return (jsx(DeviceSelectorOption, { id: `${type}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
+                        const deviceId = e.target.value;
+                        if (deviceId !== 'default') {
+                            onChange?.(deviceId);
+                        }
+                        close?.();
+                    }, name: type, selected: device.isSelected }, device.deviceId));
+            }), children] }));
+};
+const DeviceSelectorPreview = (props) => {
+    const { devices = [], selectedDeviceId, title, onChange, children, PreviewItem, } = props;
+    const { close } = useMenuContext();
+    const { deviceList } = useDeviceList(devices, selectedDeviceId);
+    const onSelect = useCallback((deviceId) => {
+        if (deviceId === 'default')
+            return;
+        onChange?.(deviceId);
+        close?.();
+    }, [onChange, close]);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), deviceList.map((device) => (jsx(PreviewItem, { device: device, onSelect: onSelect }, device.deviceId))), children] }));
+};
+const DeviceSelectorDropdown = (props) => {
+    const { devices = [], selectedDeviceId, title, onChange, icon } = props;
+    const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(devices, selectedDeviceId);
+    const handleSelect = useCallback((index) => {
+        const deviceId = deviceList[index].deviceId;
+        if (deviceId !== 'default') {
+            onChange?.(deviceId);
+        }
+    }, [deviceList, onChange]);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: selectedDeviceInfo.label, handleSelect: handleSelect, children: deviceList.map((device) => (jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.isSelected }, device.deviceId))) })] }));
+};
+const DeviceSelector = (props) => {
+    if (props.visualType === 'preview') {
+        const { PreviewItem, ...rest } = props;
+        return jsx(DeviceSelectorPreview, { ...rest, PreviewItem: PreviewItem });
+    }
+    const { visualType = 'list', icon, ...rest } = props;
+    if (visualType === 'list') {
+        return jsx(DeviceSelectorList, { ...rest });
+    }
+    return jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
+};
+
+export { DeviceSelector };
+//# sourceMappingURL=DeviceSelector.js.map

package/dist/esm/src/components/DeviceSettings/DeviceSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelector.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  PropsWithChildren,\n  useCallback,\n} from 'react';\n\nimport { DeviceListItem, useDeviceList } from '../../hooks';\nimport { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';\nimport { useMenuContext } from '../Menu';\n\ntype DeviceSelectorOptionProps = {\n  id: string;\n  label: string;\n  name?: string;\n  selected?: boolean;\n  value: string;\n  disabled?: boolean;\n  defaultChecked?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n};\n\nconst DeviceSelectorOption = ({\n  disabled,\n  id,\n  label,\n  onChange,\n  name,\n  selected,\n  defaultChecked,\n  value,\n}: DeviceSelectorOptionProps) => {\n  return (\n    <label\n      className={clsx('str-video__device-settings__option', {\n        'str-video__device-settings__option--selected': selected,\n        'str-video__device-settings__option--disabled': disabled,\n      })}\n      htmlFor={id}\n    >\n      <input\n        type=\"radio\"\n        name={name}\n        onChange={onChange}\n        value={value}\n        id={id}\n        checked={selected}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n      />\n      {label}\n    </label>\n  );\n};\n\nexport type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';\n\nconst DeviceSelectorList = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    type,\n    onChange,\n    children,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => {\n        return (\n          <DeviceSelectorOption\n            id={`${type}--${device.deviceId}`}\n            value={device.deviceId}\n            label={device.label}\n            key={device.deviceId}\n            onChange={(e) => {\n              const deviceId = e.target.value;\n              if (deviceId !== 'default') {\n                onChange?.(deviceId);\n              }\n              close?.();\n            }}\n            name={type}\n            selected={device.isSelected}\n          />\n        );\n      })}\n      {children}\n    </div>\n  );\n};\n\nexport type PreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nconst DeviceSelectorPreview = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n    PreviewItem: ComponentType<PreviewItemProps>;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    onChange,\n    children,\n    PreviewItem,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  const onSelect = useCallback(\n    (deviceId: string) => {\n      if (deviceId === 'default') return;\n      onChange?.(deviceId);\n      close?.();\n    },\n    [onChange, close],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => (\n        <PreviewItem\n          key={device.deviceId}\n          device={device}\n          onSelect={onSelect}\n        />\n      ))}\n      {children}\n    </div>\n  );\n};\n\nconst DeviceSelectorDropdown = (props: {\n  devices: MediaDeviceInfo[];\n  selectedDeviceId?: string;\n  title?: string;\n  onChange?: (deviceId: string) => void;\n  icon: string;\n}) => {\n  const { devices = [], selectedDeviceId, title, onChange, icon } = props;\n  const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(\n    devices,\n    selectedDeviceId,\n  );\n\n  const handleSelect = useCallback(\n    (index: number) => {\n      const deviceId = deviceList[index].deviceId;\n      if (deviceId !== 'default') {\n        onChange?.(deviceId);\n      }\n    },\n    [deviceList, onChange],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      <div className=\"str-video__device-settings__device-selector-title\">\n        {title}\n      </div>\n      <DropDownSelect\n        icon={icon}\n        defaultSelectedIndex={selectedIndex}\n        defaultSelectedLabel={selectedDeviceInfo.label}\n        handleSelect={handleSelect}\n      >\n        {deviceList.map((device) => (\n          <DropDownSelectOption\n            key={device.deviceId}\n            icon={icon}\n            label={device.label}\n            selected={device.isSelected}\n          />\n        ))}\n      </DropDownSelect>\n    </div>\n  );\n};\n\nexport const DeviceSelector = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    icon: string;\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }> &\n    (\n      | { visualType?: 'list' | 'dropdown' }\n      | { visualType: 'preview'; PreviewItem: ComponentType<PreviewItemProps> }\n    ),\n) => {\n  if (props.visualType === 'preview') {\n    const { PreviewItem, ...rest } = props;\n    return <DeviceSelectorPreview {...rest} PreviewItem={PreviewItem} />;\n  }\n\n  const { visualType = 'list', icon, ...rest } = props;\n  if (visualType === 'list') {\n    return <DeviceSelectorList {...rest} />;\n  }\n  return <DeviceSelectorDropdown {...rest} icon={icon} />;\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/DeviceSettings/DeviceSelectorAudio.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { DeviceAudioPreviewItem } from './DeviceAudioPreviewItem.js';
+import { DeviceSelector } from './DeviceSelector.js';
+import { AudioVolumeIndicator } from './AudioVolumeIndicator.js';
+import { SpeakerTest } from './SpeakerTest.js';
+
+const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
+    const { useMicrophoneState } = useCallStateHooks();
+    const { microphone, selectedDevice, devices } = useMicrophoneState();
+    return (jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
+            await microphone.select(deviceId);
+        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(AudioVolumeIndicator, {})] })) }));
+};
+const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
+    const { useSpeakerState } = useCallStateHooks();
+    const { speaker, selectedDevice, devices, isDeviceSelectionSupported } = useSpeakerState();
+    if (!isDeviceSelectionSupported)
+        return null;
+    return (jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
+            speaker.select(deviceId);
+        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
+};
+
+export { DeviceSelectorAudioInput, DeviceSelectorAudioOutput };
+//# sourceMappingURL=DeviceSelectorAudio.js.map

package/dist/esm/src/components/DeviceSettings/DeviceSelectorAudio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelectorAudio.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelectorAudio.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { DeviceAudioPreviewItem } from './DeviceAudioPreviewItem';\nimport { DeviceSelector } from './DeviceSelector';\nimport { AudioVolumeIndicator } from './AudioVolumeIndicator';\nimport { SpeakerTest } from './SpeakerTest';\n\nexport type DeviceSelectorAudioInputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown' | 'preview';\n  volumeIndicatorVisible?: boolean;\n};\n\nexport const DeviceSelectorAudioInput = ({\n  title,\n  visualType,\n  volumeIndicatorVisible = true,\n}: DeviceSelectorAudioInputProps) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { microphone, selectedDevice, devices } = useMicrophoneState();\n\n  return (\n    <DeviceSelector\n      devices={devices || []}\n      selectedDeviceId={selectedDevice}\n      type=\"audioinput\"\n      onChange={async (deviceId) => {\n        await microphone.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"mic\"\n      PreviewItem={DeviceAudioPreviewItem}\n    >\n      {volumeIndicatorVisible && (\n        <>\n          <hr className=\"str-video__device-settings__separator\" />\n          <AudioVolumeIndicator />\n        </>\n      )}\n    </DeviceSelector>\n  );\n};\n\nexport type DeviceSelectorAudioOutputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown';\n  speakerTestVisible?: boolean;\n  speakerTestAudioUrl?: string;\n};\n\nexport const DeviceSelectorAudioOutput = ({\n  title,\n  visualType,\n  speakerTestVisible = true,\n  speakerTestAudioUrl,\n}: DeviceSelectorAudioOutputProps) => {\n  const { useSpeakerState } = useCallStateHooks();\n  const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =\n    useSpeakerState();\n\n  if (!isDeviceSelectionSupported) return null;\n\n  return (\n    <DeviceSelector\n      devices={devices}\n      type=\"audiooutput\"\n      selectedDeviceId={selectedDevice}\n      onChange={(deviceId) => {\n        speaker.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"speaker\"\n    >\n      {speakerTestVisible && (\n        <>\n          <hr className=\"str-video__device-settings__separator\" />\n          <SpeakerTest audioUrl={speakerTestAudioUrl} />\n        </>\n      )}\n    </DeviceSelector>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAYO,MAAM,wBAAwB,GAAG,CAAC,EACvC,KAAK,EACL,UAAU,EACV,sBAAsB,GAAG,IAAI,GACC,KAAI;AAClC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;IAEpE,QACEA,GAAA,CAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,gBAAgB,EAAE,cAAc,EAChC,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,OAAO,QAAQ,KAAI;AAC3B,YAAA,MAAM,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC;AACnC,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,sBAAsB,EAAA,QAAA,EAElC,sBAAsB,KACrBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,CAAG,EACxDA,GAAA,CAAC,oBAAoB,EAAA,EAAA,CAAG,CAAA,EAAA,CACvB,CACJ,EAAA,CACc;AAErB;AASO,MAAM,yBAAyB,GAAG,CAAC,EACxC,KAAK,EACL,UAAU,EACV,kBAAkB,GAAG,IAAI,EACzB,mBAAmB,GACY,KAAI;AACnC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/C,IAAA,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,0BAA0B,EAAE,GACpE,eAAe,EAAE;AAEnB,IAAA,IAAI,CAAC,0BAA0B;AAAE,QAAA,OAAO,IAAI;IAE5C,QACEA,IAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,aAAa,EAClB,gBAAgB,EAAE,cAAc,EAChC,QAAQ,EAAE,CAAC,QAAQ,KAAI;AACrB,YAAA,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC1B,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,SAAS,EAAA,QAAA,EAEb,kBAAkB,KACjBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,CAAG,EACxDA,IAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,mBAAmB,EAAA,CAAI,CAAA,EAAA,CAC7C,CACJ,EAAA,CACc;AAErB;;;;"}

package/dist/esm/src/components/DeviceSettings/DeviceSelectorVideo.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { DeviceSelector } from './DeviceSelector.js';
+import { DeviceVideoPreviewItem } from './DeviceVideoPreviewItem.js';
+
+const DeviceSelectorVideo = ({ title, visualType, }) => {
+    const { useCameraState } = useCallStateHooks();
+    const { camera, devices, selectedDevice } = useCameraState();
+    return (jsx(DeviceSelector, { devices: devices || [], type: "videoinput", selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
+            await camera.select(deviceId);
+        }, title: title, visualType: visualType, icon: "camera", PreviewItem: DeviceVideoPreviewItem }));
+};
+
+export { DeviceSelectorVideo };
+//# sourceMappingURL=DeviceSelectorVideo.js.map

package/dist/esm/src/components/DeviceSettings/DeviceSelectorVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelectorVideo.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelectorVideo.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { DeviceSelector } from './DeviceSelector';\nimport { DeviceVideoPreviewItem } from './DeviceVideoPreviewItem';\n\nexport type DeviceSelectorVideoProps = {\n  title?: string;\n  /**\n   * The visual style used to render the device selector.\n   *\n   * Note: `'preview'` is not reliable on mobile browsers. Use `'list'` or\n   * `'dropdown'` on mobile devices.\n   */\n  visualType?: 'list' | 'dropdown' | 'preview';\n};\n\nexport const DeviceSelectorVideo = ({\n  title,\n  visualType,\n}: DeviceSelectorVideoProps) => {\n  const { useCameraState } = useCallStateHooks();\n  const { camera, devices, selectedDevice } = useCameraState();\n\n  return (\n    <DeviceSelector\n      devices={devices || []}\n      type=\"videoinput\"\n      selectedDeviceId={selectedDevice}\n      onChange={async (deviceId) => {\n        await camera.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"camera\"\n      PreviewItem={DeviceVideoPreviewItem}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAgBO,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,EACL,UAAU,GACe,KAAI;AAC7B,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;IAC9C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE;IAE5D,QACEA,GAAA,CAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,IAAI,EAAC,YAAY,EACjB,gBAAgB,EAAE,cAAc,EAChC,QAAQ,EAAE,OAAO,QAAQ,KAAI;AAC3B,YAAA,MAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC/B,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,sBAAsB,EAAA,CACnC;AAEN;;;;"}

package/dist/esm/src/components/DeviceSettings/DeviceSettings.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import { MenuToggle, MenuVisualType } from '../Menu/MenuToggle.js';
+import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from './DeviceSelectorAudio.js';
+import { DeviceSelectorVideo } from './DeviceSelectorVideo.js';
+import '../Button/CompositeButton.js';
+import { IconButton } from '../Button/IconButton.js';
+
+const DeviceSettings = ({ visualType = MenuVisualType.MENU, }) => {
+    return (jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleDeviceSettingsMenuButton, visualType: visualType, children: jsx(Menu, {}) }));
+};
+const Menu = () => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__device-settings", children: [jsx(DeviceSelectorVideo, { title: t('Select a Camera') }), jsx(DeviceSelectorAudioInput, { title: t('Select a Mic') }), jsx(DeviceSelectorAudioOutput, { title: t('Select Speakers') })] }));
+};
+const ToggleDeviceSettingsMenuButton = forwardRef(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
+    const { t } = useI18n();
+    return (jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+            'str-video__device-settings__button--active': menuShown,
+        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
+});
+
+export { DeviceSettings };
+//# sourceMappingURL=DeviceSettings.js.map

package/dist/esm/src/components/DeviceSettings/DeviceSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSettings.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSettings.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\nimport { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';\nimport {\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n} from './DeviceSelectorAudio';\nimport { DeviceSelectorVideo } from './DeviceSelectorVideo';\nimport { IconButton } from '../Button';\n\nexport type DeviceSettingsProps = {\n  visualType?: MenuVisualType;\n};\n\nexport const DeviceSettings = ({\n  visualType = MenuVisualType.MENU,\n}: DeviceSettingsProps) => {\n  return (\n    <MenuToggle\n      placement=\"bottom-end\"\n      ToggleButton={ToggleDeviceSettingsMenuButton}\n      visualType={visualType}\n    >\n      <Menu />\n    </MenuToggle>\n  );\n};\n\nconst Menu = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__device-settings\">\n      <DeviceSelectorVideo title={t('Select a Camera')} />\n      <DeviceSelectorAudioInput title={t('Select a Mic')} />\n      <DeviceSelectorAudioOutput title={t('Select Speakers')} />\n    </div>\n  );\n};\n\nconst ToggleDeviceSettingsMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <IconButton\n      className={clsx('str-video__device-settings__button', {\n        'str-video__device-settings__button--active': menuShown,\n      })}\n      title={t('Toggle device menu')}\n      icon=\"device-settings\"\n      ref={ref}\n    />\n  );\n});\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAeO,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,GAAG,cAAc,CAAC,IAAI,GACZ,KAAI;IACxB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,YAAY,EACtB,YAAY,EAAE,8BAA8B,EAC5C,UAAU,EAAE,UAAU,EAAA,QAAA,EAEtBA,IAAC,IAAI,EAAA,EAAA,CAAG,EAAA,CACG;AAEjB;AAEA,MAAM,IAAI,GAAG,MAAK;AAChB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCD,IAAC,mBAAmB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAI,EACpDA,IAAC,wBAAwB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EAAA,CAAI,EACtDA,IAAC,yBAAyB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAI,CAAA,EAAA,CACtD;AAEV,CAAC;AAED,MAAM,8BAA8B,GAAG,UAAU,CAG/C,SAAS,oCAAoC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,SAAS;AACxD,SAAA,CAAC,EACF,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAC9B,IAAI,EAAC,iBAAiB,EACtB,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CAAC;;;;"}

package/dist/esm/src/components/DeviceSettings/DeviceVideoPreviewItem.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+
+const DeviceVideoPreview = ({ deviceId }) => {
+    const videoRef = useRef(null);
+    useEffect(() => {
+        let cancelled = false;
+        let stream;
+        navigator.mediaDevices
+            .getUserMedia({
+            video: { deviceId: { exact: deviceId } },
+            audio: false,
+        })
+            .then((mediaStream) => {
+            if (cancelled) {
+                mediaStream.getTracks().forEach((t) => t.stop());
+                return;
+            }
+            stream = mediaStream;
+            if (videoRef.current) {
+                videoRef.current.srcObject = mediaStream;
+            }
+        })
+            .catch(console.error);
+        return () => {
+            cancelled = true;
+            stream?.getTracks().forEach((t) => t.stop());
+        };
+    }, [deviceId]);
+    return (jsx("div", { className: "str-video__device-video-preview", children: jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, className: "str-video__device-video-preview__video" }) }));
+};
+const DeviceVideoPreviewItem = ({ device, onSelect, }) => {
+    if (device.deviceId === 'default')
+        return null;
+    return (jsxs("button", { type: "button", className: clsx('str-video__device-preview', {
+            'str-video__device-preview--selected': device.isSelected,
+        }), onClick: () => onSelect(device.deviceId), "aria-pressed": device.isSelected, children: [jsx(DeviceVideoPreview, { deviceId: device.deviceId }), jsx("span", { className: "str-video__device-preview__label", children: device.label })] }));
+};
+
+export { DeviceVideoPreviewItem };
+//# sourceMappingURL=DeviceVideoPreviewItem.js.map

package/dist/esm/src/components/DeviceSettings/DeviceVideoPreviewItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceVideoPreviewItem.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceVideoPreviewItem.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { DeviceListItem } from '../../hooks';\n\nconst DeviceVideoPreview = ({ deviceId }: { deviceId: string }) => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    let stream: MediaStream | undefined;\n\n    navigator.mediaDevices\n      .getUserMedia({\n        video: { deviceId: { exact: deviceId } },\n        audio: false,\n      })\n      .then((mediaStream) => {\n        if (cancelled) {\n          mediaStream.getTracks().forEach((t) => t.stop());\n          return;\n        }\n\n        stream = mediaStream;\n        if (videoRef.current) {\n          videoRef.current.srcObject = mediaStream;\n        }\n      })\n      .catch(console.error);\n\n    return () => {\n      cancelled = true;\n      stream?.getTracks().forEach((t) => t.stop());\n    };\n  }, [deviceId]);\n\n  return (\n    <div className=\"str-video__device-video-preview\">\n      <video\n        ref={videoRef}\n        autoPlay\n        playsInline\n        muted\n        className=\"str-video__device-video-preview__video\"\n      />\n    </div>\n  );\n};\n\nexport type DeviceVideoPreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nexport const DeviceVideoPreviewItem = ({\n  device,\n  onSelect,\n}: DeviceVideoPreviewItemProps) => {\n  if (device.deviceId === 'default') return null;\n\n  return (\n    <button\n      type=\"button\"\n      className={clsx('str-video__device-preview', {\n        'str-video__device-preview--selected': device.isSelected,\n      })}\n      onClick={() => onSelect(device.deviceId)}\n      aria-pressed={device.isSelected}\n    >\n      <DeviceVideoPreview deviceId={device.deviceId} />\n      <span className=\"str-video__device-preview__label\">{device.label}</span>\n    </button>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;AAIA,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AAChE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,KAAK;AACrB,QAAA,IAAI,MAA+B;AAEnC,QAAA,SAAS,CAAC;AACP,aAAA,YAAY,CAAC;YACZ,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;AACxC,YAAA,KAAK,EAAE,KAAK;SACb;AACA,aAAA,IAAI,CAAC,CAAC,WAAW,KAAI;YACpB,IAAI,SAAS,EAAE;AACb,gBAAA,WAAW,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChD;YACF;YAEA,MAAM,GAAG,WAAW;AACpB,YAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,QAAQ,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;YAC1C;AACF,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEvB,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,IAAI;AAChB,YAAA,MAAM,EAAE,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;AAC9C,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,QACEA,aAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAC9CA,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAA,IAAA,EACR,WAAW,EAAA,IAAA,EACX,KAAK,EAAA,IAAA,EACL,SAAS,EAAC,wCAAwC,EAAA,CAClD,EAAA,CACE;AAEV,CAAC;AAOM,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,QAAQ,GACoB,KAAI;AAChC,IAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;IAE9C,QACEC,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,2BAA2B,EAAE;YAC3C,qCAAqC,EAAE,MAAM,CAAC,UAAU;AACzD,SAAA,CAAC,EACF,OAAO,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAA,cAAA,EAC1B,MAAM,CAAC,UAAU,aAE/BD,GAAA,CAAC,kBAAkB,EAAA,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,EACjDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,YAAE,MAAM,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CACjE;AAEb;;;;"}