Function ControlButtonsAltComponent

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:

• Absolute positioning with 9 screen positions
• Horizontal or vertical button arrangement
• Active/inactive state visual feedback
• Show/hide visibility control
• Custom icon support
• Overlay z-index management
• Press feedback animations

UI Customization: This component can be replaced via uiOverrides.controlButtonsAltComponent to provide a completely custom positioned control overlay.

// 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}
    />
  );
}
Copy

// 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,
  }}
/>
Copy

// 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,
  }}
/>
Copy

// 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>
  );
};
Copy