Function MenuModal

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:

• Meeting ID display with copy functionality
• Admin passcode display (host only)
• Configurable share buttons for inviting participants
• Custom action buttons with icons and styling
• Flexible positioning (bottomRight, topRight, etc.)
• Custom render hooks for complete customization
• Responsive design with scrollable content

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"
      />
    </>
  );
}
Copy

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"
    />
  );
}
Copy

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>
      )}
    />
  );
}
Copy

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} />;
Copy