Const// Basic usage - Top-right overlay buttons
import React from 'react';
import { ControlButtonsAltComponent, AltButton } from 'mediasfu-reactnative-expo';
function VideoOverlayControls() {
const [showSettings, setShowSettings] = React.useState(false);
const overlayButtons: AltButton[] = [
{
name: 'Settings',
icon: 'cog',
onPress: () => setShowSettings(!showSettings),
active: showSettings,
color: '#FFFFFF',
show: true,
},
{
name: 'Fullscreen',
icon: 'expand',
onPress: () => console.log('Toggle fullscreen'),
color: '#FFFFFF',
show: true,
},
];
return (
<ControlButtonsAltComponent
buttons={overlayButtons}
position="right"
location="top"
direction="vertical"
showAspect={true}
/>
);
}
// Bottom-center horizontal buttons
<ControlButtonsAltComponent
buttons={bottomControls}
position="middle"
location="bottom"
direction="horizontal"
showAspect={true}
buttonsContainerStyle={{
backgroundColor: 'rgba(0,0,0,0.7)',
padding: 8,
borderRadius: 8,
}}
/>
// Conditional visibility with custom styling
<ControlButtonsAltComponent
buttons={menuButtons}
position="right"
location="center"
direction="vertical"
showAspect={isMenuVisible}
buttonsContainerStyle={{
gap: 12,
padding: 10,
backgroundColor: 'rgba(0,0,0,0.8)',
borderRadius: 12,
}}
/>
// Using uiOverrides for complete overlay replacement
import { MyCustomOverlayButtons } from './MyCustomOverlayButtons';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
controlButtonsAltComponent: {
component: MyCustomOverlayButtons,
injectedProps: {
fadeInOut: true,
autoHideDelay: 3000,
},
},
},
};
// MyCustomOverlayButtons.tsx
export const MyCustomOverlayButtons = (props: ControlButtonsAltComponentOptions & { fadeInOut: boolean; autoHideDelay: number }) => {
const [opacity, setOpacity] = React.useState(props.showAspect ? 1 : 0);
React.useEffect(() => {
if (props.fadeInOut) {
setOpacity(props.showAspect ? 1 : 0);
}
}, [props.showAspect]);
const positionStyle = {
position: 'absolute' as const,
[props.location === 'top' ? 'top' : props.location === 'bottom' ? 'bottom' : 'top']: props.location === 'center' ? '50%' : 10,
[props.position === 'left' ? 'left' : props.position === 'right' ? 'right' : 'left']: props.position === 'middle' ? '50%' : 10,
};
return (
<View style={{ ...positionStyle, opacity, flexDirection: props.direction === 'vertical' ? 'column' : 'row' }}>
{props.buttons.filter(btn => btn.show !== false).map((button, index) => (
<Pressable key={index} onPress={button.onPress}>
<FontAwesome5 name={button.active ? button.alternateIcon : button.icon} size={24} color={button.color} />
</Pressable>
))}
</View>
);
};
ControlButtonsAltComponent - Absolutely positioned overlay control buttons
ControlButtonsAltComponent is a React Native component that renders control buttons in an absolute positioned overlay (typically for video controls, settings, etc.). It supports flexible positioning (9 positions: corners, edges, center) and can be shown/hidden dynamically.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.controlButtonsAltComponentto provide a completely custom positioned control overlay.