mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
189 lines (188 loc) • 6.5 kB
TypeScript
import React from 'react';
import { Socket } from 'socket.io-client';
import { Poll, ShowAlert, HandleCreatePollType, HandleEndPollType, HandleVotePollType } from '../../@types/types';
/**
* Configuration options for the PollModal component.
*
* @interface PollModalOptions
*
* **Modal Control:**
* @property {boolean} isPollModalVisible - Controls modal visibility
* @property {() => void} onClose - Callback when modal is closed
* @property {(isVisible: boolean) => void} updateIsPollModalVisible - Updates modal visibility state
*
* **Poll Management:**
* @property {Poll[]} polls - Array of all polls in the room
* @property {Poll | null} poll - Currently active/selected poll
* @property {HandleCreatePollType} handleCreatePoll - Handler for creating new polls (host/co-host only)
* @property {HandleEndPollType} handleEndPoll - Handler for ending active polls (host/co-host only)
* @property {HandleVotePollType} handleVotePoll - Handler for voting in polls
*
* **User Context:**
* @property {string} member - Current user's name/ID
* @property {string} islevel - User level ('0'=participant, '1'=co-host, '2'=host) - determines if create/end poll buttons are shown
*
* **Session Context:**
* @property {Socket} socket - Socket.io instance for real-time poll synchronization
* @property {string} roomName - Room identifier for poll events
* @property {ShowAlert} [showAlert] - Alert display function for user feedback
*
* **Customization:**
* @property {'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'center'} [position='topRight'] - Modal position on screen
* @property {string} [backgroundColor='#83c0e9'] - Modal background color
* @property {object} [style] - Additional custom styles for modal container
*
* **Advanced Render Overrides:**
* @property {(options: { defaultContent: JSX.Element; dimensions: { width: number; height: number } }) => JSX.Element} [renderContent] - Custom render function for modal content
* @property {(options: { defaultContainer: JSX.Element; dimensions: { width: number; height: number } }) => React.ReactNode} [renderContainer] - Custom render function for modal container
*/
export interface PollModalOptions {
isPollModalVisible: boolean;
onClose: () => void;
position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'center';
backgroundColor?: string;
isDarkMode?: boolean;
member: string;
islevel: string;
polls: Poll[];
poll: Poll | null;
socket: Socket;
roomName: string;
showAlert?: ShowAlert;
updateIsPollModalVisible: (isVisible: boolean) => void;
handleCreatePoll: HandleCreatePollType;
handleEndPoll: HandleEndPollType;
handleVotePoll: HandleVotePollType;
/**
* Optional custom style for the modal container.
*/
style?: object;
/**
* Custom render function for modal content.
*/
renderContent?: (options: {
defaultContent: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => JSX.Element;
/**
* Custom render function for the modal container.
*/
renderContainer?: (options: {
defaultContainer: JSX.Element;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type PollModalType = (options: PollModalOptions) => JSX.Element;
/**
* PollModal - Interactive polling and voting interface
*
* PollModal is a React Native component that provides a complete polling system
* for meetings. Hosts/co-hosts can create polls with multiple options, participants
* can vote, and results are displayed in real-time with vote counts and percentages.
*
* **Key Features:**
* - Poll creation with custom question and multiple options (host/co-host only)
* - Real-time voting for participants
* - Live vote count and percentage display
* - Poll history view (all active and inactive polls)
* - End poll functionality (host/co-host only)
* - Single vote per participant enforcement
* - Socket.io synchronization for instant updates
* - Position-configurable modal (5 positions)
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.pollModal` to
* provide a completely custom polling interface.
*
* @component
* @param {PollModalOptions} props - Configuration options
*
* @returns {JSX.Element} Rendered poll modal
*
* @example
* ```tsx
* // Host creating and managing polls
* import React, { useState } from 'react';
* import { PollModal } from 'mediasfu-reactnative-expo';
* import { io } from 'socket.io-client';
*
* const socket = io('https://your-server.com');
* const [showPolls, setShowPolls] = useState(false);
*
* const activePoll = {
* id: 'poll-1',
* question: 'What time works best?',
* options: ['Morning', 'Afternoon', 'Evening'],
* status: 'active',
* voters: { 'user1': 0, 'user2': 2 },
* votes: [1, 0, 1],
* };
*
* return (
* <PollModal
* isPollModalVisible={showPolls}
* onClose={() => setShowPolls(false)}
* member="host-user"
* islevel="2" // Host - can create/end polls
* polls={[activePoll]}
* poll={activePoll}
* socket={socket}
* roomName="meeting-room-123"
* handleCreatePoll={handleCreatePoll}
* handleEndPoll={handleEndPoll}
* handleVotePoll={handleVotePoll}
* updateIsPollModalVisible={setShowPolls}
* showAlert={showCustomAlert}
* />
* );
* ```
*
* @example
* ```tsx
* // Participant voting in polls
* return (
* <PollModal
* isPollModalVisible={isVisible}
* onClose={handleClose}
* member="participant-user"
* islevel="0" // Participant - can only vote
* polls={allPolls}
* poll={currentPoll}
* socket={socketConnection}
* roomName={roomId}
* handleCreatePoll={handleCreatePoll}
* handleEndPoll={handleEndPoll}
* handleVotePoll={handleVotePoll}
* updateIsPollModalVisible={setIsVisible}
* position="center"
* backgroundColor="#e8f5e9"
* />
* );
* ```
*
* @example
* ```tsx
* // Using custom UI via uiOverrides
* const config = {
* uiOverrides: {
* pollModal: {
* component: MyCustomPollInterface,
* injectedProps: {
* theme: 'dark',
* allowAnonymousVoting: false,
* },
* },
* },
* };
*
* return <MyMeetingComponent config={config} />;
* ```
*/
declare const PollModal: React.FC<PollModalOptions>;
export default PollModal;