React Multimedia Component

A comprehensive React multimedia component library for editing and playing various media types including TEXT, MARKDOWN, AUDIO, VIDEO, and file uploads.

Features

• 📝 Text Editor - Simple text input field
• 📄 Markdown Editor - Full-featured markdown editor with live preview, math formulas (KaTeX), and interactive buttons
• 📁 File Upload - Easy file upload functionality
• 🎤 Audio Recorder - Record audio with pause/resume capabilities
• 🎥 Video Recorder - Record screen or camera with audio
• 🎵 Audio Player - Beautiful audio player with custom controls
• 📹 Video Player - Video player with fullscreen support
• 📖 Markdown Player - Render markdown with math formulas and interactive elements

Installation

npm install react-multimedia-component lucide-react

Or with yarn:

yarn add react-multimedia-component

Dependencies

The component requires the following peer dependencies:

npm install react react-dom lucide-react

Usage

Import the CSS once in your app:

// In your main index.js or App.js
import 'react-multimedia-component/dist/index.css';
import { MultimediaEditor } from 'react-multimedia-component';

function App() {
  return ;
}

MultimediaEditor

The MultimediaEditor component provides a unified interface for creating different types of media content.

import { MultimediaEditor, MEDIA_TYPES } from 'react-multimedia-component';

function App() {
  const handleSubmit = (result) => {
    console.log('Media type:', result.type);
    
    if (result.type === MEDIA_TYPES.TEXT || result.type === MEDIA_TYPES.MARKDOWN) {
      console.log('Content:', result.content);
    } else if (result.file) {
      console.log('File:', result.file);
      // Upload file to your server
    }
  };

  return (
    <MultimediaEditor 
      onSubmit={handleSubmit}
      onCancel={() => console.log('Cancelled')}
      initialType="TEXT"
    />
  );
}

Props

• onSubmit (function): Callback when content is submitted. Receives an object with type, content (for TEXT/MARKDOWN), or file (for UPLOAD/AUDIO/VIDEO)
• onCancel (function, optional): Callback when user cancels
• initialType (string, optional): Initial media type ('TEXT', 'MARKDOWN', 'UPLOAD', 'AUDIO', 'VIDEO'). Default: 'TEXT'

MultimediaPlayer

The MultimediaPlayer component displays different types of media content.

import { MultimediaPlayer, MEDIA_TYPES } from 'react-multimedia-component';

function App() {
  return (
    <>
      {/* Text Player */}
      <MultimediaPlayer 
        mediaType={MEDIA_TYPES.TEXT}
        content="Hello, this is text content!"
        title="My Text"
      />

      {/* Markdown Player */}
      <MultimediaPlayer 
        mediaType={MEDIA_TYPES.MARKDOWN}
        content="# Hello World\n\nThis is **markdown**!"
      />

      {/* Audio Player */}
      <MultimediaPlayer 
        mediaType={MEDIA_TYPES.AUDIO}
        mediaUrl="https://example.com/audio.mp3"
        title="My Audio Track"
      />

      {/* Video Player */}
      <MultimediaPlayer 
        mediaType={MEDIA_TYPES.VIDEO}
        mediaUrl="https://example.com/video.mp4"
      />

      {/* File Display */}
      <MultimediaPlayer 
        mediaType={MEDIA_TYPES.UPLOAD}
        mediaUrl="https://example.com/document.pdf"
        title="My Document"
      />
    </>
  );
}

Props

• mediaType (string, required): Type of media ('TEXT', 'MARKDOWN', 'UPLOAD', 'AUDIO', 'VIDEO')
• content (string, optional): Content for TEXT and MARKDOWN types
• mediaUrl (string, optional): URL for UPLOAD, AUDIO, and VIDEO types
• title (string, optional): Title to display

Individual Components

You can also import and use individual editor/player components:

import { 
  MarkdownEditor, 
  AudioRecorder, 
  VideoRecorder,
  MarkdownPlayer,
  AudioPlayer,
  VideoPlayer 
} from 'react-multimedia-component';

// Markdown Editor
<MarkdownEditor 
  onSubmit={(content) => console.log(content)}
  onCancel={() => console.log('Cancelled')}
  initialContent="# Start here"
/>

// Audio Recorder
<AudioRecorder 
  onSubmit={(audioFile) => console.log(audioFile)}
  onCancel={() => console.log('Cancelled')}
/>

// Video Recorder
<VideoRecorder 
  onSubmit={(videoFile) => console.log(videoFile)}
  onCancel={() => console.log('Cancelled')}
/>

// Markdown Player
<MarkdownPlayer 
  content="# Hello\n\nMarkdown content"
/>

// Audio Player
<AudioPlayer 
  src="audio.mp3"
  title="My Track"
/>

// Video Player
<VideoPlayer 
  src="video.mp4"
  type="video"
/>

Media Types

The package exports a MEDIA_TYPES constant with the following values:

{
  TEXT: 'TEXT',
  MARKDOWN: 'MARKDOWN',
  UPLOAD: 'UPLOAD',
  AUDIO: 'AUDIO',
  VIDEO: 'VIDEO'
}

Features by Media Type

TEXT

• Simple textarea input
• Character count (optional)
• Submit and cancel buttons

MARKDOWN

• Live preview pane
• Rich toolbar with formatting options
• Math formula support (KaTeX)
• Interactive buttons
• Syntax highlighting for code blocks
• Image and link insertion
• Audio and video embedding

UPLOAD

• File input field
• Support for all file types
• Returns File object for upload

AUDIO

• Record from microphone
• Pause/resume recording
• Playback preview
• Download recorded audio
• Visual waveform animation
• Returns WebM audio file

VIDEO

• Screen recording mode
• Camera recording mode
• Pause/resume recording
• Playback preview
• Download recorded video
• Returns WebM video file

Styling

The components use Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project:

npm install -D tailwindcss

Add to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/react-multimedia-component/**/*.{js,jsx}"
  ],
  // ... rest of config
}

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• MediaRecorder API support required for audio/video recording
• getUserMedia API support required for camera/microphone access

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and feature requests, please use the GitHub issues page.

Examples

Complete Example with File Upload

import { useState } from 'react';
import { MultimediaEditor, MultimediaPlayer, MEDIA_TYPES } from 'react-multimedia-component';

function App() {
  const [mediaData, setMediaData] = useState(null);
  const [isEditing, setIsEditing] = useState(true);

  const handleSubmit = async (result) => {
    // Handle file uploads
    if (result.file) {
      const formData = new FormData();
      formData.append('file', result.file);
      
      try {
        const response = await fetch('/api/upload', {
          method: 'POST',
          body: formData
        });
        const data = await response.json();
        
        setMediaData({
          type: result.type,
          mediaUrl: data.url
        });
      } catch (error) {
        console.error('Upload failed:', error);
      }
    } else {
      // Handle text/markdown content
      setMediaData({
        type: result.type,
        content: result.content
      });
    }
    
    setIsEditing(false);
  };

  return (
    <div>
      {isEditing ? (
        <MultimediaEditor 
          onSubmit={handleSubmit}
          onCancel={() => setIsEditing(false)}
        />
      ) : mediaData ? (
        <MultimediaPlayer 
          mediaType={mediaData.type}
          content={mediaData.content}
          mediaUrl={mediaData.mediaUrl}
        />
      ) : null}
    </div>
  );
}

Standalone Audio Recording

import { useState } from 'react';
import { AudioRecorder } from 'react-multimedia-component';

function AudioRecordingApp() {
  const [showRecorder, setShowRecorder] = useState(false);
  const [audioFile, setAudioFile] = useState(null);

  const handleAudioSubmit = (file) => {
    setAudioFile(file);
    setShowRecorder(false);
    
    // Upload to server
    const formData = new FormData();
    formData.append('audio', file);
    
    fetch('/api/upload-audio', {
      method: 'POST',
      body: formData
    });
  };

  return (
    <div>
      <button onClick={() => setShowRecorder(true)}>
        Record Audio
      </button>
      
      {showRecorder && (
        <AudioRecorder 
          onSubmit={handleAudioSubmit}
          onCancel={() => setShowRecorder(false)}
        />
      )}
      
      {audioFile && (
        <p>Recorded: {audioFile.name} ({audioFile.size} bytes)</p>
      )}
    </div>
  );
}