React Poll, Breakout, and Whiteboard Controls

Add polls, breakout-room controls, and a whiteboard to a React room while keeping authority, success, and cleanup visible to the user.

This guide uses mediasfu-reactjs@4.2.9. The example type-checks against that package. Run live multi-user tests before release.

Use the supplied collaboration surfaces

User action	Public control	What it does
Polls	PollModal, handleCreatePoll, handleVotePoll, handleEndPoll	Create, vote, and end through the current room socket
Breakout rooms	BreakoutRoomsModal	Create, assign, start, update, stop, and return through the supplied surface
Whiteboard	Whiteboard	Render the collaborative canvas with its current room parameters

Give each supplied component the live room parameters from your MediasfuGeneric or ModernMediasfuGeneric room. The component owns its built-in operation flow; your app owns whether a user may see it, the surrounding page, and any product records.

Poll lifecycle

import { useState } from 'react';
import { handleCreatePoll, handleEndPoll, handleVotePoll } from 'mediasfu-reactjs';

async function runPoll(socket: Parameters<typeof handleCreatePoll>[0]['socket']) {
  const close = (visible: boolean) => {
    // Update your app state here.
  };
  await handleCreatePoll({
    poll: { question: 'Which topic next?', type: 'singleChoice', options: ['Media', 'Chat'] },
    socket,
    roomName: 'current-room',
    updateIsPollModalVisible: close,
  });
  await handleVotePoll({ pollId: 'current-poll', optionIndex: 0, socket, member: 'current-member', roomName: 'current-room', updateIsPollModalVisible: close });
  await handleEndPoll({ pollId: 'current-poll', socket, roomName: 'current-room', updateIsPollModalVisible: close });
}

The create, vote, and end callbacks close the poll surface only when the room acknowledges success. On an error, keep the draft or selected option visible, show the returned reason, and let the person retry or cancel. A successful lifecycle has a created poll, an accepted vote, and an ended poll visible to the people your room policy permits. Clear unsent drafts when the person leaves or the room closes.

Breakouts and whiteboards

import { BreakoutRoomsModal, Whiteboard } from 'mediasfu-reactjs';

export function CollaborationSurfaces({ breakoutParameters, whiteboardParameters }: {
  breakoutParameters: React.ComponentProps<typeof BreakoutRoomsModal>['parameters'];
  whiteboardParameters: React.ComponentProps<typeof Whiteboard>['parameters'];
}) {
  return <>
    <BreakoutRoomsModal isVisible onBreakoutRoomsClose={() => {}} parameters={breakoutParameters} />
    <Whiteboard customWidth={1280} customHeight={720} parameters={whiteboardParameters} showAspect />
  </>;
}

For breakouts, success is visible assignment followed by the intended start, participant movement, and return state. If an assignment is rejected or a participant disconnects, keep the control open, show the latest room state, and avoid claiming a move succeeded until the room state updates. When the session ends, clear app-owned assignment drafts and restore the normal room layout.

For a whiteboard, success is a visible canvas that reflects the active session and permitted collaborators. On a denied action, preserve existing board content, explain the role or room restriction, and keep the room usable. On exit, remove app-owned board exports and canvas references according to your retention policy.

Authority and application responsibilities

Your application decides whether the current user should see each control. Use current room role and backend policy, then let the supplied workflow enforce its own room rules.

Your app also owns lesson timing, breakout names, poll prompts, saved artifacts, and any external reporting.

Observable success

• Poll: intended participants receive the poll, can submit an allowed vote, and see the promised result policy.
• Breakout: assignments are visible and affected participants enter or return as intended.
• Whiteboard: allowed participants can open the board and see synchronized changes.

Recovery and cleanup

• Preserve an unsent poll draft only if your product promises draft recovery.
• Show what happens when a participant disconnects during breakout movement.
• Define who can close a poll, return participants, or end a whiteboard session.
• Remove app-owned drafts, cached assignments, and board exports when room policy requires it.

Release checklist

• Test at least two users with different roles.
• Test empty, denied, cancelled, disconnected, and reconnect states.
• Verify keyboard access, focus return, and readable status announcements.
• Confirm exported poll or whiteboard content follows your privacy and retention policy.
• Test participant leave and host end while each feature is open.