@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Stats/Stats.tsx

@@ -1,243 +0,0 @@
-import React, { Fragment } from 'react';
-import {
-  HMSPeerID,
-  HMSTrackID,
-  HMSTrackStats,
-  RID,
-  selectConnectionQualityByPeerID,
-  selectHMSStats,
-  simulcastMapping,
-  useHMSStatsStore,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { Tooltip } from '../Tooltip';
-import { formatBytes } from './formatBytes';
-import { Stats } from './StyledStats';
-import { useQoE } from './useQoE';
-
-export interface VideoTileStatsProps {
-  videoTrackID?: HMSTrackID;
-  audioTrackID?: HMSTrackID;
-  peerID?: HMSPeerID;
-  isLocal: boolean;
-}
-
-/**
- * This component can be used to overlay webrtc stats over the Video Tile. For the local tracks it also includes
- * remote inbound stats as sent by the SFU in receiver report.
- */
-export function VideoTileStats({ videoTrackID, audioTrackID, peerID, isLocal = false }: VideoTileStatsProps) {
-  const audioSelector = isLocal ? selectHMSStats.localAudioTrackStatsByID : selectHMSStats.trackStatsByID;
-  const audioTrackStats = useHMSStatsStore(audioSelector(audioTrackID));
-  const localVideoTrackStats = useHMSStatsStore(selectHMSStats.localVideoTrackStatsByID(videoTrackID));
-  const remoteVideoTrackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(videoTrackID));
-  const videoTrackStats = isLocal ? localVideoTrackStats?.[0] : remoteVideoTrackStats;
-  const downlinkScore = useHMSStore(selectConnectionQualityByPeerID(peerID))?.downlinkQuality;
-  const availableOutgoingBitrate = useHMSStatsStore(selectHMSStats.availablePublishBitrate);
-  const qoe = useQoE({ videoTrackID, audioTrackID, isLocal });
-
-  // Viewer role - no stats to show
-  if (!(audioTrackStats || videoTrackStats)) {
-    return null;
-  }
-  return (
-    <Stats.Root>
-      <table>
-        <tbody>
-          {isLocal ? (
-            <Fragment>
-              <StatsRow
-                show={isNotNullishAndNot0(availableOutgoingBitrate)}
-                label="AOBR"
-                tooltip="Available Outgoing Bitrate"
-                value={formatBytes(availableOutgoingBitrate, 'b/s')}
-              />
-              {localVideoTrackStats?.map(stat => {
-                if (!stat) {
-                  return null;
-                }
-                const layer = stat.rid ? simulcastMapping[stat.rid as RID] : '';
-                return (
-                  <Fragment key={`${stat.id}${stat.rid}`}>
-                    {layer && <StatsRow label={layer.toUpperCase()} value="" />}
-                    <StatsRow
-                      show={isNotNullishAndNot0(stat.frameWidth)}
-                      label="Width"
-                      value={stat.frameWidth?.toString()}
-                    />
-                    <StatsRow
-                      show={isNotNullishAndNot0(stat.frameHeight)}
-                      label="Height"
-                      value={stat.frameHeight?.toString()}
-                    />
-                    <StatsRow
-                      show={isNotNullishAndNot0(stat.framesPerSecond)}
-                      label="FPS"
-                      value={`${stat.framesPerSecond} ${
-                        isNotNullishAndNot0(stat.framesDropped) ? `(${stat.framesDropped} dropped)` : ''
-                      }`}
-                    />
-                    <StatsRow
-                      show={isNotNullish(stat.bitrate)}
-                      label="Bitrate(V)"
-                      value={formatBytes(stat.bitrate, 'b/s')}
-                    />
-                    <Stats.Gap />
-                  </Fragment>
-                );
-              })}
-            </Fragment>
-          ) : (
-            <Fragment>
-              <StatsRow show={isNotNullish(qoe)} label="QoE" value={qoe} />
-              <StatsRow
-                show={isNotNullishAndNot0(videoTrackStats?.frameWidth)}
-                label="Width"
-                value={videoTrackStats?.frameWidth?.toString()}
-              />
-              <StatsRow
-                show={isNotNullishAndNot0(videoTrackStats?.frameHeight)}
-                label="Height"
-                value={videoTrackStats?.frameHeight?.toString()}
-              />
-              <StatsRow
-                show={isNotNullishAndNot0(videoTrackStats?.framesPerSecond)}
-                label="FPS"
-                value={`${videoTrackStats?.framesPerSecond} ${
-                  isNotNullishAndNot0(videoTrackStats?.framesDropped)
-                    ? `(${videoTrackStats?.framesDropped} dropped)`
-                    : ''
-                }`}
-              />
-              <StatsRow
-                show={isNotNullish(videoTrackStats?.totalPausesDuration)}
-                label="Pauses Duration"
-                value={videoTrackStats?.totalPausesDuration}
-              />
-              <StatsRow
-                show={isNotNullish(videoTrackStats?.totalFreezesDuration)}
-                label="Freezes Duration"
-                value={videoTrackStats?.totalFreezesDuration}
-              />
-              <StatsRow
-                show={isNotNullish(videoTrackStats?.bitrate)}
-                label="Bitrate(V)"
-                value={formatBytes(videoTrackStats?.bitrate, 'b/s')}
-              />
-            </Fragment>
-          )}
-
-          <StatsRow
-            show={isNotNullish(audioTrackStats?.bitrate)}
-            label="Bitrate(A)"
-            value={formatBytes(audioTrackStats?.bitrate, 'b/s')}
-          />
-
-          <StatsRow show={isNotNullish(downlinkScore)} label="CQS" value={downlinkScore} />
-
-          <StatsRow show={isNotNullish(videoTrackStats?.codec)} label="Codec(V)" value={videoTrackStats?.codec} />
-
-          <StatsRow show={isNotNullish(audioTrackStats?.codec)} label="Codec(A)" value={audioTrackStats?.codec} />
-
-          <PacketLostAndJitter audioTrackStats={audioTrackStats} videoTrackStats={videoTrackStats} />
-        </tbody>
-      </table>
-    </Stats.Root>
-  );
-}
-
-const PacketLostAndJitter = ({
-  audioTrackStats,
-  videoTrackStats,
-}: {
-  audioTrackStats?: HMSTrackStats;
-  videoTrackStats?: HMSTrackStats;
-}) => {
-  // for local peer, we'll use the remote inbound stats to get packet loss and jitter, to know whether the track is
-  // local we check if the stats type has outbound in it as it's being published from local. Both audio and video
-  // tracks are checked in case the user has permission to publish only one of them.
-  const isLocalPeer = audioTrackStats?.type.includes('outbound') || videoTrackStats?.type.includes('outbound');
-  const audioStats = isLocalPeer ? audioTrackStats?.remote : audioTrackStats;
-  const videoStats = isLocalPeer ? videoTrackStats?.remote : videoTrackStats;
-
-  return (
-    <>
-      <TrackPacketsLostRow label="Packet Loss(V)" stats={videoStats} />
-      <TrackPacketsLostRow label="Packet Loss(A)" stats={audioStats} />
-      <StatsRow
-        show={isNotNullish(videoStats?.jitter)}
-        label="Jitter(V)"
-        value={`${((videoStats?.jitter ?? 0) * 1000).toFixed(2)} ms`}
-      />
-      <StatsRow
-        show={isNotNullish(audioStats?.jitter)}
-        label="Jitter(A)"
-        value={`${((audioStats?.jitter ?? 0) * 1000).toFixed(2)} ms`}
-      />
-    </>
-  );
-};
-
-const TrackPacketsLostRow = ({
-  stats,
-  label,
-}: {
-  stats?: Pick<HMSTrackStats, 'packetsLost' | 'packetsLostRate'>;
-  label: string;
-}) => {
-  const packetsLostRate = `${stats?.packetsLostRate ? stats.packetsLostRate.toFixed(2) : 0}/s`;
-
-  return (
-    <StatsRow
-      show={isNotNullishAndNot0(stats?.packetsLost)}
-      label={label}
-      value={`${stats?.packetsLost}(${packetsLostRate})`}
-    />
-  );
-};
-
-const RawStatsRow = ({
-  label = '',
-  value = '',
-  tooltip = '',
-  show = true,
-}: {
-  label: string;
-  value?: string | number;
-  show?: boolean;
-  tooltip?: string;
-}) => {
-  const statsLabel = <Stats.Label>{label}</Stats.Label>;
-
-  return (
-    <>
-      {show ? (
-        <Stats.Row>
-          {tooltip ? (
-            <Tooltip side="top" title={tooltip}>
-              {statsLabel}
-            </Tooltip>
-          ) : (
-            statsLabel
-          )}
-          {value === '' ? <Stats.Value /> : <Stats.Value>{value}</Stats.Value>}
-        </Stats.Row>
-      ) : null}
-    </>
-  );
-};
-
-// memoize so only the rows which change rerender
-const StatsRow = React.memo(RawStatsRow);
-
-export function isNotNullishAndNot0(value: number | undefined | null) {
-  return isNotNullish(value) && value !== 0;
-}
-
-/**
- * Check only for presence(not truthy) of a value.
- * Use in places where 0, false need to be considered valid.
- */
-export function isNotNullish(value: number | string | undefined | null) {
-  return value !== undefined && value !== null;
-}

package/src/Stats/StyledStats.tsx

@@ -1,57 +0,0 @@
-import { styled } from '../Theme';
-
-export const Root = styled('div', {
-  backgroundColor: 'rgba(0,0,0,0.75)',
-  position: 'absolute',
-  top: '$3',
-  left: '$3',
-  zIndex: 7,
-  borderRadius: '$2',
-  padding: '$2',
-  fontSize: '$xs',
-  overflowY: 'auto',
-  maxHeight: '75%',
-  maxWidth: '85%',
-});
-
-export const Table = styled('table', {});
-
-export const Row = styled('tr', {
-  width: '100%',
-  '& > * + *': {
-    px: '$4',
-  },
-  whiteSpace: 'nowrap',
-  textAlign: 'left',
-});
-
-export const Label = styled('td', {
-  color: '$on_primary_high',
-  fontWeight: '$regular',
-});
-
-export const Value = styled('td', {
-  color: '$on_primary_high',
-});
-
-export const Gap = styled('tr', {
-  height: '$4',
-});
-
-interface StatsType {
-  Root: typeof Root;
-  Row: typeof Row;
-  Label: typeof Label;
-  Value: typeof Value;
-  Table: typeof Table;
-  Gap: typeof Gap;
-}
-
-export const Stats: StatsType = {
-  Root,
-  Row,
-  Label,
-  Value,
-  Table,
-  Gap,
-};

package/src/Stats/formatBytes.ts

@@ -1,19 +0,0 @@
-export const formatBytes = (bytes?: number, unit = 'B', decimals = 2) => {
-  if (bytes === 0) {
-    return `0 ${unit}`;
-  }
-  if (!bytes) {
-    return '-';
-  }
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'].map(size => size + unit);
-
-  let i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  // B to KB
-  i === 0 && i++;
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-};

package/src/Stats/index.tsx

@@ -1,2 +0,0 @@
-export { VideoTileStats } from './Stats';
-export { formatBytes } from './formatBytes';

package/src/Stats/useQoE.ts

@@ -1,79 +0,0 @@
-import { useRef } from 'react';
-import { usePrevious } from 'react-use';
-import { HMSTrackID, selectHMSStats, useHMSStatsStore } from '@100mslive/react-sdk';
-
-interface UseQoEProps {
-  videoTrackID?: HMSTrackID;
-  audioTrackID?: HMSTrackID;
-  isLocal?: boolean;
-}
-
-const EXPECTED_RESOLUTION = 1280 * 720;
-
-const clip = (value: number, min_value: number, max_value: number) => {
-  return Math.max(Math.min(value, max_value), min_value);
-};
-
-/**
- * calculate QoE using 5 params:
- * p1:freeze_duration_norm
- * p2:resolution_norm
- * p3:fps_norm
- * p4:delay_norm
- * p5:audio_concealed_norm
- * the formula is 5*(p1)^3 * (p2)^0.3 * (p3)^0.5 * (p4)^1 * (p5)*2
- *
- * https://github.com/100mslive/webrtc-benchmark/blob/daily/sssd.py#L112
- */
-export const useQoE = ({ videoTrackID, audioTrackID, isLocal = false }: UseQoEProps) => {
-  const audioTrackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(audioTrackID));
-  const videoTrackStats = useHMSStatsStore(selectHMSStats.trackStatsByID(videoTrackID));
-  const prevVideoTrackStats = usePrevious(videoTrackStats);
-  const prevAudioTrackStats = usePrevious(audioTrackStats);
-
-  const prevJitterBufferDelayMs = useRef<number>(0);
-
-  if (isLocal || (videoTrackID && !videoTrackStats) || (audioTrackID && !audioTrackStats)) {
-    return;
-  }
-
-  const resolutionNorm =
-    ((videoTrackStats?.frameWidth || 0) * (videoTrackStats?.frameHeight || 0)) / EXPECTED_RESOLUTION;
-
-  const framesDecodedInLastSec =
-    videoTrackStats?.framesDecoded && prevVideoTrackStats?.framesDecoded
-      ? videoTrackStats.framesDecoded - prevVideoTrackStats.framesDecoded
-      : 0;
-  let freezeDurationNorm =
-    1 - ((videoTrackStats?.totalFreezesDuration || 0) - (prevVideoTrackStats?.totalFreezesDuration || 0));
-  freezeDurationNorm = freezeDurationNorm < 0 ? 0.5 : freezeDurationNorm;
-  freezeDurationNorm = framesDecodedInLastSec === 0 ? 0 : freezeDurationNorm;
-
-  const fpsNorm = framesDecodedInLastSec / 30;
-
-  const prevJBDelay = prevVideoTrackStats?.jitterBufferDelay || 0;
-  const prevJBEmittedCount = prevVideoTrackStats?.jitterBufferEmittedCount || 0;
-  const currentJBDelay = (videoTrackStats?.jitterBufferDelay || 0) - prevJBDelay;
-  const currentJBEmittedCount = (videoTrackStats?.jitterBufferEmittedCount || 0) - prevJBEmittedCount;
-
-  const jitterBufferDelayMs =
-    currentJBEmittedCount > 0 ? (currentJBDelay * 1000) / currentJBEmittedCount : prevJitterBufferDelayMs.current;
-  prevJitterBufferDelayMs.current = jitterBufferDelayMs;
-  const delayNorm = 1 - Math.min(1, jitterBufferDelayMs / 2000);
-
-  const prevConcealedSamples =
-    (prevAudioTrackStats?.concealedSamples || 0) - (prevAudioTrackStats?.silentConcealedSamples || 0);
-  const currentConcealedSamples =
-    (audioTrackStats?.concealedSamples || 0) - (audioTrackStats?.silentConcealedSamples || 0) - prevConcealedSamples;
-
-  const audioConcealedNorm = 1 - currentConcealedSamples / 48000;
-
-  return (
-    5 *
-    clip(freezeDurationNorm, 0, 1) ** 3 *
-    clip(resolutionNorm, 0, 1) ** 0.3 *
-    clip(fpsNorm, 0, 1) ** 0.2 *
-    clip(delayNorm, 0, 1) ** 0.5 *
-    clip(audioConcealedNorm, 0, 1) ** 2
-  ).toFixed(2);
-};

package/src/Switch/Switch.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import * as BaseSwitch from '@radix-ui/react-switch';
-import { styled } from '../Theme';
-
-const SwitchRoot = styled(BaseSwitch.Root, {
-  all: 'unset',
-  width: '30px',
-  height: '14px',
-  border: 'solid $space$px $secondary_default',
-  borderRadius: '$3',
-  p: '$2',
-  position: 'relative',
-  cursor: 'pointer',
-  '&[data-state="checked"]': {
-    backgroundColor: '$primary_default',
-    border: 'solid $space$px $primary_default',
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-});
-
-const SwitchThumb = styled(BaseSwitch.Thumb, {
-  display: 'block',
-  top: '3px',
-  position: 'absolute',
-  width: '$md',
-  height: '$md',
-  backgroundColor: '$secondary_default',
-  borderRadius: '$round',
-  transition: 'right 500ms ease-in',
-  left: '$2',
-  '&[data-state="checked"]': {
-    left: 'unset',
-    right: '$2',
-    backgroundColor: '$on_primary_high',
-  },
-});
-
-type SwitchProps = React.ComponentProps<typeof SwitchRoot>;
-
-export const Switch: React.FC<SwitchProps> = props => (
-  <SwitchRoot {...props}>
-    <SwitchThumb />
-  </SwitchRoot>
-);
-
-Switch.displayName = 'Switch';

package/src/Switch/index.ts

@@ -1 +0,0 @@
-export { Switch } from './Switch';

package/src/Tabs/Tabs.tsx

@@ -1,41 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { styled } from '../Theme';
-
-const StyledTabsRoot = styled(TabsPrimitive.Root, {
-  display: 'flex',
-});
-
-const StyledList = styled(TabsPrimitive.List, {
-  flexShrink: 0,
-  display: 'flex',
-});
-
-const StyledTrigger = styled(TabsPrimitive.Trigger, {
-  all: 'unset',
-  fontFamily: '$sans',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  fontSize: '$sm',
-  lineHeight: '$sm',
-  color: '$on_surface_high',
-  userSelect: 'none',
-  cursor: 'pointer',
-  '&[data-state="active"]': {
-    bg: '$surface_brighter',
-    r: '$1',
-  },
-});
-
-const StyledContent = styled(TabsPrimitive.Content, {
-  flex: '1 1 0',
-  padding: '$10',
-  outline: 'none',
-});
-
-export const Tabs = {
-  Root: StyledTabsRoot,
-  List: StyledList,
-  Content: StyledContent,
-  Trigger: StyledTrigger,
-};

package/src/Tabs/index.tsx

@@ -1 +0,0 @@
-export * from './Tabs';

package/src/Text/Text.tsx

@@ -1,149 +0,0 @@
-import { styled } from '../Theme';
-
-export const textVariants = {
-  h1: {
-    fontWeight: '$semiBold',
-    letterSpacing: '-1.5px',
-    fontSize: '$h1',
-    lineHeight: '$h1',
-    '@md': {
-      fontSize: '4.5rem',
-      lineHeight: '4.75rem',
-    },
-  },
-  h2: {
-    fontSize: '$h2',
-    lineHeight: '$h2',
-    fontWeight: '$semiBold',
-    letterSpacing: '-0.5px',
-    '@md': {
-      fontSize: '3rem',
-      lineHeight: '3.25rem',
-    },
-  },
-  h3: {
-    fontSize: '$h3',
-    lineHeight: '$h3',
-    fontWeight: '$semiBold',
-    '@md': {
-      fontSize: '2.5rem',
-      lineHeight: '2.75rem',
-    },
-  },
-  h4: {
-    fontSize: '$h4',
-    lineHeight: '$h4',
-    fontWeight: '$semiBold',
-    letterSpacing: '0.25px',
-    '@md': {
-      fontSize: '1.75rem',
-      lineHeight: '2rem',
-    },
-  },
-  h5: {
-    fontSize: '$h5',
-    lineHeight: '$h5',
-    fontWeight: '$semiBold',
-    '@md': {
-      fontSize: '1.5rem',
-      lineHeight: '1.75rem',
-    },
-  },
-  h6: {
-    fontSize: '$h6',
-    lineHeight: '$h6',
-    fontWeight: '$semiBold',
-    letterSpacing: '0.15px',
-    '@md': {
-      fontSize: '1.25rem',
-      lineHeight: '1.5rem',
-    },
-  },
-  sub1: {
-    fontSize: '$md',
-    lineHeight: '$h5',
-    fontWeight: '$medium',
-    letterSpacing: '0.15px',
-  },
-  sub2: {
-    fontSize: '$sm',
-    lineHeight: '$sm',
-    fontWeight: '$medium',
-    letterSpacing: '0.1px',
-  },
-  body1: {
-    fontSize: '$md',
-    lineHeight: '$h6',
-    fontWeight: '$medium',
-    letterSpacing: '0.1px',
-  },
-  body2: {
-    fontSize: '0.875rem',
-    lineHeight: '1.25rem',
-    fontWeight: '$medium',
-    letterSpacing: '0.25px',
-  },
-  button: {
-    fontSize: '1rem',
-    lineHeight: '1.5rem',
-    fontWeight: '$semiBold',
-    letterSpacing: '0.5px',
-  },
-  caption: {
-    fontSize: '0.75rem',
-    lineHeight: '1rem',
-    letterSpacing: '0.4px',
-    fontWeight: '$regular',
-  },
-  overline: {
-    fontSize: '0.625rem',
-    lineHeight: '1rem',
-    letterSpacing: '1.5px',
-    fontWeight: '$medium',
-  },
-  tiny: {
-    fontSize: '$tiny',
-    lineHeight: '$tiny',
-  },
-  xs: {
-    fontSize: '$xs',
-    lineHeight: '$xs',
-  },
-  sm: {
-    fontSize: '$sm',
-    lineHeight: '$sm',
-  },
-  md: {
-    fontSize: '$md',
-    lineHeight: '$md',
-  },
-  lg: {
-    fontSize: '$lg',
-    lineHeight: '$md',
-    fontWeight: '$semiBold',
-    letterSpacing: '0.15px',
-  },
-};
-
-export const Text = styled('p', {
-  fontFamily: '$sans',
-  fontWeight: '$regular',
-  margin: 0,
-  color: '$on_surface_high',
-  variants: {
-    variant: textVariants,
-    color: {
-      white: {
-        color: '$on_surface_high',
-      },
-    },
-    inline: {
-      true: {
-        display: 'inline',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'md',
-  },
-});

package/src/Text/index.tsx

@@ -1 +0,0 @@
-export { Text } from './Text';

package/src/TextArea/TextArea.tsx

@@ -1,30 +0,0 @@
-import { styled } from '../Theme';
-
-export const TextArea = styled('textarea', {
-  fontFamily: '$sans',
-  lineHeight: 'inherit',
-  backgroundColor: '$surface_default',
-  borderRadius: '8px',
-  outline: 'none',
-  border: '1px solid $border_default',
-  padding: '0.5rem 0.75rem',
-  minHeight: '30px',
-  color: '$on_surface_high',
-  fontSize: '$md',
-  '&:focus': {
-    boxShadow: '0 0 0 1px $colors$primary_default',
-    border: '1px solid transparent',
-  },
-  '&::placeholder': {
-    color: '$on_surface_medium',
-  },
-  variants: {
-    error: {
-      true: {
-        '&:focus': {
-          boxShadow: '0 0 0 3px $colors$alert_error_default',
-        },
-      },
-    },
-  },
-});

package/src/TextArea/index.tsx

@@ -1 +0,0 @@
-export { TextArea } from './TextArea';