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} + + )} + ); }