ConstControls visibility of animated waveform (typically based on speaking state)
Pre-configured overlay position ("topLeft", "topRight", "bottomLeft", "bottomRight", etc.)
// Basic usage for audio participant
import React, { useState } from 'react';
import { MiniAudio } from 'mediasfu-reactjs';
const AudioParticipantCard = () => {
const [isSpeaking, setIsSpeaking] = useState(false);
return (
<MiniAudio
visible={true}
name="Alice Johnson"
showWaveform={isSpeaking}
imageSource="/avatars/alice.jpg"
barColor="#2ecc71"
textColor="#ffffff"
overlayPosition="topRight"
/>
);
};
// Custom styled with rounded image
import React, { useState, useEffect } from 'react';
import { MiniAudio } from 'mediasfu-reactjs';
const CustomStyledMiniAudio = () => {
const [isSpeaking, setIsSpeaking] = useState(false);
useEffect(() => {
// Simulate speaking detection
const interval = setInterval(() => {
setIsSpeaking(prev => !prev);
}, 3000);
return () => clearInterval(interval);
}, []);
return (
<MiniAudio
visible={true}
name="Bob Smith"
showWaveform={isSpeaking}
imageSource="/avatars/bob.jpg"
roundedImage={true}
barColor={isSpeaking ? '#e74c3c' : '#95a5a6'}
textColor="#ecf0f1"
overlayPosition="bottomLeft"
customStyle={{
border: '2px solid #3498db',
borderRadius: '12px',
boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
}}
nameTextStyling={{
fontSize: '14px',
fontWeight: 'bold',
textShadow: '1px 1px 2px rgba(0,0,0,0.5)'
}}
imageStyle={{
borderRadius: '50%',
border: '3px solid #2ecc71'
}}
/>
);
};
// Analytics tracking with drag monitoring
import React, { useState } from 'react';
import { MiniAudio } from 'mediasfu-reactjs';
const AnalyticsMiniAudio = () => {
const [isSpeaking, setIsSpeaking] = useState(false);
const [dragCount, setDragCount] = useState(0);
return (
<MiniAudio
visible={true}
name="Charlie Davis"
showWaveform={isSpeaking}
imageSource="/avatars/charlie.jpg"
barColor="#f39c12"
renderContainer={({ defaultContainer, isDragging, position }) => {
React.useEffect(() => {
if (isDragging) {
setDragCount(prev => prev + 1);
analytics.track('Mini Audio Dragged', {
participantName: 'Charlie Davis',
position,
totalDrags: dragCount
});
}
}, [isDragging]);
return (
<div style={{ position: 'relative' }}>
{defaultContainer}
{isDragging && (
<div style={{
position: 'absolute',
top: -20,
left: 0,
fontSize: '12px',
color: '#fff',
backgroundColor: 'rgba(0,0,0,0.7)',
padding: '2px 6px',
borderRadius: '3px'
}}>
Dragging...
</div>
)}
</div>
);
}}
renderWaveform={({ defaultWaveform, showWaveform, animations }) => {
React.useEffect(() => {
if (showWaveform) {
analytics.track('Waveform Displayed', {
participantName: 'Charlie Davis',
activeAnimations: animations.filter(a => a > 0).length
});
}
}, [showWaveform, animations]);
return defaultWaveform;
}}
/>
);
};
// Integration with MediasfuGeneric using uiOverrides
import React, { useState } from 'react';
import { MediasfuGeneric, MiniAudio } from 'mediasfu-reactjs';
const CustomMiniAudioComponent = (props) => (
<MiniAudio
{...props}
roundedImage={true}
renderCard={({ defaultCard, hasImage }) => (
<div className="custom-mini-audio-card">
<div className="card-header">
<span className="status-indicator" style={{
width: '8px',
height: '8px',
borderRadius: '50%',
backgroundColor: props.showWaveform ? '#2ecc71' : '#95a5a6',
display: 'inline-block',
marginRight: '8px'
}} />
<span className="participant-status">
{props.showWaveform ? 'Speaking' : 'Listening'}
</span>
</div>
<div className="card-content">
{defaultCard}
</div>
{hasImage && (
<div className="card-footer">
<span style={{ fontSize: '12px', color: '#95a5a6' }}>
🎤 Audio Only
</span>
</div>
)}
</div>
)}
/>
);
const App = () => {
const [credentials] = useState({
apiUserName: 'user123',
apiKey: 'your-api-key'
});
return (
<MediasfuGeneric
credentials={credentials}
uiOverrides={{
MiniAudio: CustomMiniAudioComponent
}}
/>
);
};
MiniAudio - A compact, draggable audio participant card with animated waveform visualization.
This component provides a feature-rich mini audio card for displaying audio participants with visual feedback. It includes animated waveform visualization, drag-and-drop positioning, and extensive customization options for styling and layout.
Key Features: