Thumbnail Caching: Efficient Reuse Across All Instances

The thumbnail strip uses a global caching system that eliminates redundant thumbnail generation and provides instant thumbnail display across multiple strip instances. This architecture reduces memory usage and improves performance compared to per-instance caching approaches.

The Problem: Per-Instance Caching Overhead

Thumbnail systems that cache thumbnails independently for each strip instance face several challenges:

Memory inefficiency:

• Each thumbnail strip maintains its own cache
• Multiple strips showing the same video duplicate thumbnail data
• Memory usage scales linearly with the number of strips
• No sharing between instances means redundant generation

Cache miss penalties:

• Exact timestamp matches required for cache hits
• Floating-point precision differences cause cache misses
• Small time differences (e.g. 1000.1ms vs 1000.0ms) miss the cache
• Regenerating thumbnails for near-miss timestamps wastes resources

No coordination:

• Old thumbnails persist even when no longer needed
• Cache eviction policies don't account for global usage patterns
• No reuse of thumbnails across different strip instances

The Solution: Global Cache with Smart Optimization

The thumbnail strip uses a single global cache shared across all instances, with optimizations for cache hit rates:

Global cache sharing:

• Single cache (200 item limit) shared by all thumbnail strip instances
• Thumbnails generated for one strip are immediately available to all others
• Memory usage is constant regardless of the number of strips
• Eliminates redundant thumbnail generation across instances

Quantized timestamp caching:

• Timestamps are quantized to 30fps frame boundaries (33.33ms intervals)
• Eliminates cache misses from floating-point precision differences
• Cache keys use quantized timestamps for consistent matching

Near-hit optimization:

• 5-second window search for similar thumbnails when an exact match fails
• Reuses the nearest thumbnail within the window instead of regenerating
• A visual indicator shows when a near-hit is used

Practical Implications

Memory efficiency:

• Constant memory usage regardless of strip count (200 thumbnail limit)
• Shared cache means 10 strips use the same memory as 1 strip
• Automatic eviction prevents unbounded memory growth

Performance:

• Instant thumbnail display on cache hit
• Near-hit optimization reduces regeneration in typical scrubbing usage
• Quantized timestamps eliminate precision-related cache misses

Developer experience:

• No manual cache management required
• Cache works transparently across all instances

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="concept-cache">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
</ef-timegroup>
<div class="mt-4 space-y-2">
  <div class="text-white text-sm">Strip A — populates the global cache:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="concept-cache" thumbnail-height="64"></ef-thumbnail-strip>
  </div>
  <div class="text-white text-sm mt-2">Strip B — reuses cached thumbnails immediately:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="concept-cache" thumbnail-height="64" thumbnail-spacing-px="96"></ef-thumbnail-strip>
  </div>
</div>

---

Batch Thumbnail Extraction: Efficient Multi-Thumbnail Generation

The thumbnail strip generates multiple thumbnails in a single operation, reducing latency and improving performance compared to sequential thumbnail generation.

The Problem: Sequential Thumbnail Generation Is Slow

Thumbnail systems that generate thumbnails one at a time face performance challenges:

Sequential request overhead:

• Each thumbnail requires a separate operation
• Processing overhead accumulates across all requests
• 10 thumbnails = 10 round trips = 10x latency penalty
• No parallelization means slow initial load

Inefficient resource usage:

• Each request may trigger a separate video decoding operation
• No reuse of decoded video frames between requests
• Wasted processing cycles on redundant decoding

Poor user experience:

• Thumbnails appear one by one as each completes
• Long initial load time before all thumbnails are visible
• Stuttering visual updates as thumbnails populate

The Solution: Batch Extraction with Segment Alignment

The thumbnail strip groups thumbnails and uses batch extraction:

Batch API efficiency:

• Single operation generates all thumbnails in parallel
• Optimizes internal decoding and frame extraction
• Processing overhead paid once instead of N times

Segment-based grouping:

• Thumbnails grouped by segment before extraction
• Aligns with internal segment structure
• Enables efficient segment-level caching and reuse
• Reduces redundant segment loading

Progressive rendering:

• Cache hits drawn immediately (no waiting)
• Missing thumbnails marked as "loading" status
• Batch extraction runs in the background
• Canvas updates once when the batch completes

Practical Implications

Performance:

• Single processing round trip instead of N sequential requests
• Parallel frame extraction reduces total generation time
• Faster initial load improves perceived performance

Resource efficiency:

• Shared video decoding across batch requests
• Reduced processing usage compared to sequential generation

User experience:

• Thumbnails appear faster, reducing perceived wait time
• Smooth visual updates when the batch completes
• Progressive display: cache hits first, then batch results

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="concept-batch">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
</ef-timegroup>
<div class="mt-4 h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
  <ef-thumbnail-strip target="concept-batch" thumbnail-height="64" thumbnail-spacing-px="48"></ef-thumbnail-strip>
</div>
<div class="mt-2 text-white text-sm">All thumbnails above were generated in a single batch operation.</div>

---

Timeline Coordinates: Flexible Time Reference Systems

The thumbnail strip supports two timeline coordinate systems — trimmed mode and intrinsic mode — allowing you to generate thumbnails relative to either the trimmed video portion or the full source media.

The Problem: Single Timeline System Is Limiting

Thumbnail systems that use a single timeline reference face limitations:

Fixed reference point:

• Thumbnails always relative to one timeline (usually source start)
• Cannot show thumbnails from trimmed portion separately
• Cannot show thumbnails from full source when video is trimmed
• Forces workarounds for different use cases

Confusing coordinate conversion:

• Developers must manually convert between timelines
• Error-prone calculations for trimmed vs source time
• Inconsistent behavior across different video configurations
• Difficult to reason about thumbnail positions

Limited use case support:

• Cannot build scrubbers for trimmed timeline independently
• Cannot preview full source when editing trimmed clips
• Forces preprocessing or manual coordinate management

The Solution: Dual Timeline Modes with Automatic Conversion

Trimmed mode (default):

• Time 0 = start of trimmed portion (after trimstart/sourcein)
• Duration = effective trimmed duration
• Automatically converts to source timeline coordinates internally
• Matches what the user sees during playback

Intrinsic mode (use-intrinsic-duration):

• Time 0 = start of source media (ignores trimming)
• Duration = full source file duration
• Shows thumbnails from the entire source video
• Useful for previewing the full source while editing trimmed clips

The thumbnail strip handles all timeline coordinate conversion internally. No manual calculation is required.

Practical Implications

Flexible use cases:

• Build scrubbers for the trimmed timeline (trimmed mode)
• Preview full source while editing a clip (intrinsic mode)
• Support different UI patterns without workarounds

Developer experience:

• No manual coordinate conversion required
• Clear semantic meaning for each mode
• Consistent behavior regardless of video trimming state

<ef-timegroup mode="contain" class="w-[720px] h-[405px] bg-black" id="concept-timeline">
  <ef-video
    src="https://assets.editframe.com/bars-n-tone.mp4"
    trimstart="2s"
    trimend="2s"
    class="size-full object-contain"
  ></ef-video>
</ef-timegroup>
<div class="mt-4 space-y-2">
  <div class="text-white text-sm">Trimmed mode (default) — 0ms = after trimstart:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="concept-timeline" thumbnail-height="64"></ef-thumbnail-strip>
  </div>
  <div class="text-white text-sm mt-2">Intrinsic mode — 0ms = source start, full source duration:</div>
  <div class="h-16 rounded border border-gray-600 bg-gray-900 overflow-hidden">
    <ef-thumbnail-strip target="concept-timeline" thumbnail-height="64" use-intrinsic-duration></ef-thumbnail-strip>
  </div>
</div>

Notice the intrinsic mode strip covers a longer time range — the full source including the trimmed-out seconds at the beginning and end.