@editframe/elements 0.5.0-beta.8 → 0.6.0-beta.1

package/src/elements/EFTimegroup.browsertest.ts

@@ -1,360 +0,0 @@
-import { LitElement, render, html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { describe, test, assert, beforeEach } from "vitest";
-import "./EFTimegroup";
-import { EFTimegroup } from "./EFTimegroup";
-import { EFTemporal } from "./EFTemporal";
-import { buildLitFixture } from "./buildLitFixture";
-
-beforeEach(() => {
-  for (let i = 0; i < localStorage.length; i++) {
-    localStorage.removeItem(localStorage.key(i)!);
-  }
-});
-
-@customElement("test-temporal")
-class TestTemporal extends EFTemporal(LitElement) {
-  get hasOwnDuration(): boolean {
-    return true;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "test-temporal": TestTemporal;
-  }
-}
-
-const litTest = test.extend<{
-  container: HTMLDivElement;
-  timegroup: EFTimegroup;
-  containTimegroup: EFTimegroup;
-  sequenceTimegroup: EFTimegroup;
-  fixedTimegroup: EFTimegroup;
-  tenSecondTimegroup: EFTimegroup;
-}>({
-  container: async ({}, use) => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    await use(container);
-    document.body.removeChild(container);
-  },
-
-  timegroup: buildLitFixture<EFTimegroup>(html`<ef-timegroup></ef-timegroup>`),
-  containTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup mode="contain"></ef-timegroup>`,
-  ),
-  sequenceTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup mode="sequence"></ef-timegroup>`,
-  ),
-  fixedTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup mode="fixed"></ef-timegroup>`,
-  ),
-  tenSecondTimegroup: buildLitFixture<EFTimegroup>(
-    html`<ef-timegroup id="ten-second" duration="10s"></ef-timegroup>`,
-  ),
-});
-
-describe(`<ef-timegroup mode="fixed">`, () => {
-  litTest(
-    "can explicitly set a duration in seconds",
-    async ({ fixedTimegroup: timegroup }) => {
-      timegroup.setAttribute("duration", "10s");
-      assert.equal(timegroup.durationMs, 10_000);
-    },
-  );
-
-  litTest(
-    "can explicitly set a duration in milliseconds",
-    async ({ fixedTimegroup: timegroup }) => {
-      timegroup.setAttribute("duration", "10ms");
-      assert.equal(timegroup.durationMs, 10);
-    },
-  );
-});
-
-describe(`<ef-timegroup mode="sequence">`, () => {
-  litTest("fixed duration is ignored", ({ sequenceTimegroup: timegroup }) => {
-    timegroup.setAttribute("duration", "10s");
-    assert.equal(timegroup.durationMs, 0);
-  });
-
-  litTest(
-    "duration is the sum of child time groups",
-    async ({ sequenceTimegroup: timegroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-        `,
-        timegroup,
-      );
-      await timegroup.updateComplete;
-      assert.equal(timegroup.durationMs, 10_000);
-    },
-  );
-
-  litTest(
-    "duration can include any element with a durationMs value",
-    async ({ sequenceTimegroup: TimeGroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          <test-temporal duration="5s"></test-temporal>
-        `,
-        TimeGroup,
-      );
-
-      assert.equal(TimeGroup.durationMs, 10_000);
-    },
-  );
-
-  litTest("arbitrary html is ignored", ({ sequenceTimegroup: timegroup }) => {
-    render(
-      html`
-        <div>
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-        </div>
-      `,
-      timegroup,
-    );
-    assert.equal(timegroup.durationMs, 5_000);
-  });
-
-  litTest(
-    "nested time groups are ignored",
-    async ({ sequenceTimegroup: timegroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s">
-            <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          </ef-timegroup>
-        `,
-        timegroup,
-      );
-      await timegroup.updateComplete;
-      assert.equal(timegroup.durationMs, 5_000);
-    },
-  );
-});
-
-describe(`<ef-timegroup mode="contain">`, () => {
-  litTest("fixed duration is ignored", ({ containTimegroup: timegroup }) => {
-    timegroup.setAttribute("duration", "10s");
-    assert.equal(timegroup.durationMs, 0);
-  });
-
-  litTest(
-    "duration is the max of child time groups",
-    async ({ containTimegroup: timegroup }) => {
-      render(
-        html`
-          <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
-          <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
-        `,
-        timegroup,
-      );
-      await timegroup.updateComplete;
-      assert.equal(timegroup.durationMs, 10_000);
-    },
-  );
-});
-
-describe("startTimeMs", () => {
-  litTest(
-    "is computed relative to the root time group",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="sequence">
-          <ef-timegroup id="a" mode="fixed" duration="5s"></ef-timegroup>
-          <ef-timegroup id="b" mode="sequence">
-            <ef-timegroup id="c" mode="fixed" duration="5s"></ef-timegroup>
-            <ef-timegroup id="d" mode="contain">
-              <ef-timegroup id="e" mode="fixed" duration="5s"></ef-timegroup>
-              <ef-timegroup id="f" mode="fixed" duration="5s"></ef-timegroup>
-            </ef-timegroup>
-          </ef-timegroup>
-        </ef-timegroup>`,
-        container,
-      );
-
-      const a = container.querySelector("#a") as EFTimegroup;
-      const b = container.querySelector("#b") as EFTimegroup;
-      const c = container.querySelector("#c") as EFTimegroup;
-      const d = container.querySelector("#d") as EFTimegroup;
-      const e = container.querySelector("#e") as EFTimegroup;
-      const f = container.querySelector("#f") as EFTimegroup;
-
-      assert.equal(a.startTimeMs, 0);
-      assert.equal(b.startTimeMs, 5_000);
-      assert.equal(c.startTimeMs, 5_000);
-      assert.equal(d.startTimeMs, 10_000);
-      assert.equal(e.startTimeMs, 10_000);
-      assert.equal(f.startTimeMs, 10_000);
-    },
-  );
-
-  // TODO: Rethink offset math, it shouldn't effect the duration of a temporal item
-  // but actually change the start and end time.
-  litTest.skip("can be offset with offset attribute", async ({ container }) => {
-    render(
-      html`<ef-timegroup id="root" mode="contain">
-        <test-temporal id="a" duration="5s" offset="5s"></test-temporal>
-      </ef-timegroup> `,
-      container,
-    );
-
-    const root = container.querySelector("#root") as EFTimegroup;
-    const a = container.querySelector("#a") as TestTemporal;
-
-    assert.equal(a.durationMs, 5_000);
-    assert.equal(root.durationMs, 10_000);
-    assert.equal(a.startTimeMs, 5_000);
-  });
-
-  litTest.skip(
-    "offsets do not affect start time when in a sequence group",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="sequence">
-          <test-temporal id="a" duration="5s"></test-temporal>
-          <test-temporal id="b" duration="5s" offset="5s"></test-temporal>
-        </ef-timegroup> `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as TestTemporal;
-      const b = container.querySelector("#b") as TestTemporal;
-
-      assert.equal(root.durationMs, 10_000);
-      assert.equal(a.startTimeMs, 0);
-      assert.equal(b.startTimeMs, 5_000);
-    },
-  );
-
-  litTest(
-    "temporal elements default to expand to fill a timegroup",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="fixed" duration="10s">
-          <test-temporal id="a"></test-temporal>
-        </ef-timegroup> `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as TestTemporal;
-
-      assert.equal(root.durationMs, 10_000);
-      assert.equal(a.durationMs, 10_000);
-    },
-  );
-
-  litTest(
-    "element's parentTimegroup updates as they move",
-    async ({ container }) => {
-      const timegroup1 = document.createElement("ef-timegroup");
-      timegroup1.setAttribute("mode", "fixed");
-      timegroup1.setAttribute("duration", "5s");
-
-      const timegroup2 = document.createElement("ef-timegroup");
-      timegroup2.setAttribute("mode", "fixed");
-      timegroup2.setAttribute("duration", "5s");
-
-      container.appendChild(timegroup1);
-      container.appendChild(timegroup2);
-
-      const temporal = document.createElement("test-temporal");
-
-      timegroup1.appendChild(temporal);
-
-      assert.equal(temporal.parentTimegroup, timegroup1);
-
-      timegroup2.appendChild(temporal);
-      assert.equal(temporal.parentTimegroup, timegroup2);
-    },
-  );
-
-  litTest(
-    "elements can access their root temporal element",
-    async ({ container }) => {
-      render(
-        html`<ef-timegroup id="root" mode="contain" duration="10s">
-          <ef-timegroup id="a" mode="contain">
-            <div>
-              <ef-timegroup id="b" mode="contain">
-                <div>
-                  <test-temporal id="c" duration="5s"></test-temporal>
-                </div>
-              </ef-timegroup>
-            </div>
-          </ef-timegroup>
-        </ef-timegroup> `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as EFTimegroup;
-      const b = container.querySelector("#b") as EFTimegroup;
-      const c = container.querySelector("#c") as TestTemporal;
-
-      assert.equal(root.rootTimegroup, root);
-
-      assert.equal(a.rootTimegroup, root);
-      assert.equal(b.rootTimegroup, root);
-      assert.equal(c.rootTimegroup, root);
-    },
-  );
-});
-
-describe("setting currentTime", () => {
-  litTest(
-    "persists in localStorage if the timegroup has an id",
-    async ({ tenSecondTimegroup: timegroup }) => {
-      assert.isNull(localStorage.getItem(timegroup.storageKey));
-      timegroup.currentTime = 5_000;
-      assert.equal(localStorage.getItem(timegroup.storageKey), "5000");
-    },
-  );
-
-  litTest(
-    "does not persist in localStorage if the timegroup has no id",
-    async ({ timegroup }) => {
-      timegroup.currentTime = 5_000;
-      assert.isNull(localStorage.getItem(timegroup.storageKey));
-    },
-  );
-
-  litTest(
-    "nested items derive their ownCurrentTimeMs",
-    async ({ container }) => {
-      render(
-        html`
-          <ef-timegroup id="root" mode="sequence">
-            <ef-timegroup id="a" mode="fixed" duration="5s"> </ef-timegroup>
-            <test-temporal id="b" mode="fixed" duration="5s"> </test-temporal>
-          </ef-timegroup>
-        `,
-        container,
-      );
-
-      const root = container.querySelector("#root") as EFTimegroup;
-      const a = container.querySelector("#a") as TestTemporal;
-      const b = container.querySelector("#b") as TestTemporal;
-
-      assert.equal(a.ownCurrentTimeMs, 0);
-      assert.equal(b.ownCurrentTimeMs, 0);
-
-      root.currentTimeMs = 2_500;
-
-      assert.equal(a.ownCurrentTimeMs, 2_500);
-      assert.equal(b.ownCurrentTimeMs, 0);
-
-      root.currentTimeMs = 7_500;
-
-      assert.equal(a.ownCurrentTimeMs, 5_000);
-      assert.equal(b.ownCurrentTimeMs, 2_500);
-    },
-  );
-});

package/src/elements/EFVideo.ts

@@ -1,114 +0,0 @@
-import { html, css } from "lit";
-import { Task } from "@lit/task";
-import { createRef, ref } from "lit/directives/ref.js";
-import { customElement } from "lit/decorators.js";
-
-import { EFMedia } from "./EFMedia";
-import { TWMixin } from "../gui/TWMixin";
-
-@customElement("ef-video")
-export class EFVideo extends TWMixin(EFMedia) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-    `,
-  ];
-  canvasRef = createRef<HTMLCanvasElement>();
-
-  render() {
-    return html` <canvas
-      class="h-full w-full object-fill"
-      ${ref(this.canvasRef)}
-    ></canvas>`;
-  }
-
-  get canvasElement() {
-    return this.canvasRef.value;
-  }
-
-  // The underlying video decoder MUST NOT be used concurrently.
-  // If frames are fed in out of order, the decoder may crash.
-  #decoderLock = false;
-
-  frameTask = new Task(this, {
-    args: () =>
-      [
-        this.trackFragmentIndexLoader.status,
-        this.initSegmentsLoader.status,
-        this.seekTask.status,
-        this.fetchSeekTask.status,
-        this.videoAssetTask.status,
-        this.paintTask.status,
-      ] as const,
-    task: async () => {
-      console.log("EFVideo frameTask", this.ownCurrentTimeMs);
-      await this.trackFragmentIndexLoader.taskComplete;
-      await this.initSegmentsLoader.taskComplete;
-      await this.seekTask.taskComplete;
-      await this.fetchSeekTask.taskComplete;
-      await this.videoAssetTask.taskComplete;
-      await this.paintTask.taskComplete;
-      console.log("EFVideo frameTask complete", this.ownCurrentTimeMs);
-      this.rootTimegroup?.requestUpdate();
-    },
-  });
-
-  paintTask = new Task(this, {
-    args: () => [this.videoAssetTask.value, this.desiredSeekTimeMs] as const,
-    task: async (
-      [videoAsset, seekToMs],
-      {
-        signal:
-          _signal /** Aborting seeks is counter-productive. It is better to drop seeks. */,
-      },
-    ) => {
-      console.log(`EFVideo paintTask decoderLock=${this.#decoderLock}`);
-      if (!videoAsset) {
-        return;
-      }
-      if (this.#decoderLock) {
-        return;
-      }
-      try {
-        this.#decoderLock = true;
-        const frame = await videoAsset.seekToTime(seekToMs / 1000);
-        console.log(
-          "Painting frame",
-          "seekToMs",
-          seekToMs,
-          "timestamp",
-          frame?.timestamp,
-        );
-
-        if (!this.canvasElement) {
-          return;
-        }
-        const ctx = this.canvasElement.getContext("2d");
-        if (!(frame && ctx)) {
-          return;
-        }
-
-        this.canvasElement.width = frame?.codedWidth;
-        this.canvasElement.height = frame?.codedHeight;
-
-        ctx.drawImage(
-          frame,
-          0,
-          0,
-          this.canvasElement.width,
-          this.canvasElement.height,
-        );
-
-        return seekToMs;
-      } catch (error) {
-        console.trace("Unexpected error while seeking video", error);
-        // As a practical matter, we should probably just re-create the VideoAsset if decoding fails.
-        // The decoder is probably in an invalid state anyway.
-      } finally {
-        this.#decoderLock = false;
-      }
-    },
-  });
-}