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
125 lines (124 loc) • 3.84 kB
TypeScript
import React from 'react';
import { StyleProp, TextStyle } from 'react-native';
/**
* Configuration options for the MeetingProgressTimer component.
*
* @interface MeetingProgressTimerOptions
*
* **Timer Display:**
* @property {string} meetingProgressTime - Current elapsed meeting time (format: "HH:MM" or "MM:SS")
* @property {boolean} [showTimer=true] - Controls timer visibility
*
* **Positioning:**
* @property {'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'} [position='topLeft'] - Timer badge position on screen
*
* **Styling:**
* @property {string} [initialBackgroundColor='green'] - Background color of the timer badge
* @property {StyleProp<TextStyle>} [textStyle] - Additional custom styles for timer text
*/
export interface MeetingProgressTimerOptions {
/**
* The current progress time of the meeting to be displayed.
*/
meetingProgressTime: string;
/**
* The initial background color of the timer.
* @default 'green'
*/
initialBackgroundColor?: string;
/**
* The position of the timer on the screen.
* @default 'topLeft'
*/
position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
/**
* Additional styles to apply to the timer text.
*/
textStyle?: StyleProp<TextStyle>;
/**
* Flag to determine whether the timer should be displayed.
* @default true
*/
showTimer?: boolean;
}
export type MeetingProgressTimerType = (options: MeetingProgressTimerOptions) => JSX.Element;
/**
* MeetingProgressTimer - Elapsed meeting time display badge
*
* MeetingProgressTimer is a React Native component that displays the elapsed time
* of a meeting in a colored badge positioned at one of four screen corners. The timer
* updates automatically as the meeting progresses and is commonly overlaid on video grids.
*
* **Key Features:**
* - Real-time elapsed meeting time display
* - Four corner positioning options
* - Customizable badge background color
* - Customizable text styling
* - Show/hide toggle
* - Compact badge design
* - Absolute positioning for overlay
*
* **UI Customization:**
* This component's styling can be customized via the provided props. For complete
* replacement, the parent grid component can be overridden via uiOverrides.
*
* @component
* @param {MeetingProgressTimerOptions} props - Configuration options
*
* @returns {JSX.Element} Rendered meeting progress timer badge
*
* @example
* ```tsx
* // Basic usage with default green badge
* import React, { useState, useEffect } from 'react';
* import { MeetingProgressTimer } from 'mediasfu-reactnative-expo';
*
* const [elapsedTime, setElapsedTime] = useState('00:00');
*
* useEffect(() => {
* const interval = setInterval(() => {
* // Update elapsed time logic
* setElapsedTime(calculateElapsed());
* }, 1000);
* return () => clearInterval(interval);
* }, []);
*
* return (
* <MeetingProgressTimer
* meetingProgressTime={elapsedTime}
* position="topLeft"
* />
* );
* ```
*
* @example
* ```tsx
* // With custom styling and positioning
* return (
* <MeetingProgressTimer
* meetingProgressTime="15:30"
* initialBackgroundColor="#e74c3c"
* position="bottomRight"
* textStyle={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}
* showTimer={true}
* />
* );
* ```
*
* @example
* ```tsx
* // Conditional display based on meeting state
* const [showTimer, setShowTimer] = useState(false);
*
* return (
* <MeetingProgressTimer
* meetingProgressTime={meetingTime}
* position="topRight"
* showTimer={meetingStarted && showTimer}
* initialBackgroundColor="#27ae60"
* />
* );
* ```
*/
declare const MeetingProgressTimer: React.FC<MeetingProgressTimerOptions>;
export default MeetingProgressTimer;