Const// Basic menu with meeting info and share buttons
import React, { useState } from 'react';
import { MenuModal } from 'mediasfu-reactjs';
function MeetingMenu() {
const [isMenuVisible, setIsMenuVisible] = useState(false);
return (
<>
<button onClick={() => setIsMenuVisible(true)}>Open Menu</button>
<MenuModal
isVisible={isMenuVisible}
onClose={() => setIsMenuVisible(false)}
roomName="meeting-123-456"
adminPasscode="1234"
islevel="2"
eventType="conference"
shareButtons={true}
backgroundColor="#0f172a"
position="bottomRight"
/>
</>
);
}
// Menu with custom action buttons
import { MenuModal } from 'mediasfu-reactjs';
import { faRecordVinyl, faUsers, faChartLine } from '@fortawesome/free-solid-svg-icons';
function CustomActionsMenu({ isVisible, onClose, onStartRecording, onViewStats }) {
const customButtons = [
{
action: onStartRecording,
show: true,
backgroundColor: "#dc2626",
disabled: false,
icon: faRecordVinyl,
text: "Start Recording",
textStyle: { color: "white", fontWeight: 600 },
},
{
action: onViewStats,
show: true,
backgroundColor: "#3b82f6",
disabled: false,
icon: faChartLine,
text: "View Statistics",
textStyle: { color: "white" },
},
{
action: () => console.log("Manage participants"),
show: true,
backgroundColor: "#22c55e",
icon: faUsers,
text: "Manage Participants",
},
];
return (
<MenuModal
isVisible={isVisible}
onClose={onClose}
customButtons={customButtons}
shareButtons={false}
roomName="event-789"
adminPasscode="secure123"
islevel="2"
eventType="webinar"
backgroundColor="#1e3a8a"
position="topRight"
/>
);
}
// Custom rendering with branded styling
import { MenuModal } from 'mediasfu-reactjs';
function BrandedMenu({ isVisible, onClose, roomName, passcode }) {
return (
<MenuModal
isVisible={isVisible}
onClose={onClose}
roomName={roomName}
adminPasscode={passcode}
islevel="2"
eventType="conference"
backgroundColor="transparent"
contentProps={{
style: {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
borderRadius: 16,
boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
},
}}
renderTitle={({ defaultTitle, titleContent }) => (
<div style={{
display: 'flex',
alignItems: 'center',
gap: 12,
fontSize: 20,
fontWeight: 700,
color: '#ffffff',
}}>
<span>🎯</span>
{titleContent}
</div>
)}
renderMeetingId={({ defaultMeetingId, roomName }) => (
<div style={{
padding: 16,
backgroundColor: 'rgba(255,255,255,0.1)',
borderRadius: 12,
backdropFilter: 'blur(10px)',
}}>
<p style={{ color: '#e2e8f0', fontSize: 12, marginBottom: 4 }}>Meeting ID</p>
<p style={{ color: '#ffffff', fontSize: 16, fontWeight: 600, fontFamily: 'monospace' }}>
{roomName}
</p>
</div>
)}
/>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, MenuModal } from 'mediasfu-reactjs';
const uiOverrides = {
menuModal: {
component: (props) => (
<MenuModal
{...props}
backgroundColor="#0f172a"
position="topRight"
contentProps={{
style: {
borderRadius: 20,
border: '2px solid #3b82f6',
boxShadow: '0 10px 40px rgba(59,130,246,0.3)',
},
}}
customButtonsComponentProps={{
buttonStyle: {
borderRadius: 12,
padding: '12px 20px',
transition: 'all 0.2s ease',
},
}}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
MenuModal - Quick actions tray with meeting info, sharing, and custom buttons
A comprehensive menu modal that provides access to meeting details (ID, passcode), share functionality, and custom action buttons. Perfect for exposing common actions and meeting information in a compact, accessible interface.
Features: