Function ControlButtonsComponentTouch

ControlButtonsComponentTouch - Touch-optimized control buttons for mobile and tablet devices.

This component provides a touch-friendly interface for media control buttons, specifically designed for mobile and tablet experiences with larger hit areas, optimized spacing, and touch-specific interactions. It offers the same flexibility as other control button components while prioritizing touch usability.

Key Features:

  • Touch-Optimized: Larger hit areas and spacing optimized for finger interactions
  • Flexible Layout: Horizontal or vertical button arrangements with gap control
  • Positioning Control: Nine-point positioning system (left/middle/right × top/center/bottom)
  • Per-Button Customization: Individual button styling, colors, icons, and behavior
  • Active State Management: Clear visual feedback for active/inactive button states
  • Custom Components: Support for custom button components and icon replacements
  • Render Hooks: Complete override capability for button content and structure
  • Visibility Control: Individual button show/hide with conditional rendering
  • Disabled States: Proper disabled styling and interaction blocking
  • Icon Flexibility: Support for FontAwesome icons, custom icons, and alternate icons
  • HTML Attributes: Granular control over all button elements (button, icon wrapper, text, content)
  • Shared and Individual Props: Shared defaults with per-button override capability
  • Accessibility: Touch-friendly ARIA attributes and semantic HTML

Component

Example

// Basic touch controls for mobile video player

import React, { useState } from 'react';
import { ControlButtonsComponentTouch } from 'mediasfu-reactjs';
import { faPlay, faPause, faVolumeUp, faExpand } from '@fortawesome/free-solid-svg-icons';

const MobileVideoControls = () => {
  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: 'Volume',
      icon: faVolumeUp,
      active: !isMuted,
      onPress: () => setIsMuted(!isMuted),
      show: true
    },
    {
      name: 'Fullscreen',
      icon: faExpand,
      onPress: () => console.log('Enter fullscreen'),
      show: true
    }
  ];

  return (
    <ControlButtonsComponentTouch
      buttons={buttons}
      direction="horizontal"
      position="middle"
      location="bottom"
      showAspect={true}
      gap={16}
    />
  );
};

Example

// Custom styled touch controls with haptic feedback

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

const MeetingTouchControls = () => {
  const [videoOn, setVideoOn] = useState(true);
  const [audioOn, setAudioOn] = useState(true);

  const triggerHaptic = () => {
    if ('vibrate' in navigator) {
      navigator.vibrate(10); // Short haptic feedback
    }
  };

  const buttons = [
    {
      name: 'Camera',
      icon: faVideo,
      active: videoOn,
      onPress: () => {
        triggerHaptic();
        setVideoOn(!videoOn);
      },
      backgroundColor: { default: '#34495e' },
      activeColor: '#2ecc71',
      inActiveColor: '#e74c3c',
      show: true,
      style: { minWidth: '60px', minHeight: '60px' }
    },
    {
      name: 'Mic',
      icon: faMicrophone,
      active: audioOn,
      onPress: () => {
        triggerHaptic();
        setAudioOn(!audioOn);
      },
      backgroundColor: { default: '#34495e' },
      activeColor: '#2ecc71',
      inActiveColor: '#e74c3c',
      show: true,
      style: { minWidth: '60px', minHeight: '60px' }
    },
    {
      name: 'End Call',
      icon: faPhoneSlash,
      onPress: () => {
        triggerHaptic();
        console.log('End call');
      },
      backgroundColor: { default: '#c0392b' },
      color: '#fff',
      show: true,
      style: { minWidth: '60px', minHeight: '60px' }
    }
  ];

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

Example

// Analytics tracking for touch interactions

import React, { useState } from 'react';
import { ControlButtonsComponentTouch } from 'mediasfu-reactjs';
import { faThumbsUp, faHand, faComment } from '@fortawesome/free-solid-svg-icons';

const InteractiveTouchControls = () => {
  const [reactions, setReactions] = useState({ like: 0, hand: 0, comment: 0 });

  const trackTouchInteraction = (action: string, touchData: any) => {
    analytics.track('Touch Control Interaction', {
      action,
      device: 'mobile',
      timestamp: new Date(),
      ...touchData
    });
  };

  const buttons = [
    {
      name: '👍',
      icon: faThumbsUp,
      onPress: () => {
        const newCount = reactions.like + 1;
        setReactions({ ...reactions, like: newCount });
        trackTouchInteraction('Like', { count: newCount });
      },
      show: true
    },
    {
      name: '✋',
      icon: faHand,
      onPress: () => {
        const newCount = reactions.hand + 1;
        setReactions({ ...reactions, hand: newCount });
        trackTouchInteraction('Raise Hand', { count: newCount });
      },
      show: true
    },
    {
      name: '💬',
      icon: faComment,
      onPress: () => {
        trackTouchInteraction('Open Chat', {});
        console.log('Open chat');
      },
      show: true
    }
  ];

  return (
    <ControlButtonsComponentTouch
      buttons={buttons}
      direction="vertical"
      position="right"
      location="center"
      showAspect={true}
      renderButtonContent={({ defaultContent, button, index }) => (
        <div 
          className="touch-button-content"
          onTouchStart={(e) => {
            trackTouchInteraction('Touch Start', { 
              buttonName: button.name,
              touchCount: e.touches.length 
            });
          }}
        >
          {defaultContent}
        </div>
      )}
    />
  );
};

Example

// Integration with MediasfuGeneric using uiOverrides

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

const CustomTouchControlsComponent = (props) => (
  <ControlButtonsComponentTouch
    {...props}
    direction="horizontal"
    position="middle"
    location="bottom"
    gap={24}
    renderButton={({ defaultButton, button, index }) => (
      <div 
        className="custom-touch-button-wrapper"
        style={{
          position: 'relative',
          touchAction: 'manipulation' // Optimize for touch
        }}
      >
        <button
          className={`touch-optimized-button ${button.active ? 'active' : ''}`}
          onClick={button.onPress}
          style={{
            minWidth: '56px',
            minHeight: '56px',
            borderRadius: '50%',
            border: 'none',
            cursor: 'pointer',
            WebkitTapHighlightColor: 'transparent' // Remove tap highlight
          }}
        >
          <span className="button-icon" style={{ fontSize: '24px' }}>
            Icon content here
          </span>
        </button>
        {button.active && (
          <div className="active-pulse" style={{
            position: 'absolute',
            inset: '-4px',
            borderRadius: '50%',
            border: '2px solid #2ecc71',
            animation: 'pulse 1.5s infinite'
          }} />
        )}
      </div>
    )}
  />
);

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

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        ControlButtonsComponentTouch: CustomTouchControlsComponent
      }}
    />
  );
};

  active: true,
  backgroundColor: { default: "#047857" },
  renderContent: ({ defaultContent }) => (
    <span className="touch-button__content">{defaultContent}</span>
  ),
},
{
  name: "Pause",
  icon: faPause,
  onPress: () => console.log("Pause button pressed"),
  buttonProps: { 'aria-label': 'Pause media' },
},

];

return ( <ControlButtonsComponentTouch showAspect direction="horizontal" buttons={buttons} containerProps={{ 'aria-label': 'mobile controls', role: 'toolbar' }} buttonProps={{ type: 'button' }} gap={12} /> ); }

export default App;

Properties

propTypes? displayName?

Properties

OptionalpropTypes

propTypes?: any

Ignored by React.

Deprecated

Only kept in types for backwards compatibility. Will be removed in a future major release.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

Example


const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'

Settings

Member Visibility

On This Page

Properties