@stream-io/video-react-sdk 0.4.25 → 0.5.0

package/src/components/CallRecordingList/CallRecordingListHeader.tsx

@@ -1,4 +1,5 @@
 import { CallRecording } from '@stream-io/video-client';
+import { useI18n } from '@stream-io/video-react-bindings';
 import { IconButton } from '../Button';
 
 export type CallRecordingListHeaderProps = {
@@ -12,13 +13,16 @@ export const CallRecordingListHeader = ({
   callRecordings,
   onRefresh,
 }: CallRecordingListHeaderProps) => {
+  const { t } = useI18n();
   return (
     <div className="str-video__call-recording-list__header">
       <div className="str-video__call-recording-list__title">
-        <span>Call Recordings</span>
+        <span>{t('Call Recordings')}</span>
         {callRecordings.length ? <span>({callRecordings.length})</span> : null}
       </div>
-      <IconButton icon="refresh" title="Refresh" onClick={onRefresh} />
+      {onRefresh && (
+        <IconButton icon="refresh" title={t('Refresh')} onClick={onRefresh} />
+      )}
     </div>
   );
 };

package/src/components/CallRecordingList/CallRecordingListItem.tsx

@@ -1,23 +1,31 @@
 import clsx from 'clsx';
-import { ComponentProps, ForwardedRef, forwardRef } from 'react';
 import { CallRecording } from '@stream-io/video-client';
-import { CopyToClipboardButtonWithPopup } from '../Button';
+import { Icon } from '../Icon';
 
 export type CallRecordingListItemProps = {
   /** CallRecording object to represent */
   recording: CallRecording;
 };
+
+const dateFormat = (date: string) => {
+  const format = new Date(date);
+  return format.toTimeString().split(' ')[0];
+};
 export const CallRecordingListItem = ({
   recording,
 }: CallRecordingListItemProps) => {
   return (
-    <div className="str-video__call-recording-list-item">
-      <div className="str-video__call-recording-list-item__info">
-        <div className="str-video__call-recording-list-item__created">
-          {new Date(recording.end_time).toLocaleString()}
-        </div>
+    <li className="str-video__call-recording-list__item">
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__filename">
+        {recording.filename}
+      </div>
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__time">
+        {dateFormat(recording.start_time)}
       </div>
-      <div className="str-video__call-recording-list-item__actions">
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__time">
+        {dateFormat(recording.end_time)}
+      </div>
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__download">
         <a
           className={clsx(
             'str-video__call-recording-list-item__action-button',
@@ -28,40 +36,9 @@ export const CallRecordingListItem = ({
           download={recording.filename}
           title="Download the recording"
         >
-          <span
-            className={clsx(
-              'str-video__call-recording-list-item__action-button-icon',
-              'str-video__download-button--icon',
-            )}
-          />
+          <Icon icon="download" />
         </a>
-        <CopyToClipboardButtonWithPopup
-          Button={CopyUrlButton}
-          copyValue={recording.url}
-        />
       </div>
-    </div>
+    </li>
   );
 };
-const CopyUrlButton = forwardRef(
-  (props: ComponentProps<'button'>, ref: ForwardedRef<HTMLButtonElement>) => {
-    return (
-      <button
-        {...props}
-        className={clsx(
-          'str-video__call-recording-list-item__action-button',
-          'str-video__call-recording-list-item__action-button--copy-link',
-        )}
-        ref={ref}
-        title="Copy the recording link"
-      >
-        <span
-          className={clsx(
-            'str-video__call-recording-list-item__action-button-icon',
-            'str-video__copy-button--icon',
-          )}
-        />
-      </button>
-    );
-  },
-);

package/src/components/CallStats/CallStats.tsx

@@ -1,12 +1,52 @@
-import { useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
 import {
   AggregatedStatsReport,
   CallStatsReport,
 } from '@stream-io/video-client';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+
+import { useFloating, useHover, useInteractions } from '@floating-ui/react';
+
 import { CallStatsLatencyChart } from './CallStatsLatencyChart';
+import { Icon } from '../Icon';
+
+export enum Statuses {
+  GOOD = 'Good',
+  OK = 'Ok',
+  BAD = 'Bad',
+}
+export type Status = Statuses.GOOD | Statuses.OK | Statuses.BAD;
+
+const statsStatus = ({
+  value,
+  lowBound,
+  highBound,
+}: {
+  value: number;
+  lowBound: number;
+  highBound: number;
+}): Status => {
+  if (value <= lowBound) {
+    return Statuses.GOOD;
+  }
+
+  if (value >= lowBound && value <= highBound) {
+    return Statuses.OK;
+  }
+
+  if (value >= highBound) {
+    return Statuses.BAD;
+  }
 
-export const CallStats = () => {
+  return Statuses.GOOD;
+};
+
+export const CallStats = (props: {
+  latencyLowBound?: number;
+  latencyHighBound?: number;
+}) => {
+  const { latencyLowBound = 75, latencyHighBound = 400 } = props;
   const [latencyBuffer, setLatencyBuffer] = useState<
     Array<{ x: number; y: number }>
   >(() => {
@@ -14,6 +54,7 @@ export const CallStats = () => {
     return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
   });
 
+  const { t } = useI18n();
   const [publishBitrate, setPublishBitrate] = useState('-');
   const [subscribeBitrate, setSubscribeBitrate] = useState('-');
   const previousStats = useRef<CallStatsReport>();
@@ -49,27 +90,72 @@ export const CallStats = () => {
     previousStats.current = callStatsReport;
   }, [callStatsReport]);
 
+  const latencyComparison = {
+    lowBound: latencyLowBound,
+    highBound: latencyHighBound,
+    value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
+  };
+
   return (
     <div className="str-video__call-stats">
       {callStatsReport && (
         <>
-          <h3>Call Latency</h3>
-          <CallStatsLatencyChart values={latencyBuffer} />
+          <div className="str-video__call-stats__header">
+            <h3 className="str-video__call-stats__heading">
+              <Icon
+                className="str-video__call-stats__icon"
+                icon="call-latency"
+              />
+              {t('Call Latency')}
+            </h3>
+            <p className="str-video__call-stats__description">
+              {t(
+                'Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.',
+              )}
+            </p>
+          </div>
+
+          <div className="str-video__call-stats__latencychart">
+            <CallStatsLatencyChart values={latencyBuffer} />
+          </div>
+
+          <div className="str-video__call-stats__header">
+            <h3 className="str-video__call-stats__heading">
+              <Icon
+                className="str-video__call-stats__icon"
+                icon="network-quality"
+              />
+              {t('Call performance')}
+            </h3>
+            <p className="str-video__call-stats__description">
+              {t(
+                'Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.',
+              )}
+            </p>
+          </div>
 
-          <h3>Call performance</h3>
           <div className="str-video__call-stats__card-container">
             <StatCard label="Region" value={callStatsReport.datacenter} />
             <StatCard
               label="Latency"
               value={`${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`}
+              comparison={latencyComparison}
             />
             <StatCard
               label="Receive jitter"
               value={`${callStatsReport.subscriberStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...latencyComparison,
+                value: callStatsReport.subscriberStats.averageJitterInMs,
+              }}
             />
             <StatCard
               label="Publish jitter"
               value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...latencyComparison,
+                value: callStatsReport.publisherStats.averageJitterInMs,
+              }}
             />
             <StatCard
               label="Publish resolution"
@@ -96,12 +182,83 @@ export const CallStats = () => {
   );
 };
 
-export const StatCard = (props: { label: string; value: string }) => {
-  const { label, value } = props;
+export const StatCardExplanation = (props: { description: string }) => {
+  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 (
+    <>
+      <div
+        className="str-video__call-explanation"
+        ref={refs.setReference}
+        {...getReferenceProps()}
+      >
+        <Icon className="str-video__call-explanation__icon" icon="info" />
+      </div>
+      {isOpen && (
+        <div
+          className="str-video__call-explanation__description"
+          ref={refs.setFloating}
+          style={floatingStyles}
+          {...getFloatingProps()}
+        >
+          {description}
+        </div>
+      )}
+    </>
+  );
+};
+
+export const StatsTag = ({
+  children,
+  status = Statuses.GOOD,
+}: {
+  children: ReactNode;
+  status: Statuses.GOOD | Statuses.OK | Statuses.BAD;
+}) => {
+  return (
+    <div
+      className={clsx('str-video__call-stats__tag', {
+        'str-video__call-stats__tag--good': status === Statuses.GOOD,
+        'str-video__call-stats__tag--ok': status === Statuses.OK,
+        'str-video__call-stats__tag--bad': status === Statuses.BAD,
+      })}
+    >
+      <div className="str-video__call-stats__tag__text">{children}</div>
+    </div>
+  );
+};
+
+export const StatCard = (props: {
+  label: string;
+  value: string | ReactNode;
+  description?: string;
+  comparison?: { value: number; highBound: number; lowBound: number };
+}) => {
+  const { label, value, description, comparison } = props;
+
+  const { t } = useI18n();
+  const status = comparison ? statsStatus(comparison) : undefined;
+
   return (
     <div className="str-video__call-stats__card">
-      <div className="str-video__call-stats__card_label">{label}</div>
-      <div className="str-video__call-stats__card_value">{value}</div>
+      <div className="str-video__call-stats__card-content">
+        <div className="str-video__call-stats__card-label">
+          {label}
+          {description && <StatCardExplanation description={description} />}
+        </div>
+        <div className="str-video__call-stats__card-value">{value}</div>
+      </div>
+      {comparison && status && <StatsTag status={status}>{t(status)}</StatsTag>}
     </div>
   );
 };

package/src/components/CallStats/CallStatsLatencyChart.tsx

@@ -1,57 +1,86 @@
-import { ResponsiveLine } from '@nivo/line';
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  ChartData,
+  ChartOptions,
+  LinearScale,
+  LineElement,
+  PointElement,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { useMemo } from 'react';
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement);
 
 export const CallStatsLatencyChart = (props: {
   values: Array<{ x: number; y: number }>;
 }) => {
   const { values } = props;
   let max = 0;
-  const data = values.map((point) => {
-    const { y } = point;
-    max = Math.max(max, y);
-    return point;
-  });
-  return (
-    <div className="str-video__call-stats-line-chart-container">
-      <ResponsiveLine
-        colors={{ scheme: 'blues' }}
-        data={[
-          {
-            id: 'Latency',
-            data: data,
-          },
-        ]}
-        animate={false}
-        margin={{ top: 10, right: 5, bottom: 5, left: 30 }}
-        enablePoints
-        enableGridX={false}
-        enableGridY
-        enableSlices="x"
-        isInteractive
-        useMesh={false}
-        xScale={{ type: 'point' }}
-        yScale={{
-          type: 'linear',
+  const data: ChartData<'line'> = {
+    labels: values.map((point) => {
+      const date = new Date(point.x * 1000);
+      return `${date.getHours()}:${date.getMinutes()}`;
+    }),
+    datasets: [
+      {
+        data: values.map((point) => {
+          const { y } = point;
+          max = Math.max(max, y);
+          return point;
+        }),
+        borderColor: '#00e2a1',
+        backgroundColor: '#00e2a1',
+      },
+    ],
+  };
+
+  const options = useMemo<ChartOptions<'line'>>(() => {
+    return {
+      maintainAspectRatio: false,
+      animation: {
+        duration: 0,
+      },
+      elements: {
+        line: {
+          borderWidth: 1,
+        },
+        point: {
+          radius: 2,
+        },
+      },
+      scales: {
+        y: {
+          position: 'right',
+          stacked: true,
           min: 0,
-          max: max < 220 ? 220 : max + 30,
-          nice: true,
-        }}
-        theme={{
-          axis: {
-            ticks: {
-              text: {
-                fill: '#FCFCFD',
-              },
-              line: {
-                stroke: '#FCFCFD',
-              },
-            },
+          max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
+          grid: {
+            display: true,
+            color: '#979ca0',
           },
+          ticks: {
+            stepSize: 30,
+          },
+        },
+        x: {
           grid: {
-            line: {
-              strokeWidth: 0.1,
-            },
+            display: false,
+          },
+          ticks: {
+            display: false,
           },
-        }}
+        },
+      },
+    };
+  }, [max]);
+
+  return (
+    <div className="str-video__call-stats-line-chart-container">
+      <Line
+        options={options}
+        data={data}
+        className="str-video__call-stats__latencychart"
       />
     </div>
   );

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -1,10 +1,12 @@
 import clsx from 'clsx';
-import { ChangeEventHandler } from 'react';
+import { ChangeEventHandler, useCallback } from 'react';
+
+import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';
 
 type DeviceSelectorOptionProps = {
   id: string;
   label: string;
-  name: string;
+  name?: string;
   selected?: boolean;
   value: string;
   disabled?: boolean;
@@ -44,19 +46,23 @@ const DeviceSelectorOption = ({
     </label>
   );
 };
-export const DeviceSelector = (props: {
+
+export type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';
+
+const DeviceSelectorList = (props: {
   devices: MediaDeviceInfo[];
+  type: DeviceSelectorType;
   selectedDeviceId?: string;
-  title: string;
+  title?: string;
   onChange?: (deviceId: string) => void;
 }) => {
   const {
     devices = [],
     selectedDeviceId: selectedDeviceFromProps,
     title,
+    type,
     onChange,
   } = props;
-  const inputGroupName = title.replace(' ', '-').toLowerCase();
 
   // sometimes the browser (Chrome) will report the system-default device
   // with an id of 'default'. In case when it doesn't, we'll select the first
@@ -71,14 +77,16 @@ export const DeviceSelector = (props: {
 
   return (
     <div className="str-video__device-settings__device-kind">
-      <div className="str-video__device-settings__device-selector-title">
-        {title}
-      </div>
+      {title && (
+        <div className="str-video__device-settings__device-selector-title">
+          {title}
+        </div>
+      )}
       {!devices.length ? (
         <DeviceSelectorOption
-          id={`${inputGroupName}--default`}
+          id={`${type}--default`}
           label="Default"
-          name={inputGroupName}
+          name={type}
           defaultChecked
           value="default"
         />
@@ -86,14 +94,14 @@ export const DeviceSelector = (props: {
         devices.map((device) => {
           return (
             <DeviceSelectorOption
-              id={`${inputGroupName}--${device.deviceId}`}
+              id={`${type}--${device.deviceId}`}
               value={device.deviceId}
               label={device.label}
               key={device.deviceId}
               onChange={(e) => {
                 onChange?.(e.target.value);
               }}
-              name={inputGroupName}
+              name={type}
               selected={
                 device.deviceId === selectedDeviceId || devices.length === 1
               }
@@ -104,3 +112,90 @@ export const DeviceSelector = (props: {
     </div>
   );
 };
+
+const DeviceSelectorDropdown = (props: {
+  devices: MediaDeviceInfo[];
+  selectedDeviceId?: string;
+  title?: string;
+  onChange?: (deviceId: string) => void;
+  visualType?: 'list' | 'dropdown';
+  icon: string;
+  placeholder?: string;
+}) => {
+  const {
+    devices = [],
+    selectedDeviceId: selectedDeviceFromProps,
+    title,
+    onChange,
+    icon,
+  } = props;
+
+  // sometimes the browser (Chrome) will report the system-default device
+  // with an id of 'default'. In case when it doesn't, we'll select the first
+  // available device.
+  let selectedDeviceId = selectedDeviceFromProps;
+  if (
+    devices.length > 0 &&
+    !devices.find((d) => d.deviceId === selectedDeviceId)
+  ) {
+    selectedDeviceId = devices[0].deviceId;
+  }
+
+  const selectedIndex = devices.findIndex(
+    (d) => d.deviceId === selectedDeviceId,
+  );
+
+  const handleSelect = useCallback(
+    (index: number) => {
+      onChange?.(devices[index].deviceId);
+    },
+    [devices, onChange],
+  );
+
+  return (
+    <div className="str-video__device-settings__device-kind">
+      <div className="str-video__device-settings__device-selector-title">
+        {title}
+      </div>
+      <DropDownSelect
+        icon={icon}
+        defaultSelectedIndex={selectedIndex}
+        defaultSelectedLabel={devices[selectedIndex]?.label}
+        handleSelect={handleSelect}
+      >
+        {devices.map((device) => {
+          return (
+            <DropDownSelectOption
+              key={device.deviceId}
+              icon={icon}
+              label={device.label}
+              selected={
+                device.deviceId === selectedDeviceId || devices.length === 1
+              }
+            />
+          );
+        })}
+      </DropDownSelect>
+    </div>
+  );
+};
+
+export const DeviceSelector = (props: {
+  devices: MediaDeviceInfo[];
+  icon: string;
+  type: DeviceSelectorType;
+  selectedDeviceId?: string;
+  title?: string;
+  onChange?: (deviceId: string) => void;
+  visualType?: 'list' | 'dropdown';
+  placeholder?: string;
+}) => {
+  const { visualType = 'list', icon, placeholder, ...rest } = props;
+
+  if (visualType === 'list') {
+    return <DeviceSelectorList {...rest} />;
+  }
+  return (
+    <DeviceSelectorDropdown {...rest} icon={icon} placeholder={placeholder} />
+  );
+};