Function RecordingModal

RecordingModal - Comprehensive recording configuration interface

A feature-rich modal for configuring cloud recording settings including video quality, display options, branding (watermarks, name tags, custom text), background colors, and HLS streaming. Provides standard and advanced configuration panels with real-time preview.

Features:

• Standard and advanced configuration panels
• Video quality selection (fullDisplay, bestDisplay, all)
• Display type options (video, media, all)
• Background color picker for recording canvas
• Name tags with custom colors
• Custom text watermarks with positioning
• Recording orientation (landscape/portrait)
• Media/audio/video participant selection
• HLS streaming toggle
• Pause/resume recording controls
• Custom render hooks for complete UI flexibility

import React, { useState } from 'react';
import { RecordingModal } from 'mediasfu-reactjs';

function RecordingControls({ parameters }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      <button onClick={() => setIsVisible(true)}>
        Configure Recording
      </button>
      <RecordingModal
        isRecordingModalVisible={isVisible}
        onClose={() => setIsVisible(false)}
        confirmRecording={parameters.confirmRecording}
        startRecording={parameters.startRecording}
        parameters={parameters}
        backgroundColor="#0f172a"
        position="bottomRight"
      />
    </>
  );
}
Copy

import { RecordingModal } from 'mediasfu-reactjs';

function BrandedRecording({ isVisible, onClose, parameters }) {
  return (
    <RecordingModal
      isRecordingModalVisible={isVisible}
      onClose={onClose}
      confirmRecording={parameters.confirmRecording}
      startRecording={parameters.startRecording}
      parameters={parameters}
      backgroundColor="#1e3a8a"
      position="topRight"
      contentProps={{
        style: {
          borderRadius: 20,
          border: '2px solid #3b82f6',
          boxShadow: '0 20px 60px rgba(59,130,246,0.3)',
          maxHeight: '90vh',
          overflow: 'auto',
        },
      }}
      confirmButtonProps={{
        style: {
          background: 'linear-gradient(135deg, #22c55e 0%, #14532d 100%)',
          color: 'white',
          padding: '12px 32px',
          borderRadius: 12,
          fontWeight: 600,
          border: 'none',
          cursor: 'pointer',
        },
      }}
      startButtonProps={{
        style: {
          background: 'linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%)',
          color: 'white',
          padding: '12px 32px',
          borderRadius: 12,
          fontWeight: 600,
          border: 'none',
          cursor: 'pointer',
        },
      }}
    />
  );
}
Copy

import { RecordingModal } from 'mediasfu-reactjs';

function AnalyticsRecording({ isVisible, onClose, parameters }) {
  const handleConfirm = async () => {
    analytics.track('recording_configured', {
      videoType: parameters.recordingVideoType,
      displayType: parameters.recordingDisplayType,
      hasNameTags: parameters.recordingNameTags,
      hasCustomText: parameters.recordingAddText,
      hasHLS: parameters.recordingAddHLS,
    });
    await parameters.confirmRecording({ parameters });
  };

  const handleStart = async () => {
    analytics.track('recording_started', {
      isPaused: parameters.recordPaused,
    });
    await parameters.startRecording({ parameters });
  };

  return (
    <RecordingModal
      isRecordingModalVisible={isVisible}
      onClose={onClose}
      confirmRecording={handleConfirm}
      startRecording={handleStart}
      parameters={parameters}
      renderActions={({ defaultActions, recordPaused, handleConfirm, handleStart }) => (
        <div style={{
          display: 'flex',
          gap: 12,
          padding: 20,
          borderTop: '2px solid #1e3a8a',
          justifyContent: 'space-between',
        }}>
          <button
            onClick={handleConfirm}
            style={{
              flex: 1,
              background: '#3b82f6',
              color: 'white',
              padding: '14px 24px',
              borderRadius: 12,
              border: 'none',
              fontWeight: 600,
              cursor: 'pointer',
            }}
          >
            💾 Save Settings
          </button>
          <button
            onClick={handleStart}
            style={{
              flex: 1,
              background: recordPaused ? '#22c55e' : '#dc2626',
              color: 'white',
              padding: '14px 24px',
              borderRadius: 12,
              border: 'none',
              fontWeight: 600,
              cursor: 'pointer',
            }}
          >
            {recordPaused ? '▶️ Resume' : '🔴 Start'} Recording
          </button>
        </div>
      )}
    />
  );
}
Copy

import { MediasfuGeneric, RecordingModal } from 'mediasfu-reactjs';

const uiOverrides = {
  recordingModal: {
    component: (props) => (
      <RecordingModal
        {...props}
        backgroundColor="#0f172a"
        position="topRight"
        contentProps={{
          style: {
            maxHeight: '85vh',
            borderRadius: 20,
            border: '2px solid #3b82f6',
          },
        }}
        confirmButtonProps={{
          style: {
            background: '#22c55e',
            borderRadius: 12,
            padding: '12px 28px',
          },
        }}
        startButtonProps={{
          style: {
            background: '#dc2626',
            borderRadius: 12,
            padding: '12px 28px',
          },
        }}
      />
    ),
  },
};

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy