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

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 2secs
-          // 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';

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.jsx

@@ -0,0 +1,229 @@
+// @ts-check
+import React, { useMemo, useState } from 'react';
+import {
+  selectLocalPeerRoleName,
+  selectPermissions,
+  selectPolls,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { QuestionIcon, StatsIcon } from '@100mslive/react-icons';
+import { Button, Flex, Input, Switch, Text } from '../../../../';
+import { Container, ContentHeader, ErrorText } from '../../Streaming/Common';
+import { usePollViewToggle } from '../../AppData/useSidepane';
+import { usePollViewState } from '../../AppData/useUISettings';
+import { isValidTextInput } from '../../../common/utils';
+import { StatusIndicator } from '../common/StatusIndicator';
+import { INTERACTION_TYPE, POLL_STATE, POLL_VIEWS } from '../../../common/constants';
+
+export const PollsQuizMenu = () => {
+  const togglePollView = usePollViewToggle();
+  const permissions = useHMSStore(selectPermissions);
+
+  return (
+    <Container rounded>
+      <ContentHeader content="Polls and Quizzes" onClose={togglePollView} />
+      <Flex direction="column" css={{ px: '$10', pb: '$10', overflowY: 'auto' }}>
+        {permissions?.pollWrite && <AddMenu />}
+        <PrevMenu />
+      </Flex>
+    </Container>
+  );
+};
+
+function InteractionSelectionCard({ title, icon, active, onClick }) {
+  const activeBorderStyle = active ? '$space$px solid $primary_default' : '$space$px solid $border_bright';
+  return (
+    <Flex
+      onClick={onClick}
+      css={{
+        border: activeBorderStyle,
+        p: '$4',
+        r: '$2',
+        w: '100%',
+        cursor: 'pointer',
+      }}
+      align="center"
+    >
+      <Flex
+        css={{
+          border: activeBorderStyle,
+          p: '$4',
+          bg: '$surface_bright',
+          c: '$on_surface_high',
+          r: '$0',
+        }}
+      >
+        {icon}
+      </Flex>
+      <Text variant="sub1" css={{ ml: '$md' }}>
+        {title}
+      </Text>
+    </Flex>
+  );
+}
+
+const AddMenu = () => {
+  const actions = useHMSActions();
+  const [title, setTitle] = useState('');
+  const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
+  const [anonymous, setAnonymous] = useState(false);
+  const [hideVoteCount, setHideVoteCount] = useState(false);
+  const [error, setError] = useState();
+  const [titleError, setTitleError] = useState('');
+  const { setPollState } = usePollViewState();
+  const [interactionType, setInteractionType] = useState(INTERACTION_TYPE.POLL);
+
+  const handleCreate = id => {
+    setPollState({
+      [POLL_STATE.pollInView]: id,
+      [POLL_STATE.view]: POLL_VIEWS.CREATE_QUESTIONS,
+    });
+  };
+
+  const validateTitle = useMemo(() => {
+    if (!isValidTextInput(title)) {
+      if (title) {
+        setTitleError('The title should have between 2-100 characters');
+      }
+      return true;
+    } else {
+      setTitleError('');
+      return false;
+    }
+  }, [title]);
+  // const [timer, setTimer] = useState(10);
+  // const [showTimerDropDown, setShowTimerDropDown] = useState(false);
+
+  return (
+    <>
+      <Text variant="caption" css={{ c: '$on_surface_medium', mb: '$md' }}>
+        Select the type you want to continue with
+      </Text>
+      <Flex css={{ w: '100%', gap: '$10', mb: '$md' }}>
+        <InteractionSelectionCard
+          title={INTERACTION_TYPE.POLL}
+          icon={<StatsIcon width={32} height={32} />}
+          onClick={() => setInteractionType(INTERACTION_TYPE.POLL)}
+          active={interactionType === INTERACTION_TYPE.POLL}
+        />
+        <InteractionSelectionCard
+          title={INTERACTION_TYPE.QUIZ}
+          icon={<QuestionIcon width={32} height={32} />}
+          onClick={() => setInteractionType(INTERACTION_TYPE.QUIZ)}
+          active={interactionType === INTERACTION_TYPE.QUIZ}
+        />
+      </Flex>
+      <Flex direction="column">
+        <Text variant="body2" css={{ mb: '$4' }}>{`Name this ${interactionType.toLowerCase()}`}</Text>
+        <Input
+          type="text"
+          value={title}
+          onChange={event => setTitle(event.target.value)}
+          css={{
+            backgroundColor: '$surface_bright',
+            border: '1px solid $border_default',
+          }}
+        />
+        <Flex align="center" css={{ mt: '$10' }}>
+          <Switch onCheckedChange={value => setHideVoteCount(value)} css={{ mr: '$6' }} />
+          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
+            Hide Vote Count
+          </Text>
+        </Flex>
+        <Flex align="center" css={{ mt: '$10' }}>
+          <Switch onCheckedChange={value => setAnonymous(value)} css={{ mr: '$6' }} />
+          <Text variant="body2" css={{ c: '$on_surface_medium' }}>
+            Make Results Anonymous
+          </Text>
+        </Flex>
+        {/* <Timer
+        timer={timer}
+        setTimer={setTimer}
+        showTimerDropDown={showTimerDropDown}
+        setShowTimerDropDown={setShowTimerDropDown}
+      /> */}
+
+        <Button
+          variant="primary"
+          disabled={validateTitle}
+          css={{ mt: '$10' }}
+          onClick={async () => {
+            const id = Date.now().toString();
+            await actions.interactivityCenter
+              .createPoll({
+                id,
+                title,
+                anonymous,
+                rolesThatCanViewResponses: hideVoteCount && localPeerRoleName ? [localPeerRoleName] : undefined,
+                type: interactionType.toLowerCase(),
+                // duration: showTimerDropDown ? timer : undefined,
+              })
+              .then(() => handleCreate(id))
+              .catch(err => setError(err.message));
+          }}
+        >
+          Create {interactionType}
+        </Button>
+        <ErrorText error={error || titleError} />
+      </Flex>
+    </>
+  );
+};
+
+const PrevMenu = () => {
+  const polls = useHMSStore(selectPolls)?.filter(poll => poll.state === 'started' || poll.state === 'stopped');
+  return polls?.length ? (
+    <Flex
+      css={{
+        borderTop: '$space$px solid $border_bright',
+        mt: '$10',
+        pt: '$10',
+      }}
+    >
+      <Flex direction="column" css={{ w: '100%' }}>
+        <Text variant="h6" css={{ c: '$on_surface_high' }}>
+          Previous Polls and Quizzes
+        </Text>
+        <Flex direction="column" css={{ gap: '$10', mt: '$8' }}>
+          {polls.map(poll => (
+            <InteractionCard
+              key={poll.id}
+              id={poll.id}
+              title={poll.title}
+              isLive={poll.state === 'started'}
+              isTimed={(poll.duration || 0) > 0}
+            />
+          ))}
+        </Flex>
+      </Flex>
+    </Flex>
+  ) : null;
+};
+
+const InteractionCard = ({ id, title, isLive, isTimed }) => {
+  const { setPollState } = usePollViewState();
+
+  const goToVote = id => {
+    setPollState({
+      [POLL_STATE.pollInView]: id,
+      [POLL_STATE.view]: POLL_VIEWS.VOTE,
+    });
+  };
+
+  return (
+    <Flex direction="column" css={{ backgroundColor: '$surface_bright', borderRadius: '$1', p: '$8' }}>
+      <Flex css={{ w: '100%', justifyContent: 'space-between', mb: '$sm' }}>
+        <Text variant="sub1" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
+          {title}
+        </Text>
+        <StatusIndicator isLive={isLive} shouldShowTimer={isLive && isTimed} />
+      </Flex>
+      <Flex css={{ w: '100%', gap: '$4' }} justify="end">
+        <Button variant="primary" onClick={() => goToVote(id)}>
+          View
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Polls/CreatePollQuiz/Timer.jsx

@@ -0,0 +1,71 @@
+// @ts-check
+import React, { useRef, useState } from 'react';
+import { Dropdown, Flex, Switch, Text } from '../../../../';
+import { DialogDropdownTrigger } from '../../../primitives/DropdownTrigger';
+import { useDropdownSelection } from '../../hooks/useDropdownSelection';
+
+const timerSettings = {
+  10: '10 secs',
+  15: '15 secs',
+  20: '20 secs',
+  25: '25 secs',
+  30: '30 secs',
+  60: '1 min',
+  120: '2 mins',
+  300: '5 mins',
+};
+
+export const Timer = ({ timer, setTimer, showTimerDropDown, setShowTimerDropDown }) => {
+  const selectionBg = useDropdownSelection();
+  const [timerDropdownToggle, setTimerDropdownToggle] = useState(false);
+  const timerDropdownRef = useRef();
+
+  return (
+    <Flex justify="between" align="center" css={{ mt: '$10' }}>
+      <Flex align="center">
+        <Switch checked={showTimerDropDown} onCheckedChange={setShowTimerDropDown} css={{ mr: '$6' }} />
+        <Text variant="body2" css={{ c: '$on_surface_medium' }}>
+          Timer
+        </Text>
+      </Flex>
+      <Flex align="center">
+        {showTimerDropDown ? (
+          <Dropdown.Root open={timerDropdownToggle} onOpenChange={setTimerDropdownToggle}>
+            <DialogDropdownTrigger
+              ref={timerDropdownRef}
+              title={timerSettings[timer]}
+              open={timerDropdownToggle}
+              titleCss={{ c: '$on_surface_high', ml: '$md' }}
+            />
+            <Dropdown.Portal>
+              <Dropdown.Content
+                align="start"
+                sideOffset={8}
+                css={{
+                  w: timerDropdownRef.current?.clientWidth,
+                  zIndex: 1000,
+                }}
+              >
+                {Object.keys(timerSettings).map(value => {
+                  const val = parseInt(value);
+                  return (
+                    <Dropdown.Item
+                      key={value}
+                      onSelect={() => setTimer(val)}
+                      css={{
+                        px: '$9',
+                        bg: timer === val ? selectionBg : undefined,
+                      }}
+                    >
+                      {timerSettings[val]}
+                    </Dropdown.Item>
+                  );
+                })}
+              </Dropdown.Content>
+            </Dropdown.Portal>
+          </Dropdown.Root>
+        ) : null}
+      </Flex>
+    </Flex>
+  );
+};