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

package/src/Toast/Toast.tsx

@@ -1,170 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { ToastProps } from '@radix-ui/react-toast';
-import * as ToastPrimitives from '@radix-ui/react-toast';
-import { CrossIcon } from '@100mslive/react-icons';
-import { IconButton } from '../IconButton';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { styled } from '../Theme';
-import { toastAnimation } from '../utils';
-
-const getToastVariant = (base: string) => {
-  return {
-    borderLeftColor: base,
-    borderLeft: 0,
-    '&:before': {
-      position: 'absolute',
-      top: '-1px',
-      left: '-$4',
-      width: '$8',
-      borderLeft: `solid $space$px ${base}`,
-      borderTop: `solid $space$px ${base}`,
-      borderBottom: `solid $space$px ${base}`,
-      borderTopLeftRadius: '$3',
-      borderBottomLeftRadius: '$3',
-      bg: base,
-      content: ' ',
-      height: '100%',
-      zIndex: 10,
-    },
-    '@sm': {
-      '&:before': {
-        content: 'none',
-      },
-      border: `solid $space$px ${base}`,
-    },
-  };
-};
-
-const ToastRoot = styled(ToastPrimitives.Root, {
-  r: '$3',
-  bg: '$surface_default',
-  p: '$10',
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-  fontFamily: '$sans',
-  border: 'solid $space$px $border_bright',
-  overflow: 'hidden',
-  ...toastAnimation,
-  '@sm': {
-    p: '$8 $11',
-  },
-  variants: {
-    variant: {
-      standard: getToastVariant('$secondary_default'),
-      warning: getToastVariant('$alert_warning'),
-      error: getToastVariant('$alert_error_default'),
-      success: getToastVariant('$alert_success'),
-    },
-  },
-  defaultVariants: {
-    variant: 'standard',
-  },
-});
-
-const ToastTitle = styled(ToastPrimitives.Title, {
-  fontSize: '$md',
-  color: '$on_surface_high',
-  fontWeight: '$semiBold',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-});
-const ToastDescription = styled(ToastPrimitives.Description, {
-  color: '$on_surface_medium',
-});
-const ToastClose = styled(ToastPrimitives.Close, {});
-const ToastAction = styled(ToastPrimitives.Action, {
-  cursor: 'pointer',
-  background: 'none',
-  border: 'none',
-});
-const ToastViewport = styled(ToastPrimitives.Viewport, {
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  padding: '$8',
-  gap: 10,
-  width: 390,
-  '@sm': {
-    width: '100%',
-    padding: '$6',
-  },
-  maxWidth: '100vw',
-  margin: 0,
-  listStyle: 'none',
-  zIndex: 1000,
-});
-
-const DefaultClose = ({ css }: Pick<ComponentProps<typeof ToastClose>, 'css'>) => {
-  return (
-    <ToastClose css={css} asChild>
-      <IconButton>
-        <CrossIcon />
-      </IconButton>
-    </ToastClose>
-  );
-};
-
-interface HMSToastProps extends ToastProps {
-  title: string;
-  description?: string;
-  isClosable?: boolean;
-  icon?: React.ReactNode;
-  action?: React.ReactNode;
-  inlineAction?: boolean;
-}
-
-const HMSToast: React.FC<HMSToastProps> = ({
-  title,
-  description,
-  isClosable = true,
-  icon,
-  action,
-  inlineAction = false,
-  ...props
-}) => {
-  return (
-    <>
-      <ToastRoot {...props}>
-        <ToastTitle>
-          <Flex align="center" css={{ gap: '$4', flex: '1 1 0', minWidth: 0 }}>
-            {icon ? <Box css={{ w: '$10', h: '$10', alignSelf: 'start', mt: '$2' }}>{icon}</Box> : null}
-            <Text variant="sub1" css={{ c: 'inherit', wordBreak: 'break-word' }}>
-              {title}
-            </Text>
-          </Flex>
-          {isClosable ? <DefaultClose /> : null}
-          {!isClosable && inlineAction && action ? (
-            <ToastAction altText={`${title}Action`}>{action}</ToastAction>
-          ) : null}
-        </ToastTitle>
-        {description ? (
-          <ToastDescription>
-            <Text variant="body1" css={{ fontWeight: '$regular', c: '$on_surface_medium' }}>
-              {description}
-            </Text>
-          </ToastDescription>
-        ) : null}
-        {!inlineAction && action ? (
-          <ToastAction altText={`${title}Action`} css={{ mt: '$10' }}>
-            {action}
-          </ToastAction>
-        ) : null}
-      </ToastRoot>
-    </>
-  );
-};
-export const Toast = {
-  Provider: ToastPrimitives.Provider,
-  Root: ToastRoot,
-  Title: ToastTitle,
-  Description: ToastDescription,
-  Close: DefaultClose,
-  Action: ToastAction,
-  Viewport: ToastViewport,
-  HMSToast: HMSToast,
-};

package/src/Toast/index.tsx

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

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { Flex } from '../Layout';
-import { Text } from '../Text';
-import { alignTooltip, sideTooltip, Tooltip } from './Tooltip';
-
-export default {
-  title: 'UI Components/Tooltip',
-  argTypes: {
-    outlined: { control: 'boolean' },
-    side: { control: 'radio' },
-    align: { control: 'radio' },
-  },
-  args: {
-    outlined: false,
-    side: 'bottom',
-    align: 'center',
-  },
-  component: Tooltip,
-} as ComponentMeta<typeof Tooltip>;
-
-const TooltipStoryWithString = (
-  args: JSX.IntrinsicAttributes & {
-    title?: React.ReactNode;
-    outlined?: boolean | undefined;
-    side?: sideTooltip;
-    align?: alignTooltip;
-  } & { children?: React.ReactNode },
-) => {
-  return (
-    <Flex justify="center" align="center" css={{ w: 800, h: 200 }}>
-      <Tooltip title="This is title" {...args}>
-        <Text>Hover to see Tooltip</Text>
-      </Tooltip>
-    </Flex>
-  );
-};
-
-export const ExampleWithString = TooltipStoryWithString.bind({});
-
-const ExampleTitle = () => {
-  return <h3 style={{ color: '$on_primary_high' }}>This is title</h3>;
-};
-
-const TooltipStorywithReactNode = (
-  args: JSX.IntrinsicAttributes & {
-    title?: React.ReactNode;
-    outlined?: boolean | undefined;
-    side?: sideTooltip;
-    align?: alignTooltip;
-  } & { children?: React.ReactNode },
-) => {
-  return (
-    <Flex justify="center" align="center" css={{ w: 800, h: 200 }}>
-      <Tooltip title={<ExampleTitle />} {...args}>
-        <Text>Hover to see tooltip</Text>
-      </Tooltip>
-    </Flex>
-  );
-};
-
-export const ExampleWithReactNode = TooltipStorywithReactNode.bind({});

package/src/Tooltip/Tooltip.tsx

@@ -1,79 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import * as BaseTooltip from '@radix-ui/react-tooltip';
-import { CSS, styled } from '../Theme';
-import { slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade } from '../utils';
-
-const TooltipBox = styled(BaseTooltip.Content, {
-  fontFamily: '$sans',
-  borderRadius: '$2',
-  padding: '$2 $4',
-  fontSize: '$xs',
-  zIndex: 11,
-  color: '$on_surface_high',
-  backgroundColor: '$surface_bright',
-  '@media (prefers-reduced-motion: no-preference)': {
-    animationDuration: '400ms',
-    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    willChange: 'transform, opacity',
-    '&[data-state="delayed-open"]': {
-      '&[data-side="top"]': { animationName: slideDownAndFade() },
-      '&[data-side="right"]': { animationName: slideLeftAndFade() },
-      '&[data-side="bottom"]': { animationName: slideUpAndFade() },
-      '&[data-side="left"]': { animationName: slideRightAndFade() },
-    },
-  },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: '$background_dim',
-        border: 'solid $space$px $border_bright',
-      },
-    },
-  },
-});
-
-const TooltipTrigger = styled(BaseTooltip.Trigger, {
-  fontFamily: '$sans',
-});
-
-const TooltipRoot = BaseTooltip.Root;
-export type alignTooltip = 'end' | 'center' | 'start' | undefined;
-export type sideTooltip = 'bottom' | 'left' | 'right' | 'top' | undefined;
-
-export const Tooltip: React.FC<
-  PropsWithChildren<{
-    title: React.ReactNode | string;
-    outlined?: boolean;
-    side?: sideTooltip;
-    align?: alignTooltip;
-    disabled?: boolean;
-    triggerCss?: CSS;
-    boxCss?: CSS;
-    delayDuration?: number;
-  }>
-> = ({
-  children,
-  title,
-  triggerCss,
-  boxCss,
-  outlined = true,
-  side = 'bottom',
-  align = 'center',
-  disabled = false,
-  delayDuration = 200,
-}) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <BaseTooltip.Provider>
-      <TooltipRoot delayDuration={delayDuration} open={open && !disabled} onOpenChange={setOpen}>
-        <TooltipTrigger css={{ ...triggerCss }} asChild>
-          {children}
-        </TooltipTrigger>
-        <TooltipBox sideOffset={10} side={side} align={align} outlined={outlined} css={{ ...boxCss }}>
-          {title}
-        </TooltipBox>
-      </TooltipRoot>
-    </BaseTooltip.Provider>
-  );
-};

package/src/Tooltip/index.ts

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

package/src/Video/UseVideo.mdx

@@ -1,22 +0,0 @@
-## useVideo
-
-For each peer, we’ll render a `<video>` element and a `<div>` element with their name.
-To render the video, we need to call attachVideo method of hmsActions, which accepts a trackId and a DOM element.
-But we have abstracted this implementation inside useVideo hook for ease. This hook will return an object `videoRef` given a video `trackId`. The returned `videoRef` can be used to set on a video element meant to display the video. The hook will take care of attaching and detaching video, and will automatically detach when the video goes out of view to save on bandwidth.
-
-import { Story } from '@storybook/addon-docs';
-
-```jsx
-import { useVideo } from ‘@100mslive/react-sdk’;
-function Peer({ peer }) {
-  const { videoRef } = useVideo({
-    trackId: peer.videoTrack,
-  });
-  return <video ref={videoRef} autoPlay muted playsInline />;
-}
-export default Peer;
-```
-
-> Note that `height` and `width` CSS properties need to be set on the `<video>` element to render the peer's video.
-
-<Story id="rendering-video-video-component--video-example" />

package/src/Video/UseVideo.stories.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { useVideo } from '@100mslive/react-sdk';
-import UseVideoDocs from './UseVideo.mdx';
-import { StyledVideo } from './Video';
-
-const VideoHook = () => {
-  const { videoRef } = useVideo({
-    trackId: '1',
-  });
-  return <StyledVideo ref={videoRef} autoPlay playsInline muted />;
-};
-
-const VideoStories = {
-  title: 'Rendering Video/useVideo hook',
-  component: VideoHook,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  parameters: {
-    docs: {
-      page: UseVideoDocs,
-    },
-  },
-};
-
-export default VideoStories;
-
-export const UseVideoHook = VideoHook.bind({});

package/src/Video/Video.mdx

@@ -1,24 +0,0 @@
-## `<Video />` component
-
-You can directly use `<Video />` all it needs is `trackId` to render the video. This is a headless component to style it you can pass only valid css styles and className.
-
-```jsx
-import { useVideo } from '@100mslive/react-sdk';
-import { Video } from '../';
-
-const VideoComponent = () => {
-  return <Video trackId="2" />;
-};
-```
-
-## Styled Video component
-
-We use Stitches as our styling solution which provides a `css` prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values.
-
-Here's an example:
-
-```jsx
-const StyledVideoComponent = () => {
-  return <Video css={{ width: 500, height: 300 }} trackId="2" />;
-};
-```

package/src/Video/Video.stories.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Video } from './Video';
-import VideoDocs from './Video.mdx';
-
-const VideoComponent = () => {
-  return <Video trackId="2" />;
-};
-
-const StyledVideoComponent = () => {
-  return <Video css={{ width: 500, height: 300 }} trackId="2" />;
-};
-
-const VideoStories = {
-  title: 'Rendering Video/Video Component',
-  component: VideoComponent,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  parameters: {
-    docs: {
-      page: VideoDocs,
-    },
-  },
-};
-
-export default VideoStories;
-
-export const VideoExample = VideoComponent.bind({});
-export const StyledVideoExample = StyledVideoComponent.bind({});

package/src/Video/Video.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@stitches/react';
-import { HMSPeer, useVideo } from '@100mslive/react-sdk';
-import { styled } from '../Theme';
-
-export const StyledVideo = styled('video', {
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: '$2',
-  objectFit: 'cover',
-  background: '$background_default',
-  variants: {
-    mirror: {
-      true: {
-        transform: 'scaleX(-1)',
-      },
-    },
-    screenShare: {
-      true: {
-        objectFit: 'contain',
-      },
-    },
-    degraded: {
-      // send the video behind when it's degraded so avatar can show on top of it. Video will be stuck frame in this case.
-      // not hiding by using display none, because it will lead it to be detached as it will no longer be in view.
-      true: {
-        zIndex: -100,
-      },
-    },
-    noRadius: {
-      true: {
-        borderRadius: 0,
-      },
-    },
-  },
-  defaultVariants: {
-    mirror: false,
-  },
-});
-
-type StyledProps = VariantProps<typeof StyledVideo> & React.ComponentProps<typeof StyledVideo>;
-
-interface Props {
-  /**
-   * trackID for peer (videoTrack)
-   */
-  trackId: HMSPeer['videoTrack'];
-  /**
-   * Boolean stating whether to override the internal behaviour.
-   * when attach is false, even if tile is inView or enabled, it won't be rendered
-   */
-  attach?: boolean;
-}
-
-export const Video: React.FC<Props & StyledProps> = ({ trackId, attach, ...props }) => {
-  const { videoRef } = useVideo({ trackId, attach });
-  return <StyledVideo ref={videoRef} {...props} />;
-};

package/src/Video/index.tsx

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

package/src/VideoList/StyledVideoList.tsx

@@ -1,39 +0,0 @@
-import { styled } from '../Theme';
-
-const Root = styled('div', {
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const Container = styled('div', {
-  height: '100%',
-  width: '100%',
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-});
-
-const View = styled('div', {
-  height: '100%',
-  width: '100%',
-  position: 'absolute',
-  display: 'flex',
-  placeContent: 'center',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-});
-
-interface VideoListType {
-  Root: typeof Root;
-  Container: typeof Container;
-  View: typeof View;
-}
-
-export const StyledVideoList: VideoListType = {
-  Root,
-  Container,
-  View,
-};

package/src/VideoList/VideoList.stories.tsx

@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { selectPeers, useHMSStore, useVideoList } from '@100mslive/react-sdk';
-import { MicOffIcon } from '@100mslive/react-icons';
-import { Video } from '../Video/Video';
-import { StyledVideoTile } from '../VideoTile';
-import { StyledVideoList } from './StyledVideoList';
-import { getLeft } from './videoListUtils';
-
-const VideoListMeta = {
-  title: 'Video/VideoList',
-};
-
-export default VideoListMeta;
-
-const VideoTile: React.FC<{ width: number; height: number; trackId: string; name: string }> = ({
-  width,
-  height,
-  trackId,
-  name,
-}) => {
-  return (
-    <StyledVideoTile.Root css={{ width, height }}>
-      <StyledVideoTile.Container>
-        <Video trackId={trackId} />
-        <StyledVideoTile.Info>{name}</StyledVideoTile.Info>
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
-      </StyledVideoTile.Container>
-    </StyledVideoTile.Root>
-  );
-};
-
-interface VideoListProps {
-  maxTileCount: number;
-  aspectRatio: {
-    width: number;
-    height: number;
-  };
-}
-
-const VideoListStory: React.FC<VideoListProps> = ({ maxTileCount, aspectRatio }) => {
-  const peers = useHMSStore(selectPeers);
-  const [page] = useState(0);
-  const { ref, pagesWithTiles } = useVideoList({
-    peers,
-    offsetY: 50,
-    maxTileCount,
-    aspectRatio,
-  });
-  return (
-    <StyledVideoList.Root css={{ height: '100vh', width: '100%' }} ref={ref}>
-      <StyledVideoList.Container>
-        {pagesWithTiles && pagesWithTiles.length > 0
-          ? pagesWithTiles.map((tiles, pageNo) => (
-              <StyledVideoList.View
-                css={{
-                  left: getLeft(pageNo, page),
-                  transition: 'left 0.3s ease-in-out',
-                }}
-              >
-                {tiles.map((tile, i) =>
-                  tile.track?.source === 'screen' ? null : (
-                    <VideoTile
-                      key={tile.track?.id || tile.peer.id + i}
-                      width={tile.width}
-                      height={tile.height}
-                      trackId={tile.track?.id || ''}
-                      name={tile.peer.name}
-                    />
-                  ),
-                )}
-              </StyledVideoList.View>
-            ))
-          : null}
-      </StyledVideoList.Container>
-    </StyledVideoList.Root>
-  );
-};
-
-const Template: ComponentStory<typeof VideoListStory> = args => <VideoListStory {...args} />;
-
-export const Example = Template.bind({});
-
-Example.args = {
-  maxTileCount: 2,
-  aspectRatio: {
-    width: 2,
-    height: 1,
-  },
-};

package/src/VideoList/index.tsx

@@ -1,2 +0,0 @@
-export { getLeft } from './videoListUtils';
-export { StyledVideoList } from './StyledVideoList';

package/src/VideoList/videoListUtils.tsx

@@ -1,20 +0,0 @@
-export const getLeft = (index: number, currentPageIndex: number) => {
-  //active slide
-  if (index === currentPageIndex) {
-    return 0;
-  }
-  //prev slide
-  if (index + 1 === currentPageIndex) {
-    return '-100%';
-  }
-  //next slide
-  if (index - 1 === currentPageIndex) {
-    return '100%';
-  }
-  //all slides before prev
-  if (index < currentPageIndex) {
-    return '-200%';
-  }
-  //all slides after next
-  return '200%';
-};