mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
178 lines (177 loc) • 6.19 kB
TypeScript
import React from 'react';
/**
* Configuration options for the SubAspectComponent.
*
* @interface SubAspectComponentOptions
*
* **Content:**
* @property {React.ReactNode} children - Child components to render inside the sub-aspect container
*
* **Dimensions (Responsive):**
* @property {number} [containerWidthFraction=1.0] - Fraction of window width to use (0.0 to 1.0)
* @property {number} [containerHeightFraction=1.0] - Fraction of window height to use (0.0 to 1.0)
* @property {number} [defaultFractionSub=0.0] - Additional height adjustment fraction when controls are visible
*
* **Display Control:**
* @property {boolean} [showControls=true] - Whether controls are visible (affects height calculation with defaultFractionSub)
*
* **Styling:**
* @property {string} backgroundColor - Background color for the sub-aspect container
* @property {object} [style] - Additional custom styles to apply to the container
*
* **Advanced Render Overrides:**
* @property {function} [renderContent] - Optional custom renderer for content (receives defaultContent and dimensions)
* @property {function} [renderContainer] - Optional custom renderer for outer container (receives defaultContainer and dimensions)
*/
export interface SubAspectComponentOptions {
backgroundColor: string;
children: React.ReactNode;
showControls?: boolean;
containerWidthFraction?: number;
containerHeightFraction?: number;
defaultFractionSub?: number;
style?: object;
renderContent?: (options: {
defaultContent: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
renderContainer?: (options: {
defaultContainer: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type SubAspectComponentType = (options: SubAspectComponentOptions) => JSX.Element;
/**
* SubAspectComponent - Secondary responsive container for auxiliary content
*
* SubAspectComponent is a React Native component that provides a responsive
* sub-container typically used for secondary content areas (e.g., chat panels,
* participant lists, control bars). It calculates dimensions based on window size
* and control visibility, automatically adjusting on resize/rotation.
*
* **Key Features:**
* - Responsive dimension calculation with fractional sizing
* - Control visibility-based height adjustment
* - Automatic window resize/rotation handling
* - Custom background color support
* - Flexible positioning for auxiliary content
* - Advanced render override hooks
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.subAspectComponent` to
* provide a completely custom secondary container.
*
* @component
* @param {SubAspectComponentOptions} props - Configuration options for the sub-aspect container
*
* @returns {JSX.Element} Rendered responsive sub-aspect container
*
* @example
* // Basic usage - Bottom control bar area
* import React from 'react';
* import { SubAspectComponent } from 'mediasfu-reactnative-expo';
*
* function ControlBarArea() {
* return (
* <SubAspectComponent
* backgroundColor="#2c2c2c"
* showControls={true}
* containerWidthFraction={1.0}
* containerHeightFraction={0.1}
* defaultFractionSub={0}
* >
* <ControlButtons />
* </SubAspectComponent>
* );
* }
*
* @example
* // Side panel with custom sizing
* <SubAspectComponent
* backgroundColor="#f5f5f5"
* showControls={true}
* containerWidthFraction={0.25}
* containerHeightFraction={0.8}
* defaultFractionSub={0.05}
* >
* <ParticipantsSidebar />
* </SubAspectComponent>
*
* @example
* // With custom content renderer (add header)
* <SubAspectComponent
* backgroundColor="white"
* containerWidthFraction={0.3}
* containerHeightFraction={0.7}
* renderContent={({ defaultContent, dimensions }) => (
* <>
* <View style={{ padding: 10, borderBottomWidth: 1, borderColor: '#ccc' }}>
* <Text style={{ fontWeight: 'bold' }}>Chat Panel</Text>
* </View>
* {defaultContent}
* </>
* )}
* >
* <ChatMessages />
* </SubAspectComponent>
*
* @example
* // Using uiOverrides for complete sub-aspect replacement
* import { MyCustomSubAspect } from './MyCustomSubAspect';
*
* const sessionConfig = {
* credentials: { apiKey: 'your-api-key' },
* uiOverrides: {
* subAspectComponent: {
* component: MyCustomSubAspect,
* injectedProps: {
* collapsible: true,
* minHeight: 50,
* },
* },
* },
* };
*
* // MyCustomSubAspect.tsx
* export const MyCustomSubAspect = (props: SubAspectComponentOptions & { collapsible: boolean; minHeight: number }) => {
* const [collapsed, setCollapsed] = React.useState(false);
* const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
*
* React.useEffect(() => {
* const updateDimensions = () => {
* const { width, height } = Dimensions.get('window');
* const containerHeight = collapsed ? props.minHeight : height * (props.containerHeightFraction || 1);
* setDimensions({
* width: width * (props.containerWidthFraction || 1),
* height: containerHeight,
* });
* };
* const subscription = Dimensions.addEventListener('change', updateDimensions);
* updateDimensions();
* return () => subscription?.remove();
* }, [collapsed, props.containerWidthFraction, props.containerHeightFraction]);
*
* return (
* <View style={{
* width: dimensions.width,
* height: dimensions.height,
* backgroundColor: props.backgroundColor,
* }}>
* {props.collapsible && (
* <TouchableOpacity onPress={() => setCollapsed(!collapsed)}>
* <Text>{collapsed ? '▲ Expand' : '▼ Collapse'}</Text>
* </TouchableOpacity>
* )}
* {!collapsed && props.children}
* </View>
* );
* };
*/
declare const SubAspectComponent: React.FC<SubAspectComponentOptions>;
export default SubAspectComponent;