@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

package/src/Sheet/Sheet.stories.tsx

@@ -1,103 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, InfoIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { HorizontalDivider } from '../Divider';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { Sheet } from './Sheet';
-import SheetDocs from './Sheet.mdx';
-
-export default {
-  title: 'UI Components/Sheet',
-  component: Sheet.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  parameters: {
-    docs: {
-      page: SheetDocs,
-    },
-  },
-} as ComponentMeta<typeof Sheet.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Sheet.Root> = () => (
-  <Sheet.Root>
-    <Sheet.Trigger asChild>
-      <Button variant="standard">Open Sheet</Button>
-    </Sheet.Trigger>
-    <Sheet.Content>
-      <Sheet.Title css={{ p: '$10' }}>
-        <Flex direction="row" justify="between" css={{ w: '100%' }}>
-          <Flex justify="start" align="center" gap="3">
-            <InfoIcon />
-            <Text variant="h5">Sheet Heading</Text>
-          </Flex>
-          <Sheet.Close css={{ color: 'white' }}>
-            <CrossIcon />
-          </Sheet.Close>
-        </Flex>
-      </Sheet.Title>
-      <HorizontalDivider />
-      <Box as="div" css={{ p: '$10', overflowY: 'scroll', maxHeight: '70vh' }}>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-        <Text variant="body1" css={{ c: '$on_surface_medium' }}>
-          Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua. Ut enim ad minim veniam,im venitetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua. Ut enim ad minim veniam,im veni
-        </Text>
-        <Fieldset>
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" defaultValue="Amar" css={{ w: '50%' }} />
-        </Fieldset>
-        <Fieldset>
-          <Label htmlFor="username">Username</Label>
-          <Input id="username" defaultValue="@amar1995" css={{ w: '50%' }} />
-        </Fieldset>
-      </Box>
-    </Sheet.Content>
-  </Sheet.Root>
-);
-
-export const Example = Template.bind({});
-Example.storyName = 'Sheet';

package/src/Sheet/Sheet.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { CSS, VariantProps } from '@stitches/react';
-import { Dialog } from '../Modal';
-import { styled } from '../Theme';
-import { sheetFadeIn, sheetFadeOut, sheetSlideIn, sheetSlideOut } from '../utils';
-
-const SheetRoot = styled(DialogPrimitive.Root, {
-  minHeight: '240px',
-  maxWidth: '100%',
-});
-const SheetTrigger = styled(DialogPrimitive.Trigger, {
-  appearance: 'none !important', // Needed for safari it shows white overlay
-});
-
-const StyledOverlay = styled(Dialog.Overlay, {
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-
-  '&[data-state="open"]': {
-    animation: `${sheetFadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-
-  '&[data-state="closed"]': {
-    animation: `${sheetFadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-  },
-});
-
-const StyledContent = styled(DialogPrimitive.Content, {
-  color: '$on_surface_medium',
-  backgroundColor: '$surface_default',
-  borderTopLeftRadius: '$3',
-  borderTopRightRadius: '$3',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  position: 'fixed',
-  zIndex: 22,
-  top: 0,
-  right: 0,
-  left: 0,
-  bottom: 0,
-  maxHeight: '96%',
-
-  // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
-  // Affects animated and non-animated dialogs alike.
-  willChange: 'transform',
-
-  '&:focus': {
-    outline: 'none',
-  },
-  '@allowMotion': {
-    '&[data-state="open"]': {
-      animation: `${sheetSlideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-    },
-
-    '&[data-state="closed"]': {
-      animation: `${sheetSlideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
-    },
-  },
-  '@ls': {
-    maxWidth: '50%',
-    margin: '0 auto',
-  },
-
-  variants: {
-    side: {
-      top: {
-        $$transformValue: 'translate3d(0,-100%,0)',
-        bottom: 'auto',
-      },
-      right: {
-        $$transformValue: 'translate3d(100%,0,0)',
-        right: 0,
-      },
-      bottom: {
-        $$transformValue: 'translate3d(0,100%,0)',
-        bottom: 0,
-        top: 'auto',
-      },
-      left: {
-        $$transformValue: 'translate3d(-100%,0,0)',
-        left: 0,
-      },
-    },
-  },
-
-  defaultVariants: {
-    side: 'bottom',
-  },
-});
-
-type SheetContentVariants = VariantProps<typeof StyledContent>;
-type DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;
-type SheetContentProps = DialogContentPrimitiveProps & SheetContentVariants & { css?: CSS; container?: HTMLElement };
-
-const SheetContent = React.forwardRef<React.ElementRef<typeof StyledContent>, SheetContentProps>(
-  ({ children, container, ...props }, forwardedRef) => (
-    <Dialog.Portal container={container}>
-      <StyledOverlay />
-      <StyledContent {...props} ref={forwardedRef}>
-        {children}
-      </StyledContent>
-    </Dialog.Portal>
-  ),
-);
-const SheetClose = Dialog.Close;
-const SheetTitle = styled(DialogPrimitive.Title, {
-  margin: 0,
-});
-const SheetDescription = Dialog.Description;
-const SheetDefaultCloseIcon = Dialog.DefaultClose;
-
-export const Sheet = {
-  Root: SheetRoot,
-  Trigger: SheetTrigger,
-  Content: SheetContent,
-  Description: SheetDescription,
-  Title: SheetTitle,
-  Close: SheetClose,
-  DefaultClose: SheetDefaultCloseIcon,
-};

package/src/Sheet/index.ts

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

package/src/Slider/Slider.stories.tsx

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

@@ -1,70 +0,0 @@
-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: '$surface_bright',
-  position: 'relative',
-  flexGrow: 1,
-  borderRadius: '$round',
-  cursor: 'pointer',
-  '&[data-orientation="horizontal"]': { height: 3 },
-});
-
-const Range = styled(BaseSlider.Range, {
-  position: 'absolute',
-  backgroundColor: '$primary_default',
-  borderRadius: '$round',
-  height: '100%',
-});
-
-const Thumb = styled(BaseSlider.Thumb, {
-  all: 'unset',
-  display: 'block',
-  width: '$8',
-  height: '$8',
-  backgroundColor: '$primary_default',
-  cursor: 'pointer',
-  boxShadow: `0 2px 10px $colors$surface_default`,
-  borderRadius: 10,
-  '&:hover': { backgroundColor: '$primary_default' },
-  '&: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

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

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';