MediaSFU ReactJS
    Preparing search index...

    Variable MainAspectComponentConst

    MainAspectComponent: React.FC<MainAspectComponentOptions> = ...

    MainAspectComponent is a React functional component that dynamically adjusts its dimensions based on window size and specified fractions, while updating screen size states (wide, medium, small) based on container width.

    This component provides an adaptive container that resizes according to the window’s height and width, factoring in control visibility, and offers real-time updates for screen size breakpoints.

    The properties for the MainAspectComponent.

    Background color of the component.

    The child elements to render inside the component.

    Determines if controls are shown, impacting height calculation.

    Fraction of the window width for container width.

    Fraction of the window height for container height.

    Default height fraction adjustment when controls are visible.

    Callback to update wide screen state.

    Callback to update medium screen state.

    Callback to update small screen state.

    The rendered MainAspectComponent with adaptive dimensions.

    // Basic responsive container with breakpoint callbacks

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

    function App() {
      const [isWideScreen, setIsWideScreen] = useState(false);
      const [isMediumScreen, setIsMediumScreen] = useState(false);
      const [isSmallScreen, setIsSmallScreen] = useState(false);

      return (
        <MainAspectComponent
          backgroundColor="#0f172a"
          showControls={true}
          updateIsWideScreen={setIsWideScreen}
          updateIsMediumScreen={setIsMediumScreen}
          updateIsSmallScreen={setIsSmallScreen}
        >
          <div>
            {isWideScreen && <h1>Desktop Layout</h1>}
            {isMediumScreen && <h1>Tablet Layout</h1>}
            {isSmallScreen && <h1>Mobile Layout</h1>}
          </div>
        </MainAspectComponent>
      );
    }

    export default App;

    // Custom dimensions with control bar compensation

    import { MainAspectComponent, FlexibleVideo } from 'mediasfu-reactjs';

    function VideoContainer() {
      return (
        <MainAspectComponent
          backgroundColor="black"
          showControls={true}
          containerWidthFraction={0.75}
          containerHeightFraction={0.8}
          defaultFraction={0.94}
          updateIsWideScreen={(isWide) => console.log('Wide:', isWide)}
          updateIsMediumScreen={(isMed) => console.log('Medium:', isMed)}
          updateIsSmallScreen={(isSmall) => console.log('Small:', isSmall)}
        >
          <FlexibleVideo customWidth={window.innerWidth * 0.75} customHeight={600} />
        </MainAspectComponent>
      );
    }

    // Custom render with dimension tracking

    import { MainAspectComponent } from 'mediasfu-reactjs';

    function CustomLayout() {
      return (
        <MainAspectComponent
          backgroundColor="#1e3a8a"
          updateIsWideScreen={() => {}}
          updateIsMediumScreen={() => {}}
          updateIsSmallScreen={() => {}}
          renderContent={({ defaultContent, dimensions }) => (
            <div style={{ 
              border: '2px solid #3b82f6',
              borderRadius: 12,
              padding: 16,
              width: dimensions.width,
              height: dimensions.height
            }}>
              <p>Container: {dimensions.width}x{dimensions.height}px</p>
              {defaultContent}
            </div>
          )}
        >
          <div>Dimension-aware content</div>
        </MainAspectComponent>
      );
    }

    // Override with MediasfuGeneric uiOverrides

    import { MediasfuGeneric, MainAspectComponent } from 'mediasfu-reactjs';

    const uiOverrides = {
      mainAspect: {
        render: (props) => (
          <MainAspectComponent
            {...props}
            backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
            containerWidthFraction={0.9}
            containerHeightFraction={0.85}
          />
        ),
      },
    };

    <MediasfuGeneric uiOverrides={uiOverrides} />;

    Settings

    Member Visibility