mediasfu-reactnative-expo/dist/src/components/displayComponents/CardVideoDisplay.js

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

import { View, StyleSheet, Platform } from 'react-native';
import { RTCView, } from '../../methods/utils/webrtc/webrtc';
/**
 * CardVideoDisplay displays a video stream within a card layout, with support for customizable styling and mirroring.
 *
 * This component uses `RTCView` to render a video stream with options to mirror the video, set full display, and apply platform-specific styles.
 *
 * @component
 * @param {CardVideoDisplayOptions} props - Properties for the CardVideoDisplay component.
 * @param {string} props.remoteProducerId - The ID of the remote producer for identification.
 * @param {EventType} props.eventType - The type of event, e.g., meeting or webinar.
 * @param {boolean} props.forceFullDisplay - Whether to force the video to fill the container.
 * @param {MediaStream | null} props.videoStream - The video stream to display.
 * @param {string} [props.backgroundColor='transparent'] - Optional background color for the video container.
 * @param {boolean} [props.doMirror=false] - Option to mirror the video.
 *
 * @returns {JSX.Element} The CardVideoDisplay component.
 *
 * @example
 * ```tsx
 * import React from 'react';
 * import { CardVideoDisplay } from 'mediasfu-reactnative-expo';
 * import { MediaStream } from 'mediasfu-reactnative-expo/dist/types/src/@types/types';
 *
 * function App() {
 *   const videoStream: MediaStream = getVideoStream(); // Assume a MediaStream object is available
 *
 *   return (
 *     <CardVideoDisplay
 *       remoteProducerId="producer123"
 *       eventType="meeting"
 *       forceFullDisplay={true}
 *       videoStream={videoStream}
 *       backgroundColor="black"
 *       doMirror={true}
 *     />
 *   );
 * }
 *
 * export default App;
 * ```
 */
const CardVideoDisplay = ({ forceFullDisplay, videoStream, backgroundColor = 'transparent', doMirror = false, style, renderContent, renderContainer, }) => {
    /**
     * getRTCViewStyle - Helper function to get styles for RTCView based on platform.
     * @returns {Object} - Styles for RTCView.
     */
    const getRTCViewStyle = () => {
        // Add styles based on the forceFullDisplay value
        if (Platform.OS === 'web') {
            const baseStyles = {
                width: forceFullDisplay ? '100%' : 'auto',
                height: '100%',
                objectFit: forceFullDisplay ? 'cover' : 'contain',
                backgroundColor,
            };
            if (doMirror) {
                baseStyles.transform = 'rotateY(180deg)';
            }
            return baseStyles;
        }
        // For non-web platforms, no additional styles needed
        return {};
    };
    const dimensions = { width: 0, height: 0 }; // Video fills container
    const defaultContent = (<>
      {Platform.OS === 'web' ? (<RTCView stream={videoStream} style={getRTCViewStyle()}/>) : (<RTCView streamURL={videoStream?.toURL()} objectFit={forceFullDisplay ? 'cover' : 'contain'} mirror={doMirror} style={styles.video}/>)}
    </>);
    const content = renderContent
        ? renderContent({ defaultContent, dimensions })
        : defaultContent;
    const defaultContainer = (<View style={[styles.videoContainer, { backgroundColor }, style]}>
      {content}
    </View>);
    return renderContainer
        ? renderContainer({ defaultContainer, dimensions })
        : defaultContainer;
};
const styles = StyleSheet.create({
    videoContainer: {
        flex: 1,
        backgroundColor: 'black', // Set a default background color if needed
    },
    video: {
        height: '100%',
    },
});
export default CardVideoDisplay;
//# sourceMappingURL=CardVideoDisplay.js.map