ef-controls

Bridges playback contexts from a target element to its children, enabling controls that don't share a common ancestor with the composition.

Basic Usage

Control a composition from outside its DOM tree:

<ef-timegroup id="my-composition" mode="sequence" class="w-[720px] h-[480px] bg-black">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
</ef-timegroup>

<ef-controls target="my-composition" class="flex gap-2 mt-4">
  <ef-toggle-play>
    <button slot="play" class="px-4 py-2 bg-blue-600 text-white rounded">Play</button>
    <button slot="pause" class="px-4 py-2 bg-gray-600 text-white rounded">Pause</button>
  </ef-toggle-play>
  <ef-time-display class="text-gray-300"></ef-time-display>
</ef-controls>

Context Bridging

ef-controls provides these contexts to its children:

• playing - Current playback state (boolean)
• loop - Loop state (boolean)
• currentTimeMs - Current playhead position (number)
• durationMs - Total duration (number)
• targetTemporal - Reference to the controlled element
• focusedElement - Currently focused element

Child elements like ef-play, ef-pause, ef-toggle-play, ef-scrubber, and ef-time-display automatically consume these contexts.

Non-Adjacent Controls

Use ef-controls when your playback controls are not descendants of the composition:

<!-- Composition in one part of the page -->
<div class="video-area">
  <ef-timegroup id="video-player" mode="contain" class="w-full aspect-video">
    <ef-video src="video.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</div>

<!-- Controls in a fixed toolbar -->
<div class="fixed bottom-0 left-0 right-0 bg-black p-4">
  <ef-controls target="video-player" class="flex justify-center gap-4">
    <ef-toggle-play>
      <button slot="play">▶</button>
      <button slot="pause">⏸</button>
    </ef-toggle-play>
    <ef-scrubber class="flex-1"></ef-scrubber>
    <ef-time-display></ef-time-display>
  </ef-controls>
</div>

Target Types

ef-controls supports targeting:

• ef-timegroup - Control a composition directly
• ef-video - Control a single video element
• ef-audio - Control a single audio element
• ef-preview - Control via preview's context (if preview wraps the target)

Multiple Control Sets

Multiple ef-controls elements can target the same composition:

<ef-timegroup id="main" mode="contain">
  <!-- composition -->
</ef-timegroup>

<!-- Desktop controls -->
<ef-controls target="main" class="desktop-only">
  <ef-toggle-play>
    <button slot="play">Play</button>
    <button slot="pause">Pause</button>
  </ef-toggle-play>
</ef-controls>

<!-- Mobile controls -->
<ef-controls target="main" class="mobile-only">
  <ef-toggle-play>
    <button slot="play">▶</button>
    <button slot="pause">⏸</button>
  </ef-toggle-play>
</ef-controls>

Without ef-controls

If controls are direct descendants of a timegroup, you don't need ef-controls:

<ef-timegroup mode="contain">
  <ef-video src="video.mp4"></ef-video>

  <!-- These controls work without ef-controls because they're descendants -->
  <div class="absolute bottom-4 left-4 flex gap-2">
    <ef-toggle-play>
      <button slot="play">Play</button>
      <button slot="pause">Pause</button>
    </ef-toggle-play>
  </div>
</ef-timegroup>

Use ef-controls when the target is not an ancestor of the control elements.