Time Indicator

Preview
Code

TimeIndicator.jsx

"use client";

import { usePlayerSelector } from "@/registry/react/PlayerProvider";

export function TimeIndicator() {
  const currentTime = usePlayerSelector((p) => p.currentTime);
  const duration = usePlayerSelector((p) => p.duration);
  return (
    <div>
      {currentTime} / {duration}
    </div>
  );
}

Installation

npx @beyondwords/cli components add time-indicator

pnpm dlx @beyondwords/cli components add time-indicator

yarn dlx @beyondwords/cli components add time-indicator

bunx --bun @beyondwords/cli components add time-indicator

Usage

import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { TimeIndicator } from '@/registry/react/TimeIndicator';

export function Player() {
  return (
    <PlayerProvider args={{ projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", showUserInterface: false }}>
      <TimeIndicator />
    </PlayerProvider>
  );
}

The component reads currentTime and duration from the surrounding PlayerProvider via usePlayerSelector. It re-renders only when those values change. It renders the raw values as {currentTime} / {duration}. Wrap them in your own formatter (e.g. mm:ss) for a friendlier display.

Reference


Props	None
Player state read	`currentTime`, `duration`
Events emitted	None (display only)
Requires	a `PlayerProvider` ancestor

Getting started

Components

Examples

Installation

Usage

Reference

​Installation

​Usage

​Reference

Installation

Usage

Reference