feat: sync webapp

example.env

@@ -12,6 +12,7 @@ REACT_APP_DEFAULT_APP_DETAILS='{}'
 REACT_APP_ENABLE_STATS_FOR_NERDS='false' 
 REACT_APP_PUSHER_APP_KEY=''
 REACT_APP_PUSHER_AUTHENDPOINT=''
+REACT_APP_PUSHER_CLUSTER=''
 REACT_APP_HEADLESS_JOIN='false'
 REACT_APP_ZIPY_KEY=
 REACT_APP_TITLE='100ms App'

package.json

@@ -9,11 +9,11 @@
     "src"
   ],
   "dependencies": {
-    "@100mslive/hls-player": "0.1.13",
-    "@100mslive/hms-virtual-background": "1.11.13",
-    "@100mslive/react-icons": "0.8.13",
-    "@100mslive/react-sdk": "0.8.13",
-    "@100mslive/roomkit-react": "0.1.4",
+    "@100mslive/hls-player": "0.1.24",
+    "@100mslive/hms-virtual-background": "1.11.24",
+    "@100mslive/react-icons": "0.8.24",
+    "@100mslive/react-sdk": "0.8.24",
+    "@100mslive/roomkit-react": "0.1.15",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@tldraw/tldraw": "^1.18.4",

src/components/Chat/ChatSelector.jsx

@@ -194,7 +194,7 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
         <Box css={{ px: "$8" }}>
           <ParticipantSearch
             onSearch={setSearch}
-            placeholder="Search participants"
+            placeholder="Search for participants"
           />
         </Box>
       )}

src/components/Notifications/Notifications.jsx

@@ -3,7 +3,9 @@ import React, { useEffect } from "react";
 import { logMessage } from "zipyai";
 import {
   HMSNotificationTypes,
+  HMSRoomState,
   selectLocalPeerID,
+  selectRoomState,
   useHMSNotifications,
   useHMSStore,
 } from "@100mslive/react-sdk";
@@ -36,13 +38,17 @@ export function Notifications() {
   const subscribedNotifications = useSubscribedNotifications() || {};
   const isHeadless = useIsHeadless();
   const toggleWidget = useWidgetToggle();
+  const roomState = useHMSStore(selectRoomState);
 
   useEffect(() => {
     if (!notification) {
       return;
     }
     switch (notification.type) {
       case HMSNotificationTypes.METADATA_UPDATED:
+        if (roomState !== HMSRoomState.Connected) {
+          return;
+        }
         // Don't toast message when metadata is updated and raiseHand is false.
         // Don't toast message in case of local peer.
         const metadata = getMetadata(notification.data?.metadata);

src/components/Notifications/PeerNotifications.jsx

@@ -1,7 +1,10 @@
 import { useEffect } from "react";
 import {
   HMSNotificationTypes,
+  HMSRoomState,
+  selectRoomState,
   useHMSNotifications,
+  useHMSStore,
 } from "@100mslive/react-sdk";
 import { ToastBatcher } from "../Toast/ToastBatcher";
 import { useSubscribedNotifications } from "../AppData/useUISettings";
@@ -22,7 +25,12 @@ export const PeerNotifications = () => {
   const isPeerLeftSubscribed = useSubscribedNotifications(
     SUBSCRIBED_NOTIFICATIONS.PEER_LEFT
   );
+  const roomState = useHMSStore(selectRoomState);
+
   useEffect(() => {
+    if (roomState !== HMSRoomState.Connected) {
+      return;
+    }
     if (
       !notification ||
       (notification?.data?.roleName &&
@@ -51,7 +59,7 @@ export const PeerNotifications = () => {
         return;
     }
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]);
 
   return null;
 };

src/components/Polls/CreateQuestions/CreateQuestions.jsx

@@ -44,7 +44,7 @@ export function CreateQuestions() {
   };
   const headingTitle = interaction?.type
     ? interaction?.type?.[0]?.toUpperCase() + interaction?.type?.slice(1)
-    : "Polls/Quiz";
+    : "Polls and Quizzes";
   const isQuiz = interaction?.type === "quiz";
   return (
     <Container rounded>

src/components/Polls/Voting/QuestionCard.jsx

@@ -1,7 +1,7 @@
 // @ts-check
 import React, { useCallback, useMemo, useState } from "react";
 import {
-  selectLocalPeerID,
+  selectLocalPeer,
   selectLocalPeerRoleName,
   useHMSActions,
   useHMSStore,
@@ -51,11 +51,13 @@ export const QuestionCard = ({
   rolesThatCanViewResponses,
 }) => {
   const actions = useHMSActions();
-  const localPeerID = useHMSStore(selectLocalPeerID);
+  const localPeer = useHMSStore(selectLocalPeer);
   const localPeerResponse = responses?.find(
-    response => response.peer?.peerid === localPeerID
+    response =>
+      response.peer?.peerid === localPeer?.id ||
+      response.peer?.userid === localPeer?.customerUserId
   );
-  const isLocalPeerCreator = localPeerID === startedBy;
+  const isLocalPeerCreator = localPeer?.id === startedBy;
   const localPeerRoleName = useHMSStore(selectLocalPeerRoleName);
   const roleCanViewResponse =
     !rolesThatCanViewResponses ||

src/components/Polls/Voting/TimedVoting.jsx

@@ -8,8 +8,11 @@ import { QuestionCard } from "./QuestionCard";
  * @returns
  */
 export const TimedView = ({ poll }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const activeQuestion = poll.questions?.[currentIndex];
+  // backend question index starts at 1
+  const [currentIndex, setCurrentIndex] = useState(1);
+  const activeQuestion = poll.questions?.find(
+    question => question.index === currentIndex
+  );
   if (!activeQuestion) {
     return null;
   }

src/components/Polls/Voting/Voting.jsx

@@ -42,7 +42,7 @@ export const Voting = ({ id, toggleVoting }) => {
             borderBottom: "1px solid $border_default",
           }}
         >
-          <Text variant="h6">{poll?.type?.toUpperCase()}</Text>
+          <Text variant="h6">{poll.title}</Text>
           <StatusIndicator
             isLive={isLive}
             shouldShowTimer={isLive && isTimed}

src/components/Preview/PreviewJoin.jsx

@@ -148,7 +148,7 @@ const Container = styled("div", {
   px: "$10",
 });
 
-const PreviewTile = ({ name, error }) => {
+export const PreviewTile = ({ name, error }) => {
   const localPeer = useHMSStore(selectLocalPeer);
   const borderAudioRef = useBorderAudioLevel(localPeer?.audioTrack);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
@@ -199,7 +199,7 @@ const PreviewTile = ({ name, error }) => {
   );
 };
 
-const PreviewControls = () => {
+export const PreviewControls = () => {
   return (
     <Flex
       justify="between"

src/components/RoleChangeRequestModal.jsx

@@ -1,28 +1,64 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
+  selectLocalPeerName,
   selectRoleChangeRequest,
   useHMSActions,
   useHMSStore,
 } from "@100mslive/react-sdk";
+import { Flex, Text } from "@100mslive/roomkit-react";
+import { PreviewControls, PreviewTile } from "./Preview/PreviewJoin";
 import { RequestDialog } from "../primitives/DialogContent";
 import { useIsHeadless } from "./AppData/useUISettings";
 
 export const RoleChangeRequestModal = () => {
   const hmsActions = useHMSActions();
   const isHeadless = useIsHeadless();
   const roleChangeRequest = useHMSStore(selectRoleChangeRequest);
+  const name = useHMSStore(selectLocalPeerName);
+
+  useEffect(() => {
+    if (!roleChangeRequest?.role || isHeadless) {
+      return;
+    }
+
+    hmsActions.preview({ asRole: roleChangeRequest.role.name });
+  }, [hmsActions, roleChangeRequest, isHeadless]);
 
   if (!roleChangeRequest?.role || isHeadless) {
     return null;
   }
 
+  const body = (
+    <>
+      <Text
+        css={{ fontWeight: 400, c: "$on_surface_medium", textAlign: "center" }}
+      >
+        Setup your audio and video before joining
+      </Text>
+      <Flex
+        align="center"
+        justify="center"
+        css={{
+          "@sm": { width: "100%" },
+          flexDirection: "column",
+        }}
+      >
+        <PreviewTile name={name} />
+        <PreviewControls />
+      </Flex>
+    </>
+  );
+
   return (
     <RequestDialog
-      title="Role Change Request"
-      onOpenChange={value =>
-        !value && hmsActions.rejectChangeRole(roleChangeRequest)
-      }
-      body={`${roleChangeRequest?.requestedBy?.name} has requested you to change your role to ${roleChangeRequest?.role?.name}.`}
+      title={`You're invited to join the ${roleChangeRequest.role.name} role`}
+      onOpenChange={async value => {
+        if (!value) {
+          await hmsActions.rejectChangeRole(roleChangeRequest);
+          await hmsActions.cancelMidCallPreview();
+        }
+      }}
+      body={body}
       onAction={() => {
         hmsActions.acceptChangeRole(roleChangeRequest);
       }}

src/components/Streaming/Common.jsx

@@ -70,14 +70,15 @@ export const ContentHeader = ({ onBack, onClose, title = "", content }) => {
             bg: "$surface_bright",
             r: "$round",
             alignSelf: "center",
+            mr: "$8",
           }}
           onClick={onBack}
           data-testid="go_back"
         >
           <ChevronLeftIcon width={16} height={16} />
         </Text>
       ) : null}
-      <Box css={{ flex: "1 1 0", mx: "$8" }}>
+      <Box css={{ flex: "1 1 0" }}>
         {title ? (
           <Text
             variant="tiny"

src/plugins/whiteboard/PusherCommunicationProvider.js

@@ -37,7 +37,7 @@ class PusherCommunicationProvider {
 
     /** @private */
     this.pusher = new Pusher(process.env.REACT_APP_PUSHER_APP_KEY, {
-      cluster: "ap2",
+      cluster: process.env.REACT_APP_PUSHER_CLUSTER || "ap2",
       authEndpoint: process.env.REACT_APP_PUSHER_AUTHENDPOINT,
     });
 

src/plugins/whiteboard/README.md

@@ -24,6 +24,6 @@ APP_ID="app_id"
 ## Whiteboard Client
 
 - Copy the whole folder at `/src/plugins/whiteboard` into your live video conferencing apps using 100ms' SDKs.
-- Add the pusher app key and pusher auth endpoint to `REACT_APP_PUSHER_APP_KEY` and `REACT_APP_PUSHER_AUTHENDPOINT` environment variables.
+- Add the pusher app key, auth endpoint and cluster to `REACT_APP_PUSHER_APP_KEY`, `REACT_APP_PUSHER_AUTHENDPOINT`, `REACT_APP_PUSHER_CLUSTER` environment variables.
 - The `useWhiteboardMetadata` hook returns state such as the whiteboard owner(`whiteboardOwner`) and action to toggle the whiteboard(`toggleWhiteboard`). Refer usage in `ToggleWhiteboard.jsx` - an icon button to toggle the whiteboard based on the active state.
 - When the whiteboard is active(`whiteboardOwner` from `useWhiteboardMetadata` is not null), render the `Whiteboard` component on your UI to let your users draw on the whiteboard. Refer `mainView.jsx` and `WhiteboardView.jsx`.

src/primitives/DialogContent.jsx

@@ -96,17 +96,21 @@ export const RequestDialog = ({
           {Icon ? Icon : null}
           <Text variant="h6">{title}</Text>
         </Dialog.Title>
-        <Text
-          variant="md"
-          css={{
-            fontWeight: 400,
-            mt: "$4",
-            mb: "$10",
-            c: "$on_surface_medium",
-          }}
-        >
-          {body}
-        </Text>
+        {typeof body === "string" ? (
+          <Text
+            variant="md"
+            css={{
+              mt: "$4",
+              mb: "$10",
+              fontWeight: 400,
+              c: "$on_surface_medium",
+            }}
+          >
+            {body}
+          </Text>
+        ) : (
+          <Box css={{ mt: "$4", mb: "$10" }}>{body}</Box>
+        )}
         <Flex
           justify="center"
           align="center"