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

package/src/Popover/Popover.stories.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CrossIcon, VerticalMenuIcon } from '@100mslive/react-icons';
-import { Button } from '../Button';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { Box, Flex } from '../Layout';
-import { Text } from '../Text';
-import { Popover } from './index';
-import PopoverDocs from './Popover.mdx';
-
-export default {
-  title: 'UI Components/Popover',
-  component: Popover.Root,
-  argTypes: { onClick: { action: 'clicked' } },
-  args: {
-    css: {},
-  },
-  parameters: {
-    docs: {
-      page: PopoverDocs,
-    },
-  },
-} as ComponentMeta<typeof Popover.Root>;
-
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Popover.Root> = () => (
-  <Flex css={{ w: '$80' }} justify="center">
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <Button
-          variant="standard"
-          css={{
-            aspectRatio: '1',
-            r: '$round',
-            p: '$2 $2',
-            bg: '$background_default',
-            '&:hover': { bg: '$background_dim !important' },
-          }}
-        >
-          <Box css={{ w: '$10', h: '$10', c: '$on_primary_high' }}>
-            <VerticalMenuIcon />
-          </Box>
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content align="center" side="bottom" sideOffset={10}>
-        <Flex css={{ flexDirection: 'column', gap: 10 }} justify="center" align="center">
-          <Flex direction="row" justify="between" css={{ width: '100%' }}>
-            <Text as="div" variant="caption" css={{ color: '$on_surface_medium' }}>
-              Dimensions
-            </Text>
-            <Box css={{ color: '$on_surface_medium' }}>
-              <CrossIcon width="0.75rem" height="0.75rem" />
-            </Box>
-          </Flex>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="width" asChild>
-              <Text as="span" variant="sub2">
-                Width
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="maxWidth" asChild>
-              <Text as="span" variant="sub2">
-                Max. width
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="height" asChild>
-              <Text as="span" variant="sub2">
-                Height
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-          <Fieldset css={{ justifyContent: 'between', width: '100%' }}>
-            <Label htmlFor="maxHeight" asChild>
-              <Text as="span" variant="sub2">
-                Max. height
-              </Text>
-            </Label>
-            <Input />
-          </Fieldset>
-        </Flex>
-      </Popover.Content>
-    </Popover.Root>
-  </Flex>
-);
-export const Example = Template.bind({});
-Example.storyName = 'Popover';

package/src/Popover/index.tsx

@@ -1,34 +0,0 @@
-import { Arrow, Close, Content, Popover as Root, Portal, Trigger } from '@radix-ui/react-popover';
-import { styled } from '../Theme';
-import { popoverAnimation } from '../utils/animations';
-
-const StyledContent = styled(Content, {
-  padding: '$6',
-  borderRadius: '$2',
-  backgroundColor: '$background_default',
-  boxShadow: '$sm',
-  zIndex: 12,
-  ...popoverAnimation,
-});
-
-const StyledArrow = styled(Arrow, {
-  ...popoverAnimation,
-});
-
-const StyledTrigger = styled(Trigger, {
-  '&:hover': {
-    cursor: 'pointer',
-  },
-  '&:focus-visible': {
-    boxShadow: '0 0 0 3px $colors$primary_default',
-  },
-});
-
-export const Popover = {
-  Root,
-  Content: StyledContent,
-  Trigger: StyledTrigger,
-  Portal: Portal,
-  Arrow: StyledArrow,
-  Close: Close,
-};

package/src/Prebuilt/App.tsx

@@ -1,318 +0,0 @@
-import React, { MutableRefObject, useEffect, useRef } from 'react';
-import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import {
-  HMSActions,
-  HMSReactiveStore,
-  HMSRoomProvider,
-  HMSStatsStoreWrapper,
-  HMSStoreWrapper,
-  IHMSNotifications,
-  selectIsConnectedToRoom,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { AppData } from './components/AppData/AppData';
-// @ts-ignore: No implicit Any
-import AuthToken from './components/AuthToken';
-import { ConferenceScreen } from './components/ConferenceScreen';
-// @ts-ignore: No implicit Any
-import { ErrorBoundary } from './components/ErrorBoundary';
-// @ts-ignore: No implicit Any
-import { Init } from './components/init/Init';
-// @ts-ignore: No implicit Any
-import { KeyboardHandler } from './components/Input/KeyboardInputManager';
-import { LeaveScreen } from './components/LeaveScreen';
-import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
-import { Notifications } from './components/Notifications';
-import { PIPProvider } from './components/PIP/PIPProvider';
-import { PreviewScreen } from './components/Preview/PreviewScreen';
-// @ts-ignore: No implicit Any
-import { ToastContainer } from './components/Toast/ToastContainer';
-import { Sheet } from './layouts/Sheet';
-import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
-import { DialogContainerProvider } from '../context/DialogContext';
-import { Box } from '../Layout';
-import { globalStyles, HMSThemeProvider } from '../Theme';
-import { HMSPrebuiltContext } from './AppContext';
-import { AppStateContext, PrebuiltStates, useAppStateManager } from './AppStateContext';
-// @ts-ignore: No implicit Any
-import { FlyingEmoji } from './plugins/FlyingEmoji';
-// @ts-ignore: No implicit Any
-import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
-// @ts-ignore: No implicit Any
-import { useIsNotificationDisabled } from './components/AppData/useUISettings';
-import { useAutoStartStreaming } from './components/hooks/useAutoStartStreaming';
-import {
-  useRoomLayoutLeaveScreen,
-  useRoomLayoutPreviewScreen,
-} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit Any
-import { FeatureFlags } from './services/FeatureFlags';
-// @ts-ignore: No implicit Any
-import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
-
-export type HMSPrebuiltOptions = {
-  userName?: string;
-  userId?: string;
-  endpoints?: object;
-  effectsSDKKey?: string;
-};
-
-export type HMSPrebuiltProps = {
-  roomCode?: string;
-  logo?: Logo;
-  typography?: Typography;
-  themes?: Theme[];
-  options?: HMSPrebuiltOptions;
-  screens?: Screens;
-  authToken?: string;
-  leaveOnUnload?: boolean;
-  onLeave?: () => void;
-  onJoin?: () => void;
-  /**
-   * @remarks
-   * Specify css selectors for the HTML element to be used as container for dialogs. Affects the positioning and focus of dialogs.
-   */
-  containerSelector?: string;
-};
-
-export type HMSPrebuiltRefType = {
-  hmsActions: HMSActions;
-  hmsStore: HMSStoreWrapper;
-  hmsStats: HMSStatsStoreWrapper;
-  hmsNotifications: IHMSNotifications;
-};
-
-export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps>(
-  (
-    {
-      roomCode = '',
-      authToken = '',
-      containerSelector = DEFAULT_PORTAL_CONTAINER,
-      logo,
-      typography,
-      themes,
-      options: { userName = '', userId = '', endpoints } = {},
-      screens,
-      leaveOnUnload = true,
-      onLeave,
-      onJoin,
-    },
-    ref,
-  ) => {
-    const reactiveStore = useRef<HMSPrebuiltRefType>();
-    const [hydrated, setHydrated] = React.useState(false);
-
-    useEffect(() => {
-      setHydrated(true);
-      const hms = new HMSReactiveStore();
-      const hmsStore = hms.getStore();
-      const hmsActions = hms.getActions();
-      const hmsNotifications = hms.getNotifications();
-      const hmsStats = hms.getStats();
-      hms.triggerOnSubscribe();
-
-      reactiveStore.current = {
-        hmsActions,
-        hmsStats,
-        hmsStore,
-        hmsNotifications,
-      };
-    }, []);
-
-    useEffect(() => {
-      if (!ref || !reactiveStore.current) {
-        return;
-      }
-      (ref as MutableRefObject<HMSPrebuiltRefType>).current = { ...reactiveStore.current };
-    }, [ref]);
-
-    useEffect(() => {
-      // leave room when component unmounts
-      return () => {
-        reactiveStore?.current?.hmsActions.leave();
-      };
-    }, []);
-
-    const endpointsObj = endpoints as
-      | {
-          init: string;
-          tokenByRoomCode: string;
-          roomLayout: string;
-          event: string;
-        }
-      | undefined;
-    const tokenByRoomCodeEndpoint = endpointsObj?.tokenByRoomCode;
-    const initEndpoint = endpointsObj?.init;
-    const eventEndpoint = endpointsObj?.event;
-    const roomLayoutEndpoint = endpointsObj?.roomLayout;
-
-    const overrideLayout: Partial<Layout> = {
-      logo,
-      themes,
-      typography,
-      screens,
-    };
-
-    if (!roomCode && !authToken) {
-      console.error(`
-          HMSPrebuilt can be initialised by providing: 
-          either "roomCode" or "authToken".
-          Please check if you are providing the above values for initialising prebuilt.
-        `);
-      throw Error('Incorrect initializing params for HMSPrebuilt component');
-    }
-
-    if (!hydrated) {
-      return null;
-    }
-
-    globalStyles();
-
-    return (
-      <ErrorBoundary>
-        <HMSPrebuiltContext.Provider
-          value={{
-            roomCode,
-            containerSelector,
-            onLeave,
-            onJoin,
-            userName,
-            userId,
-            endpoints: {
-              tokenByRoomCode: tokenByRoomCodeEndpoint,
-              init: initEndpoint,
-              roomLayout: roomLayoutEndpoint,
-              event: eventEndpoint,
-            },
-          }}
-        >
-          <HMSRoomProvider
-            isHMSStatsOn={FeatureFlags.enableStatsForNerds}
-            actions={reactiveStore.current?.hmsActions}
-            store={reactiveStore.current?.hmsStore}
-            notifications={reactiveStore.current?.hmsNotifications}
-            stats={reactiveStore.current?.hmsStats}
-            leaveOnUnload={leaveOnUnload}
-          >
-            <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>
-              <RoomLayoutContext.Consumer>
-                {data => {
-                  const layout = data?.layout;
-                  const theme: Theme = layout?.themes?.[0] || ({} as Theme);
-                  const { typography } = layout || {};
-                  let fontFamily = ['sans-serif'];
-                  if (typography?.font_family) {
-                    fontFamily = [`${typography?.font_family}`, ...fontFamily];
-                  }
-
-                  return (
-                    <HMSThemeProvider
-                      // issue is with stitches caching the theme using the theme name / class
-                      // no updates to the themes are fired if the name is same.
-                      // TODO: cache the theme and do deep check to trigger name change in the theme
-                      themeType={`${theme.name}-${Date.now()}`}
-                      theme={{
-                        //@ts-ignore: Prebuilt theme to match stitches theme
-                        colors: theme.palette,
-                        fonts: {
-                          //@ts-ignore: font list to match token types of stitches
-                          sans: fontFamily,
-                        },
-                      }}
-                    >
-                      <PIPProvider>
-                        <Init />
-                        <DialogContainerProvider dialogContainerSelector={containerSelector}>
-                          <Box
-                            className={DEFAULT_PORTAL_CONTAINER.slice(1)} // Skips the '.' in the selector
-                            css={{
-                              bg: '$background_dim',
-                              size: '100%',
-                              lineHeight: '1.5',
-                              '-webkit-text-size-adjust': '100%',
-                              position: 'relative',
-                            }}
-                          >
-                            <AppRoutes
-                              authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint}
-                              defaultAuthToken={authToken}
-                            />
-                          </Box>
-                        </DialogContainerProvider>
-                      </PIPProvider>
-                    </HMSThemeProvider>
-                  );
-                }}
-              </RoomLayoutContext.Consumer>
-            </RoomLayoutProvider>
-          </HMSRoomProvider>
-        </HMSPrebuiltContext.Provider>
-      </ErrorBoundary>
-    );
-  },
-);
-
-HMSPrebuilt.displayName = 'HMSPrebuilt';
-
-const AppStates = ({ activeState }: { activeState: PrebuiltStates }) => {
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
-  useAutoStartStreaming();
-
-  return match({ activeState, isPreviewScreenEnabled, isLeaveScreenEnabled })
-    .with({ activeState: PrebuiltStates.PREVIEW, isPreviewScreenEnabled: true }, () => <PreviewScreen />)
-    .with({ activeState: PrebuiltStates.LEAVE, isLeaveScreenEnabled: true }, () => <LeaveScreen />)
-    .otherwise(() => <ConferenceScreen />);
-};
-
-const BackSwipe = () => {
-  const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
-  const hmsActions = useHMSActions();
-  useEffect(() => {
-    const onRouteLeave = async () => {
-      if (isConnectedToRoom) {
-        await hmsActions.leave();
-      }
-    };
-    window.addEventListener('popstate', onRouteLeave);
-    return () => {
-      window.removeEventListener('popstate', onRouteLeave);
-    };
-  }, [hmsActions, isConnectedToRoom]);
-  return null;
-};
-
-function AppRoutes({
-  authTokenByRoomCodeEndpoint,
-  defaultAuthToken,
-}: {
-  authTokenByRoomCodeEndpoint?: string;
-  defaultAuthToken?: string;
-}) {
-  const roomLayout = useRoomLayout();
-  const isNotificationsDisabled = useIsNotificationDisabled();
-  const { activeState, rejoin } = useAppStateManager();
-  return (
-    <AppStateContext.Provider value={{ rejoin }}>
-      <>
-        {activeState !== PrebuiltStates.LEAVE && <AppData />}
-        <ToastContainer />
-        <Notifications />
-        <MwebLandscapePrompt />
-        <Sheet />
-        <BackSwipe />
-        {!isNotificationsDisabled && <FlyingEmoji />}
-        <RemoteStopScreenshare />
-        <KeyboardHandler />
-        <AuthToken
-          authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint}
-          defaultAuthToken={defaultAuthToken}
-          activeState={activeState}
-        />
-        {roomLayout && activeState && <AppStates activeState={activeState} />}
-      </>
-    </AppStateContext.Provider>
-  );
-}

package/src/Prebuilt/AppContext.tsx

@@ -1,33 +0,0 @@
-import React, { useContext } from 'react';
-// @ts-ignore
-import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
-
-type HMSPrebuiltContextType = {
-  roomCode: string;
-  userName?: string;
-  userId?: string;
-  containerSelector: string;
-  endpoints?: Record<string, string | undefined>;
-  onLeave?: () => void;
-  onJoin?: () => void;
-};
-
-export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
-  roomCode: '',
-  userName: '',
-  userId: '',
-  containerSelector: DEFAULT_PORTAL_CONTAINER,
-  endpoints: {},
-  onLeave: undefined,
-  onJoin: undefined,
-});
-
-HMSPrebuiltContext.displayName = 'HMSPrebuiltContext';
-
-export const useHMSPrebuiltContext = () => {
-  const context = useContext(HMSPrebuiltContext);
-  if (!context) {
-    throw Error('Make sure HMSPrebuiltContext.Provider is present at the top level of your application');
-  }
-  return context;
-};

package/src/Prebuilt/AppStateContext.tsx

@@ -1,95 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { usePreviousDistinct } from 'react-use';
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-import { match, P } from 'ts-pattern';
-import { HMSRoomState, selectRoomState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { VBHandler } from './components/VirtualBackground/VBHandler';
-import { useRoomLayout, useSetOriginalLayout } from './provider/roomLayoutProvider';
-import { useRedirectToLeave } from './components/hooks/useRedirectToLeave';
-import {
-  useRoomLayoutLeaveScreen,
-  useRoomLayoutPreviewScreen,
-} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { APP_DATA } from './common/constants';
-
-export enum PrebuiltStates {
-  MEETING = 'meeting',
-  PREVIEW = 'preview',
-  LEAVE = 'leave',
-}
-
-type AppStateContextType = {
-  rejoin: () => void;
-};
-
-export const AppStateContext = React.createContext<AppStateContextType>({
-  rejoin: () => {
-    console.log('Rejoin');
-  },
-});
-
-AppStateContext.displayName = 'AppStateContext';
-
-export const useHMSAppStateContext = () => {
-  const context = useContext(AppStateContext);
-  if (!context) {
-    throw Error('Make sure AppStateContext.Provider is present at the top level of your application');
-  }
-  return context;
-};
-
-export const useAppStateManager = () => {
-  const roomLayout = useRoomLayout();
-  const setOriginalLayout = useSetOriginalLayout();
-  const [activeState, setActiveState] = React.useState<PrebuiltStates | undefined>();
-  const roomState = useHMSStore(selectRoomState);
-  const prevRoomState = usePreviousDistinct(roomState);
-  const hmsActions = useHMSActions();
-  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
-  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const { redirectToLeave } = useRedirectToLeave();
-
-  const rejoin = () => {
-    setOriginalLayout?.();
-    hmsActions.setAppData(APP_DATA.authToken, '');
-    setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
-  };
-
-  useEffect(() => {
-    if (!roomLayout) {
-      return;
-    }
-    match([roomState, prevRoomState])
-      .with([HMSRoomState.Connected, P.any], () => setActiveState(PrebuiltStates.MEETING))
-      .with(
-        [HMSRoomState.Disconnecting, HMSRoomState.Connected],
-        [HMSRoomState.Disconnecting, HMSRoomState.Connecting],
-        [HMSRoomState.Disconnecting, HMSRoomState.Reconnecting],
-        [HMSRoomState.Disconnected, HMSRoomState.Connected],
-        [HMSRoomState.Disconnected, HMSRoomState.Connecting],
-        [HMSRoomState.Disconnected, HMSRoomState.Reconnecting],
-        [HMSRoomState.Disconnected, HMSRoomState.Preview],
-        () => {
-          setActiveState(prevState => {
-            return match({ isLeaveScreenEnabled, isPreviewScreenEnabled, prevState })
-              .when(
-                ({ isLeaveScreenEnabled, prevState }) => isLeaveScreenEnabled && prevState !== PrebuiltStates.LEAVE,
-                () => PrebuiltStates.LEAVE,
-              )
-              .with({ isPreviewScreenEnabled: true }, () => PrebuiltStates.PREVIEW)
-              .otherwise(() => PrebuiltStates.MEETING);
-          });
-          VBHandler.reset();
-          hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
-          redirectToLeave(1000); // to clear toasts after 1 second
-        },
-      )
-      .with([HMSRoomState.Disconnected, P.nullish], () => {
-        setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
-      })
-      .otherwise(() => {
-        // do nothing
-      });
-  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave, hmsActions]);
-  return { activeState, rejoin };
-};

package/src/Prebuilt/IconButton.tsx

@@ -1,26 +0,0 @@
-import { IconButton as BaseIconButton } from '../IconButton';
-import { styled } from '../Theme';
-
-const IconButton = styled(BaseIconButton, {
-  width: '$14',
-  height: '$14',
-  border: '1px solid $border_bright',
-  bg: '$background_dim',
-  r: '$1',
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    backgroundColor: '$secondary_dim',
-    color: '$on_primary_high',
-  },
-  variants: {
-    active: {
-      true: {
-        color: '$on_surface_high',
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-});
-
-export default IconButton;

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { HMSPrebuilt, HMSPrebuiltOptions, HMSPrebuiltProps } from '.';
-
-export default {
-  title: 'UI Components/Prebuilt',
-  component: HMSPrebuilt,
-  argTypes: {
-    roomCode: { control: { type: 'text' }, defaultValue: '' },
-    logo: { control: { type: 'object' }, defaultValue: null },
-    typography: { control: { type: 'object' }, defaultValue: 'Roboto' },
-    options: { control: { type: 'object' }, defaultValue: {} },
-  },
-} as Meta<typeof HMSPrebuilt>;
-
-const PrebuiltRoomCodeStory: StoryFn<typeof HMSPrebuilt> = ({
-  roomCode = '',
-  logo,
-  themes,
-  typography,
-  options,
-}: HMSPrebuiltProps) => {
-  return <HMSPrebuilt roomCode={roomCode} logo={logo} options={options} themes={themes} typography={typography} />;
-};
-
-export const Example = PrebuiltRoomCodeStory.bind({});
-const endpoints: HMSPrebuiltOptions['endpoints'] = {
-  roomLayout: process.env.STORYBOOK_ROOM_LAYOUT_ENDPOINT,
-  tokenByRoomCode: process.env.STORYBOOK_TOKEN_BY_ROOM_CODE_ENDPOINT,
-  init: process.env.STORYBOOK_INIT_API_ENDPOINT,
-  event: process.env.STORYBOOK_EVENT_API_ENDPOINT,
-};
-
-const hasEndpoints = Object.values(endpoints).some(val => !!val);
-
-Example.args = {
-  roomCode: process.env.STORYBOOK_SAMPLE_ROOM_CODE,
-  options: {
-    userName: '',
-    userId: '',
-    endpoints: hasEndpoints ? endpoints : undefined,
-  },
-  typography: {
-    font_family: 'Roboto',
-  },
-};