Function SubAspectComponent

SubAspectComponent - A responsive secondary aspect container that scales with viewport dimensions.

This component provides a viewport-aware container for secondary content areas, automatically calculating dimensions based on window size and control visibility. It's designed to complement the main content area with flexible sizing and control-aware height adjustments.

Key Features:

• Viewport Scaling: Automatically scales based on window dimensions with configurable fractions
• Control-Aware Height: Adjusts height based on control bar visibility
• Responsive Updates: Listens to window resize events for dynamic dimension updates
• Fractional Sizing: Width and height calculated as fractions of viewport dimensions
• Default Fraction: Fallback height fraction when controls are visible
• Background Customization: Configurable background color for container
• Render Hooks: Custom rendering for container and content
• HTML Attributes: Granular control over container element attributes
• SSR Compatible: Safe handling of server-side rendering scenarios
• Children Support: Renders any child components within the scaled container
• Flexible Styling: Custom styles via containerProps and render hooks
• Zero Height Option: Can render with zero height when controls are hidden

import React from 'react';
import { SubAspectComponent } from 'mediasfu-reactjs';

const SecondaryVideoPanel = () => {
  return (
    <SubAspectComponent
      backgroundColor="#2c3e50"
      showControls={true}
      containerWidthFraction={0.3}
      containerHeightFraction={0.4}
      defaultFractionSub={0.35}
    >
      <div style={{ padding: '10px', color: '#fff' }}>
        <h3>Participant Videos</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
          <video src="/participant1.mp4" style={{ width: '100%' }} />
          <video src="/participant2.mp4" style={{ width: '100%' }} />
        </div>
      </div>
    </SubAspectComponent>
  );
};
Copy

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

const DynamicSubPanel = () => {
  const [showControls, setShowControls] = useState(true);

  return (
    <>
      <button onClick={() => setShowControls(!showControls)}>
        Toggle Controls
      </button>
      <SubAspectComponent
        backgroundColor="rgba(26, 26, 26, 0.95)"
        showControls={showControls}
        containerWidthFraction={0.25}
        containerHeightFraction={showControls ? 0.3 : 0.4}
        defaultFractionSub={0.3}
        containerProps={{
          style: {
            border: '2px solid #3498db',
            borderRadius: '8px',
            overflow: 'hidden',
            transition: 'all 0.3s ease'
          }
        }}
      >
        <div style={{ padding: '15px', color: '#ecf0f1' }}>
          <p>Secondary content area</p>
          <p>Controls: {showControls ? 'Visible' : 'Hidden'}</p>
        </div>
      </SubAspectComponent>
    </>
  );
};
Copy

import React, { useState, useEffect } from 'react';
import { SubAspectComponent } from 'mediasfu-reactjs';

const AnalyticsSubPanel = () => {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  return (
    <SubAspectComponent
      backgroundColor="#34495e"
      showControls={true}
      containerWidthFraction={0.3}
      containerHeightFraction={0.5}
      renderContainer={({ defaultContainer, styles, showControls }) => {
        useEffect(() => {
          const width = typeof styles.width === 'number' ? styles.width : 0;
          const height = typeof styles.height === 'number' ? styles.height : 0;
          
          setDimensions({ width, height });
          analytics.track('Sub Aspect Resized', {
            width,
            height,
            showControls,
            aspectRatio: width / height
          });
        }, [styles.width, styles.height, showControls]);

        return (
          <div>
            <div style={{ 
              position: 'absolute',
              top: 0,
              right: 0,
              padding: '5px',
              backgroundColor: 'rgba(0,0,0,0.7)',
              color: '#fff',
              fontSize: '12px'
            }}>
              {dimensions.width}×{dimensions.height}
            </div>
            {defaultContainer}
          </div>
        );
      }}
    >
      <div>Tracked sub-content</div>
    </SubAspectComponent>
  );
};
Copy

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

const CustomSubAspectComponent = (props) => (
  <SubAspectComponent
    {...props}
    renderContent={({ defaultContent, showControls }) => (
      <div className="custom-sub-aspect">
        <div className="sub-header">
          <h4>Additional Participants</h4>
          {showControls && (
            <span className="controls-indicator">🎛️</span>
          )}
        </div>
        <div className="sub-content">
          {defaultContent}
        </div>
        <div className="sub-footer">
          <span>Responsive Sizing Active</span>
        </div>
      </div>
    )}
  />
);

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

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        SubAspectComponent: CustomSubAspectComponent
      }}
    />
  );
};
Copy