Hiyve Components - v1.0.0
    Preparing search index...

    Function RecordingIndicator

    • RecordingIndicator displays a visual badge when recording is active.

      Parameters

      Returns ReactElement<any, string | JSXElementConstructor<any>> | null

      The rendered RecordingIndicator component, or null if not recording

      The RecordingIndicator component provides a clear visual indication that a recording is in progress. It features a pulsing red dot animation and optional duration display. The component returns null when not recording.

      Key Features:

      • Pulsing animation: Eye-catching indicator that draws attention
      • Duration display: Shows elapsed recording time
      • Size variants: Small, medium, and large sizes for different contexts
      • Customizable label: Change "REC" text for i18n
      • Full customization: Colors, styles, and animation timing

      Visibility: The component automatically hides when isRecording is false, returning null from the render. This makes conditional rendering unnecessary.

      Basic recording indicator:

      import { RecordingIndicator } from '@hiyve/react-capture';

      function RecordingStatus({ isRecording, duration }) {
        return (
          <RecordingIndicator
            isRecording={isRecording}
            duration={duration}
          />
        );
      }

      Small indicator for video overlay:

      import { RecordingIndicator } from '@hiyve/react-capture';

      function VideoOverlay({ isRecording, duration }) {
        return (
          <Box sx={{ position: 'absolute', top: 8, left: 8 }}>
            <RecordingIndicator
              isRecording={isRecording}
              duration={duration}
              size="small"
            />
          </Box>
        );
      }

      Custom styling for dark theme:

      import { RecordingIndicator } from '@hiyve/react-capture';

      function DarkThemeIndicator({ isRecording, duration }) {
        return (
          <RecordingIndicator
            isRecording={isRecording}
            duration={duration}
            label="LIVE"
            colors={{
              background: 'rgba(255, 255, 255, 0.1)',
              indicator: '#FF4444',
              text: '#FFFFFF',
            }}
          />
        );
      }

      With custom animation and format:

      import { RecordingIndicator } from '@hiyve/react-capture';

      function CustomIndicator({ isRecording, duration }) {
        return (
          <RecordingIndicator
            isRecording={isRecording}
            duration={duration}
            showPulse
            styles={{
              animationDuration: '0.8s',  // Faster pulse
              borderRadius: 4,             // More rounded
              fontWeight: 800,             // Bolder text
              formatDuration: (seconds) => {
                const mins = Math.floor(seconds / 60);
                const secs = seconds % 60;
                return `${mins}m ${secs}s`;
              },
            }}
          />
        );
      }

    Settings

    Member Visibility