@100mslive/roomkit-react 0.1.0

package/src/ReactSelect/ReactSelect.tsx

@@ -0,0 +1,97 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { styled } from '../Theme';
+
+const StyledRoot = styled(SelectPrimitive.Root, {});
+
+const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
+  all: 'unset',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '$2',
+  padding: '$8',
+  lineHeight: '$px',
+  gap: '$8',
+  backgroundColor: '$secondaryDefault',
+  color: '$white',
+  fontSize: '$8',
+  cursor: 'pointer',
+  r: '$1',
+});
+
+const StyledContent = styled(SelectPrimitive.Content, {
+  overflow: 'hidden',
+  backgroundColor: '$surfaceLight',
+  r: '$1',
+  h: '$80',
+});
+
+const StyledViewport = styled(SelectPrimitive.Viewport, {
+  padding: '$3',
+});
+
+const StyledItem = styled(SelectPrimitive.Item, {
+  all: 'unset',
+  fontSize: '$7',
+  r: '$1',
+  display: 'flex',
+  p: '$4 $8',
+  w: '$52',
+  position: 'relative',
+  userSelect: 'none',
+  cursor: 'pointer',
+});
+
+const StyledLabel = styled(SelectPrimitive.Label, {
+  p: '$4 $8',
+  lineHeight: '$10',
+  color: '$white',
+});
+
+const StyledSeparator = styled(SelectPrimitive.Separator, {
+  height: '$px',
+  backgroundColor: '$white',
+  margin: '$4',
+  opacity: 0.4,
+});
+
+const StyledItemIndicator = styled(SelectPrimitive.ItemIndicator, {
+  position: 'absolute',
+  right: '$8',
+  width: '$8',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$white',
+});
+
+const scrollButtonStyles = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  p: '$4',
+  backgroundColor: '$surfaceLight',
+  color: '$white',
+  cursor: 'default',
+};
+
+const StyledScrollUpButton = styled(SelectPrimitive.ScrollUpButton, scrollButtonStyles);
+
+const StyledScrollDownButton = styled(SelectPrimitive.ScrollDownButton, scrollButtonStyles);
+
+export const Select = {
+  Root: StyledRoot,
+  Trigger: StyledTrigger,
+  Content: StyledContent,
+  Viewport: StyledViewport,
+  Item: StyledItem,
+  Label: StyledLabel,
+  Separator: StyledSeparator,
+  ItemIndicator: StyledItemIndicator,
+  ScrollUpButton: StyledScrollUpButton,
+  ScrollDownButton: StyledScrollDownButton,
+  Value: SelectPrimitive.Value,
+  Icon: SelectPrimitive.Icon,
+  ItemText: SelectPrimitive.ItemText,
+  Group: SelectPrimitive.Group,
+};

package/src/ReactSelect/index.ts

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

package/src/Select/Select.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Select } from './Select';
+
+export default {
+  title: 'UI Components/Select',
+  component: Select.Root,
+} as ComponentMeta<typeof Select.Root>;
+
+const Template: ComponentStory<typeof Select.Root> = () => {
+  return (
+    <Select.Root css={{ width: '70%' }}>
+      <Select.DefaultDownIcon />
+      <Select.Select css={{ width: '100%' }}>
+        <option value="orange" key="orange">
+          Orange
+        </option>
+        <option value="orange" key="apple">
+          Apple
+        </option>
+        <option value="orange" key="banana">
+          Banana
+        </option>
+        <option value="orange" key="grapes">
+          Grapes
+        </option>
+      </Select.Select>
+    </Select.Root>
+  );
+};
+
+export const Single = Template.bind({});
+Single.storyName = 'Select';

package/src/Select/Select.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ChevronDownIcon } from '@100mslive/react-icons';
+import { styled } from '../Theme';
+
+const Root = styled('div', {
+  color: '$textPrimary',
+  display: 'inline-flex',
+  position: 'relative',
+  outline: 'none',
+  overflow: 'hidden',
+  borderRadius: '$1',
+  backgroundColor: '$menuBg',
+  maxWidth: '100%',
+});
+
+// TODO: replace these with tokens
+const SelectRoot = styled('select', {
+  h: '$16',
+  fontSize: '$md',
+  fontWeight: '500',
+  lineHeight: 'inherit',
+  textTransform: 'none',
+  appearance: 'none',
+  color: '$textAccentHigh',
+  padding: '5px',
+  paddingLeft: '12px',
+  paddingRight: '30px',
+  border: 'none',
+  borderRadius: '8px',
+  backgroundColor: '$secondaryDefault',
+  '&:not([disabled]):focus-visible': {
+    boxShadow: '0 0 0 3px $colors$brandDefault',
+  },
+  '&[disabled]': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+});
+
+const Arrow = styled('span', {
+  color: '$textAccentMedium',
+  width: '30px',
+  height: '100%',
+  position: 'absolute',
+  right: 0,
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  transition: 'border .2s ease 0s',
+});
+
+const DefaultDownIcon = ({ ...props }) => (
+  <Arrow {...props}>
+    <ChevronDownIcon />
+  </Arrow>
+);
+
+export const Select = {
+  Root,
+  DownIcon: Arrow,
+  DefaultDownIcon,
+  Select: SelectRoot,
+};

package/src/Select/index.ts

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

package/src/Slider/Slider.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Box } from '..';
+import { Slider } from './Slider';
+
+export default {
+  title: 'UI Components/Slider',
+  component: Slider,
+} as ComponentMeta<typeof Slider>;
+
+const Template: ComponentStory<typeof Slider> = () => {
+  const [volume, setVolume] = React.useState<number>(25);
+  return (
+    <Box css={{ width: '$80' }}>
+      <Slider defaultValue={[25]} step={1} value={[volume]} onValueChange={e => setVolume(e[0])} />
+    </Box>
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.storyName = 'Slider';

package/src/Slider/Slider.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import * as BaseSlider from '@radix-ui/react-slider';
+import { CSS } from '@stitches/react';
+import { styled } from '../Theme';
+import { Tooltip } from '../Tooltip';
+
+const Root = styled(BaseSlider.Root, {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  userSelect: 'none',
+  touchAction: 'none',
+  width: '100%',
+  '&[data-orientation="horizontal"]': {
+    height: 20,
+  },
+});
+
+const Track = styled(BaseSlider.Track, {
+  backgroundColor: '$secondaryGray',
+  position: 'relative',
+  flexGrow: 1,
+  borderRadius: '$round',
+  cursor: 'pointer',
+  '&[data-orientation="horizontal"]': { height: 3 },
+});
+
+const Range = styled(BaseSlider.Range, {
+  position: 'absolute',
+  backgroundColor: '$primaryDefault',
+  borderRadius: '$round',
+  height: '100%',
+});
+
+const Thumb = styled(BaseSlider.Thumb, {
+  all: 'unset',
+  display: 'block',
+  width: '$8',
+  height: '$8',
+  backgroundColor: '$primaryDefault',
+  cursor: 'pointer',
+  boxShadow: `0 2px 10px $colors$grayDefault`,
+  borderRadius: 10,
+  '&:hover': { backgroundColor: '$primaryDefault' },
+  '&:focus': { boxShadow: 'none' },
+});
+
+type SliderProps = React.ComponentProps<typeof Root> & {
+  thumbStyles?: CSS;
+  showTooltip?: boolean;
+};
+
+export const Slider: React.FC<SliderProps & { showTooltip?: boolean }> = ({
+  showTooltip = true,
+  thumbStyles,
+  ...props
+}) => (
+  <Root {...props}>
+    <Track>
+      <Range />
+    </Track>
+    {showTooltip ? (
+      <Tooltip title={String(props.value?.[0])}>
+        <Thumb css={thumbStyles} />
+      </Tooltip>
+    ) : (
+      <Thumb css={thumbStyles} />
+    )}
+  </Root>
+);

package/src/Slider/index.ts

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

package/src/Stats/Stats.tsx

@@ -0,0 +1,211 @@
+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';
+
+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);
+
+  // 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>
+                    {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={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?.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="Downlink" 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?.toFixed(4)} />
+      <StatsRow show={isNotNullish(audioStats?.jitter)} label="Jitter(A)" value={audioStats?.jitter?.toFixed(4)} />
+    </>
+  );
+};
+
+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 }) => {
+  const statsLabel = <Stats.Label css={{ fontWeight: !value ? '$semiBold' : '$regular' }}>{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

@@ -0,0 +1,57 @@
+import { styled } from '../Theme';
+
+export const Root = styled('div', {
+  backgroundColor: '$statsBg',
+  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: '$textPrimary',
+  fontWeight: '$regular',
+});
+
+export const Value = styled('td', {
+  color: '$textPrimary',
+});
+
+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

@@ -0,0 +1,19 @@
+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

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

package/src/Switch/Switch.mdx

@@ -0,0 +1,11 @@
+import { Story } from '@storybook/addon-docs';
+
+## Switch
+
+Switch is the primary component. It has 2 possible states i.e. on and off. It accepts states as checked prop and event listener of onCheckedChange.
+
+- [Index](#index)
+
+### Index
+
+<Story id="Switch--index" />

package/src/Switch/Switch.stories.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Flex } from '../Layout';
+import { Switch } from './Switch';
+import SwitchDocs from './Switch.mdx';
+
+export default {
+  title: 'UI Components/Switch',
+  component: Switch,
+  argTypes: {
+    asChild: { control: false },
+  },
+  args: {
+    disabled: false,
+    checked: true,
+    required: false,
+  },
+  parameters: {
+    docs: {
+      page: SwitchDocs,
+    },
+  },
+} as ComponentMeta<typeof Switch>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Switch> = ({ checked: initialChecked, ...args }) => {
+  const [checked, onCheckedChange] = React.useState(false);
+  useEffect(() => {
+    onCheckedChange(!!initialChecked);
+  }, [initialChecked]);
+  return (
+    <Flex align="center" justify="center" css={{ w: '$20', h: '$20' }}>
+      <Switch checked={checked} {...args} onCheckedChange={onCheckedChange} />
+    </Flex>
+  );
+};
+
+export const Playground = Template.bind({});
+
+Playground.storyName = 'Switch';
+Playground.args = {
+  checked: false,
+  onCheckedChange: () => {
+    return;
+  },
+};