Variable ControlButtonsAltComponentConst

Example

// Basic usage with vertical layout

import React, { useState } from 'react';
import { ControlButtonsAltComponent } from 'mediasfu-reactjs';
import { faPlay, faPause, faStop, faMicrophone } from '@fortawesome/free-solid-svg-icons';

const BasicAltControls = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [isMuted, setIsMuted] = useState(false);

  const buttons = [
    {
      name: 'Play',
      icon: faPlay,
      alternateIcon: faPause,
      active: isPlaying,
      onPress: () => setIsPlaying(!isPlaying),
      show: true
    },
    {
      name: 'Stop',
      icon: faStop,
      onPress: () => setIsPlaying(false),
      show: true
    },
    {
      name: 'Mic',
      icon: faMicrophone,
      active: !isMuted,
      onPress: () => setIsMuted(!isMuted),
      activeColor: '#2ecc71',
      inActiveColor: '#e74c3c',
      show: true
    }
  ];

  return (
    <ControlButtonsAltComponent
      buttons={buttons}
      direction="vertical"
      position="right"
      location="center"
      showAspect={true}
      gap={12}
    />
  );
};
Copy

Example

// Custom styled with branded colors

import React, { useState } from 'react';
import { ControlButtonsAltComponent } from 'mediasfu-reactjs';
import { faVideo, faMicrophone, faDesktop, faEllipsisV } from '@fortawesome/free-solid-svg-icons';

const BrandedAltControls = () => {
  const [videoActive, setVideoActive] = useState(true);
  const [audioActive, setAudioActive] = useState(true);
  const [screenShare, setScreenShare] = useState(false);

  const buttons = [
    {
      name: 'Video',
      icon: faVideo,
      active: videoActive,
      onPress: () => setVideoActive(!videoActive),
      backgroundColor: { default: '#1a1a2e' },
      activeColor: '#00d4ff',
      inActiveColor: '#ff6b6b',
      show: true,
      buttonProps: { 'aria-label': 'Toggle video' }
    },
    {
      name: 'Audio',
      icon: faMicrophone,
      active: audioActive,
      onPress: () => setAudioActive(!audioActive),
      backgroundColor: { default: '#1a1a2e' },
      activeColor: '#00d4ff',
      inActiveColor: '#ff6b6b',
      show: true
    },
    {
      name: 'Share',
      icon: faDesktop,
      active: screenShare,
      onPress: () => setScreenShare(!screenShare),
      backgroundColor: { default: '#2ecc71' },
      activeColor: '#fff',
      show: true,
      disabled: screenShare
    },
    {
      name: 'More',
      icon: faEllipsisV,
      onPress: () => console.log('Show more options'),
      backgroundColor: { default: '#34495e' },
      show: true
    }
  ];

  return (
    <ControlButtonsAltComponent
      buttons={buttons}
      direction="horizontal"
      position="middle"
      location="bottom"
      showAspect={true}
      buttonsContainerStyle={{
        padding: '16px',
        borderRadius: '12px',
        backgroundColor: 'rgba(0,0,0,0.8)'
      }}
      gap={8}
    />
  );
};
Copy

Example

// Analytics tracking with render hooks

import React, { useState } from 'react';
import { ControlButtonsAltComponent } from 'mediasfu-reactjs';
import { faHand, faMessage, faUserPlus } from '@fortawesome/free-solid-svg-icons';

const AnalyticsAltControls = () => {
  const [handRaised, setHandRaised] = useState(false);

  const trackButtonClick = (buttonName: string, isActive: boolean) => {
    analytics.track('Alt Control Button Clicked', {
      buttonName,
      isActive,
      timestamp: new Date()
    });
  };

  const buttons = [
    {
      name: 'Raise Hand',
      icon: faHand,
      active: handRaised,
      onPress: () => {
        const newState = !handRaised;
        setHandRaised(newState);
        trackButtonClick('Raise Hand', newState);
      },
      show: true
    },
    {
      name: 'Chat',
      icon: faMessage,
      onPress: () => trackButtonClick('Chat', false),
      show: true
    },
    {
      name: 'Invite',
      icon: faUserPlus,
      onPress: () => trackButtonClick('Invite', false),
      show: true
    }
  ];

  return (
    <ControlButtonsAltComponent
      buttons={buttons}
      direction="vertical"
      position="left"
      location="center"
      showAspect={true}
      renderButtonContent={({ defaultContent, button, index }) => {
        React.useEffect(() => {
          if (button.active) {
            analytics.track('Button Active State', { 
              buttonName: button.name,
              index 
            });
          }
        }, [button.active]);
        return defaultContent;
      }}
    />
  );
};
Copy

Example

// Integration with MediasfuGeneric using uiOverrides

import React, { useState } from 'react';
import { MediasfuGeneric, ControlButtonsAltComponent } from 'mediasfu-reactjs';

const CustomAltControlsComponent = (props) => (
  <ControlButtonsAltComponent
    {...props}
    direction="horizontal"
    position="middle"
    location="bottom"
    renderButton={({ defaultButton, button, index, defaultProps }) => (
      <div className="custom-button-wrapper" data-index={index}>
        <button
          {...defaultProps}
          className={`custom-alt-button ${button.active ? 'active' : ''}`}
          onClick={() => {
            console.log(`Alt button ${button.name} clicked`);
            button.onPress?.();
          }}
        >
          <div className="button-icon">{defaultProps.children}</div>
          {button.name && (
            <span className="button-label">{button.name}</span>
          )}
        </button>
        {button.active && <div className="active-indicator" />}
      </div>
    )}
  />
);

const App = () => {
  const [credentials] = useState({
    apiUserName: 'user123',
    apiKey: 'your-api-key'
  });

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        ControlButtonsAltComponent: CustomAltControlsComponent
      }}
    />
  );
};
Copy

/>

); }

Copy