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

package/src/Diagnostics/Diagnostics.tsx

@@ -1,190 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { HMSRoomProvider, useHMSActions } from '@100mslive/react-sdk';
-import {
-  CheckCircleIcon,
-  ConnectivityIcon,
-  CrossCircleIcon,
-  GlobeIcon,
-  MicOnIcon,
-  VideoOnIcon,
-} from '@100mslive/react-icons';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { HMSThemeProvider } from '../Theme';
-import { AudioTest } from './AudioTest';
-import { BrowserTest } from './BrowserTest';
-import { ConnectivityTest } from './ConnectivityTest';
-import {
-  DiagnosticsContext,
-  DiagnosticsStep,
-  DiagnosticsStepInfo,
-  initialSteps,
-  useDiagnostics,
-} from './DiagnosticsContext';
-import { VideoTest } from './VideoTest';
-
-const DiagnosticsStepIcon: Record<DiagnosticsStep, React.ReactNode> = {
-  [DiagnosticsStep.VIDEO]: <VideoOnIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.AUDIO]: <MicOnIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.BROWSER]: <GlobeIcon width="2rem" height="2rem" />,
-  [DiagnosticsStep.CONNECTIVITY]: <ConnectivityIcon width="2rem" height="2rem" />,
-};
-
-const Container = ({ children }: { children: React.ReactNode }) => (
-  <Box
-    css={{
-      px: '120px',
-      pt: '120px',
-      pb: '24px',
-      bg: '$background_dim',
-      lineHeight: '1.5',
-      '-webkit-text-size-adjust': '100%',
-      position: 'relative',
-      h: '100%',
-      '@lg': {
-        p: '$12',
-      },
-      overflowY: 'auto',
-      boxSizing: 'border-box',
-      '& *': {
-        boxSizing: 'border-box',
-      },
-      '::-webkit-scrollbar-track': {
-        WebkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
-        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
-        backgroundColor: 'transparent',
-      },
-      '::-webkit-scrollbar': {
-        width: '6px',
-        height: '6px',
-        backgroundColor: 'transparent',
-      },
-      '::-webkit-scrollbar-thumb': {
-        backgroundColor: '#657080',
-        borderRadius: '5px',
-      },
-    }}
-  >
-    {children}
-  </Box>
-);
-
-const DiagnosticsStepTest = () => {
-  const { activeStepIndex } = useDiagnostics();
-
-  let TestComponent = () => <></>;
-
-  if (activeStepIndex === DiagnosticsStep.AUDIO) {
-    TestComponent = AudioTest;
-  } else if (activeStepIndex === DiagnosticsStep.VIDEO) {
-    TestComponent = VideoTest;
-  } else if (activeStepIndex === DiagnosticsStep.BROWSER) {
-    TestComponent = BrowserTest;
-  } else if (activeStepIndex === DiagnosticsStep.CONNECTIVITY) {
-    TestComponent = ConnectivityTest;
-  }
-
-  return <TestComponent key={activeStepIndex} />;
-};
-
-const DiagnosticsStepHeader = () => {
-  const { activeStepIndex, activeStep } = useDiagnostics();
-  return (
-    <Flex css={{ py: '$8', px: '$10', alignItems: 'center', borderBottom: '1px solid $border_default' }}>
-      <Text css={{ c: '$primary_bright', mt: '$xs' }}>{DiagnosticsStepIcon[activeStepIndex]}</Text>
-      <Text css={{ fontSize: '$h6', ml: '$9' }}>{activeStep.name}</Text>
-    </Flex>
-  );
-};
-
-const DiagnosticsStepContainer = () => {
-  return (
-    <Box css={{ border: '1px solid $border_default', r: '$1', w: '75%', maxWidth: '65rem', '@lg': { w: '100%' } }}>
-      <DiagnosticsStepHeader />
-      <DiagnosticsStepTest />
-    </Box>
-  );
-};
-
-const DiagnosticsStepsList = () => {
-  const { activeStepIndex, activeStep, steps } = useDiagnostics();
-
-  return (
-    <Box css={{ w: '25%', '@lg': { display: 'none' } }}>
-      {Object.keys(DiagnosticsStep)
-        .filter(key => !isNaN(Number(key)))
-        .map(key => {
-          const keyIndex = Number(key);
-          const step = steps[keyIndex as DiagnosticsStep];
-          const isStepCompleted = activeStepIndex > keyIndex || activeStep.isCompleted;
-
-          let color = '$on_primary_low';
-          let icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
-
-          if (activeStepIndex === keyIndex) {
-            color = '$on_primary_high';
-            icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
-          }
-          if (isStepCompleted) {
-            color = '$primary_bright';
-            icon = <CheckCircleIcon width="1rem" height="1rem" />;
-          }
-          if (step.hasFailed) {
-            color = '$alert_error_default';
-            icon = <CrossCircleIcon width="1rem" height="1rem" />;
-          }
-
-          return (
-            <Flex key={key} css={{ mb: '$10', c: color, gap: '$4', alignItems: 'center' }}>
-              {icon}
-              <Text css={{ c: color }}>{step.name}</Text>
-            </Flex>
-          );
-        })}
-    </Box>
-  );
-};
-
-const DiagnosticsProvider = () => {
-  const actions = useHMSActions();
-  const [activeStep, setActiveStep] = useState(0);
-  const [steps, setSteps] = useState(initialSteps);
-  const diagnosticsRef = useRef(actions.initDiagnostics());
-
-  const updateStep = useCallback((step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => {
-    setSteps(prevSteps => ({ ...prevSteps, [step]: { ...prevSteps[step], ...value } }));
-  }, []);
-
-  return (
-    <DiagnosticsContext.Provider
-      value={{
-        hmsDiagnostics: diagnosticsRef.current,
-        activeStepIndex: activeStep,
-        setActiveStep,
-        steps,
-        updateStep,
-      }}
-    >
-      <Container>
-        <Text variant="h4">Pre-call Test</Text>
-        <Text variant="md" css={{ c: '$on_primary_medium' }}>
-          Make sure your devices and network are good to go, let's get started.
-        </Text>
-        <Flex css={{ direction: 'column', mt: '$12', justifyItems: 'center' }}>
-          <DiagnosticsStepsList />
-          <DiagnosticsStepContainer />
-        </Flex>
-      </Container>
-    </DiagnosticsContext.Provider>
-  );
-};
-
-export const Diagnostics = () => {
-  return (
-    <HMSRoomProvider>
-      <HMSThemeProvider themeType="default">
-        <DiagnosticsProvider />
-      </HMSThemeProvider>
-    </HMSRoomProvider>
-  );
-};

package/src/Diagnostics/DiagnosticsContext.ts

@@ -1,46 +0,0 @@
-import React, { useContext } from 'react';
-import { HMSDiagnosticsInterface } from '@100mslive/react-sdk';
-
-export enum DiagnosticsStep {
-  BROWSER,
-  VIDEO,
-  AUDIO,
-  CONNECTIVITY,
-}
-
-export const initialSteps = {
-  [DiagnosticsStep.BROWSER]: { name: 'Browser Support' },
-  [DiagnosticsStep.VIDEO]: { name: 'Test Video' },
-  [DiagnosticsStep.AUDIO]: { name: 'Test Audio' },
-  [DiagnosticsStep.CONNECTIVITY]: { name: 'Connection Quality' },
-};
-
-export interface DiagnosticsStepInfo {
-  name: string;
-  hasFailed?: boolean;
-  isCompleted?: boolean;
-}
-
-export const DiagnosticsContext = React.createContext<{
-  hmsDiagnostics?: HMSDiagnosticsInterface;
-  activeStepIndex: DiagnosticsStep;
-  setActiveStep: React.Dispatch<React.SetStateAction<DiagnosticsStep>>;
-  steps: Record<DiagnosticsStep, DiagnosticsStepInfo>;
-  updateStep: (step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => void;
-}>({
-  activeStepIndex: 0,
-  setActiveStep: () => {
-    return;
-  },
-  steps: initialSteps,
-  updateStep: () => {
-    return;
-  },
-});
-
-export const useDiagnostics = () => {
-  const context = useContext(DiagnosticsContext);
-  const activeStep = context.steps[context.activeStepIndex];
-
-  return { ...context, activeStep };
-};

package/src/Diagnostics/VideoTest.tsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  HMSException,
-  selectDevices,
-  selectLocalMediaSettings,
-  selectLocalVideoTrackID,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { VideoOnIcon } from '@100mslive/react-icons';
-import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { TestContainer, TestFooter } from './components';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { Video } from '../Video';
-import { StyledVideoTile } from '../VideoTile';
-// @ts-ignore: No implicit any
-import { DeviceSelector } from './DeviceSelector';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-
-export const VideoTest = () => {
-  const { hmsDiagnostics, updateStep } = useDiagnostics();
-  const allDevices = useHMSStore(selectDevices);
-  const { videoInput } = allDevices;
-  const trackID = useHMSStore(selectLocalVideoTrackID);
-  const sdkSelectedDevices = useHMSStore(selectLocalMediaSettings);
-  const [error, setError] = useState<HMSException | undefined>();
-
-  useEffect(() => {
-    hmsDiagnostics?.startCameraCheck().catch(err => {
-      updateStep(DiagnosticsStep.VIDEO, { hasFailed: true });
-      setError(err);
-    });
-  }, [hmsDiagnostics, updateStep]);
-
-  return (
-    <>
-      <TestContainer css={{ display: 'flex', '@lg': { flexDirection: 'column', alignItems: 'center' } }}>
-        {trackID && (
-          <StyledVideoTile.Container
-            css={{
-              width: '90%',
-              aspectRatio: '16/9',
-              mr: '$10',
-              '@lg': { mr: 0, mb: '$10', aspectRatio: '1/1' },
-            }}
-          >
-            <Video mirror={true} trackId={trackID} />
-          </StyledVideoTile.Container>
-        )}
-        <Flex direction="column" css={{ w: '100%' }}>
-          <Text variant="body2" css={{ c: '$on_primary_medium', mb: '$10' }}>
-            Move in front of your camera to make sure it's working. If you don't see your video, try changing the
-            selected camera. If the camera isn't part of your computer, check your settings to make sure your system
-            recognizes it.
-          </Text>
-          <DeviceSelector
-            title="Video"
-            devices={videoInput || []}
-            icon={<VideoOnIcon />}
-            selection={sdkSelectedDevices.videoInputDeviceId}
-            onChange={async (deviceId: string) => {
-              hmsDiagnostics?.stopCameraCheck();
-              hmsDiagnostics?.startCameraCheck(deviceId);
-            }}
-          />
-        </Flex>
-      </TestContainer>
-      <TestFooter error={error} ctaText="Does your video look good?" />
-      <PermissionErrorModal error={error} />
-    </>
-  );
-};

package/src/Diagnostics/components.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Button } from '../Button';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { CSS } from '../Theme';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-
-export const TestContainer = ({ css, children }: { css?: CSS; children: React.ReactNode }) => {
-  return <Box css={{ p: '$10', ...css }}>{children}</Box>;
-};
-
-export const TestFooter = ({
-  error,
-  ctaText,
-  children,
-}: {
-  ctaText?: string;
-  error?: Error;
-  children?: React.ReactNode;
-}) => {
-  const { hmsDiagnostics, activeStepIndex: activeStep, setActiveStep } = useDiagnostics();
-
-  const onNextStep = () => {
-    if (activeStep === DiagnosticsStep.AUDIO) {
-      hmsDiagnostics?.stopMicCheck();
-    } else if (activeStep === DiagnosticsStep.VIDEO) {
-      hmsDiagnostics?.stopCameraCheck();
-    } else if (activeStep === DiagnosticsStep.CONNECTIVITY) {
-      hmsDiagnostics?.stopConnectivityCheck();
-    }
-
-    setActiveStep(step => step + 1);
-  };
-
-  return (
-    <Flex
-      css={{
-        py: '$8',
-        px: '$10',
-        background: '$background_dim',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderTop: '1px solid $border_default',
-        fontSize: '$sm',
-        borderBottomLeftRadius: '$1',
-        borderBottomRightRadius: '$1',
-        lineHeight: '$sm',
-        zIndex: 1001,
-        '@lg': { flexDirection: 'column', gap: '$8' },
-      }}
-    >
-      <Box>{error && <Text css={{ c: '$alert_error_default' }}>Error: {error.message}</Text>}</Box>
-      {children ? (
-        children
-      ) : (
-        <Flex align="center" css={{ gap: '$8', '@lg': { flexDirection: 'column' } }}>
-          <Text css={{ c: '$on_primary_medium' }}>{ctaText}</Text>
-          <Flex align="center" gap="4">
-            <Button onClick={onNextStep} variant="standard" outlined={true}>
-              Skip
-            </Button>
-            <Button disabled={!!error} onClick={onNextStep}>
-              Yes
-            </Button>
-          </Flex>
-        </Flex>
-      )}
-    </Flex>
-  );
-};

package/src/Diagnostics/index.ts

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

package/src/Divider/Divider.tsx

@@ -1,45 +0,0 @@
-import { styled } from '../Theme';
-
-const getVerticalSpace = (space: string) => ({
-  marginLeft: space,
-  marginRight: space,
-});
-const getHorizontalSpace = (space: string) => ({
-  marginTop: space,
-  marginBottom: space,
-});
-
-export const VerticalDivider = styled('span', {
-  height: '25px',
-  width: '1px',
-  backgroundColor: '$border_bright',
-  variants: {
-    space: {
-      1: getVerticalSpace('$1'),
-      2: getVerticalSpace('$2'),
-      3: getVerticalSpace('$3'),
-      4: getVerticalSpace('$4'),
-    },
-  },
-  defaultVariants: {
-    space: 1,
-  },
-});
-
-export const HorizontalDivider = styled('span', {
-  height: '1px',
-  width: '100%',
-  display: 'block',
-  backgroundColor: '$border_bright',
-  variants: {
-    space: {
-      1: getHorizontalSpace('$1'),
-      2: getHorizontalSpace('$2'),
-      3: getHorizontalSpace('$3'),
-      4: getHorizontalSpace('$4'),
-    },
-  },
-  defaultVariants: {
-    space: 1,
-  },
-});

package/src/Divider/index.ts

@@ -1 +0,0 @@
-export { HorizontalDivider, VerticalDivider } from './Divider';

package/src/Dropdown/Dropdown.tsx

@@ -1,145 +0,0 @@
-import {
-  CheckboxItem,
-  Content,
-  Group,
-  Item,
-  ItemIndicator,
-  Label,
-  Portal,
-  Root,
-  Separator,
-  Sub,
-  SubContent,
-  SubTrigger,
-  Trigger,
-} from '@radix-ui/react-dropdown-menu';
-import { styled } from '../Theme';
-
-const DropdownRoot = styled(Root, {});
-
-const DropdownTrigger = styled(Trigger, {
-  cursor: 'pointer',
-  appearance: 'none !important',
-  '&[data-state="open"]': {
-    backgroundColor: '$surface_bright',
-    c: '$on_surface_high',
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-const DropdownTriggerItem = styled(SubTrigger, {
-  w: '100%',
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_brighter',
-  },
-  '&:focus-visible': {
-    bg: '$surface_brighter',
-    outline: 'none',
-  },
-});
-
-const DropdownItem = styled(Item, {
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  outline: 'none',
-  backgroundColor: '$surface_dim',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_bright',
-  },
-  '&:focus-visible': {
-    bg: '$surface_bright',
-  },
-});
-
-const DropdownItemSeparator = styled(Separator, {
-  h: 1,
-  backgroundColor: '$border_bright',
-  m: '$4 $8',
-});
-
-const DropdownContent = styled(Content, {
-  w: '$80',
-  maxHeight: '$64',
-  r: '$1',
-  py: '$4',
-  backgroundColor: '$surface_dim',
-  overflowY: 'auto',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  zIndex: 20,
-  fontFamily: '$sans',
-});
-
-const DropdownLabel = styled(Label, {
-  display: 'flex',
-  alignItems: 'center',
-  h: '$12',
-  w: '100%',
-  p: '$8 $4',
-});
-
-const DropdownGroup = styled(Group, {});
-
-const DropdownSubMenu = styled(Sub, {});
-
-const DropdownSubMenuContent = styled(SubContent, {
-  w: '$80',
-  maxHeight: '$64',
-  r: '$1',
-  py: '$4',
-  backgroundColor: '$surface_bright',
-  overflowY: 'auto',
-  boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-  zIndex: 20,
-});
-
-const DropdownCheckboxItem = styled(CheckboxItem, {
-  color: '$on_surface_high',
-  p: '$8',
-  display: 'flex',
-  alignItems: 'center',
-  outline: 'none',
-  '&:hover': {
-    cursor: 'pointer',
-    bg: '$surface_brighter',
-  },
-  '&:focus-visible': {
-    bg: '$surface_brighter',
-  },
-  gap: '$2',
-});
-
-const DropdownItemIndicator = styled(ItemIndicator, {
-  w: '$10',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-export const Dropdown = {
-  Root: DropdownRoot,
-  Trigger: DropdownTrigger,
-  TriggerItem: DropdownTriggerItem,
-  Content: DropdownContent,
-  Portal: Portal,
-  SubMenu: DropdownSubMenu,
-  SubMenuContent: DropdownSubMenuContent,
-  Item: DropdownItem,
-  Label: DropdownLabel,
-  Group: DropdownGroup,
-  ItemSeparator: DropdownItemSeparator,
-  CheckboxItem: DropdownCheckboxItem,
-  ItemIndicator: DropdownItemIndicator,
-};

package/src/Dropdown/index.tsx

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

package/src/Fieldset/Fieldset.tsx

@@ -1,11 +0,0 @@
-import { styled } from '../Theme';
-
-const StyledFieldset = styled('fieldset', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  border: 'none',
-  backgroundColor: 'transparent',
-});
-
-export const Fieldset = StyledFieldset;

package/src/Fieldset/index.tsx

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

package/src/Footer/Footer.tsx

@@ -1,47 +0,0 @@
-import { Flex } from '../Layout';
-import { styled } from '../Theme';
-
-const Root = styled(Flex, {
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  py: '$4',
-  position: 'relative',
-  height: '100%',
-  '@md': { flexWrap: 'wrap', gap: '$4' },
-});
-
-const Left = styled(Flex, {
-  alignItems: 'center',
-  position: 'absolute',
-  left: '$10',
-  gap: '$8',
-  '@md': {
-    position: 'unset',
-    justifyContent: 'center',
-    w: '100%',
-  },
-});
-
-const Center = styled(Flex, {
-  w: '100%',
-  justifyContent: 'center',
-  alignItems: 'center',
-  gap: '$8',
-});
-
-const Right = styled(Flex, {
-  alignItems: 'center',
-  position: 'absolute',
-  right: '$10',
-  gap: '$8',
-  '@md': {
-    display: 'none',
-  },
-});
-
-export const Footer = {
-  Root,
-  Left,
-  Center,
-  Right,
-};

package/src/Footer/index.tsx

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

package/src/IconButton/IconButton.tsx

@@ -1,43 +0,0 @@
-import { styled } from '../Theme';
-import { flexCenter } from '../utils/styles';
-
-export const IconButton = styled('button', {
-  ...flexCenter,
-  alignItems: 'center',
-  outline: 'none',
-  border: 'none',
-  padding: '$2',
-  r: '$0',
-  cursor: 'pointer',
-  backgroundColor: 'transparent',
-  color: '$on_surface_high',
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  '&:not([disabled]):focus': {
-    outline: 'none',
-  },
-  '@media (hover: hover)': {
-    '&:not([disabled]):hover': {
-      backgroundColor: '$on_surface_low',
-    },
-  },
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    backgroundColor: '$secondary_dim',
-    color: '$on_primary_high',
-  },
-  '&:focus': {
-    outline: 'none',
-  },
-  variants: {
-    active: {
-      true: {
-        '&:not([disabled]):hover': {
-          backgroundColor: '$on_surface_low',
-        },
-      },
-    },
-  },
-});

package/src/IconButton/index.tsx

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