Editframe logoEditframe

React Hooks

Editframe provides React hooks for accessing timing information and managing state in your video editing applications.

useTimingInfo

The useTimingInfo hook provides real-time access to timing information from a timegroup element.

Signature

function useTimingInfo(
  timegroupRef?: React.RefObject<EFTimegroup>
): {
  ownCurrentTimeMs: number;
  durationMs: number;
  percentComplete: number;
  ref: React.RefObject<EFTimegroup>;
}

Parameters

  • timegroupRef (optional): A React ref to an <ef-timegroup> element. If not provided, a new ref is created and returned.

Return Value

Returns an object with:

  • ownCurrentTimeMs (number): Current time in milliseconds relative to this timegroup
  • durationMs (number): Total duration of the timegroup in milliseconds
  • percentComplete (number): Progress as a decimal (0 to 1)
  • ref (RefObject): The ref to attach to your Timegroup component

Basic Usage

import { useTimingInfo } from '@editframe/react';
import { Timegroup, Video } from '@editframe/react';

function VideoPlayer() {
  const { ownCurrentTimeMs, durationMs, percentComplete, ref } = useTimingInfo();
  
  return (
    <div>
      <Timegroup ref={ref} mode="contain" className="w-[1920px] h-[1080px]">
        <Video src="/video.mp4" />
      </Timegroup>
      
      <div className="info">
        <p>Current Time: {Math.round(ownCurrentTimeMs / 1000)}s</p>
        <p>Duration: {Math.round(durationMs / 1000)}s</p>
        <p>Progress: {Math.round(percentComplete * 100)}%</p>
      </div>
    </div>
  );
}

Examples

Custom Progress Bar

function VideoWithProgress() {
  const { percentComplete, ref } = useTimingInfo();
  
  return (
    <div>
      <Timegroup ref={ref} mode="contain" className="w-[1920px] h-[1080px]">
        <Video src="/video.mp4" />
      </Timegroup>
      
      <div className="progress-bar">
        <div style={{ width: `${percentComplete * 100}%` }} />
      </div>
    </div>
  );
}

Time Display

function formatTime(ms: number): string {
  const totalSeconds = Math.floor(ms / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function VideoWithTimeDisplay() {
  const { ownCurrentTimeMs, durationMs, ref } = useTimingInfo();
  
  return (
    <div>
      <Timegroup ref={ref} mode="contain" className="w-[1920px] h-[1080px]">
        <Video src="/video.mp4" />
      </Timegroup>
      
      <div className="time-display">
        {formatTime(ownCurrentTimeMs)} / {formatTime(durationMs)}
      </div>
    </div>
  );
}