ef-configuration

Configuration wrapper for media engine selection and API settings.

Basic Usage

Wrap your composition to configure media handling:

<ef-configuration media-engine="cloud">
  <ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Media Engine Options

The media-engine attribute controls how media files are loaded and processed.

Cloud Mode (Default)

Automatically selects the appropriate engine based on URL:

• Remote URLs (http://, https://) use JIT transcoding
• Local paths use asset engine

Use when: Building production applications with mixed local and remote assets.

Local Mode

Forces all sources through the local asset engine using @ef-* URLs:

<ef-configuration media-engine="local">
  <ef-timegroup mode="contain" class="w-[720px] h-[480px]">
    <ef-video src="video.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Use when:

• Development with local files only
• Testing without network access
• Working with bundled assets

JIT Mode

Forces all sources through JIT transcoding using /api/v1/transcode/* URLs:

<ef-configuration media-engine="jit">
  <ef-timegroup mode="contain" class="w-[720px] h-[480px]">
    <ef-video src="https://example.com/video.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Use when:

• On-demand transcoding needed
• Working with incompatible video formats
• Development with Editframe Vite plugin

API Host Override

Override the API host for asset resolution in production:

<ef-configuration api-host="https://api.editframe.com">
  <ef-timegroup mode="contain" class="w-[720px] h-[480px]">
    <ef-video src="video.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Use when:

• Deploying to custom domains
• Using proxy servers
• Testing against staging environments

Signing URL

Configure the endpoint for generating signed URLs:

<ef-configuration signing-url="/api/sign-url">
  <ef-timegroup mode="contain" class="w-[720px] h-[480px]">
    <ef-video src="video.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Use when:

• Custom authentication flows
• Non-standard URL signing
• Backend integration requirements

Development vs Production

Local Development Setup

Use local mode with Vite plugin for fast iteration:

<ef-configuration media-engine="local" signing-url="/@ef-sign-url">
  <ef-timegroup mode="contain" class="w-[720px] h-[480px]">
    <ef-video src="./assets/video.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Production Setup

Use cloud mode with custom API host:

<ef-configuration media-engine="cloud" api-host="https://api.yourdomain.com">
  <ef-timegroup mode="contain" class="w-[720px] h-[480px]">
    <ef-video src="https://cdn.yourdomain.com/video.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Context Provision

ef-configuration provides settings via Lit context to all descendant elements. This means you only need one configuration wrapper at the root level:

<ef-configuration media-engine="cloud">
  <ef-timegroup mode="sequence" class="w-[720px] h-[480px]">
    <!-- All children inherit configuration -->
    <ef-video src="clip1.mp4" class="size-full"></ef-video>
    <ef-video src="clip2.mp4" class="size-full"></ef-video>
    <ef-video src="clip3.mp4" class="size-full"></ef-video>
  </ef-timegroup>
</ef-configuration>

Multiple Configurations

Nest configurations to override settings for specific subtrees:

<ef-configuration media-engine="cloud">
  <ef-timegroup mode="sequence" class="w-[720px] h-[480px]">
    <!-- Remote video uses cloud mode -->
    <ef-video src="https://cdn.example.com/intro.mp4" class="size-full"></ef-video>

    <!-- Local videos use local mode -->
    <ef-configuration media-engine="local">
      <ef-video src="./local-clip.mp4" class="size-full"></ef-video>
    </ef-configuration>
  </ef-timegroup>
</ef-configuration>