ef-time-display

Formatted time display showing current playback time and total duration in "M:SS / M:SS" format.

Basic Usage

Display time from a target element.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="time-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
</ef-timegroup>
<div class="flex gap-4 items-center p-4 bg-gray-900 rounded-lg mt-4">
  <ef-controls target="time-demo">
    <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  </ef-controls>
  <ef-time-display target="time-demo" class="text-white text-lg font-mono"></ef-time-display>
</div>

Within Controls Context

Time display automatically reads from parent ef-controls context.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="context-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
</ef-timegroup>
<ef-controls target="context-demo" class="flex gap-4 items-center p-4 bg-gray-900 rounded-lg mt-4">
  <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  <ef-time-display class="text-white text-lg font-mono"></ef-time-display>
  <ef-scrubber class="flex-1"></ef-scrubber>
</ef-controls>

Display Format

TimeDisplay shows time in M:SS / M:SS format:

• Minutes without leading zero
• Seconds with leading zero
• Current time followed by duration

Examples:

• 0:00 / 0:10 — 0 seconds of 10 seconds
• 1:05 / 2:30 — 1 minute 5 seconds of 2 minutes 30 seconds
• 12:00 / 15:45 — 12 minutes of 15 minutes 45 seconds

Custom Styling

Style the time display using standard CSS or the time part.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="styled-time">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
</ef-timegroup>
<ef-controls target="styled-time" class="flex gap-4 items-center p-4 bg-gray-900 rounded-lg mt-4">
  <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  <ef-time-display id="styled-display" class="px-4 py-2 bg-gray-800 rounded-lg"></ef-time-display>
</ef-controls>

<style>
  #styled-display::part(time) {
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size: 16px;
    font-weight: 600;
    color: #60a5fa;
    letter-spacing: 1px;
  }
</style>

With Timeline Controls

Time display works seamlessly with other timeline controls.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="full-controls">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
</ef-timegroup>
<ef-controls target="full-controls" class="flex flex-col gap-3 p-4 bg-gray-900 rounded-lg mt-4">
  <div class="flex gap-3 items-center">
    <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
    <ef-toggle-loop class="px-3 py-1 bg-gray-700 text-white rounded"></ef-toggle-loop>
    <ef-time-display class="text-white font-mono ml-auto"></ef-time-display>
  </div>
  <ef-scrubber></ef-scrubber>
</ef-controls>

Standalone Usage

Provide explicit time values without a target.

<ef-time-display
  current-time-ms="45000"
  duration-ms="180000"
  class="text-white font-mono"
></ef-time-display>
<!-- Displays: 0:45 / 3:00 -->

CSS Custom Properties

Control appearance through CSS variables:

ef-time-display {
  --ef-font-family: system-ui;
  --ef-font-size-xs: 0.75rem;
  --ef-text-color: white;
}

Accessibility

The time display is readable by screen readers.