usePlayerProgress

usePlayerProgress() is the preferred public hook for custom timeline UI within a VideoPlayer scope.

This hook requires a VideoPlayer scope and a scope-aware media element. The Lit <Video> wrapper does not automatically participate in the scope.

Signature

const progress = usePlayerProgress();

It returns:

currentTime
duration
progress
buffered
seekTo(seconds)
seekBy(deltaSeconds)

progress and buffered are ratios from 0 to 1.

Example

import {VideoPlayer, usePlayerProgress} from "@rixl/media-react";

function CustomProgressControls() {
  const {currentTime, duration, progress, buffered, seekBy} = usePlayerProgress();

  return (
    <div className="space-y-2">
      <div>{`${Math.round(currentTime)}s / ${Math.round(duration)}s`}</div>
      <div>{`Played: ${Math.round(progress * 100)}% | Buffered: ${Math.round(buffered * 100)}%`}</div>
      <button type="button" onClick={() => seekBy(10)}>
        Seek +10s
      </button>
    </div>
  );
}

function CustomPlayer() {
  return (
    <VideoPlayer>
      <CustomProgressControls />
      {/* scope-aware media element */}
    </VideoPlayer>
  );
}

Notes

This hook resolves the current player from scope.
Before metadata is ready, timeline values can be 0.
Prefer this hook over useProgressBar when you are building on top of a scope-aware player.

Signature

Example

Notes

On this page