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

package/src/Button/Button.tsx

@@ -1,210 +0,0 @@
-import React, { ComponentPropsWithRef, PropsWithChildren } from 'react';
-import { Flex } from '../Layout';
-import { Loading } from '../Loading';
-import { styled } from '../Theme';
-import { flexCenter } from '../utils/styles';
-
-/**
- * @param base bg color
- * @param hover hover state bg color
- * @param active active state bg color
- * @returns CSS object based on the state
- */
-
-const getOutlinedVariants = (
-  base: string,
-  hover: string,
-  active: string,
-  disabled: string,
-  text: string,
-  textDisabled: string,
-  textHover?: string,
-) => {
-  return {
-    bg: 'transparent',
-    border: `solid $space$px $colors${base}`,
-    c: text,
-    '&[disabled]': {
-      c: textDisabled,
-      bg: 'transparent',
-      border: `solid $space$px $colors${disabled}`,
-      cursor: 'not-allowed',
-    },
-    '&:not([disabled]):hover': {
-      c: textHover,
-      border: `solid $space$px $colors${hover}`,
-      bg: 'transparent',
-    },
-    '&:not([disabled]):active': {
-      border: `solid $space$px $colors${active}`,
-      bg: 'transparent',
-    },
-    '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px $colors${base}`,
-    },
-  };
-};
-
-const getButtonVariants = (
-  base: string,
-  hover: string,
-  active: string,
-  disabled: string,
-  text: string,
-  textDisabled: string,
-  textHover?: string,
-) => {
-  return {
-    bg: base,
-    border: `1px solid ${base}`,
-    c: text,
-    '&[disabled]': {
-      c: textDisabled,
-      cursor: 'not-allowed',
-      bg: disabled,
-      border: `1px solid ${disabled}`,
-    },
-    '&:not([disabled]):hover': {
-      c: textHover,
-      bg: hover,
-      border: `1px solid ${hover}`,
-    },
-    '&:not([disabled]):active': {
-      bg: active,
-      border: `1px solid ${active}`,
-    },
-    '&:not([disabled]):focus-visible': {
-      boxShadow: `0 0 0 3px $colors${hover}`,
-    },
-  };
-};
-
-const StyledButton = styled('button', {
-  ...flexCenter,
-  cursor: 'pointer',
-  fontFamily: '$sans',
-  lineHeight: 'inherit',
-  textTransform: 'none',
-  position: 'relative',
-  outline: 'none',
-  border: 'none',
-  fs: '$md',
-  r: '$1',
-  backgroundColor: '$primary_default',
-  fontWeight: '500',
-  whiteSpace: 'nowrap',
-  p: '$4 $8',
-  '-webkit-appearance': 'button',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:not([disabled]):focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-  transition: 'all 0.2s  ease',
-  compoundVariants: [
-    {
-      variant: 'standard',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_surface_high',
-        '$on_surface_low',
-      ),
-    },
-    {
-      variant: 'danger',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$alert_error_default',
-        '$alert_error_bright',
-        '$alert_error_dim',
-        '$alert_error_brighter',
-        '$on_surface_high',
-        '$on_surface_low',
-        '$on_surface_high',
-      ),
-    },
-    {
-      variant: 'primary',
-      outlined: true,
-      css: getOutlinedVariants(
-        '$primary_default',
-        '$primary_bright',
-        '$primary_dim',
-        '$primary_disabled',
-        '$on_surface_high',
-        '$on_surface_low',
-      ),
-    },
-  ],
-  variants: {
-    variant: {
-      standard: getButtonVariants(
-        '$secondary_default',
-        '$secondary_bright',
-        '$secondary_dim',
-        '$secondary_disabled',
-        '$on_secondary_high',
-        '$on_secondary_low',
-      ),
-      danger: getButtonVariants(
-        '$alert_error_default',
-        '$alert_error_bright',
-        '$alert_error_dim',
-        '$alert_error_dim',
-        '$alert_error_brighter',
-        '$on_primary_low',
-        '$on_primary_high',
-      ),
-      primary: getButtonVariants(
-        '$primary_default',
-        '$primary_bright',
-        '$primary_dim',
-        '$primary_disabled',
-        '$on_primary_high',
-        '$on_primary_low',
-      ),
-    },
-    outlined: {
-      true: {},
-    },
-    icon: {
-      true: {},
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-  },
-});
-
-export const Button = React.forwardRef<
-  HTMLButtonElement,
-  PropsWithChildren<{ loading?: boolean } & ComponentPropsWithRef<typeof StyledButton>>
->(({ children, loading = false, icon, ...buttonProps }, ref) => {
-  return (
-    <StyledButton {...buttonProps} ref={ref}>
-      <>
-        {loading && (
-          <Flex
-            align="center"
-            justify="center"
-            css={{ w: '100%', position: 'absolute', left: '0', color: '$on_primary_low' }}
-          >
-            <Loading color="currentColor" />
-          </Flex>
-        )}
-        <Flex
-          align="center"
-          justify="center"
-          css={{ visibility: loading ? 'hidden' : 'visible', gap: icon ? '$4' : '0' }}
-        >
-          {children}
-        </Flex>
-      </>
-    </StyledButton>
-  );
-});

package/src/Button/index.tsx

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

package/src/Checkbox/Checkbox.tsx

@@ -1,35 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { styled } from '../Theme';
-
-const CheckboxRoot = styled(CheckboxPrimitive.Root, {
-  all: 'unset',
-  border: '1px solid $primary_default',
-  backgroundColor: '$on_primary_high',
-  width: '$8',
-  height: '$8',
-  borderRadius: '$0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  boxShadow: 'none',
-  outline: 'none',
-  cursor: 'pointer',
-  '&:focus': {
-    boxShadow: 'none',
-    outline: 'none',
-  },
-  '&[data-state="checked"]': {
-    backgroundColor: '$primary_default',
-  },
-});
-
-const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
-  color: '$on_primary_high',
-  // center check svg within button box
-  lineHeight: 0,
-});
-
-export const Checkbox = {
-  Root: CheckboxRoot,
-  Indicator: CheckboxIndicator,
-};

package/src/Checkbox/index.tsx

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

package/src/Collapsible/Collapsible.tsx

@@ -1,34 +0,0 @@
-import { Content, Root, Trigger } from '@radix-ui/react-collapsible';
-import { styled } from '../Theme';
-import { slideDown, slideUp } from '../utils';
-
-const CollapsibleRoot = styled(Root, {});
-
-const CollapsibleTrigger = styled(Trigger, {
-  cursor: 'pointer',
-  appearance: 'none !important',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-const CollapsibleContent = styled(Content, {
-  w: '$80',
-  r: '$1',
-  overflowY: 'auto',
-  '&[data-state="open"]': {
-    animation: `${slideDown('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-  '&[data-state="closed"]': {
-    animation: `${slideUp('--radix-collapsible-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-});
-
-export const Collapsible = {
-  Root: CollapsibleRoot,
-  Trigger: CollapsibleTrigger,
-  Content: CollapsibleContent,
-};

package/src/Collapsible/index.tsx

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

package/src/Diagnostics/AudioTest.tsx

@@ -1,188 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  HMSException,
-  selectDevices,
-  selectLocalAudioTrackID,
-  selectLocalMediaSettings,
-  selectTrackAudioByID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { MicOnIcon, SpeakerIcon, StopIcon } from '@100mslive/react-icons';
-import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { TestContainer, TestFooter } from './components';
-import { Button } from '../Button';
-import { Box, Flex } from '../Layout';
-import { Progress } from '../Progress';
-import { Text } from '../Text';
-// @ts-ignore: No implicit any
-import { DeviceSelector } from './DeviceSelector';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-import { useAudioOutputTest } from '../Prebuilt/components/hooks/useAudioOutputTest';
-import { TEST_AUDIO_URL } from '../Prebuilt/common/constants';
-
-const SelectContainer = ({ children }: { children: React.ReactNode }) => (
-  <Box css={{ w: 'calc(50% - 0.75rem)', '@lg': { w: '100%' } }}>{children}</Box>
-);
-
-const MicTest = ({ setError }: { setError: (err?: Error) => void }) => {
-  const { hmsDiagnostics } = useDiagnostics();
-  const devices = useHMSStore(selectDevices);
-  const [isRecording, setIsRecording] = useState(false);
-  const [selectedMic, setSelectedMic] = useState(devices.audioInput[0]?.deviceId || 'default');
-  const trackID = useHMSStore(selectLocalAudioTrackID);
-  const audioLevel = useHMSStore(selectTrackAudioByID(trackID));
-  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
-  const { playing, setPlaying, audioRef } = useAudioOutputTest({
-    deviceId: audioOutputDeviceId || devices.audioOutput[0]?.deviceId,
-  });
-
-  return (
-    <SelectContainer>
-      <DeviceSelector
-        title="Microphone (Input)"
-        devices={devices.audioInput}
-        selection={selectedMic}
-        icon={<MicOnIcon />}
-        onChange={(deviceId: string) => {
-          setError(undefined);
-          setSelectedMic(deviceId);
-          hmsDiagnostics?.stopMicCheck();
-        }}
-      />
-      <Flex css={{ gap: '$6', alignItems: 'center' }}>
-        <Button
-          variant="standard"
-          icon
-          onClick={() => {
-            isRecording
-              ? hmsDiagnostics?.stopMicCheck()
-              : hmsDiagnostics
-                  ?.startMicCheck({
-                    inputDevice: selectedMic,
-                    onError: (err: Error) => {
-                      setError(err);
-                    },
-                    onStop: () => {
-                      setIsRecording(false);
-                    },
-                  })
-                  .then(() => {
-                    setIsRecording(true);
-                  });
-          }}
-          disabled={devices.audioInput.length === 0 || playing}
-        >
-          {isRecording ? <StopIcon /> : <MicOnIcon />}
-          {isRecording ? 'Stop Recording' : 'Record'}
-        </Button>
-
-        <Button
-          icon
-          variant="standard"
-          outlined={hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
-          onClick={() => {
-            if (audioRef.current) {
-              audioRef.current.src = hmsDiagnostics?.getRecordedAudio() || '';
-              audioRef.current.play();
-            }
-          }}
-          disabled={playing || hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
-        >
-          <SpeakerIcon />
-          {playing ? 'Playing...' : 'Playback'}
-        </Button>
-        <audio
-          ref={audioRef}
-          onEnded={() => setPlaying(false)}
-          onPlay={() => setPlaying(true)}
-          style={{ display: 'none' }}
-        />
-      </Flex>
-
-      <Flex align="center" css={{ mt: '$4', maxWidth: '10rem', opacity: isRecording ? '1' : '0', gap: '$4' }}>
-        <Text>
-          <MicOnIcon />
-        </Text>
-        <Progress.Root value={audioLevel} css={{ h: '$2' }}>
-          <Progress.Content
-            style={{
-              transform: `translateX(-${100 - audioLevel}%)`,
-              transition: 'transform 0.3s',
-            }}
-          />
-        </Progress.Root>
-      </Flex>
-    </SelectContainer>
-  );
-};
-
-const SpeakerTest = () => {
-  const actions = useHMSActions();
-  const devices = useHMSStore(selectDevices);
-  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
-
-  if (devices.audioOutput.length === 0) {
-    return <></>;
-  }
-
-  return (
-    <SelectContainer>
-      <DeviceSelector
-        title="Speaker (Output)"
-        devices={devices.audioOutput}
-        selection={audioOutputDeviceId || devices.audioOutput[0]?.deviceId}
-        icon={<SpeakerIcon />}
-        onChange={(deviceId: string) => {
-          actions.setAudioOutputDevice(deviceId);
-        }}
-      />
-    </SelectContainer>
-  );
-};
-
-export const AudioTest = () => {
-  const { hmsDiagnostics, updateStep } = useDiagnostics();
-  const [error, setErrorAlone] = useState<Error | undefined>();
-
-  const setError = useCallback(
-    (err?: Error) => {
-      updateStep(DiagnosticsStep.AUDIO, { hasFailed: !!err });
-      setErrorAlone(err);
-    },
-    [updateStep, setErrorAlone],
-  );
-
-  useEffect(() => {
-    hmsDiagnostics?.requestPermission({ audio: true }).catch(error => setError(error));
-  }, [hmsDiagnostics, setError]);
-
-  return (
-    <>
-      <TestContainer>
-        <Text variant="body2" css={{ c: '$on_primary_medium' }}>
-          Record a 10 second audio clip and play it back to check that your microphone and speaker are working. If they
-          aren't, make sure your volume is turned up, try a different speaker or microphone, or check your bluetooth
-          settings.
-        </Text>
-
-        <Flex
-          css={{
-            mt: '$10',
-            gap: '$10',
-            '@lg': {
-              flexDirection: 'column',
-              gap: '$8',
-            },
-          }}
-        >
-          <MicTest setError={setError} />
-          <SpeakerTest />
-        </Flex>
-      </TestContainer>
-      <TestFooter error={error} ctaText="Does your audio sound good?" />
-      <PermissionErrorModal error={error as HMSException} />
-    </>
-  );
-};

package/src/Diagnostics/BrowserTest.tsx

@@ -1,141 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { parsedUserAgent } from '@100mslive/react-sdk';
-import { TestContainer, TestFooter } from './components';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-
-const CMS_MEDIA_SERVER = 'https://storage.googleapis.com/100ms-cms-prod/';
-
-export const operatingSystemIconInfo = {
-  tizen: {
-    key: 'tizen',
-    val: 'Tizen',
-    icon: `${CMS_MEDIA_SERVER}cms/Tizen_b99350214e/Tizen_b99350214e.svg`,
-  },
-  'mac os': {
-    key: 'macos',
-    val: 'Mac OS',
-    icon: `${CMS_MEDIA_SERVER}cms/mac_OS_804456afd8/mac_OS_804456afd8.png`,
-  },
-  windows: {
-    key: 'windows',
-    val: 'Windows',
-    icon: `${CMS_MEDIA_SERVER}cms/Windows_fdfe6749b6/Windows_fdfe6749b6.svg`,
-  },
-  linux: {
-    key: 'linux',
-    val: 'Linux',
-    icon: `${CMS_MEDIA_SERVER}cms/Linux_31f8353a2e/Linux_31f8353a2e.svg`,
-  },
-  chromium: {
-    key: 'chromium',
-    val: 'Chromium',
-    icon: `${CMS_MEDIA_SERVER}cms/Chromium_3df17710bd/Chromium_3df17710bd.svg`,
-  },
-  ubuntu: {
-    key: 'ubuntu',
-    val: 'Ubuntu',
-    icon: `${CMS_MEDIA_SERVER}cms/Ubuntu_966dd923c5/Ubuntu_966dd923c5.svg`,
-  },
-  ios: {
-    key: 'ios',
-    val: 'iOS',
-    icon: `${CMS_MEDIA_SERVER}cms/i_OS_3cdc9d9b71/i_OS_3cdc9d9b71.svg`,
-  },
-  android: {
-    key: 'android',
-    val: 'Android',
-    icon: `${CMS_MEDIA_SERVER}cms/Android_49dcfdc934/Android_49dcfdc934.svg`,
-  },
-};
-
-export const browserTypeIconInfo = {
-  brave: {
-    key: 'brave',
-    val: 'Brave',
-    icon: `${CMS_MEDIA_SERVER}cms/Brave_7e66131f09/Brave_7e66131f09.svg`,
-  },
-  chrome: {
-    key: 'chrome',
-    val: 'Chrome',
-    icon: `${CMS_MEDIA_SERVER}cms/Chrome_7bf77fbdd7/Chrome_7bf77fbdd7.svg`,
-  },
-  firefox: {
-    key: 'firefox',
-    val: 'Firefox',
-    icon: `${CMS_MEDIA_SERVER}cms/Firefox_30f3976fb8/Firefox_30f3976fb8.svg`,
-  },
-  safari: {
-    key: 'safari',
-    val: 'Safari',
-    icon: `${CMS_MEDIA_SERVER}cms/Safari_254e74ed94/Safari_254e74ed94.svg`,
-  },
-  'mobile safari': {
-    key: 'safari',
-    val: 'Safari',
-    icon: `${CMS_MEDIA_SERVER}cms/Safari_254e74ed94/Safari_254e74ed94.svg`,
-  },
-  edge: {
-    key: 'edge',
-    val: 'Edge',
-    icon: `${CMS_MEDIA_SERVER}cms/Edge_23add4a83f/Edge_23add4a83f.svg`,
-  },
-  opera: {
-    key: 'opera',
-    val: 'Opera',
-    icon: `${CMS_MEDIA_SERVER}cms/Opera_0f3bf4eb19/Opera_0f3bf4eb19.svg`,
-  },
-};
-
-const CheckDetails = ({ title, value, iconURL }: { title: string; value: string; iconURL?: string }) => (
-  <Box css={{ w: '100%', my: '$10', p: '$10', r: '$1', bg: '$surface_default', '@lg': { w: 'auto' } }}>
-    <Text css={{ c: '$on_primary_medium', mb: '$6' }}>{title}</Text>
-    <Flex align="center">
-      {iconURL && (
-        <Box css={{ size: '2rem', r: '$round', bg: '$surface_brighter', mr: '$4' }}>
-          <img style={{ objectFit: 'contain', width: '2rem' }} src={iconURL} alt={value} />
-        </Box>
-      )}
-      <Text>{value}</Text>
-    </Flex>
-  </Box>
-);
-
-export const BrowserTest = () => {
-  const { hmsDiagnostics, updateStep } = useDiagnostics();
-  const [error, setError] = useState<Error | undefined>();
-  useEffect(() => {
-    try {
-      hmsDiagnostics?.checkBrowserSupport();
-    } catch (err) {
-      updateStep(DiagnosticsStep.BROWSER, { hasFailed: true });
-      setError(err as Error);
-    }
-  }, [hmsDiagnostics, updateStep]);
-  return (
-    <>
-      <TestContainer css={{ display: 'flex', gap: '$8', '@lg': { display: 'block' } }}>
-        <CheckDetails
-          title="Browser"
-          iconURL={
-            parsedUserAgent.getBrowser().name &&
-            browserTypeIconInfo[parsedUserAgent.getBrowser().name?.toLowerCase() as keyof typeof browserTypeIconInfo]
-              ?.icon
-          }
-          value={`${parsedUserAgent.getBrowser().name} ${parsedUserAgent.getBrowser().version}`}
-        />
-        <CheckDetails
-          title="Operating system"
-          iconURL={
-            parsedUserAgent.getOS().name &&
-            operatingSystemIconInfo[parsedUserAgent.getOS().name?.toLowerCase() as keyof typeof operatingSystemIconInfo]
-              ?.icon
-          }
-          value={`${parsedUserAgent.getOS().name} ${parsedUserAgent.getOS().version}`}
-        />
-      </TestContainer>
-      <TestFooter error={error} ctaText="Is your device information correct?" />
-    </>
-  );
-};