ef-controls

Playback context provider. Wraps child control elements and connects them to a target timegroup.

ef-controls is a container that establishes a shared playback context for its children. Child controls (ef-scrubber, ef-toggle-play, ef-time-display, etc.) automatically connect to the target timegroup through this context without needing individual target attributes.

<ef-timegroup id="demo" mode="fixed" duration="5s" class="w-[1920px] h-[1080px] bg-slate-900 flex items-center justify-center">
  <style>
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    .demo-text {
      animation: pulse 2.4s ease-in-out infinite;
      display: inline-block;
    }
  </style>
  <ef-text class="demo-text text-white text-7xl font-bold">Hello</ef-text>
</ef-timegroup>

<ef-controls target="demo">
  <div class="ef-demo-grid">
    <span class="ef-demo-label">Play / Pause</span>
    <div class="ef-demo-cell">
      <ef-toggle-play>
        <button slot="play">▶</button>
        <button slot="pause">⏸</button>
      </ef-toggle-play>
    </div>

    <span class="ef-demo-label">Scrubber</span>
    <div class="ef-demo-cell">
      <ef-scrubber></ef-scrubber>
    </div>

    <span class="ef-demo-label">Time Display</span>
    <div class="ef-demo-cell">
      <ef-time-display></ef-time-display>
    </div>
  </div>
</ef-controls>

<style>
  .ef-demo-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .ef-demo-label {
    font-size: 11px;
    opacity: 0.45;
    white-space: nowrap;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .ef-demo-cell {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .ef-demo-cell ef-scrubber {
    flex: 1;
  }
</style>