PR for main to dev backmerge

apps/100ms-web/yarn.lock

@@ -1136,22 +1136,6 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
-"@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.19.3":
-  version "7.19.3"
-  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.3.tgz"
-  integrity sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.3"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.19.3"
-    "@babel/types" "^7.19.3"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.19.3", "@babel/types@^7.4.4":
   version "7.19.3"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.19.3.tgz"

packages/hms-video-web/src/notification-manager/managers/RoomUpdateManager.ts

@@ -139,6 +139,7 @@ export class RoomUpdateManager {
     if (!notification?.variants) {
       return;
     }
+    room.hls.running = true;
     room.hls.variants = [];
     notification.variants.forEach((_: HLSVariant, index: number) => {
       room.hls.variants.push({

packages/hms-video-web/src/sdk/HMSPeerListIterator.ts

@@ -13,6 +13,12 @@ export class HMSPeerListIterator {
   private defaultPaginationLimit = 10;
   constructor(private transport: ITransport, private store: IStore, private options?: HMSPeerListIteratorOptions) {}
 
+  private validateConnection() {
+    if (!this.transport || !this.store) {
+      throw Error(`Use usePaginatedParticipants or hmsActions.getPeerListIterator after preview or join has happened`);
+    }
+  }
+
   hasNext(): boolean {
     return !this.isEnd;
   }
@@ -22,6 +28,7 @@ export class HMSPeerListIterator {
   }
 
   async findPeers() {
+    this.validateConnection();
     const response = await this.transport.findPeers({
       ...(this.options || {}),
       limit: this.options?.limit || this.defaultPaginationLimit,
@@ -31,6 +38,7 @@ export class HMSPeerListIterator {
   }
 
   async next() {
+    this.validateConnection();
     let response: PeersIterationResponse;
     if (!this.iterator && !this.isEnd) {
       return await this.findPeers();

packages/roomkit-react/src/Modal/Dialog.tsx

@@ -34,7 +34,11 @@ const CustomDialogPortal = ({ children, container }: { children: ReactNode; cont
   } else if (!containerRef.current) {
     containerRef.current = document.body;
   }
-  return <StyledDialogPortal container={containerRef.current}>{children}</StyledDialogPortal>;
+  return (
+    <StyledDialogPortal container={containerRef.current}>
+      <>{children}</>
+    </StyledDialogPortal>
+  );
 };
 
 export const Dialog = {

packages/roomkit-react/src/Prebuilt/AppStateContext.tsx

@@ -58,10 +58,9 @@ export const useAppStateManager = () => {
       [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);
-      });
+      const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
+      setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
+      redirectToLeave(1000); // to clear toasts after 1 second
     } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
       setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
     }

packages/roomkit-react/src/Prebuilt/components/AppData/useSidepane.js

@@ -39,20 +39,21 @@ export const useSidepaneToggle = sidepaneType => {
 };
 
 export const usePollViewToggle = () => {
+  const hmsActions = useHMSActions();
   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;
+      const newView = id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ;
       setPollState({
         [POLL_STATE.pollInView]: id,
-        [POLL_STATE.view]: id ? POLL_VIEWS.VOTE : isOpen && view ? null : POLL_VIEWS.CREATE_POLL_QUIZ,
+        [POLL_STATE.view]: newView,
       });
-      toggleSidepane();
+      hmsActions.setAppData(APP_DATA.sidePane, newView ? SIDE_PANE_OPTIONS.POLLS : '');
     },
-    [view, setPollState, isOpen, toggleSidepane],
+    [hmsActions, view, setPollState, isOpen],
   );
 
   return togglePollView;

packages/roomkit-react/src/Prebuilt/components/Leave/LeaveRoom.tsx

@@ -36,9 +36,11 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
 
   const stopStream = async () => {
     try {
-      console.log('Stopping HLS stream');
-      await hmsActions.stopHLSStreaming();
-      ToastManager.addToast({ title: 'Stopping the stream' });
+      if (permissions?.hlsStreaming) {
+        console.log('Stopping HLS stream');
+        await hmsActions.stopHLSStreaming();
+        ToastManager.addToast({ title: 'Stopping the stream' });
+      }
     } catch (e) {
       console.error('Error stopping stream', e);
       ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });

packages/roomkit-react/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -1,27 +1,33 @@
 import React, { useEffect, useState } from 'react';
+import { useMedia } from 'react-use';
 import { RefreshIcon } from '@100mslive/react-icons';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
+import { config as cssConfig } from '../../Theme';
 
 export const MwebLandscapePrompt = () => {
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false);
+  const isLandscape = useMedia(cssConfig.media.ls);
 
   useEffect(() => {
+    if (!window.screen?.orientation) {
+      setShowMwebLandscapePrompt(isLandscape);
+      return;
+    }
     const handleRotation = () => {
       const angle = window.screen.orientation.angle;
-      const type = window.screen.orientation.type;
+      const type = window.screen.orientation.type || '';
       // Angle check needed to diff bw mobile and desktop
-      setShowMwebLandscapePrompt(angle >= 90 && type.includes('landscape'));
+      setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape);
     };
     handleRotation();
     window.screen.orientation.addEventListener('change', handleRotation);
-
     return () => {
       window.screen.orientation.removeEventListener('change', handleRotation);
     };
-  }, []);
+  }, [isLandscape]);
 
   return (
     <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>

packages/roomkit-react/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -146,7 +146,7 @@ export function Notifications() {
 
       case HMSNotificationTypes.POLL_STARTED:
         if (notification.data.startedBy !== localPeerID) {
-          const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy));
+          const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy)) || 'Participant';
           ToastManager.addToast({
             title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
             action: (

packages/roomkit-react/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx

@@ -172,7 +172,11 @@ const AddMenu = () => {
 };
 
 const PrevMenu = () => {
-  const polls = useHMSStore(selectPolls)?.filter(poll => poll.state === 'started' || poll.state === 'stopped');
+  // filter polls that have been started or stopped sorted by when they were created and their live state
+  const polls = useHMSStore(selectPolls)
+    ?.filter(poll => poll.state === 'started' || poll.state === 'stopped')
+    .sort((a, b) => (b.createdAt?.getTime() || 0) - (a.createdAt?.getTime() || 0))
+    .sort((a, b) => (b.state === 'started' ? 1 : 0) - (a.state === 'started' ? 1 : 0));
   return polls?.length ? (
     <Flex
       css={{

packages/roomkit-react/src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.jsx

@@ -204,7 +204,11 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
         </Box>
         <Tooltip
           disabled={isValid}
-          title={`Please fill all the fields ${isQuiz ? 'and mark the correct answer(s)' : ''} to continue`}
+          title={
+            options.length === 0
+              ? 'At least one option is required for a question'
+              : `Please fill all the fields ${isQuiz ? 'and mark the correct answer(s)' : ''} to continue`
+          }
           boxCss={{ maxWidth: '$40' }}
         >
           <Button
@@ -240,7 +244,7 @@ export const isValidQuestion = ({ text, type, options, isQuiz = false }) => {
     return true;
   }
 
-  const everyOptionHasText = options.every(option => option && isValidTextInput(option.text, 1));
+  const everyOptionHasText = options.length > 0 && options.every(option => option && isValidTextInput(option.text, 1));
   const hasCorrectAnswer = options.some(option => option.isCorrectAnswer);
 
   if (!isQuiz) {

packages/roomkit-react/src/Prebuilt/components/Polls/Voting/Voting.jsx

@@ -65,7 +65,7 @@ export const Voting = ({ id, toggleVoting }) => {
         </Box>
       </Flex>
 
-      <Flex direction="column" css={{ p: '$8 $10' }}>
+      <Flex direction="column" css={{ p: '$8 $10', overflowY: 'auto' }}>
         <Flex align="center">
           <Box css={{ flex: 'auto' }}>
             <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>

packages/roomkit-react/src/Prebuilt/components/hooks/useRedirectToLeave.tsx

@@ -10,14 +10,11 @@ export const useRedirectToLeave = () => {
 
   const redirect = useCallback(
     (timeout = 0) => {
-      return new Promise<void>(resolve => {
-        setTimeout(() => {
-          PictureInPicture.stop().catch(() => console.error('stopping pip'));
-          ToastManager.clearAllToast();
-          onLeave?.();
-          resolve();
-        }, timeout);
-      });
+      setTimeout(() => {
+        PictureInPicture.stop().catch(() => console.error('stopping pip'));
+        ToastManager.clearAllToast();
+        onLeave?.();
+      }, timeout);
     },
     [onLeave],
   );