@editframe/elements 0.8.0-beta.8 → 0.9.0-beta.1

package/dist/EF_RENDERING.d.ts

@@ -0,0 +1 @@
+export declare const EF_RENDERING: () => boolean;

package/dist/elements/EFAudio.d.ts

@@ -7,3 +7,8 @@ export declare class EFAudio extends EFMedia {
     get audioElement(): HTMLAudioElement | undefined;
     frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-audio": EFAudio;
+    }
+}

package/dist/elements/EFImage.d.ts

@@ -2,12 +2,20 @@ import { Task } from '@lit/task';
 import { LitElement } from 'lit';
 declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
 export declare class EFImage extends EFImage_base {
+    #private;
     static styles: import('lit').CSSResult[];
     imageRef: import('lit-html/directives/ref.js').Ref<HTMLImageElement>;
     canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
+    set assetId(value: string | null);
+    get assetId(): string | null;
     render(): import('lit-html').TemplateResult<1>;
     assetPath(): string;
     fetchImage: Task<readonly [string, typeof fetch], void>;
     frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-image": EFImage;
+    }
+}
 export {};

package/dist/elements/EFMedia.browsertest.d.ts

@@ -0,0 +1,9 @@
+import { EFMedia } from './EFMedia.ts';
+declare class TestMedia extends EFMedia {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-media": TestMedia;
+    }
+}
+export {};

package/dist/elements/EFMedia.d.ts

@@ -11,6 +11,8 @@ export declare class EFMedia extends EFMedia_base {
     static styles: import('lit').CSSResult[];
     currentTimeMs: number;
     efHost?: string;
+    set assetId(value: string | null);
+    get assetId(): string | null;
     fragmentIndexPath(): string;
     fragmentTrackPath(trackId: string): string;
     trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex> | undefined>;

package/dist/elements/EFVideo.d.ts

@@ -10,4 +10,9 @@ export declare class EFVideo extends EFVideo_base {
     frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
     paintTask: Task<readonly [import('packages/assets/dist/EncodedAsset.js').VideoAsset | undefined, number], number | undefined>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-video": EFVideo;
+    }
+}
 export {};

package/dist/elements/src/EF_RENDERING.js

@@ -0,0 +1,4 @@
+const EF_RENDERING = () => typeof window !== "undefined" && "FRAMEGEN_BRIDGE" in window;
+export {
+  EF_RENDERING
+};

package/dist/elements/src/elements/EFCaptions.js

@@ -8,6 +8,7 @@ import { CrossUpdateController } from "./CrossUpdateController.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -92,10 +93,13 @@ let EFCaptions = class extends EFSourceMixin(
     this.targetSelector = value;
   }
   captionsPath() {
-    const targetSrc = this.targetElement.src;
-    if (targetSrc.startsWith("editframe://") || targetSrc.startsWith("http")) {
-      return targetSrc.replace("isobmff", "caption");
+    if (this.targetElement.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/video2/caption_files/${this.targetElement.assetId}`;
+      }
+      return `https://editframe.dev/api/video2/caption_files/${this.targetElement.assetId}`;
     }
+    const targetSrc = this.targetElement.src;
     return `/@ef-captions/${targetSrc}`;
   }
   connectedCallback() {

package/dist/elements/src/elements/EFImage.js

@@ -1,12 +1,16 @@
 import { Task } from "@lit/task";
 import { html, css, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
+import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -15,6 +19,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _assetId;
 let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
   assetType: "image_files"
 }) {
@@ -22,6 +31,7 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
     super(...arguments);
     this.imageRef = createRef();
     this.canvasRef = createRef();
+    __privateAdd(this, _assetId, null);
     this.fetchImage = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.assetPath(), this.fetch],
@@ -48,16 +58,32 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
       }
     });
   }
+  set assetId(value) {
+    if (!value?.match(/^.{8}-.{4}-.{4}-.{4}-.{12}:.*$/)) {
+      console.error(`EFMedia ${value} is not valid asset-id`);
+      throw new Error(
+        "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)"
+      );
+    }
+    __privateSet(this, _assetId, value);
+  }
+  get assetId() {
+    return __privateGet(this, _assetId) ?? this.getAttribute("asset-id");
+  }
   render() {
     return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
   assetPath() {
-    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
-      return this.src;
+    if (this.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/video2/image_files/${this.assetId}`;
+      }
+      return `https://editframe.dev/api/video2/image_files/${this.assetId}`;
     }
     return `/@ef-image/${this.src}`;
   }
 };
+_assetId = /* @__PURE__ */ new WeakMap();
 EFImage.styles = [
   css`
       :host {
@@ -72,6 +98,9 @@ EFImage.styles = [
       }
     `
 ];
+__decorateClass([
+  property({ type: String, attribute: "asset-id", reflect: true })
+], EFImage.prototype, "assetId", 1);
 EFImage = __decorateClass([
   customElement("ef-image")
 ], EFImage);

package/dist/elements/src/elements/EFMedia.js

@@ -12,13 +12,15 @@ import { EFSourceMixin } from "./EFSourceMixin.js";
 import { getStartTimeMs } from "./util.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { apiHostContext } from "../gui/apiHostContext.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 const log = debug("ef:elements:EFMedia");
@@ -38,6 +40,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   constructor() {
     super(...arguments);
     this.currentTimeMs = 0;
+    this.#assetId = null;
     this.trackFragmentIndexLoader = new Task(this, {
       args: () => [this.fragmentIndexPath(), this.fetch],
       task: async ([fragmentIndexPath, fetch], { signal }) => {
@@ -228,15 +231,33 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     `
     ];
   }
+  #assetId;
+  set assetId(value) {
+    if (!value?.match(/^.{8}-.{4}-.{4}-.{4}-.{12}:.*$/)) {
+      throw new Error(
+        "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)"
+      );
+    }
+    this.#assetId = value;
+  }
+  get assetId() {
+    return this.#assetId || this.getAttribute("asset-id");
+  }
   fragmentIndexPath() {
-    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
-      return `${this.src}/index`;
+    if (this.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/video2/isobmff_files/${this.assetId}/index`;
+      }
+      return `https://editframe.dev/api/video2/isobmff_files/${this.assetId}/index`;
     }
     return `/@ef-track-fragment-index/${this.src ?? ""}`;
   }
   fragmentTrackPath(trackId) {
-    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
-      return `${this.src.replace("files", "tracks")}/${trackId}`;
+    if (this.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/video2/isobmff_tracks/${this.assetId}/${trackId}`;
+      }
+      return `https://editframe.dev/api/video2/isobmff_tracks/${this.assetId}?trackId=${trackId}`;
     }
     return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
   }
@@ -342,14 +363,17 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 }
 __decorateClass([
   property({ type: Number })
-], EFMedia.prototype, "currentTimeMs");
+], EFMedia.prototype, "currentTimeMs", 2);
 __decorateClass([
   consume({ context: apiHostContext, subscribe: true }),
   state()
-], EFMedia.prototype, "efHost");
+], EFMedia.prototype, "efHost", 2);
+__decorateClass([
+  property({ type: String, attribute: "asset-id", reflect: true })
+], EFMedia.prototype, "assetId", 1);
 __decorateClass([
   state()
-], EFMedia.prototype, "desiredSeekTimeMs");
+], EFMedia.prototype, "desiredSeekTimeMs", 2);
 export {
   EFMedia,
   deepGetMediaElements

package/dist/elements/src/elements/parseTimeToMs.js

@@ -1,5 +1,4 @@
 const parseTimeToMs = (time) => {
-  console.log("parseTimeToMs", time);
   if (time.endsWith("ms")) {
     return Number.parseFloat(time);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.8.0-beta.8",
+  "version": "0.9.0-beta.1",
   "description": "",
   "exports": {
     ".": {
@@ -20,7 +20,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.8.0-beta.8",
+    "@editframe/assets": "0.9.0-beta.1",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFAudio.ts

@@ -38,3 +38,9 @@ export class EFAudio extends EFMedia {
     },
   });
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-audio": EFAudio;
+  }
+}

package/src/elements/EFCaptions.browsertest.ts

@@ -0,0 +1,50 @@
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import "./EFCaptions.ts";
+import "./EFVideo.ts";
+import { v4 } from "uuid";
+
+describe("EFCaptions", () => {
+  describe("when rendering", () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.FRAMEGEN_BRIDGE = true;
+    });
+    afterEach(() => {
+      // @ts-ignore
+      // biome-ignore lint/performance/noDelete: <explanation>
+      delete window.FRAMEGEN_BRIDGE;
+    });
+    test("captionsPath uses editframe:// protocol", () => {
+      const id = v4();
+      const workbench = document.createElement("ef-workbench");
+
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.assetId = "550e8400-e29b-41d4-a716-446655440000:example.mp4";
+      document.body.appendChild(target);
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      document.body.appendChild(captions);
+      workbench.appendChild(captions);
+      expect(captions.captionsPath()).toBe(
+        "editframe://api/video2/caption_files/550e8400-e29b-41d4-a716-446655440000:example.mp4",
+      );
+    });
+  });
+
+  describe("attribute: asset-id", () => {
+    test("determines assetPath", () => {
+      const id = v4();
+      const target = document.createElement("ef-video");
+      target.setAttribute("id", id);
+      target.assetId = `${id}:example.mp4`;
+      document.body.appendChild(target);
+      const captions = document.createElement("ef-captions");
+      captions.setAttribute("target", id);
+      document.body.appendChild(captions);
+      expect(captions.captionsPath()).toBe(
+        `https://editframe.dev/api/video2/caption_files/${id}:example.mp4`,
+      );
+    });
+  });
+});

package/src/elements/EFCaptions.ts

@@ -8,6 +8,7 @@ import { CrossUpdateController } from "./CrossUpdateController.ts";
 import { FetchMixin } from "./FetchMixin.ts";
 import { EFSourceMixin } from "./EFSourceMixin.ts";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { EF_RENDERING } from "../EF_RENDERING.ts";
 
 interface Word {
   text: string;
@@ -88,10 +89,13 @@ export class EFCaptions extends EFSourceMixin(
   activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
 
   captionsPath() {
-    const targetSrc = this.targetElement.src;
-    if (targetSrc.startsWith("editframe://") || targetSrc.startsWith("http")) {
-      return targetSrc.replace("isobmff", "caption");
+    if (this.targetElement.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/video2/caption_files/${this.targetElement.assetId}`;
+      }
+      return `https://editframe.dev/api/video2/caption_files/${this.targetElement.assetId}`;
     }
+    const targetSrc = this.targetElement.src;
     return `/@ef-captions/${targetSrc}`;
   }
 

package/src/elements/EFImage.browsertest.ts

@@ -0,0 +1,48 @@
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import "./EFImage.ts";
+import { v4 } from "uuid";
+
+describe("EFImage", () => {
+  describe("when rendering", () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.FRAMEGEN_BRIDGE = true;
+    });
+    afterEach(() => {
+      // @ts-ignore
+      // biome-ignore lint/performance/noDelete: <explanation>
+      delete window.FRAMEGEN_BRIDGE;
+    });
+    test("assetPath uses editframe:// protocol", () => {
+      const workbench = document.createElement("ef-workbench");
+      const element = document.createElement("ef-image");
+      workbench.appendChild(element);
+      element.assetId = "550e8400-e29b-41d4-a716-446655440000:example.jpg";
+      expect(element.assetPath()).toBe(
+        "editframe://api/video2/image_files/550e8400-e29b-41d4-a716-446655440000:example.jpg",
+      );
+    });
+  });
+
+  describe("attribute: asset-id", () => {
+    test("must match :id/basename", () => {
+      const image = document.createElement("ef-image");
+      expect(() => {
+        image.assetId = "1234:example.mp4";
+      }).toThrowError(
+        new Error(
+          "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)",
+        ),
+      );
+    });
+
+    test("determines assetPath", () => {
+      const id = v4();
+      const image = document.createElement("ef-image");
+      image.setAttribute("asset-id", `${id}:example.jpg`);
+      expect(image.assetPath()).toBe(
+        `https://editframe.dev/api/video2/image_files/${id}:example.jpg`,
+      );
+    });
+  });
+});

package/src/elements/EFImage.ts

@@ -1,10 +1,11 @@
 import { Task } from "@lit/task";
 import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { FetchMixin } from "./FetchMixin.ts";
 import { EFSourceMixin } from "./EFSourceMixin.ts";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { EF_RENDERING } from "../EF_RENDERING.ts";
 
 @customElement("ef-image")
 export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
@@ -28,13 +29,32 @@ export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
   imageRef = createRef<HTMLImageElement>();
   canvasRef = createRef<HTMLCanvasElement>();
 
+  #assetId: string | null = null;
+  @property({ type: String, attribute: "asset-id", reflect: true })
+  set assetId(value: string | null) {
+    if (!value?.match(/^.{8}-.{4}-.{4}-.{4}-.{12}:.*$/)) {
+      console.error(`EFMedia ${value} is not valid asset-id`);
+      throw new Error(
+        "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)",
+      );
+    }
+    this.#assetId = value;
+  }
+
+  get assetId() {
+    return this.#assetId ?? this.getAttribute("asset-id");
+  }
+
   render() {
     return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
 
   assetPath() {
-    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
-      return this.src;
+    if (this.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/video2/image_files/${this.assetId}`;
+      }
+      return `https://editframe.dev/api/video2/image_files/${this.assetId}`;
     }
     return `/@ef-image/${this.src}`;
   }
@@ -66,3 +86,9 @@ export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
     },
   });
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-image": EFImage;
+  }
+}

package/src/elements/EFMedia.browsertest.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test, beforeEach, afterEach } from "vitest";
+import { v4 } from "uuid";
+import { customElement } from "lit/decorators.js";
+import { EFMedia } from "./EFMedia.ts";
+import "../gui/EFWorkbench.ts";
+
+@customElement("test-media")
+class TestMedia extends EFMedia {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-media": TestMedia;
+  }
+}
+
+describe("EFMedia", () => {
+  test("should be defined", () => {
+    const element = document.createElement("test-media");
+    expect(element.tagName).toBe("TEST-MEDIA");
+  });
+
+  describe("when rendering", () => {
+    beforeEach(() => {
+      // @ts-ignore
+      window.FRAMEGEN_BRIDGE = true;
+    });
+    afterEach(() => {
+      // @ts-ignore
+      // biome-ignore lint/performance/noDelete: <explanation>
+      delete window.FRAMEGEN_BRIDGE;
+    });
+    test("fragmentIndexPath uses editframe:// protocol", () => {
+      const workbench = document.createElement("ef-workbench");
+      const element = document.createElement("test-media");
+      workbench.appendChild(element);
+      element.assetId = "550e8400-e29b-41d4-a716-446655440000:example.mp4";
+      expect(element.fragmentIndexPath()).toBe(
+        "editframe://api/video2/isobmff_files/550e8400-e29b-41d4-a716-446655440000:example.mp4/index",
+      );
+    });
+
+    test("fragmentTrackPath uses editframe:// protocol", () => {
+      const workbench = document.createElement("ef-workbench");
+      const element = document.createElement("test-media");
+      workbench.appendChild(element);
+      element.assetId = "550e8400-e29b-41d4-a716-446655440000:example.mp4";
+      expect(element.fragmentTrackPath("1")).toBe(
+        "editframe://api/video2/isobmff_tracks/550e8400-e29b-41d4-a716-446655440000:example.mp4/1",
+      );
+    });
+  });
+
+  describe("attribute: asset-id", () => {
+    test("must match :id/basename", () => {
+      const element = document.createElement("test-media");
+      expect(() => {
+        element.assetId = "1234:example.mp4";
+      }).toThrowError(
+        new Error(
+          "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)",
+        ),
+      );
+    });
+
+    test("determines fragmentIndexPath", () => {
+      const id = v4();
+      const element = document.createElement("test-media");
+      element.setAttribute("asset-id", `${id}:example.mp4`);
+      expect(element.fragmentIndexPath()).toBe(
+        `https://editframe.dev/api/video2/isobmff_files/${id}:example.mp4/index`,
+      );
+    });
+
+    test("determines fragmentTrackPath", () => {
+      const id = v4();
+      const element = document.createElement("test-media");
+      element.setAttribute("asset-id", `${id}:example.mp4`);
+      expect(element.fragmentTrackPath("1")).toBe(
+        `https://editframe.dev/api/video2/isobmff_tracks/${id}:example.mp4?trackId=1`,
+      );
+    });
+  });
+});

package/src/elements/EFMedia.ts

@@ -16,6 +16,7 @@ import { EFSourceMixin } from "./EFSourceMixin.ts";
 import { getStartTimeMs } from "./util.ts";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 import { apiHostContext } from "../gui/apiHostContext.ts";
+import { EF_RENDERING } from "../EF_RENDERING.ts";
 
 const log = debug("ef:elements:EFMedia");
 
@@ -53,16 +54,39 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   @state()
   efHost?: string;
 
+  #assetId: string | null = null;
+  @property({ type: String, attribute: "asset-id", reflect: true })
+  set assetId(value: string | null) {
+    if (!value?.match(/^.{8}-.{4}-.{4}-.{4}-.{12}:.*$/)) {
+      throw new Error(
+        "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)",
+      );
+    }
+    this.#assetId = value;
+  }
+
+  get assetId() {
+    return this.#assetId || this.getAttribute("asset-id");
+  }
+
   fragmentIndexPath() {
-    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
-      return `${this.src}/index`;
+    if (this.assetId) {
+      if (EF_RENDERING()) {
+        return `editframe://api/video2/isobmff_files/${this.assetId}/index`;
+      }
+      return `https://editframe.dev/api/video2/isobmff_files/${this.assetId}/index`;
     }
     return `/@ef-track-fragment-index/${this.src ?? ""}`;
   }
 
   fragmentTrackPath(trackId: string) {
-    if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
-      return `${this.src.replace("files", "tracks")}/${trackId}`;
+    if (this.assetId) {
+      if (EF_RENDERING()) {
+        // It is significant that the editframe:// protocol lists the trackId in the path rather than
+        // as a query parameter. This is a shortcut to loading track data from storage.
+        return `editframe://api/video2/isobmff_tracks/${this.assetId}/${trackId}`;
+      }
+      return `https://editframe.dev/api/video2/isobmff_tracks/${this.assetId}?trackId=${trackId}`;
     }
     return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
   }

package/src/elements/EFVideo.ts

@@ -101,3 +101,9 @@ export class EFVideo extends TWMixin(EFMedia) {
     },
   });
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-video": EFVideo;
+  }
+}

package/src/elements/parseTimeToMs.ts

@@ -1,5 +1,4 @@
 export const parseTimeToMs = (time: string) => {
-  console.log("parseTimeToMs", time);
   if (time.endsWith("ms")) {
     return Number.parseFloat(time);
   }