Const// Basic media controls with active states
import React, { useState } from 'react';
import { ControlButtonsComponent } from 'mediasfu-reactjs';
import { faMicrophone, faMicrophoneSlash, faVideo, faVideoSlash } from '@fortawesome/free-solid-svg-icons';
function MediaControls() {
const [audioActive, setAudioActive] = useState(true);
const [videoActive, setVideoActive] = useState(true);
const buttons = [
{
name: audioActive ? 'Mute' : 'Unmute',
icon: audioActive ? faMicrophone : faMicrophoneSlash,
onPress: () => setAudioActive(!audioActive),
active: audioActive,
backgroundColor: { default: '#22c55e', pressed: '#14532d' },
activeColor: '#ffffff',
inActiveColor: '#dc2626',
},
{
name: videoActive ? 'Stop Video' : 'Start Video',
icon: videoActive ? faVideo : faVideoSlash,
onPress: () => setVideoActive(!videoActive),
active: videoActive,
backgroundColor: { default: '#3b82f6', pressed: '#1e3a8a' },
},
];
return (
<ControlButtonsComponent
buttons={buttons}
alignment="center"
buttonsContainerStyle={{ padding: 16, backgroundColor: '#0f172a', borderRadius: 12 }}
gap={12}
/>
);
}
// Vertical control panel with custom rendering
import { ControlButtonsComponent } from 'mediasfu-reactjs';
import { faShareScreen, faComments, faUserFriends } from '@fortawesome/free-solid-svg-icons';
function SideControls({ onShareScreen, onOpenChat, onShowParticipants }) {
const buttons = [
{
name: 'Share Screen',
icon: faShareScreen,
onPress: onShareScreen,
renderContent: ({ defaultIcon, defaultLabel }) => (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
{defaultIcon}
<span style={{ fontSize: 14, fontWeight: 600 }}>{defaultLabel}</span>
</div>
),
},
{
name: 'Chat',
icon: faComments,
onPress: onOpenChat,
},
{
name: 'Participants',
icon: faUserFriends,
onPress: onShowParticipants,
},
];
return (
<ControlButtonsComponent
buttons={buttons}
vertical={true}
alignment="flex-start"
buttonBackgroundColor={{ default: 'rgba(255,255,255,0.1)', pressed: 'rgba(255,255,255,0.2)' }}
buttonsContainerStyle={{ padding: 12, borderRadius: 8 }}
gap={8}
/>
);
}
// Accessibility-enhanced controls with custom button renderer
import { ControlButtonsComponent } from 'mediasfu-reactjs';
import { faPlay, faPause, faStop } from '@fortawesome/free-solid-svg-icons';
function MediaPlayer({ isPlaying, onTogglePlay, onStop }) {
const buttons = [
{
name: isPlaying ? 'Pause' : 'Play',
icon: isPlaying ? faPause : faPlay,
onPress: onTogglePlay,
active: isPlaying,
buttonProps: { 'aria-label': isPlaying ? 'Pause playback' : 'Start playback' },
},
{
name: 'Stop',
icon: faStop,
onPress: onStop,
buttonProps: { 'aria-label': 'Stop playback' },
},
];
return (
<ControlButtonsComponent
buttons={buttons}
alignment="center"
containerProps={{ role: 'toolbar', 'aria-label': 'Media playback controls' }}
renderButton={({ defaultButton, button, index }) => (
<div key={index} style={{ position: 'relative' }}>
{defaultButton}
{button.active && (
<div style={{
position: 'absolute',
top: -4,
right: -4,
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: '#22c55e',
}} />
)}
</div>
)}
/>
);
}
// Override with MediasfuGeneric uiOverrides
import { MediasfuGeneric, ControlButtonsComponent } from 'mediasfu-reactjs';
const uiOverrides = {
controlButtons: {
render: (props) => (
<ControlButtonsComponent
{...props}
alignment="space-between"
buttonsContainerStyle={{
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
padding: 20,
borderRadius: 16,
boxShadow: '0 10px 40px rgba(0,0,0,0.3)',
}}
buttonBackgroundColor={{ default: 'rgba(255,255,255,0.2)', pressed: 'rgba(255,255,255,0.3)' }}
gap={16}
/>
),
},
};
<MediasfuGeneric uiOverrides={uiOverrides} />;
ControlButtonsComponent - Flexible control button toolbar with rich customization
A highly configurable component for rendering action button toolbars (mute, video, screen share, etc.) with support for horizontal/vertical layouts, custom alignment, and per-button rendering hooks.
Features: