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

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -18,6 +18,7 @@ import {
   HandIcon,
   HandRaiseSlashedIcon,
   PeopleIcon,
+  QuizIcon,
   RecordIcon,
   SettingsIcon,
 } from '@100mslive/react-icons';
@@ -40,7 +41,9 @@ import { ChangeNameModal } from '../ChangeNameModal';
 // @ts-ignore: No implicit any
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
-import { useSidepaneToggle } from '../../AppData/useSidepane';
+import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
 // @ts-ignore: No implicit any
@@ -82,6 +85,8 @@ export const MwebOptions = ({
   const [showRecordingOn, setShowRecordingOn] = useState(false);
   const [isRecordingLoading, setIsRecordingLoading] = useState(false);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
+  const { showPolls } = useShowPolls();
+  const togglePollView = usePollViewToggle();
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
@@ -192,6 +197,18 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
+            {showPolls && (
+              <ActionTile.Root
+                onClick={() => {
+                  togglePollView();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <QuizIcon />
+                <ActionTile.Title>Polls and Quizzes</ActionTile.Title>
+              </ActionTile.Root>
+            )}
+
             {elements?.brb && (
               <ActionTile.Root
                 active={isBRBOn}

package/src/Prebuilt/components/{MwebLandscapePrompt.jsx → MwebLandscapePrompt.tsx}

@@ -4,29 +4,28 @@ import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
-import { PrebuiltDialogPortal } from './PrebuiltDialogPortal';
-import { isAndroid, isIOS } from '../common/constants';
 
 export const MwebLandscapePrompt = () => {
-  const isMobile = isAndroid || isIOS;
   const [showMwebLandscapePrompt, setShowMwebLandscapePrompt] = useState(false);
 
   useEffect(() => {
-    const handleResize = () => {
-      setShowMwebLandscapePrompt(isMobile && window.innerHeight < window.innerWidth);
+    const handleRotation = () => {
+      const angle = window.screen.orientation.angle;
+      const type = window.screen.orientation.type;
+      // Angle check needed to diff bw mobile and desktop
+      setShowMwebLandscapePrompt(angle >= 90 && type.includes('landscape'));
     };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
+    handleRotation();
+    window.screen.orientation.addEventListener('change', handleRotation);
 
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.screen.orientation.removeEventListener('change', handleRotation);
     };
   }, []);
 
   return (
     <Dialog.Root open={showMwebLandscapePrompt} onOpenChange={setShowMwebLandscapePrompt}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
           <Box>
@@ -52,7 +51,7 @@ export const MwebLandscapePrompt = () => {
             </Flex>
           </Box>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   );
 };

package/src/Prebuilt/components/Notifications/{AutoplayBlockedModal.jsx → AutoplayBlockedModal.tsx}

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useAutoplayError } from '@100mslive/react-sdk';
-import { Button, Dialog, Text } from '../../../';
+import { Button, Dialog, Text } from '../../..';
+// @ts-ignore: No implicit Any
 import { DialogContent, DialogRow } from '../../primitives/DialogContent';
 
 export function AutoplayBlockedModal() {

package/src/Prebuilt/components/Notifications/{HLSFailureModal.jsx → HLSFailureModal.tsx}

@@ -1,33 +1,35 @@
 import React, { useCallback, useState } from 'react';
-import { selectHLSState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { selectHLSState, useHMSActions, useHMSStore, useRecordingStreaming } from '@100mslive/react-sdk';
 import { Button } from '../../../Button';
 import { Flex } from '../../../Layout';
 import { Dialog } from '../../../Modal';
 import { Text } from '../../../Text';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
+// @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { APP_DATA } from '../../common/constants';
 
 export function HLSFailureModal() {
-  const { hlsError } = useHMSStore(selectHLSState).error || false;
+  const hlsError = useHMSStore(selectHLSState).error || false;
   const [openModal, setOpenModal] = useState(!!hlsError);
   const hmsActions = useHMSActions();
+  const { isRTMPRunning } = useRecordingStreaming();
   const [isHLSStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const startHLS = useCallback(async () => {
     try {
-      if (isHLSStarted) {
+      if (isHLSStarted || isRTMPRunning) {
         return;
       }
       setHLSStarted(true);
       await hmsActions.startHLSStreaming({});
     } catch (error) {
-      if (error.message.includes('invalid input')) {
+      if ((error as Error).message.includes('invalid input')) {
         await startHLS();
         return;
       }
       setHLSStarted(false);
     }
-  }, [hmsActions, isHLSStarted, setHLSStarted]);
+  }, [hmsActions, isHLSStarted, setHLSStarted, isRTMPRunning]);
 
   return hlsError ? (
     <Dialog.Root
@@ -38,7 +40,7 @@ export function HLSFailureModal() {
         }
       }}
     >
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(360px, 90%)' }}>
           <Dialog.Title
@@ -66,7 +68,7 @@ export function HLSFailureModal() {
             </Button>
           </Flex>
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   ) : null;
 }

package/src/Prebuilt/components/Notifications/{InitErrorModal.jsx → InitErrorModal.tsx}

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Text } from '../../../';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { Text } from '../../..';
+// @ts-ignore: No implicit Any
 import { ErrorDialog } from '../../primitives/DialogContent';
 
-export const InitErrorModal = ({ notification }) => {
+export const InitErrorModal = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
   const [showModal, setShowModal] = useState(false);
   const [info, setInfo] = useState({ title: 'Init Error', description: '' });
 

package/src/Prebuilt/components/Notifications/{Notifications.jsx → Notifications.tsx}

@@ -1,19 +1,23 @@
 /* eslint-disable no-case-declarations */
 import React, { useCallback, useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import {
   HMSNotificationTypes,
+  HMSRoleChangeRequest,
   HMSRoomState,
   selectHasPeerHandRaised,
+  selectLocalPeerID,
+  selectPeerNameByID,
   selectRoomState,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { Button } from '../../../';
+import { Button } from '../../..';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
+// @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
+// @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { InitErrorModal } from './InitErrorModal';
@@ -23,22 +27,25 @@ import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
+// @ts-ignore: No implicit Any
+import { usePollViewToggle } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
 import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
-import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
+// @ts-ignore: No implicit Any
 import { getMetadata } from '../../common/utils';
+// @ts-ignore: No implicit Any
 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 vanillaStore = useHMSVanillaStore();
+  const togglePollView = usePollViewToggle();
 
-  const handleRoleChangeDenied = useCallback(request => {
+  const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
       title: `${request.peerName} denied your request to join the ${request.role.name} role`,
       variant: 'error',
@@ -85,28 +92,13 @@ export function Notifications() {
               title: `Error: ${notification.data?.message}`,
             });
           } else {
-            // show button action when the error is terminal
-            const toastId = ToastManager.addToast({
+            ToastManager.addToast({
               title:
                 notification.data?.message ||
                 'We couldn’t reconnect you. When you’re back online, try joining the room.',
-              inlineAction: true,
-              action: (
-                <Button
-                  onClick={() => {
-                    ToastManager.removeToast(toastId);
-                    navigate(`/${params.roomId}${params.role ? `/${params.role}` : ''}`);
-                  }}
-                >
-                  Rejoin
-                </Button>
-              ),
               close: false,
             });
           }
-          // goto leave for terminal if any action is not performed within 1s
-          // if network is still unavailable going to preview will throw an error
-          redirectToLeave(1000);
           return;
         }
         // Autoplay error or user denied screen share (cancelled browser pop-up)
@@ -122,11 +114,11 @@ export function Notifications() {
         });
         break;
       case HMSNotificationTypes.ROLE_UPDATED: {
-        if (notification.data?.isLocal) {
+        if (notification.data?.isLocal && notification.data?.roleName) {
           ToastManager.addToast({
             title: `You are now a ${notification.data.roleName}`,
           });
-          updateRoomLayoutForRole(notification.data.roleName);
+          updateRoomLayoutForRole?.(notification.data.roleName);
         }
         break;
       }
@@ -145,13 +137,35 @@ export function Notifications() {
           title: `${notification.message}. 
               ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
         });
-        redirectToLeave(1000);
         break;
       case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
         ToastManager.addToast({
           title: notification.message,
         });
         break;
+
+      case HMSNotificationTypes.POLL_STARTED:
+        if (notification.data.startedBy !== localPeerID) {
+          const pollStartedBy = vanillaStore.getState(selectPeerNameByID(notification.data.startedBy));
+          ToastManager.addToast({
+            title: `${pollStartedBy} started a ${notification.data.type}: ${notification.data.title}`,
+            action: (
+              <Button
+                onClick={() => togglePollView(notification.data.id)}
+                variant="standard"
+                css={{
+                  backgroundColor: '$surface_bright',
+                  fontWeight: '$semiBold',
+                  color: '$on_surface_high',
+                  p: '$xs $md',
+                }}
+              >
+                Vote
+              </Button>
+            ),
+          });
+        }
+        break;
       default:
         break;
     }
@@ -171,7 +185,7 @@ export function Notifications() {
       <ReconnectNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorModal />
-      <InitErrorModal notification={notification} />
+      <InitErrorModal />
     </>
   );
 }

package/src/Prebuilt/components/Notifications/{PeerNotifications.jsx → PeerNotifications.tsx}

@@ -1,7 +1,10 @@
 import { useEffect } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
+// @ts-ignore: No implicit Any
 import { useSubscribedNotifications } from '../AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
 const notificationTypes = [

package/src/Prebuilt/components/Notifications/{PermissionErrorModal.jsx → PermissionErrorModal.tsx}

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';
+import { Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
+// @ts-ignore: No implicit Any
 import androidPermissionAlert from '../../images/android-perm-1.png';
+// @ts-ignore: No implicit Any
 import iosPermissions from '../../images/ios-perm-0.png';
-import { PrebuiltDialogPortal } from '../PrebuiltDialogPortal';
+// @ts-ignore: No implicit Any
 import { isAndroid, isIOS } from '../../common/constants';
 
 export function PermissionErrorModal() {
@@ -40,7 +42,7 @@ export function PermissionErrorModal() {
 
   return deviceType ? (
     <Dialog.Root open={!!deviceType}>
-      <PrebuiltDialogPortal>
+      <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content css={{ w: 'min(380px, 90%)', p: '$8' }}>
           <Dialog.Title
@@ -119,7 +121,7 @@ export function PermissionErrorModal() {
             </Flex>
           ) : null}
         </Dialog.Content>
-      </PrebuiltDialogPortal>
+      </Dialog.Portal>
     </Dialog.Root>
   ) : null;
 }

package/src/Prebuilt/components/Notifications/{ReconnectNotifications.jsx → ReconnectNotifications.tsx}

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { Dialog, Flex, Loading, Text } from '../../../';
+import { Dialog, Flex, Loading, Text } from '../../..';
+// @ts-ignore: No implicit Any
 import { ToastConfig } from '../Toast/ToastConfig';
+// @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 
 const notificationTypes = [
@@ -9,21 +11,24 @@ const notificationTypes = [
   HMSNotificationTypes.RECONNECTING,
   HMSNotificationTypes.ERROR,
 ];
-let notificationId = null;
+let notificationId: string | null = null;
 
 export const ReconnectNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const [open, setOpen] = useState(false);
   useEffect(() => {
-    if (notification?.type === HMSNotificationTypes.ERROR && notification?.data?.isTerminal) {
+    if (!notification) {
+      return;
+    }
+    if (notification.type === HMSNotificationTypes.ERROR && notification.data?.isTerminal) {
       setOpen(false);
-    } else if (notification?.type === HMSNotificationTypes.RECONNECTED) {
+    } else if (notification.type === HMSNotificationTypes.RECONNECTED) {
       notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());
       setOpen(false);
-    } else if (notification?.type === HMSNotificationTypes.RECONNECTING) {
+    } else if (notification.type === HMSNotificationTypes.RECONNECTING) {
       notificationId = ToastManager.replaceToast(
         notificationId,
-        ToastConfig.RECONNECTING.single(notification.data.message),
+        ToastConfig.RECONNECTING.single(notification.data?.message),
       );
     }
   }, [notification]);

package/src/Prebuilt/components/Notifications/{TrackBulkUnmuteModal.jsx → TrackBulkUnmuteModal.tsx}

@@ -1,11 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';
+import {
+  HMSChangeMultiTrackStateRequest,
+  HMSNotificationTypes,
+  useHMSActions,
+  useHMSNotifications,
+} from '@100mslive/react-sdk';
 import { MicOnIcon } from '@100mslive/react-icons';
+// @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
 
 export const TrackBulkUnmuteModal = () => {
   const hmsActions = useHMSActions();
-  const [muteNotification, setMuteNotification] = useState(null);
+  const [muteNotification, setMuteNotification] = useState<HMSChangeMultiTrackStateRequest | null>(null);
   const notification = useHMSNotifications([
     HMSNotificationTypes.CHANGE_MULTI_TRACK_STATE_REQUEST,
     HMSNotificationTypes.ROOM_ENDED,
@@ -38,7 +44,7 @@ export const TrackBulkUnmuteModal = () => {
     <RequestDialog
       title="Track Unmute Request"
       body={`${peer?.name} has requested you to unmute your tracks.`}
-      onOpenChange={value => !value && setMuteNotification(null)}
+      onOpenChange={(value: boolean) => !value && setMuteNotification(null)}
       onAction={() => {
         tracks.forEach(track => {
           hmsActions.setEnabledTrack(track.id, enabled);

package/src/Prebuilt/components/Notifications/{TrackUnmuteModal.jsx → TrackUnmuteModal.tsx}

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { HMSNotificationTypes, useHMSActions, useHMSNotifications } from '@100mslive/react-sdk';
+import {
+  HMSChangeTrackStateRequest,
+  HMSNotificationTypes,
+  useHMSActions,
+  useHMSNotifications,
+} from '@100mslive/react-sdk';
 import { MicOnIcon } from '@100mslive/react-icons';
+// @ts-ignore: No implicit Any
 import { RequestDialog } from '../../primitives/DialogContent';
 
 export const TrackUnmuteModal = () => {
@@ -10,7 +16,7 @@ export const TrackUnmuteModal = () => {
     HMSNotificationTypes.ROOM_ENDED,
     HMSNotificationTypes.REMOVED_FROM_ROOM,
   ]);
-  const [muteNotification, setMuteNotification] = useState(null);
+  const [muteNotification, setMuteNotification] = useState<HMSChangeTrackStateRequest | null>(null);
 
   useEffect(() => {
     switch (notification?.type) {
@@ -37,7 +43,7 @@ export const TrackUnmuteModal = () => {
   return (
     <RequestDialog
       title="Track Unmute Request"
-      onOpenChange={value => !value && setMuteNotification(null)}
+      onOpenChange={(value: boolean) => !value && setMuteNotification(null)}
       body={`${peer?.name} has requested you to unmute your ${track?.source} ${track?.type}.`}
       onAction={() => {
         hmsActions.setEnabledTrack(track.id, enabled);

package/src/Prebuilt/components/Notifications/index.tsx

@@ -0,0 +1 @@
+export { Notifications } from './Notifications';