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

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.mdx

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

@@ -1,46 +0,0 @@
-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;
-  },
-};

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.stories.tsx

@@ -1,77 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '../Layout';
-import { Text } from '../Text';
-import { Tabs } from '.';
-
-export default {
-  title: 'UI Components/Tabs',
-  component: Tabs.Root,
-  argTypes: {
-    value: { control: { type: 'text' }, defaultValue: 'tab1' },
-    onValueChange: { action: { type: 'click' } },
-    orientation: { options: ['horizontal', 'vertical'], defaultValue: 'horizontal', control: { type: 'select' } },
-  },
-} as ComponentMeta<typeof Tabs.Root>;
-
-const Template: ComponentStory<typeof Tabs.Root> = ({
-  value: propValue = '',
-  onValueChange: propOnValueChange,
-  ...rest
-}) => {
-  const [value, setValue] = useState('tab1');
-
-  const handleOnValueChange = useCallback(
-    (value: string) => {
-      setValue(value);
-      if (propOnValueChange) {
-        propOnValueChange(value);
-      }
-    },
-    [propOnValueChange],
-  );
-
-  useEffect(() => {
-    handleOnValueChange(propValue);
-    if (propOnValueChange) {
-      propOnValueChange(value);
-    }
-  }, [handleOnValueChange, propOnValueChange, propValue, value]);
-
-  return (
-    <Tabs.Root
-      css={{
-        gap: '8px',
-        maxWidth: '500px',
-        width: 'max-content',
-        '&[data-orientation="horizontal"]': { flexDirection: 'column' },
-      }}
-      value={value}
-      onValueChange={handleOnValueChange}
-      {...rest}
-    >
-      <Tabs.List
-        aria-label="tabs example"
-        css={{ bg: '$background_dim', r: '$1', '&[data-orientation="vertical"]': { flexDirection: 'column' } }}
-      >
-        <Tabs.Trigger value="tab1">One</Tabs.Trigger>
-        <Tabs.Trigger value="tab2">Two</Tabs.Trigger>
-        <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
-      </Tabs.List>
-      <Box css={{ r: '$1', bg: '$surface_brighter' }}>
-        <Tabs.Content value="tab1">
-          <Text>Tab one content</Text>
-        </Tabs.Content>
-        <Tabs.Content value="tab2">
-          <Text>Tab two content</Text>
-        </Tabs.Content>
-        <Tabs.Content value="tab3">
-          <Text>Tab three content</Text>
-        </Tabs.Content>
-      </Box>
-    </Tabs.Root>
-  );
-};
-
-export const Example = Template.bind({});
-Example.storyName = 'Tabs';

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.stories.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Text, textVariants } from './Text';
-
-export default {
-  title: 'UI Components/Text',
-  component: Text,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: Object.keys(textVariants),
-      },
-    },
-  },
-} as ComponentMeta<typeof Text>;
-
-const Template: ComponentStory<typeof Text> = args => <Text {...args}>The Evil Rabbit jumps.</Text>;
-
-export const Playground = Template.bind({});
-Playground.storyName = 'Text';

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

package/src/Theme/Theme.stories.mdx

@@ -1,8 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import ThemeStory from './ThemeStory';
-
-<Meta title="Theme" />
-
-## Theme
-
-<ThemeStory />

package/src/Theme/ThemeProvider.tsx

@@ -1,98 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { Theme } from './stitches.config';
-import { createTheme, theme } from './stitches.config';
-import useSSR from './useSSR';
-
-const defaultAspectRatio = {
-  width: 1,
-  height: 1,
-};
-
-export enum ThemeTypes {
-  // eslint-disable-next-line no-unused-vars
-  default = 'default',
-}
-
-export type ThemeContextValue = {
-  themeType: string;
-  theme: Theme;
-  aspectRatio: { width: number; height: number };
-  /**
-   * @param {ThemeTypes} themeToUpdateTo - optional
-   * Use this to toggle or update the currentTheme.
-   * if a param is passed, it will set the theme to passed value, otherwise will toggle between light and dark
-   * depending on current applied theme
-   */
-  toggleTheme: (themeToUpdateTo?: ThemeTypes) => void;
-};
-
-export type ThemeProviderProps = {
-  themeType?: string;
-  theme?: Theme;
-  aspectRatio?: { width: number; height: number };
-};
-
-const defaultContext = {
-  themeType: ThemeTypes.default,
-  theme,
-  aspectRatio: { width: 1, height: 1 },
-  toggleTheme: (_themeToUpdateTo?: ThemeTypes) => {
-    return;
-  },
-};
-export const ThemeContext = React.createContext<ThemeContextValue>(defaultContext);
-
-/**
- * Wrap this around your root component to get access to theme
- * eg:
- * <ThemeProvider type="dark" appBuilder={{ aspectRatio: { width:1, height: 1} }}>
- *  <App />
- * </ThemeProvider>
- */
-export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({
-  themeType,
-  theme: userTheme,
-  aspectRatio = defaultAspectRatio,
-  children,
-}) => {
-  const systemTheme = ThemeTypes.default;
-  const [currentTheme, setCurrentTheme] = useState(themeType || systemTheme);
-  const previousClassName = useRef('');
-  const { isBrowser } = useSSR();
-  const updatedTheme = useMemo(() => {
-    const updatedTheme = createTheme({ themeType: currentTheme, theme: userTheme || {} });
-    if (!isBrowser) {
-      return updatedTheme;
-    }
-    if (previousClassName.current) {
-      document.documentElement.classList.remove(previousClassName.current);
-    }
-    previousClassName.current = updatedTheme.className;
-    document.documentElement.classList.add(updatedTheme);
-    return updatedTheme;
-  }, [userTheme, currentTheme, isBrowser]);
-
-  const toggleTheme = useCallback((themeToUpdateTo?: ThemeTypes) => {
-    if (themeToUpdateTo) {
-      setCurrentTheme(themeToUpdateTo);
-      return;
-    }
-    setCurrentTheme(ThemeTypes.default);
-  }, []);
-
-  useEffect(() => {
-    if (themeType) {
-      setCurrentTheme(themeType);
-    }
-  }, [themeType]);
-
-  return (
-    <ThemeContext.Provider
-      value={{ themeType: currentTheme, theme: updatedTheme as unknown as Theme, aspectRatio, toggleTheme }}
-    >
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export const useTheme = () => React.useContext(ThemeContext);

package/src/Theme/ThemeStory.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { ColorItem, ColorPalette } from '@storybook/addon-docs';
-
-const ThemeStory = () => {
-  return (
-    <ColorPalette>
-      <ColorItem
-        title="theme.color.brand"
-        subtitle="Brand Variants"
-        colors={{ brandLight: '#74AAFF', primary_default: '#2F80FF', brandDark: '#0B326F', brandDisabled: '#D8E7FF' }}
-      />
-      <ColorItem
-        title="theme.color.text"
-        subtitle="Text Variants"
-        colors={{
-          on_surface_high: 'rgba(250, 252, 255, 0.9)',
-          on_surface_medium: 'rgba(215, 227, 245, 0.8)',
-          on_surface_low: 'rgba(164, 176, 193, 0.5)',
-        }}
-      />
-      <ColorItem
-        title="theme.color.surface"
-        subtitle="Surface Variants"
-        colors={{
-          surface_dimmer: '#06080A',
-          surface_dim: '#080B0F',
-          surface_default: '#0B0F15',
-          surface_bright: '#12161C',
-          surface_brighter: '#1F2228',
-        }}
-      />
-      <ColorItem
-        title="theme.color.primary"
-        subtitle="Primary Variants"
-        colors={{
-          primary_bright: '#6DA6FF',
-          primary_default: '#2F80FF',
-          primary_dim: '#184080',
-          primary_disabled: '#D8E7FF',
-        }}
-      />
-      <ColorItem
-        title="theme.color.secondary"
-        subtitle="Secondary Variants"
-        colors={{
-          secondary_bright: '#505863',
-          secondary_default: '#657080',
-          secondary_dim: '#1E2329',
-          secondary_disabled: '#DCE4EF',
-        }}
-      />
-    </ColorPalette>
-  );
-};
-
-export default ThemeStory;