diff --git a/example.env b/example.env
index 23f7c4d9d..709532df8 100644
--- a/example.env
+++ b/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'
diff --git a/package.json b/package.json
index 57aecd4ff..b61a810eb 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Chat/ChatSelector.jsx b/src/components/Chat/ChatSelector.jsx
index f033df082..a42148981 100644
--- a/src/components/Chat/ChatSelector.jsx
+++ b/src/components/Chat/ChatSelector.jsx
@@ -194,7 +194,7 @@ export const ChatSelector = ({ role, peerId, onSelect }) => {
)}
diff --git a/src/components/Notifications/Notifications.jsx b/src/components/Notifications/Notifications.jsx
index 7aaccc179..c217f6445 100644
--- a/src/components/Notifications/Notifications.jsx
+++ b/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,6 +38,7 @@ export function Notifications() {
const subscribedNotifications = useSubscribedNotifications() || {};
const isHeadless = useIsHeadless();
const toggleWidget = useWidgetToggle();
+ const roomState = useHMSStore(selectRoomState);
useEffect(() => {
if (!notification) {
@@ -43,6 +46,9 @@ export function Notifications() {
}
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);
diff --git a/src/components/Notifications/PeerNotifications.jsx b/src/components/Notifications/PeerNotifications.jsx
index 0bf9ba3df..5b967c7eb 100644
--- a/src/components/Notifications/PeerNotifications.jsx
+++ b/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;
};
diff --git a/src/components/Polls/CreateQuestions/CreateQuestions.jsx b/src/components/Polls/CreateQuestions/CreateQuestions.jsx
index c20dcde5f..6f4d681c0 100644
--- a/src/components/Polls/CreateQuestions/CreateQuestions.jsx
+++ b/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 (
diff --git a/src/components/Polls/Voting/QuestionCard.jsx b/src/components/Polls/Voting/QuestionCard.jsx
index 7207bfb26..7b4bb58f8 100644
--- a/src/components/Polls/Voting/QuestionCard.jsx
+++ b/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 ||
diff --git a/src/components/Polls/Voting/TimedVoting.jsx b/src/components/Polls/Voting/TimedVoting.jsx
index 299d1d089..32b59a6b5 100644
--- a/src/components/Polls/Voting/TimedVoting.jsx
+++ b/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;
}
diff --git a/src/components/Polls/Voting/Voting.jsx b/src/components/Polls/Voting/Voting.jsx
index d2220d6a0..b16548f64 100644
--- a/src/components/Polls/Voting/Voting.jsx
+++ b/src/components/Polls/Voting/Voting.jsx
@@ -42,7 +42,7 @@ export const Voting = ({ id, toggleVoting }) => {
borderBottom: "1px solid $border_default",
}}
>
- {poll?.type?.toUpperCase()}
+ {poll.title}
{
+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 (
{
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 = (
+ <>
+
+ Setup your audio and video before joining
+
+
+
+
+
+
+ );
+
return (
- !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);
}}
diff --git a/src/components/Streaming/Common.jsx b/src/components/Streaming/Common.jsx
index 6d448146b..44bcbcc79 100644
--- a/src/components/Streaming/Common.jsx
+++ b/src/components/Streaming/Common.jsx
@@ -70,6 +70,7 @@ export const ContentHeader = ({ onBack, onClose, title = "", content }) => {
bg: "$surface_bright",
r: "$round",
alignSelf: "center",
+ mr: "$8",
}}
onClick={onBack}
data-testid="go_back"
@@ -77,7 +78,7 @@ export const ContentHeader = ({ onBack, onClose, title = "", content }) => {
) : null}
-
+
{title ? (
{title}
-
- {body}
-
+ {typeof body === "string" ? (
+
+ {body}
+
+ ) : (
+ {body}
+ )}