@editframe/elements 0.19.2-beta.0 → 0.20.0-beta.0

package/src/gui/EFTimeDisplay.browsertest.ts

@@ -0,0 +1,237 @@
+import { html, render as litRender, type TemplateResult } from "lit";
+import { assert, beforeEach, describe, test, vi } from "vitest";
+import { EFTimeDisplay } from "./EFTimeDisplay.js";
+import "./EFTimeDisplay.js";
+import type { EFTimegroup } from "../elements/EFTimegroup.js";
+import "../elements/EFTimegroup.js";
+import "./EFPreview.js";
+
+beforeEach(() => {
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (typeof key !== "string") continue;
+    localStorage.removeItem(key);
+  }
+  while (document.body.children.length) {
+    document.body.children[0]?.remove();
+  }
+});
+
+const renderTimeDisplay = (result: TemplateResult) => {
+  const container = document.createElement("div");
+  litRender(result, container);
+  const timeDisplay = container.querySelector("ef-time-display");
+  if (!timeDisplay) {
+    throw new Error("No ef-time-display found");
+  }
+  if (!(timeDisplay instanceof EFTimeDisplay)) {
+    throw new Error("Element is not an EFTimeDisplay");
+  }
+  document.body.appendChild(container);
+  return { timeDisplay, container };
+};
+
+describe("EFTimeDisplay", () => {
+  test("shows 0:00 / 0:00 when context is null", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-time-display></ef-time-display>`,
+    );
+    await timeDisplay.updateComplete;
+
+    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(timeText, "0:00 / 0:00");
+  });
+
+  test("works correctly with real EFTimegroup context", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="5s">
+          <ef-time-display></ef-time-display>
+        </ef-timegroup>
+      </ef-preview>`,
+    );
+
+    await timeDisplay.updateComplete;
+
+    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(
+      timeText,
+      "0:00 / 0:05",
+      "Should work with real timegroup context",
+    );
+  });
+
+  test("handles undefined currentTimeMs gracefully", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+    );
+
+    // const context = timeDisplay.closest("ef-preview") ;
+    await timeDisplay.updateComplete;
+
+    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(
+      timeText,
+      "0:00 / 0:05",
+      "Should show 0:00 when currentTimeMs is undefined",
+    );
+  });
+
+  test("handles NaN currentTimeMs gracefully", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+    );
+
+    const context = timeDisplay.closest("ef-preview")!;
+    context.currentTimeMs = Number.NaN;
+    await timeDisplay.updateComplete;
+
+    const timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(
+      timeText,
+      "0:00 / 0:05",
+      "Should show 0:00 when currentTimeMs is NaN",
+    );
+  });
+
+  test("formats time correctly with valid values", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+    );
+
+    const context = timeDisplay.closest("ef-preview")!;
+
+    // Create a mock timegroup with duration
+    const mockTimegroup = document.createElement("ef-timegroup") as EFTimegroup;
+    mockTimegroup.setAttribute("mode", "fixed");
+    mockTimegroup.setAttribute("duration", "3s");
+
+    context.targetTimegroup = mockTimegroup;
+    context.currentTimeMs = 1500; // 1.5 seconds = 0:01
+    await timeDisplay.updateComplete;
+
+    await vi.waitUntil(
+      () => timeDisplay.shadowRoot?.textContent?.trim() === "0:01 / 0:03",
+    );
+  });
+
+  test("formats minutes correctly", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="125s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+    );
+
+    const context = timeDisplay.closest("ef-preview")!;
+
+    // Create a mock timegroup with longer duration
+    const mockTimegroup = document.createElement("ef-timegroup") as EFTimegroup;
+    mockTimegroup.setAttribute("mode", "fixed");
+    mockTimegroup.setAttribute("duration", "125s"); // 2:05
+
+    context.currentTimeMs = 75000; // 75 seconds = 1:15
+    await vi.waitUntil(
+      () => timeDisplay.shadowRoot?.textContent?.trim() === "1:15 / 2:05",
+    );
+  });
+
+  test("updates display when time changes", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+    );
+
+    const context = timeDisplay.closest("ef-preview")!;
+
+    const mockTimegroup = document.createElement("ef-timegroup") as EFTimegroup;
+    mockTimegroup.setAttribute("mode", "fixed");
+    mockTimegroup.setAttribute("duration", "10s");
+
+    context.targetTimegroup = mockTimegroup;
+
+    // Initial time
+    context.currentTimeMs = 2000; // 2 seconds = 0:02
+    await timeDisplay.updateComplete;
+
+    let timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(timeText, "0:02 / 0:10");
+
+    // Update time
+    context.currentTimeMs = 7000; // 7 seconds = 0:07
+    await timeDisplay.updateComplete;
+
+    timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(timeText, "0:07 / 0:10", "Should update when time changes");
+  });
+
+  test("handles zero duration", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+    );
+
+    const context = timeDisplay.closest("ef-preview")!;
+    const timegroup = context.targetTimegroup!;
+
+    timegroup.setAttribute("duration", "0s");
+    assert.equal(timegroup.durationMs, 0);
+
+    await timegroup.updateComplete;
+    await timeDisplay.updateComplete;
+    await vi.waitUntil(
+      () => timeDisplay.shadowRoot?.textContent?.trim() === "0:00 / 0:00",
+    );
+  });
+
+  test("handles context changes correctly", async () => {
+    const { timeDisplay } = renderTimeDisplay(
+      html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+    );
+
+    const context = timeDisplay.closest("ef-preview")!;
+
+    // Set initial values
+    context.currentTimeMs = 1000;
+    await timeDisplay.updateComplete;
+
+    let timeText = timeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(timeText, "0:01 / 0:10");
+
+    // Move to a different context (using renderTimeDisplay to get proper TestContext)
+    const { timeDisplay: newTimeDisplay, container: newContainer } =
+      renderTimeDisplay(
+        html`<ef-preview>
+        <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
+        <ef-time-display></ef-time-display>
+      </ef-preview>`,
+      );
+
+    const newContext = newTimeDisplay.closest("ef-preview")!;
+
+    // Set different values in new context
+    newContext.currentTimeMs = 3000;
+    await newTimeDisplay.updateComplete;
+
+    timeText = newTimeDisplay.shadowRoot?.textContent?.trim();
+    assert.equal(timeText, "0:03 / 0:10", "Should work with new context");
+
+    newContainer.remove();
+  });
+});

package/src/gui/EFTimeDisplay.ts

@@ -1,8 +1,8 @@
 import { consume } from "@lit/context";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
-import type { ContextMixinInterface } from "./ContextMixin.js";
-import { efContext } from "./efContext.js";
+import { currentTimeContext } from "./currentTimeContext.js";
+import { durationContext } from "./durationContext.js";
 
 @customElement("ef-time-display")
 export class EFTimeDisplay extends LitElement {
@@ -16,46 +16,18 @@ export class EFTimeDisplay extends LitElement {
     }
   `;
 
-  @consume({ context: efContext, subscribe: true })
-  context?: ContextMixinInterface | null;
+  @consume({ context: currentTimeContext, subscribe: true })
+  currentTimeMs = Number.NaN;
 
-  private _onTimeUpdate = () => {
-    this.requestUpdate();
-  };
+  @consume({ context: durationContext, subscribe: true })
+  durationMs = 0;
 
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.context?.addEventListener(
-      "timeupdate",
-      this._onTimeUpdate as EventListener,
-    );
-  }
-
-  protected updated(changedProperties: Map<PropertyKey, unknown>): void {
-    if (changedProperties.has("context")) {
-      // Clean up old listener
-      const oldContext = changedProperties.get(
-        "context",
-      ) as ContextMixinInterface | null;
-      oldContext?.removeEventListener(
-        "timeupdate",
-        this._onTimeUpdate as EventListener,
-      );
-
-      // Add new listener
-      this.context?.addEventListener(
-        "timeupdate",
-        this._onTimeUpdate as EventListener,
-      );
+  private formatTime(ms: number): string {
+    // Handle NaN, undefined, null, or negative values
+    if (!Number.isFinite(ms) || ms < 0) {
+      return "0:00";
     }
-  }
-
-  disconnectedCallback(): void {
-    this.context?.removeEventListener("timeupdate", this._onTimeUpdate);
-    super.disconnectedCallback();
-  }
 
-  private formatTime(ms: number): string {
     const totalSeconds = Math.floor(ms / 1000);
     const minutes = Math.floor(totalSeconds / 60);
     const seconds = totalSeconds % 60;
@@ -63,8 +35,8 @@ export class EFTimeDisplay extends LitElement {
   }
 
   render() {
-    const currentTime = this.context?.currentTimeMs ?? 0;
-    const totalTime = this.context?.targetTimegroup?.durationMs ?? 0;
+    const currentTime = this.currentTimeMs;
+    const totalTime = this.durationMs;
 
     return html`
       <span part="time">

package/src/gui/currentTimeContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+
+export const currentTimeContext = createContext<number>(
+  Symbol("currentTimeMs"),
+);

package/src/gui/durationContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const durationContext = createContext<number>(Symbol("durationMs"));

package/src/transcoding/types/index.ts

@@ -274,6 +274,19 @@ export interface MediaEngine {
     maxVideoBufferFetches: number;
     maxAudioBufferFetches: number;
   };
+
+  /**
+   * Extract thumbnail canvases at multiple timestamps efficiently
+   * Uses scrub rendition and batches by segment for optimal performance
+   * Returns thumbnail objects in same order as input timestamps
+   * Returns null for any timestamps that fail to extract
+   */
+  extractThumbnails(timestamps: number[]): Promise<(ThumbnailResult | null)[]>;
+}
+
+export interface ThumbnailResult {
+  timestamp: number;
+  thumbnail: HTMLCanvasElement | OffscreenCanvas;
 }
 interface InitSegmentPath {
   path: string;

package/src/utils/LRUCache.test.ts

@@ -0,0 +1,272 @@
+import { describe, expect, test } from "vitest";
+import { LRUCache, OrderedLRUCache } from "./LRUCache";
+
+describe("LRUCache", () => {
+  test("basic LRU functionality", () => {
+    const cache = new LRUCache<string, number>(3);
+
+    cache.set("a", 1);
+    cache.set("b", 2);
+    cache.set("c", 3);
+
+    expect(cache.get("a")).toBe(1);
+    expect(cache.get("b")).toBe(2);
+    expect(cache.get("c")).toBe(3);
+    expect(cache.size).toBe(3);
+
+    // Should evict oldest when adding fourth item
+    cache.set("d", 4);
+    expect(cache.size).toBe(3);
+    expect(cache.has("a")).toBe(false); // 'a' was least recently used
+    expect(cache.get("d")).toBe(4);
+  });
+});
+
+describe("OrderedLRUCache", () => {
+  test("basic LRU functionality with ordered keys", () => {
+    const cache = new OrderedLRUCache<number, string>(3);
+
+    cache.set(10, "ten");
+    cache.set(5, "five");
+    cache.set(15, "fifteen");
+
+    expect(cache.get(10)).toBe("ten");
+    expect(cache.get(5)).toBe("five");
+    expect(cache.get(15)).toBe("fifteen");
+    expect(cache.size).toBe(3);
+  });
+
+  test("maintains sorted key order", () => {
+    const cache = new OrderedLRUCache<number, string>(5);
+
+    cache.set(30, "thirty");
+    cache.set(10, "ten");
+    cache.set(20, "twenty");
+    cache.set(40, "forty");
+    cache.set(15, "fifteen");
+
+    const sortedKeys = cache.getSortedKeys();
+    expect(sortedKeys).toEqual([10, 15, 20, 30, 40]);
+  });
+
+  test("binary search exact match", () => {
+    const cache = new OrderedLRUCache<number, string>(5);
+
+    cache.set(10, "ten");
+    cache.set(20, "twenty");
+    cache.set(30, "thirty");
+
+    expect(cache.findExact(20)).toBe("twenty");
+    expect(cache.findExact(25)).toBe(undefined);
+  });
+
+  test("find nearest in range", () => {
+    const cache = new OrderedLRUCache<number, string>(5);
+
+    cache.set(10, "ten");
+    cache.set(20, "twenty");
+    cache.set(30, "thirty");
+    cache.set(40, "forty");
+
+    // Test various range scenarios
+    const range12_5 = cache.findNearestInRange(12, 5);
+    expect(range12_5.map((item) => item.key)).toEqual([10]); // 12±5 = [7,17] contains only 10
+
+    const range25_8 = cache.findNearestInRange(25, 8);
+    expect(range25_8.map((item) => item.key)).toEqual([20, 30]); // 25±8 = [17,33] contains 20,30
+
+    const range35_3 = cache.findNearestInRange(35, 3);
+    expect(range35_3.map((item) => item.key)).toEqual([]); // 35±3 = [32,38] contains nothing
+
+    const range50_15 = cache.findNearestInRange(50, 15);
+    expect(range50_15.map((item) => item.key)).toEqual([40]); // 50±15 = [35,65] contains only 40
+
+    const range25_15 = cache.findNearestInRange(25, 15);
+    expect(range25_15.map((item) => item.key)).toEqual([10, 20, 30, 40]); // 25±15 = [10,40] contains all
+  });
+
+  test("range search", () => {
+    const cache = new OrderedLRUCache<number, string>(10);
+
+    cache.set(10, "ten");
+    cache.set(15, "fifteen");
+    cache.set(20, "twenty");
+    cache.set(25, "twenty-five");
+    cache.set(30, "thirty");
+    cache.set(35, "thirty-five");
+
+    const range1 = cache.findRange(15, 30);
+    expect(range1.map((item) => item.key)).toEqual([15, 20, 25, 30]);
+
+    const range2 = cache.findRange(12, 23);
+    expect(range2.map((item) => item.key)).toEqual([15, 20]);
+
+    const range3 = cache.findRange(40, 50);
+    expect(range3).toEqual([]); // No keys in range
+  });
+
+  test("LRU eviction maintains sorted order", () => {
+    const cache = new OrderedLRUCache<number, string>(3);
+
+    cache.set(30, "thirty");
+    cache.set(10, "ten");
+    cache.set(20, "twenty");
+
+    // Access 10 to make it most recent
+    cache.get(10);
+
+    // Add new item, should evict 30 (least recently used)
+    cache.set(40, "forty");
+
+    expect(cache.has(30)).toBe(false);
+    expect(cache.getSortedKeys()).toEqual([10, 20, 40]);
+  });
+
+  test("works with string keys and custom comparator", () => {
+    const cache = new OrderedLRUCache<string, number>(5, (a, b) =>
+      a.localeCompare(b),
+    );
+
+    cache.set("banana", 2);
+    cache.set("apple", 1);
+    cache.set("cherry", 3);
+    cache.set("date", 4);
+
+    expect(cache.getSortedKeys()).toEqual([
+      "apple",
+      "banana",
+      "cherry",
+      "date",
+    ]);
+
+    // For strings, findNearestInRange only works for exact matches since we can't calculate string distance
+    const nearestExact = cache.findNearestInRange("cherry", "cherry");
+    expect(nearestExact.map((item) => item.key)).toEqual(["cherry"]);
+
+    // But range searches work normally
+    const range = cache.findRange("banana", "date");
+    expect(range.map((item) => item.key)).toEqual(["banana", "cherry", "date"]);
+  });
+
+  test("handles empty cache gracefully", () => {
+    const cache = new OrderedLRUCache<number, string>(5);
+
+    expect(cache.findExact(10)).toBe(undefined);
+    expect(cache.findNearestInRange(10, 5)).toEqual([]);
+    expect(cache.findRange(1, 10)).toEqual([]);
+    expect(cache.getSortedKeys()).toEqual([]);
+  });
+
+  test("handles single item cache", () => {
+    const cache = new OrderedLRUCache<number, string>(5);
+    cache.set(10, "ten");
+
+    expect(cache.findNearestInRange(5, 10)).toEqual([
+      { key: 10, value: "ten" },
+    ]); // 5±10 = [-5,15] contains 10
+    expect(cache.findNearestInRange(15, 10)).toEqual([
+      { key: 10, value: "ten" },
+    ]); // 15±10 = [5,25] contains 10
+    expect(cache.findRange(1, 20)).toEqual([{ key: 10, value: "ten" }]);
+  });
+
+  test("updates existing keys without duplicating in sorted index", () => {
+    const cache = new OrderedLRUCache<number, string>(5);
+
+    cache.set(10, "ten");
+    cache.set(20, "twenty");
+    cache.set(10, "TEN"); // Update existing key
+
+    expect(cache.getSortedKeys()).toEqual([10, 20]); // No duplicates
+    expect(cache.get(10)).toBe("TEN");
+    expect(cache.size).toBe(2);
+  });
+
+  // Example use case: video segment caching by timestamp
+  test("video segment caching use case", () => {
+    interface VideoSegment {
+      url: string;
+      duration: number;
+      bitrate: number;
+    }
+
+    const segmentCache = new OrderedLRUCache<number, VideoSegment>(10);
+
+    // Add segments with timestamps as keys
+    segmentCache.set(0, { url: "/seg0.mp4", duration: 5000, bitrate: 1000 });
+    segmentCache.set(5000, { url: "/seg1.mp4", duration: 5000, bitrate: 1000 });
+    segmentCache.set(10000, {
+      url: "/seg2.mp4",
+      duration: 5000,
+      bitrate: 1000,
+    });
+    segmentCache.set(15000, {
+      url: "/seg3.mp4",
+      duration: 5000,
+      bitrate: 1000,
+    });
+
+    // Find segment at specific time
+    const segment = segmentCache.findExact(10000);
+    expect(segment?.url).toBe("/seg2.mp4");
+
+    // Find segments near seeking position 7500ms (within 3 seconds)
+    const nearSeekPoint = segmentCache.findNearestInRange(7500, 3000);
+    expect(nearSeekPoint.map((s) => s.key)).toEqual([5000, 10000]); // 7500±3000 = [4500,10500] contains these
+
+    // Get all segments in time range 5s-15s
+    const range = segmentCache.findRange(5000, 15000);
+    expect(range.length).toBe(3);
+    expect(range.map((s) => s.key)).toEqual([5000, 10000, 15000]);
+  });
+
+  test("findNearestInRange edge cases", () => {
+    const cache = new OrderedLRUCache<number, string>(10);
+
+    cache.set(100, "hundred");
+    cache.set(200, "two-hundred");
+    cache.set(300, "three-hundred");
+
+    // Test that it can return empty array when no items in range
+    const emptyResult = cache.findNearestInRange(50, 10);
+    expect(emptyResult).toEqual([]); // 50±10 = [40,60] contains nothing
+
+    // Test exact center match
+    const exactCenter = cache.findNearestInRange(200, 0);
+    expect(exactCenter.map((item) => item.key)).toEqual([200]); // 200±0 = [200,200] exact match
+
+    // Test asymmetric range (center closer to one side)
+    const asymmetric = cache.findNearestInRange(150, 60);
+    expect(asymmetric.map((item) => item.key)).toEqual([100, 200]); // 150±60 = [90,210] contains 100,200
+
+    // Test very large range containing all items
+    const allItems = cache.findNearestInRange(200, 500);
+    expect(allItems.map((item) => item.key)).toEqual([100, 200, 300]); // 200±500 = [-300,700] contains all
+  });
+
+  test("performance characteristics with large dataset", () => {
+    const cache = new OrderedLRUCache<number, string>(1000);
+
+    // Insert many items
+    const insertStart = performance.now();
+    for (let i = 0; i < 1000; i++) {
+      cache.set(Math.random() * 10000, `value-${i}`);
+    }
+    const insertTime = performance.now() - insertStart;
+
+    // Perform searches
+    const searchStart = performance.now();
+    for (let i = 0; i < 100; i++) {
+      cache.findNearestInRange(Math.random() * 10000, 500);
+      cache.findRange(Math.random() * 5000, Math.random() * 5000 + 1000);
+    }
+    const searchTime = performance.now() - searchStart;
+
+    // These should complete quickly for O(log n) operations
+    expect(insertTime).toBeLessThan(100); // Should be very fast
+    expect(searchTime).toBeLessThan(50); // Searches should be even faster
+
+    expect(cache.size).toBe(1000);
+    expect(cache.getSortedKeys().length).toBe(1000);
+  });
+});