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

``bash
npm install react-multimedia-component lucide-react
`

Or with yarn:

`bash
yarn add react-multimedia-component
`

Dependencies

The component requires the following peer dependencies:

`bash
npm install react react-dom lucide-react
`

Usage

Import the CSS once in your app:
`javascript
// In your main index.js or App.js
import 'react-multimedia-component/dist/index.css';
import { MultimediaEditor } from 'react-multimedia-component';

function App() {
return ;
}
`

$3

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

`jsx
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 (
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'

$3

The MultimediaPlayer component displays different types of media content.

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

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

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

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

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

{/ File Display /}
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

$3

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

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

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

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

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

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

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

// Video Player
src="video.mp4"
type="video"
/>
`

Media Types

The package exports a MEDIA_TYPES constant with the following values:

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

Features by Media Type

$3

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

$3

- 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

$3

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

$3

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

$3

- 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:

`bash
npm install -D tailwindcss
`

Add to your tailwind.config.js:

`javascript
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

$3

`jsx
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 (



);
}
`

$3

`jsx
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 (



);
}
``