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

    Function StreamingIndicator

    • StreamingIndicator displays a visual badge when streaming is active.

      Parameters

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

      The rendered StreamingIndicator component, or null if not streaming

      The StreamingIndicator component provides a clear visual indication that a live stream is in progress. It features a pulsing orange/amber dot animation and optional duration display. The component returns null when not streaming.

      Key Features:

      • Pulsing animation: Eye-catching indicator that draws attention
      • Duration display: Shows elapsed streaming time
      • Size variants: Small, medium, and large sizes for different contexts
      • Customizable label: Change "LIVE" text for i18n
      • Orange/amber theme: Distinguishes from recording (red)

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

      Basic streaming indicator:

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

      function StreamingStatus({ isStreaming, duration }) {
        return (
          <StreamingIndicator
            isStreaming={isStreaming}
            duration={duration}
          />
        );
      }

      Small indicator for video overlay:

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

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

    Settings

    Member Visibility