diff --git a/apps/frontend/src/components/live/LiveStage.tsx b/apps/frontend/src/components/live/LiveStage.tsx
index 8c45c46..c52a904 100644
--- a/apps/frontend/src/components/live/LiveStage.tsx
+++ b/apps/frontend/src/components/live/LiveStage.tsx
@@ -259,6 +259,7 @@ function Stage({ sessionId, isOrganizer, authToken, quizEnded }: StageProps) {
muteAllSpeakers(sessionId, authToken)}
+ failureMessage="Couldn't mute all speakers."
>
Mute All
@@ -396,7 +397,7 @@ function HostRowActions({ participant: p, sessionId, authToken }: { participant:
return (
<>
- stopSpeaking(sessionId, authToken, participantId)}>
+ stopSpeaking(sessionId, authToken, participantId)} failureMessage="Couldn't mute this participant.">
Mute
>
@@ -406,7 +407,7 @@ function HostRowActions({ participant: p, sessionId, authToken }: { participant:
return (
<>
{p.attributes.hand === 'up' && }
- allowToSpeak(sessionId, authToken, participantId)}>
+ allowToSpeak(sessionId, authToken, participantId)} failureMessage="Couldn't allow this participant to speak.">
Let speak
>
@@ -439,27 +440,49 @@ function PlayerRow({ participant, children }: { participant: Participant; childr
}
/** A host's button on one player's row; `label` names the player for screen readers. */
-function HostAction({ label, onClick, children }: { label: string; onClick: () => Promise; children: ReactNode }) {
+function HostAction({
+ label,
+ onClick,
+ children,
+ failureMessage,
+}: {
+ label: string;
+ onClick: () => Promise;
+ children: ReactNode;
+ failureMessage: string;
+}) {
const [busy, setBusy] = useState(false);
+ const [problem, setProblem] = useState(null);
return (
-
+
+
+
+ {problem && (
+
+ {problem}
+
+ )}
+
);
}