feat: remove router from prebuilt

100mslive · Oct 10, 2023 · a4bc842 · a4bc842
1 parent 710275c
commit a4bc842
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 121 deletions.
diff --git a/packages/roomkit-react/.eslintrc b/packages/roomkit-react/.eslintrc
@@ -10,6 +10,7 @@
   "plugins": ["prettier", "simple-import-sort"],
   "rules": {
     "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-unused-vars": "error",
     "no-unused-vars": [
       "error",
       {

diff --git a/packages/roomkit-react/package.json b/packages/roomkit-react/package.json
diff --git a/packages/roomkit-react/src/Prebuilt/App.tsx b/packages/roomkit-react/src/Prebuilt/App.tsx
@@ -1,5 +1,4 @@
-import React, { MutableRefObject, ReactElement, Suspense, useEffect, useRef } from 'react';
-import { BrowserRouter, MemoryRouter, Navigate, Route, Routes, useParams } from 'react-router-dom';
+import React, { MutableRefObject, useEffect, useRef } from 'react';
 import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 import {
@@ -15,9 +14,9 @@ import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
 // @ts-ignore: No implicit Any
-import { ErrorBoundary } from './components/ErrorBoundary';
+import Conference from './components/Conference';
 // @ts-ignore: No implicit Any
-import FullPageProgress from './components/FullPageProgress';
+import { ErrorBoundary } from './components/ErrorBoundary';
 // @ts-ignore: No implicit Any
 import { Init } from './components/init/Init';
 // @ts-ignore: No implicit Any
@@ -33,7 +32,8 @@ import { ToastContainer } from './components/Toast/ToastContainer';
 import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { Box } from '../Layout';
 import { globalStyles, HMSThemeProvider } from '../Theme';
-import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
+import { HMSPrebuiltContext } from './AppContext';
+import { AppStateContext, PrebuiltStates } from './AppStateContext';
 // @ts-ignore: No implicit Any
 import { FlyingEmoji } from './plugins/FlyingEmoji';
 // @ts-ignore: No implicit Any
@@ -48,9 +48,6 @@ import {
 // @ts-ignore: No implicit Any
 import { FeatureFlags } from './services/FeatureFlags';
 
-// @ts-ignore: No implicit Any
-const Conference = React.lazy(() => import('./components/conference'));
-
 export type HMSPrebuiltOptions = {
   userName?: string;
   userId?: string;
@@ -245,66 +242,22 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
 
 HMSPrebuilt.displayName = 'HMSPrebuilt';
 
-const Redirector = ({ showPreview }: { showPreview: boolean }) => {
-  const { roomId, role } = useParams();
-  return <Navigate to={`/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;
-};
-
-const RouteList = () => {
+const AppStates = ({ activeState }: { activeState: PrebuiltStates }) => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   useAutoStartStreaming();
-  return (
-    <Routes>
-      {isPreviewScreenEnabled ? (
-        <Route path="preview">
-          <Route
-            path=":roomId/:role"
-            element={
-              <Suspense fallback={<FullPageProgress text="Loading preview..." />}>
-                <PreviewContainer />
-              </Suspense>
-            }
-          />
-          <Route
-            path=":roomId"
-            element={
-              <Suspense fallback={<FullPageProgress text="Loading preview..." />}>
-                <PreviewContainer />
-              </Suspense>
-            }
-          />
-        </Route>
-      ) : null}
-      <Route path="meeting">
-        <Route
-          path=":roomId/:role"
-          element={
-            <Suspense fallback={<FullPageProgress text="Joining..." />}>
-              <Conference />
-            </Suspense>
-          }
-        />
-        <Route
-          path=":roomId"
-          element={
-            <Suspense fallback={<FullPageProgress text="Joining..." />}>
-              <Conference />
-            </Suspense>
-          }
-        />
-      </Route>
-      {isLeaveScreenEnabled ? (
-        <Route path="leave">
-          <Route path=":roomId/:role" element={<PostLeave />} />
-          <Route path=":roomId" element={<PostLeave />} />
-        </Route>
-      ) : null}
 
-      <Route path="/:roomId/:role" element={<Redirector showPreview={isPreviewScreenEnabled} />} />
-      <Route path="/:roomId/" element={<Redirector showPreview={isPreviewScreenEnabled} />} />
-    </Routes>
-  );
+  function renderContent(state: PrebuiltStates) {
+    switch (state) {
+      case PrebuiltStates.PREVIEW:
+        return isPreviewScreenEnabled ? <PreviewContainer /> : null;
+      case PrebuiltStates.MEETING:
+        return <Conference />;
+      case PrebuiltStates.LEAVE:
+        return isLeaveScreenEnabled ? <PostLeave /> : null;
+    }
+  }
+  return <>{renderContent(activeState)}</>;
 };
 
 const BackSwipe = () => {
@@ -324,17 +277,6 @@ const BackSwipe = () => {
   return null;
 };
 
-const Router = ({ children }: { children: ReactElement }) => {
-  const { roomId, role, roomCode } = useHMSPrebuiltContext();
-  return [roomId, role, roomCode].every(value => !value) ? (
-    <BrowserRouter>{children}</BrowserRouter>
-  ) : (
-    <MemoryRouter initialEntries={[`/${roomCode ? roomCode : `${roomId}/${role || ''}`}`]} initialIndex={0}>
-      {children}
-    </MemoryRouter>
-  );
-};
-
 function AppRoutes({
   authTokenByRoomCodeEndpoint,
   defaultAuthToken,
@@ -344,8 +286,15 @@ function AppRoutes({
 }) {
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
+  const [activeState, setActiveState] = React.useState<PrebuiltStates | undefined>();
+
+  useEffect(() => {
+    if (roomLayout) {
+      setActiveState(roomLayout.screens?.preview ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
+    }
+  }, [roomLayout]);
   return (
-    <Router>
+    <AppStateContext.Provider value={{ activeState, setActiveState }}>
       <>
         <ToastContainer />
         <Notifications />
@@ -355,12 +304,8 @@ function AppRoutes({
         <HeadlessEndRoomListener />
         <KeyboardHandler />
         <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
-        {roomLayout && (
-          <Routes>
-            <Route path="/*" element={<RouteList />} />
-          </Routes>
-        )}
+        {roomLayout && activeState && <AppStates activeState={activeState} />}
       </>
-    </Router>
+    </AppStateContext.Provider>
   );
 }
diff --git a/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx b/packages/roomkit-react/src/Prebuilt/AppStateContext.tsx
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+
+export enum PrebuiltStates {
+  MEETING = 'meeting',
+  PREVIEW = 'preview',
+  LEAVE = 'leave',
+}
+
+type AppStateContextType = {
+  activeState?: PrebuiltStates;
+  setActiveState: (state: PrebuiltStates) => void;
+};
+
+export const AppStateContext = React.createContext<AppStateContextType>({
+  setActiveState: (state: PrebuiltStates) => {
+    console.log('_state', state);
+  },
+});
+
+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;
+};
diff --git a/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx b/packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable no-case-declarations */
 import React, { useCallback, useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
@@ -14,6 +13,7 @@ import {
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { Button } from '../../..';
+import { PrebuiltStates, useHMSAppStateContext } from '../../AppStateContext';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
@@ -27,6 +27,7 @@ import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
+import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { usePollViewToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
@@ -39,13 +40,13 @@ import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
-  const navigate = useNavigate();
-  const params = useParams();
   const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const { redirectToLeave } = useRedirectToLeave();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const { setActiveState } = useHMSAppStateContext();
   const vanillaStore = useHMSVanillaStore();
   const togglePollView = usePollViewToggle();
 
@@ -106,7 +107,7 @@ export function Notifications() {
                 <Button
                   onClick={() => {
                     ToastManager.removeToast(toastId);
-                    navigate(`/${params.roomId}${params.role ? `/${params.role}` : ''}`);
+                    setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
                   }}
                 >
                   Rejoin

diff --git a/packages/roomkit-react/src/Prebuilt/components/PostLeave.jsx b/packages/roomkit-react/src/Prebuilt/components/PostLeave.jsx
@@ -1,21 +1,18 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { ExitIcon } from '@100mslive/react-icons';
 import { ToastManager } from './Toast/ToastManager';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
-import { useHMSPrebuiltContext } from '../AppContext';
+import { PrebuiltStates, useHMSAppStateContext } from '../AppStateContext';
 import { Header } from './Header';
 import { useRoomLayoutPreviewScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';
 import { textEllipsis } from '../../utils';
 
 const PostLeave = () => {
-  const navigate = useNavigate();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
-  const { roomCode } = useHMSPrebuiltContext();
-  const { roomId, role } = useParams();
+  const { setActiveState } = useHMSAppStateContext();
   const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
   return (
     <Flex direction="column" css={{ size: '100%' }}>
@@ -57,9 +54,7 @@ const PostLeave = () => {
           </Text>
           <Button
             onClick={() => {
-              let redirectUrl = `${isPreviewScreenEnabled ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
-              if (role && roomId) redirectUrl += '/' + role;
-              navigate(redirectUrl);
+              setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
               ToastManager.clearAllToast();
             }}
             data-testid="join_again_btn"

diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewContainer.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewContainer.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { useSearchParam } from 'react-use';
 import { Flex } from '../../..';
 import { useHMSPrebuiltContext } from '../../AppContext';
+import { PrebuiltStates, useHMSAppStateContext } from '../../AppStateContext';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import FullPageProgress from '../FullPageProgress';
@@ -15,23 +15,23 @@ import { useAuthToken } from '../AppData/useUISettings';
 import { QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
 
 const PreviewContainer = () => {
-  const navigate = useNavigate();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const skipPreview = !isPreviewScreenEnabled;
   const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
   const { userName } = useHMSPrebuiltContext();
   const initialName = userName || (skipPreview ? 'Beam' : '');
-  const { roomId: urlRoomId, role: userRole } = useParams(); // from the url
   const authToken = useAuthToken();
   const roomLayout = useRoomLayout();
+  const { setActiveState } = useHMSAppStateContext();
   const { preview_header: previewHeader = {} } = roomLayout?.screens?.preview?.default?.elements || {};
 
   const onJoin = () => {
-    let meetingURL = `/meeting/${urlRoomId}`;
-    if (userRole) {
-      meetingURL += `/${userRole}`;
-    }
-    navigate(meetingURL);
+    // let meetingURL = `/meeting/${urlRoomId}`;
+    // if (userRole) {
+    //   meetingURL += `/${userRole}`;
+    // }
+    // navigate(meetingURL);
+    setActiveState(PrebuiltStates.MEETING);
   };
   return (
     <Flex direction="column" css={{ size: '100%' }}>

diff --git a/packages/roomkit-react/src/Prebuilt/components/conference.jsx b/packages/roomkit-react/src/Prebuilt/components/conference.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { usePrevious } from 'react-use';
+// import { usePrevious } from 'react-use';
 import {
   HMSRoomState,
   selectAppData,
@@ -27,13 +26,11 @@ import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
 import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
 
 const Conference = () => {
-  const navigate = useNavigate();
-  const { roomId, role } = useParams();
   const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
   const screenProps = useRoomLayoutConferencingScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const roomState = useHMSStore(selectRoomState);
-  const prevState = usePrevious(roomState);
+  // const prevState = usePrevious(roomState);
   const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
   const [hideControls, setHideControls] = useState(false);
@@ -67,7 +64,7 @@ const Conference = () => {
     };
   }, [dropdownList, hideControls, isMobileDevice]);
 
-  useEffect(() => {
+  /* useEffect(() => {
     if (!roomId) {
       navigate(`/`);
       return;
@@ -82,9 +79,10 @@ const Conference = () => {
       if (role) navigate(`/preview/${roomId || ''}/${role}`);
       else navigate(`/preview/${roomId || ''}`);
     }
-  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]);
+  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, isPreviewScreenEnabled]); */
 
   useEffect(() => {
+    console.log({ authTokenInAppData, isConnectedToRoom, isPreviewScreenEnabled, roomState, autoRoomJoined });
     if (
       authTokenInAppData &&
       !isConnectedToRoom &&