Const// Basic usage - Touch-optimized video controls
import React from 'react';
import { ControlButtonsComponentTouch, ButtonTouch } from 'mediasfu-reactnative-expo';
function TouchVideoControls() {
const [isPlaying, setIsPlaying] = React.useState(false);
const [isMuted, setIsMuted] = React.useState(false);
const touchButtons: ButtonTouch[] = [
{
name: 'PlayPause',
icon: 'play',
alternateIcon: 'pause',
active: isPlaying,
onPress: () => setIsPlaying(!isPlaying),
activeColor: '#007bff',
inActiveColor: '#FFFFFF',
show: true,
},
{
name: 'Mute',
icon: 'volume-up',
alternateIcon: 'volume-mute',
active: isMuted,
onPress: () => setIsMuted(!isMuted),
activeColor: '#FF0000',
inActiveColor: '#FFFFFF',
show: true,
},
];
return (
<ControlButtonsComponentTouch
buttons={touchButtons}
position="middle"
location="bottom"
direction="horizontal"
showAspect={true}
buttonsContainerStyle={{
backgroundColor: 'rgba(0,0,0,0.6)',
padding: 12,
borderRadius: 24,
gap: 16,
}}
/>
);
}
// Side panel touch buttons
<ControlButtonsComponentTouch
buttons={sideButtons}
position="right"
location="center"
direction="vertical"
showAspect={true}
buttonsContainerStyle={{
gap: 16,
padding: 12,
backgroundColor: 'rgba(0,0,0,0.7)',
}}
/>
// With disabled and conditional buttons
const buttons: ButtonTouch[] = [
{
name: 'Record',
icon: 'circle',
onPress: startRecording,
disabled: isRecording,
color: '#FF0000',
show: canRecord,
},
{
name: 'Stop',
icon: 'stop',
onPress: stopRecording,
disabled: !isRecording,
color: '#FFFFFF',
show: canRecord,
},
];
<ControlButtonsComponentTouch
buttons={buttons}
position="left"
location="top"
direction="horizontal"
showAspect={true}
/>
// Using uiOverrides for complete touch overlay replacement
import { MyCustomTouchButtons } from './MyCustomTouchButtons';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
controlButtonsComponentTouch: {
component: MyCustomTouchButtons,
injectedProps: {
hapticFeedback: true,
minimumTouchSize: 48,
},
},
},
};
// MyCustomTouchButtons.tsx
export const MyCustomTouchButtons = (props: ControlButtonsComponentTouchOptions & { hapticFeedback: boolean; minimumTouchSize: number }) => {
const handlePress = (button: ButtonTouch) => {
if (props.hapticFeedback && Platform.OS !== 'web') {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
}
button.onPress?.();
};
return (
<View style={{ flexDirection: props.direction === 'vertical' ? 'column' : 'row' }}>
{props.buttons.filter(btn => btn.show !== false).map((button, index) => (
<Pressable
key={index}
onPress={() => handlePress(button)}
disabled={button.disabled}
style={{
minWidth: props.minimumTouchSize,
minHeight: props.minimumTouchSize,
justifyContent: 'center',
alignItems: 'center',
opacity: button.disabled ? 0.5 : 1,
}}
>
<FontAwesome5
name={button.active ? button.alternateIcon : button.icon}
size={28}
color={button.active ? button.activeColor : button.inActiveColor || button.color}
/>
</Pressable>
))}
</View>
);
};
ControlButtonsComponentTouch - Touch-optimized positioned overlay buttons
ControlButtonsComponentTouch is a React Native component specifically optimized for touch interfaces. It renders control buttons in an absolute positioned overlay with enhanced touch targets and press feedback for mobile/tablet devices.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.controlButtonsComponentTouchto provide a completely custom touch-optimized control overlay.