@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.9-alpha.0

package/dist/utils/animations.d.ts

@@ -6,6 +6,17 @@ export declare const slideUp: (controller: string) => {
     (): string;
     name: string;
 };
+export declare const translateAcross: ({ xFrom, yFrom, zFrom, xTo, yTo, zTo }: {
+    xFrom?: string | undefined;
+    yFrom?: string | undefined;
+    zFrom?: string | undefined;
+    xTo?: string | undefined;
+    yTo?: string | undefined;
+    zTo?: string | undefined;
+}) => {
+    (): string;
+    name: string;
+};
 export declare const dialogOpen: {
     (): string;
     name: string;

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.8-alpha.0",
+  "version": "0.1.9-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.17-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.17-alpha.0",
-    "@100mslive/react-icons": "0.8.17-alpha.0",
-    "@100mslive/react-sdk": "0.8.17-alpha.0",
+    "@100mslive/hls-player": "0.1.18-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.18-alpha.0",
+    "@100mslive/react-icons": "0.8.18-alpha.0",
+    "@100mslive/react-sdk": "0.8.18-alpha.0",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -106,7 +106,6 @@
     "qrcode.react": "^3.1.0",
     "react-draggable": "^4.4.5",
     "react-intersection-observer": "^9.4.3",
-    "react-router-dom": "^6.3.0",
     "react-use": "^17.4.0",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.7",
@@ -115,5 +114,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "d6e072de081b508a297ebc1684a33a8e9db048ef"
+  "gitHead": "c8ed9e77d556152e44e6ecee18e13355695d18c5"
 }

package/src/AudioLevel/AudioLevel.tsx

@@ -27,7 +27,7 @@ const barAnimation = keyframes({
   to: {
     maskSize: '4em .8em',
     '-webkit-mask-position-y': '.1em',
-    maskPosition: 'initial 0',
+    maskPosition: 'initial 0.1em',
   },
 });
 

package/src/Modal/Dialog.tsx

@@ -1,5 +1,7 @@
+import React, { ReactNode, useRef } from 'react';
 import { Root } from '@radix-ui/react-dialog';
 import { styled } from '@stitches/react';
+import { CSS } from '../Theme';
 import {
   DialogClose,
   DialogDefaultCloseIcon,
@@ -10,17 +12,43 @@ import {
   StyledDialogPortal,
   StyledDialogTrigger,
 } from './DialogContent';
+import { useDialogContainerSelector } from '../hooks/useDialogContainerSelector';
 
 const StyledDialog = styled(Root, {});
+const CustomDialogContent = ({ children, props = {}, css = {} }: { children: ReactNode; props?: any; css?: CSS }) => (
+  <StyledDialogContent css={{ ...css, position: 'absolute' }} {...props}>
+    {children}
+  </StyledDialogContent>
+);
+const CustomDialogOverlay = ({ css = {} }: { css?: CSS }) => (
+  <StyledDialogOverlay css={{ ...css, position: 'absolute' }} />
+);
+const CustomDialogPortal = ({ children, container }: { children: ReactNode; container?: HTMLElement | null }) => {
+  const dialogContainerSelector = useDialogContainerSelector();
+  const containerRef = useRef<HTMLElement | null>(null);
+
+  if (container) {
+    containerRef.current = container;
+  } else if (dialogContainerSelector && !containerRef.current) {
+    containerRef.current = document.querySelector(dialogContainerSelector) as HTMLElement;
+  } else if (!containerRef.current) {
+    containerRef.current = document.body;
+  }
+  return (
+    <StyledDialogPortal container={containerRef.current}>
+      <>{children}</>
+    </StyledDialogPortal>
+  );
+};
 
 export const Dialog = {
   Root: StyledDialog,
   Trigger: StyledDialogTrigger,
-  Overlay: StyledDialogOverlay,
-  Content: StyledDialogContent,
+  Overlay: CustomDialogOverlay,
+  Content: CustomDialogContent,
   Title: DialogTitle,
   Description: DialogDescription,
   Close: DialogClose,
   DefaultClose: DialogDefaultCloseIcon,
-  Portal: StyledDialogPortal,
+  Portal: CustomDialogPortal,
 };

package/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 {
@@ -14,26 +13,25 @@ import {
 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 FullPageProgress from './components/FullPageProgress';
-// @ts-ignore: No implicit Any
 import { Init } from './components/init/Init';
 // @ts-ignore: No implicit Any
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
-// @ts-ignore: No implicit Any
+import { LeaveScreen } from './components/LeaveScreen';
+import { MwebLandscapePrompt } from './components/MwebLandscapePrompt';
 import { Notifications } from './components/Notifications';
-// @ts-ignore: No implicit Any
-import PostLeave from './components/PostLeave';
-// @ts-ignore: No implicit Any
-import PreviewContainer from './components/Preview/PreviewContainer';
+import { PreviewScreen } from './components/Preview/PreviewScreen';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
 import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
+import { DialogContainerProvider } from '../context/DialogContext';
 import { Box } from '../Layout';
 import { globalStyles, HMSThemeProvider } from '../Theme';
-import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
+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
@@ -47,9 +45,8 @@ import {
 } from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { FeatureFlags } from './services/FeatureFlags';
-
 // @ts-ignore: No implicit Any
-const Conference = React.lazy(() => import('./components/conference'));
+import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
 
 export type HMSPrebuiltOptions = {
   userName?: string;
@@ -68,6 +65,12 @@ export type HMSPrebuiltProps = {
   roomId?: string;
   role?: string;
   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 = {
@@ -84,12 +87,14 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       authToken = '',
       roomId = '',
       role = '',
+      containerSelector = DEFAULT_PORTAL_CONTAINER,
       logo,
       typography,
       themes,
       options: { userName = '', userId = '', endpoints } = {},
       screens,
       onLeave,
+      onJoin,
     },
     ref,
   ) => {
@@ -171,7 +176,9 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             roomCode,
             roomId,
             role,
+            containerSelector,
             onLeave,
+            onJoin,
             userName,
             userId,
             endpoints: {
@@ -217,17 +224,23 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                     >
                       <AppData appDetails={metadata} tokenEndpoint={tokenByRoomIdRoleEndpoint} />
                       <Init />
-                      <Box
-                        id="prebuilt-container"
-                        css={{
-                          bg: '$background_dim',
-                          size: '100%',
-                          lineHeight: '1.5',
-                          '-webkit-text-size-adjust': '100%',
-                        }}
-                      >
-                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} defaultAuthToken={authToken} />
-                      </Box>
+                      <DialogContainerProvider dialogContainerSelector={containerSelector}>
+                        <Box
+                          id={DEFAULT_PORTAL_CONTAINER.slice(1)} //Skips the #
+                          css={{
+                            bg: '$background_dim',
+                            size: '100%',
+                            lineHeight: '1.5',
+                            '-webkit-text-size-adjust': '100%',
+                            position: 'relative',
+                          }}
+                        >
+                          <AppRoutes
+                            authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint}
+                            defaultAuthToken={authToken}
+                          />
+                        </Box>
+                      </DialogContainerProvider>
                     </HMSThemeProvider>
                   );
                 }}
@@ -242,66 +255,17 @@ 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>
-  );
+  if (activeState === PrebuiltStates.PREVIEW && isPreviewScreenEnabled) {
+    return <PreviewScreen />;
+  } else if (activeState === PrebuiltStates.LEAVE && isLeaveScreenEnabled) {
+    return <LeaveScreen />;
+  }
+  return <ConferenceScreen />;
 };
 
 const BackSwipe = () => {
@@ -321,17 +285,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,
@@ -341,22 +294,21 @@ function AppRoutes({
 }) {
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
+  const { activeState, rejoin } = useAppStateManager();
+
   return (
-    <Router>
+    <AppStateContext.Provider value={{ rejoin }}>
       <>
         <ToastContainer />
         <Notifications />
+        <MwebLandscapePrompt />
         <BackSwipe />
         {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />
         <KeyboardHandler />
         <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
-        {roomLayout && (
-          <Routes>
-            <Route path="/*" element={<RouteList />} />
-          </Routes>
-        )}
+        {roomLayout && activeState && <AppStates activeState={activeState} />}
       </>
-    </Router>
+    </AppStateContext.Provider>
   );
 }

package/src/Prebuilt/AppContext.tsx

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+// @ts-ignore
+import { DEFAULT_PORTAL_CONTAINER } from './common/constants';
 
 type HMSPrebuiltContextType = {
   roomCode: string;
@@ -6,16 +8,20 @@ type HMSPrebuiltContextType = {
   role?: string;
   userName?: string;
   userId?: string;
+  containerSelector: string;
   endpoints?: Record<string, 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';

package/src/Prebuilt/AppStateContext.tsx

@@ -0,0 +1,71 @@
+import React, { useContext, useEffect } from 'react';
+import { usePreviousDistinct } from 'react-use';
+import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
+import { useRoomLayout } from './provider/roomLayoutProvider';
+import { useRedirectToLeave } from './components/hooks/useRedirectToLeave';
+import {
+  useRoomLayoutLeaveScreen,
+  useRoomLayoutPreviewScreen,
+} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+
+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 [activeState, setActiveState] = React.useState<PrebuiltStates | undefined>();
+  const roomState = useHMSStore(selectRoomState);
+  const prevRoomState = usePreviousDistinct(roomState);
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const { redirectToLeave } = useRedirectToLeave();
+
+  const rejoin = () => {
+    setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
+  };
+
+  useEffect(() => {
+    if (!roomLayout) {
+      return;
+    }
+    if (roomState === HMSRoomState.Connected) {
+      setActiveState(PrebuiltStates.MEETING);
+    } else if (
+      prevRoomState &&
+      [HMSRoomState.Reconnecting, HMSRoomState.Connected].includes(prevRoomState) &&
+      [HMSRoomState.Disconnecting, HMSRoomState.Disconnected].includes(roomState)
+    ) {
+      redirectToLeave().then(() => {
+        const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
+        setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
+      });
+    } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
+      setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
+    }
+  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]);
+
+  return { activeState, rejoin };
+};

package/src/Prebuilt/common/constants.js

@@ -44,7 +44,8 @@ export const APP_DATA = {
   pdfConfig: 'pdfConfig',
   minimiseInset: 'minimiseInset',
   activeScreensharePeerId: 'activeScreensharePeerId',
-  disableNotificiations: 'disableNotificiations',
+  disableNotifications: 'disableNotifications',
+  pollState: 'pollState',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
@@ -59,6 +60,19 @@ export const SIDE_PANE_OPTIONS = {
   PARTICIPANTS: 'Participants',
   CHAT: 'Chat',
   STREAMING: 'STREAMING',
+  POLLS: 'POLLS',
+};
+
+export const POLL_STATE = {
+  pollInView: 'pollInView',
+  view: 'view',
+};
+
+export const POLL_VIEWS = {
+  CREATE_POLL_QUIZ: 'CREATE_POLL_QUIZ',
+  CREATE_QUESTIONS: 'CREATE_QUESTIONS',
+  VOTE: 'VOTE',
+  RESULTS: 'RESULTS',
 };
 
 export const SUBSCRIBED_NOTIFICATIONS = {
@@ -93,4 +107,25 @@ export const SESSION_STORE_KEY = {
   SPOTLIGHT: 'spotlight',
 };
 
+export const INTERACTION_TYPE = {
+  POLL: 'Poll',
+  QUIZ: 'Quiz',
+};
+
+export const QUESTION_TYPE_TITLE = {
+  'single-choice': 'Single Choice',
+  'multiple-choice': 'Multiple Choice',
+  // "short-answer": "Short Answer",
+  // "long-answer": "Long Answer",
+};
+
+export const QUESTION_TYPE = {
+  SINGLE_CHOICE: 'single-choice',
+  MULTIPLE_CHOICE: 'multiple-choice',
+  // SHORT_ANSWER: "short-answer",
+  // LONG_ANSWER: "long-answer",
+};
+
 export const ROLE_CHANGE_DECLINED = 'role_change_declined';
+
+export const DEFAULT_PORTAL_CONTAINER = '#prebuilt-container';

package/src/Prebuilt/common/utils.js

@@ -1,3 +1,5 @@
+import { QUESTION_TYPE } from './constants';
+
 // eslint-disable-next-line complexity
 export function shadeColor(color, percent) {
   let R = parseInt(color.substring(1, 3), 16);
@@ -88,3 +90,48 @@ export const formatTime = timeInSeconds => {
   const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
   return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
 };
+
+const compareArrays = (a, b) => {
+  if (a.length !== b.length) return false;
+  else {
+    // Comparing each element of your array
+    for (var i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+};
+
+export const checkCorrectAnswer = (answer, localPeerResponse, type) => {
+  if (type === QUESTION_TYPE.SINGLE_CHOICE) {
+    return answer?.option === localPeerResponse?.option;
+  } else if (type === QUESTION_TYPE.MULTIPLE_CHOICE) {
+    return answer?.options && localPeerResponse?.options && compareArrays(answer?.options, localPeerResponse?.options);
+  }
+};
+
+export const isValidTextInput = (text, minLength = 1, maxLength = 100) => {
+  return text && text.length >= minLength && text.length <= maxLength;
+};
+
+export const calculateAvatarAndAttribBoxSize = (calculatedWidth, calculatedHeight) => {
+  if (!calculatedWidth || !calculatedHeight) {
+    return [undefined, undefined];
+  }
+
+  let avatarSize = 'large';
+  if (calculatedWidth <= 150 || calculatedHeight <= 150) {
+    avatarSize = 'small';
+  } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
+    avatarSize = 'medium';
+  }
+
+  let attribBoxSize = 'medium';
+  if (calculatedWidth <= 180 || calculatedHeight <= 180) {
+    attribBoxSize = 'small';
+  }
+
+  return [avatarSize, attribBoxSize];
+};

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -21,6 +21,7 @@ import {
   APP_DATA,
   CHAT_SELECTOR,
   DEFAULT_WAITING_VIEWER_ROLE,
+  POLL_STATE,
   SIDE_PANE_OPTIONS,
   UI_MODE_GRID,
   UI_SETTINGS,
@@ -65,7 +66,11 @@ const initialAppData = {
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
-  [APP_DATA.disableNotificiations]: false,
+  [APP_DATA.disableNotifications]: false,
+  [APP_DATA.pollState]: {
+    [POLL_STATE.pollInView]: '',
+    [POLL_STATE.view]: '',
+  },
 };
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {

package/src/Prebuilt/components/AppData/useSidepane.js

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { APP_DATA } from '../../common/constants';
+import { usePollViewState } from './useUISettings';
+import { APP_DATA, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTIONS } from '../../common/constants';
 
 /**
  * Gives a boolean value if the sidepaneType matches current sidepane value in store
@@ -37,6 +38,26 @@ export const useSidepaneToggle = sidepaneType => {
   return toggleSidepane;
 };
 
+export const usePollViewToggle = () => {
+  const { view, setPollState } = usePollViewState();
+  const isOpen = useSidepaneState() === SIDE_PANE_OPTIONS.POLLS;
+  const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.POLLS);
+
+  const togglePollView = useCallback(
+    id => {
+      id = typeof id === 'string' ? id : undefined;
+      setPollState({
+        [POLL_STATE.pollInView]: id,
+        [POLL_STATE.view]: id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ,
+      });
+      toggleSidepane();
+    },
+    [view, setPollState, isOpen, toggleSidepane],
+  );
+
+  return togglePollView;
+};
+
 /**
  * reset's the sidepane value
  */
@@ -44,6 +65,7 @@ export const useSidepaneReset = () => {
   const hmsActions = useHMSActions();
   const resetSidepane = useCallback(() => {
     hmsActions.setAppData(APP_DATA.sidePane, '');
+    hmsActions.setAppData(APP_DATA.pollInView, '');
   }, [hmsActions]);
   return resetSidepane;
 };