useTimingInfo() Hook

Overview

The useTimingInfo hook is a custom React hook designed to work with the EFTimegroup component. It provides real-time timing information for the timegroup, including the current time, duration, and percentage complete.

Basic Usage

import type { EFTimegroup } from "@editframe/elements";
import { useTimingInfo, Timegroup } from '@editframe/react';

function VideoComposition() {
  const { ownCurrentTimeMs, durationMs, percentComplete, ref } = useTimingInfo();

  return (
    <EFTimegroup ref={ref}>
      {/* Your timegroup content */}
    </EFTimegroup>
  );
}

Parameters

• timegroupRef (optional): A React ref object for the EFTimegroup component.

Return Value

An object containing:

• ownCurrentTimeMs: The current time of the timegroup in milliseconds.
• durationMs: The total duration of the timegroup in milliseconds.
• percentComplete: The percentage of the timegroup that has been completed (0 to 1).
• ref: A React ref object that should be passed to the EFTimegroup component.

Notes

• This hook relies on the EFTimegroup component.
• The percentComplete value is calculated as ownCurrentTimeMs / durationMs.