mediasfu-reactjs
Version:
mediasfu-reactjs – React 18/19 WebRTC SDK for video conferencing, webinars, broadcasts, live streaming, chat, recording, whiteboard, and AI agents. Plug-in prebuilt rooms or build fully custom UIs.
267 lines • 10.4 kB
TypeScript
import React from "react";
import { ComponentSizes } from "../../@types/types";
export interface MainScreenComponentOptions {
children: React.ReactNode;
mainSize: number;
doStack: boolean;
containerWidthFraction?: number;
containerHeightFraction?: number;
sidebarWidth?: number;
updateComponentSizes: (sizes: ComponentSizes, internal?: boolean) => void;
defaultFraction?: number;
showControls: boolean;
componentSizes: ComponentSizes;
containerProps?: React.HTMLAttributes<HTMLDivElement>;
renderChild?: (options: {
child: React.ReactElement;
index: number;
mainSize: number;
isWideScreen: boolean;
doStack: boolean;
computedStyle: React.CSSProperties;
componentSizes: ComponentSizes;
}) => React.ReactNode;
renderChildren?: (options: {
defaultChildren: React.ReactNode;
isWideScreen: boolean;
doStack: boolean;
componentSizes: ComponentSizes;
}) => React.ReactNode;
renderContainer?: (options: {
defaultContainer: React.ReactNode;
isWideScreen: boolean;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type MainScreenComponentType = (options: MainScreenComponentOptions) => React.JSX.Element;
/**
* 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
*
* @component
*
* @param {MainScreenComponentOptions} props - Configuration options for MainScreenComponent
* @param {React.ReactNode} props.children - Child components to render within main screen container
* @param {number} props.mainSize - Percentage size (0-100) of main component when doStack is true
* @param {boolean} props.doStack - Controls whether components are stacked vertically (true) or arranged side-by-side (false)
* @param {number} [props.containerWidthFraction=1] - Fraction of window width (0-1) used for container
* @param {number} [props.containerHeightFraction=1] - Fraction of window height (0-1) used for container
* @param {(sizes: ComponentSizes) => void} props.updateComponentSizes - Callback invoked with calculated dimensions
* @param {number} [props.defaultFraction=0.94] - Fraction applied to height when showControls is true
* @param {boolean} props.showControls - Controls whether control bar is visible (affects height calculation)
* @param {ComponentSizes} props.componentSizes - Current component sizes (mainHeight, otherHeight, mainWidth, otherWidth)
* @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - HTML attributes for container element
* @param {(options: {child: React.ReactElement; index: number; mainSize: number; isWideScreen: boolean; doStack: boolean; computedStyle: React.CSSProperties; componentSizes: ComponentSizes}) => React.ReactNode} [props.renderChild] - Custom render function for individual child
* @param {(options: {defaultChildren: React.ReactNode; isWideScreen: boolean; doStack: boolean; componentSizes: ComponentSizes}) => React.ReactNode} [props.renderChildren] - Custom render function for all children
* @param {(options: {defaultContainer: React.ReactNode; isWideScreen: boolean; dimensions: {width: number; height: number}}) => React.ReactNode} [props.renderContainer] - Custom render function for entire container
*
* @returns {React.JSX.Element} The rendered main screen component with dynamically sized children
*
* @example
* // Basic usage for responsive video layout
* ```tsx
* 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>
* );
* };
* ```
*
* @example
* // Custom styled with fractional sizing
* ```tsx
* 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>
* );
* };
* ```
*
* @example
* // Analytics tracking for layout changes
* ```tsx
* 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>
* );
* };
* ```
*
* @example
* // Integration with MediasfuGeneric using uiOverrides
* ```tsx
* 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
* }}
* />
* );
* };
* ```
*/
declare const MainScreenComponent: React.FC<MainScreenComponentOptions>;
export default MainScreenComponent;
//# sourceMappingURL=MainScreenComponent.d.ts.map