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

package/src/Prebuilt/App.tsx

@@ -1,323 +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;
-  managementToken?: 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, managementToken } = {},
-      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;
-          passport: string;
-        }
-      | undefined;
-    const tokenByRoomCodeEndpoint = endpointsObj?.tokenByRoomCode;
-    const initEndpoint = endpointsObj?.init;
-    const eventEndpoint = endpointsObj?.event;
-    const roomLayoutEndpoint = endpointsObj?.roomLayout;
-    const passportEndpoint = endpointsObj?.passport;
-
-    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,
-            managementToken,
-            endpoints: {
-              tokenByRoomCode: tokenByRoomCodeEndpoint,
-              init: initEndpoint,
-              roomLayout: roomLayoutEndpoint,
-              event: eventEndpoint,
-              passport: passportEndpoint,
-            },
-          }}
-        >
-          <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,34 +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>;
-  managementToken?: string;
-  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/common/PeersSorter.ts

@@ -1,111 +0,0 @@
-import { HMSPeer, HMSPeerID, IStoreReadOnly, selectDominantSpeaker } from '@100mslive/react-sdk';
-
-class PeersSorter {
-  storeUnsubscribe: undefined | (() => void) = undefined;
-  store: IStoreReadOnly<any>;
-  peers: Map<string, HMSPeer>;
-  lruPeers: Set<HMSPeerID>;
-  tilesPerPage!: number;
-  speaker?: HMSPeer;
-  listeners: Set<(peers: HMSPeer[]) => void>;
-
-  constructor(store: IStoreReadOnly<any>) {
-    this.store = store;
-    this.peers = new Map();
-    this.lruPeers = new Set();
-    this.speaker = undefined;
-    this.listeners = new Set();
-  }
-
-  setPeersAndTilesPerPage = ({ peers, tilesPerPage }: { peers: HMSPeer[]; tilesPerPage: number }) => {
-    this.speaker = undefined;
-    this.tilesPerPage = tilesPerPage;
-    const peerIds = new Set(peers.map(peer => peer.id));
-    // remove existing peers which are no longer provided
-    this.peers.forEach((_, key) => {
-      if (!peerIds.has(key)) {
-        this.peers.delete(key);
-      }
-    });
-    this.lruPeers = new Set([...this.lruPeers].filter(peerId => peerIds.has(peerId)));
-    peers.forEach(peer => {
-      this.peers.set(peer.id, peer);
-      if (this.lruPeers.size < tilesPerPage) {
-        this.lruPeers.add(peer.id);
-      }
-    });
-    if (!this.storeUnsubscribe) {
-      this.storeUnsubscribe = this.store.subscribe(this.onDominantSpeakerChange, selectDominantSpeaker);
-    }
-    this.moveSpeakerToFront(this.speaker);
-  };
-
-  onUpdate = (cb: (peers: HMSPeer[]) => void) => {
-    this.listeners.add(cb);
-  };
-
-  stop = () => {
-    this.updateListeners();
-    this.listeners.clear();
-    this.storeUnsubscribe?.();
-    this.storeUnsubscribe = undefined;
-    this.speaker = undefined;
-  };
-
-  moveSpeakerToFront = (speaker?: HMSPeer) => {
-    if (!speaker) {
-      this.maintainLruSize(this.tilesPerPage);
-      this.updateListeners();
-      return;
-    }
-    if (this.lruPeers.has(speaker.id) && this.lruPeers.size <= this.tilesPerPage) {
-      this.updateListeners();
-      return;
-    }
-    // delete to insert at beginning
-    this.lruPeers.delete(speaker.id);
-    // - 1 as we are going to insert the new speaker
-    this.maintainLruSize(this.tilesPerPage - 1);
-    this.lruPeers = new Set([speaker.id, ...this.lruPeers]);
-    this.updateListeners();
-  };
-
-  onDominantSpeakerChange = (speaker: HMSPeer | null) => {
-    // no speaker or is current speaker do nothing
-    if (!speaker || speaker.id === this.speaker?.id) {
-      return;
-    }
-    // if the active speaker is not from the peers passed ignore
-    if (!this.peers.has(speaker.id)) {
-      return;
-    }
-    this.speaker = speaker;
-    this.moveSpeakerToFront(speaker);
-  };
-
-  updateListeners = () => {
-    const orderedPeers: HMSPeer[] = [];
-    this.lruPeers.forEach(key => {
-      const peer = this.peers.get(key);
-      if (peer) {
-        orderedPeers.push(peer);
-      }
-    });
-    this.peers.forEach(peer => {
-      if (!this.lruPeers.has(peer.id) && peer) {
-        orderedPeers.push(peer);
-      }
-    });
-    this.listeners.forEach(listener => listener?.(orderedPeers));
-  };
-
-  private maintainLruSize = (size: number) => {
-    const lruPeerArray = Array.from(this.lruPeers);
-    while (lruPeerArray.length > size && lruPeerArray.length) {
-      lruPeerArray.pop();
-    }
-    this.lruPeers = new Set(lruPeerArray);
-  };
-}
-
-export default PeersSorter;