MediaSFU ReactJS
    Preparing search index...

    Variable MainScreenComponentConst

    MainScreenComponent: React.FC<MainScreenComponentOptions> = ...

    MainScreenComponent - A responsive container component that dynamically adjusts child layouts.

    This component provides intelligent layout management for main screen content, automatically calculating and adjusting dimensions based on window size, control visibility, and stacking preferences. It's designed for responsive video/content layouts that adapt to various screen sizes.

    Key Features:

    • Responsive Sizing: Automatically adjusts to window dimensions with configurable fractions
    • Stacking Support: Toggle between stacked and side-by-side layouts for child components
    • Control-Aware: Adjusts available space based on control bar visibility
    • Size Callbacks: Reports calculated dimensions via updateComponentSizes callback
    • Orientation Detection: Detects and responds to wide-screen vs. portrait layouts
    • Child Customization: Granular control over each child's layout and styling
    • Render Hooks: Complete override capability for children rendering and container layout
    • Real-time Updates: Responds to window resize events with debounced updates
    • Percentage-Based: Supports percentage-based sizing for main component when stacking
    • Flexible Fractions: Customizable width/height fractions for precise layout control
    • Component Sizes: Tracks and exposes mainHeight, otherHeight, mainWidth, otherWidth
    • Performance Optimized: Memoized calculations and efficient resize handling

    Configuration options for MainScreenComponent

    Child components to render within main screen container

    Percentage size (0-100) of main component when doStack is true

    Controls whether components are stacked vertically (true) or arranged side-by-side (false)

    Fraction of window width (0-1) used for container

    Fraction of window height (0-1) used for container

    Callback invoked with calculated dimensions

    Fraction applied to height when showControls is true

    Controls whether control bar is visible (affects height calculation)

    Current component sizes (mainHeight, otherHeight, mainWidth, otherWidth)

    HTML attributes for container element

    Custom render function for individual child

    Custom render function for all children

    Custom render function for entire container

    The rendered main screen component with dynamically sized children

    // Basic usage for responsive video layout

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

    const ResponsiveVideoLayout = () => {
      const [componentSizes, setComponentSizes] = useState({
        mainHeight: 0,
        otherHeight: 0,
        mainWidth: 0,
        otherWidth: 0
      });

      return (
        <MainScreenComponent
          mainSize={70}
          doStack={true}
          showControls={true}
          updateComponentSizes={setComponentSizes}
          componentSizes={componentSizes}
        >
          <div style={{ backgroundColor: '#1a1a1a', color: '#fff' }}>
            Main Video Content
          </div>
          <div style={{ backgroundColor: '#2a2a2a', color: '#fff' }}>
            Secondary Content
          </div>
        </MainScreenComponent>
      );
    };

    // Custom styled with fractional sizing

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

    const CustomSizedLayout = () => {
      const [componentSizes, setComponentSizes] = useState({
        mainHeight: 0,
        otherHeight: 0,
        mainWidth: 0,
        otherWidth: 0
      });
      const [doStack, setDoStack] = useState(window.innerWidth < 768);

      React.useEffect(() => {
        const handleResize = () => {
          setDoStack(window.innerWidth < 768);
        };
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
      }, []);

      return (
        <MainScreenComponent
          mainSize={75}
          doStack={doStack}
          containerWidthFraction={0.9}
          containerHeightFraction={0.85}
          showControls={true}
          defaultFraction={0.92}
          updateComponentSizes={(sizes) => {
            console.log('Updated sizes:', sizes);
            setComponentSizes(sizes);
          }}
          componentSizes={componentSizes}
          containerProps={{
            style: {
              border: '2px solid #3498db',
              borderRadius: '8px',
              overflow: 'hidden'
            }
          }}
        >
          <video src="/main-video.mp4" style={{ width: '100%', height: '100%' }} />
          <div style={{ padding: '20px', backgroundColor: '#ecf0f1' }}>
            Sidebar Content
          </div>
        </MainScreenComponent>
      );
    };

    // Analytics tracking for layout changes

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

    const AnalyticsLayout = () => {
      const [componentSizes, setComponentSizes] = useState({
        mainHeight: 0,
        otherHeight: 0,
        mainWidth: 0,
        otherWidth: 0
      });
      const [doStack, setDoStack] = useState(true);

      useEffect(() => {
        analytics.track('Layout Changed', {
          doStack,
          mainHeight: componentSizes.mainHeight,
          mainWidth: componentSizes.mainWidth,
          aspectRatio: componentSizes.mainWidth / componentSizes.mainHeight
        });
      }, [doStack, componentSizes]);

      return (
        <MainScreenComponent
          mainSize={60}
          doStack={doStack}
          showControls={true}
          updateComponentSizes={(sizes) => {
            setComponentSizes(sizes);
            analytics.track('Component Sizes Updated', {
              mainSize: sizes.mainHeight * sizes.mainWidth,
              otherSize: sizes.otherHeight * sizes.otherWidth
            });
          }}
          componentSizes={componentSizes}
          renderChild={({ child, index, isWideScreen, computedStyle }) => {
            useEffect(() => {
              analytics.track('Child Rendered', {
                index,
                isWideScreen,
                width: computedStyle.width,
                height: computedStyle.height
              });
            }, [index, isWideScreen]);
            return <div style={computedStyle}>{child}</div>;
          }}
        >
          <div>Main Content</div>
          <div>Secondary Content</div>
        </MainScreenComponent>
      );
    };

    // Integration with MediasfuGeneric using uiOverrides

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

    const CustomMainScreenComponent = (props) => (
      <MainScreenComponent
        {...props}
        renderContainer={({ defaultContainer, isWideScreen, dimensions }) => (
          <div className="custom-main-screen">
            <div className="screen-info">
              <span>{isWideScreen ? '🖥️ Wide' : '📱 Portrait'}</span>
              <span>{dimensions.width} × {dimensions.height}</span>
            </div>
            <div className="screen-content">
              {defaultContainer}
            </div>
            <div className="screen-footer">
              Layout Mode: {props.doStack ? 'Stacked' : 'Side-by-Side'}
            </div>
          </div>
        )}
      />
    );

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

      return (
        <MediasfuGeneric
          credentials={credentials}
          uiOverrides={{
            MainScreenComponent: CustomMainScreenComponent
          }}
        />
      );
    };

    Settings

    Member Visibility