Function MainScreenComponent

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

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>
  );
};
Copy

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>
  );
};
Copy

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>
  );
};
Copy

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
      }}
    />
  );
};
Copy