@editframe/elements 0.10.0-beta.3 → 0.10.0-beta.5

package/dist/elements/EFSourceMixin.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 export declare class EFSourceMixinInterface {
+    apiHost?: string;
     productionSrc(): string;
     src: string;
 }

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

@@ -97,7 +97,7 @@ let EFCaptions = class extends EFSourceMixin(
       if (EF_RENDERING()) {
         return `editframe://api/v1/caption_files/${this.targetElement.assetId}`;
       }
-      return `https://editframe.dev/api/v1/caption_files/${this.targetElement.assetId}`;
+      return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;
     }
     const targetSrc = this.targetElement.src;
     return `/@ef-captions/${targetSrc}`;

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

@@ -78,7 +78,7 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
       if (EF_RENDERING()) {
         return `editframe://api/v1/image_files/${this.assetId}`;
       }
-      return `https://editframe.dev/api/v1/image_files/${this.assetId}`;
+      return `${this.apiHost}/api/v1/image_files/${this.assetId}`;
     }
     return `/@ef-image/${this.src}`;
   }

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

@@ -245,7 +245,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       if (EF_RENDERING()) {
         return `editframe://api/v1/isobmff_files/${this.assetId}/index`;
       }
-      return `https://editframe.dev/api/v1/isobmff_files/${this.assetId}/index`;
+      return `${this.apiHost}/api/v1/isobmff_files/${this.assetId}/index`;
     }
     return `/@ef-track-fragment-index/${this.src ?? ""}`;
   }
@@ -254,7 +254,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       if (EF_RENDERING()) {
         return `editframe://api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
       }
-      return `https://editframe.dev/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
+      return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
     }
     return `/@ef-track/${this.src ?? ""}?trackId=${trackId}`;
   }

package/dist/elements/src/elements/EFSourceMixin.js

@@ -27,24 +27,27 @@ function EFSourceMixin(superClass, options) {
         }
       });
     }
+    get apiHost() {
+      return this._apiHost ?? "https://editframe.dev";
+    }
     productionSrc() {
       if (!this.md5SumLoader.value) {
         throw new Error(
           `MD5 sum not available for ${this}. Cannot generate production URL`
         );
       }
-      if (!this.efHost) {
+      if (!this.apiHost) {
         throw new Error(
-          `efHost not available for ${this}. Cannot generate production URL`
+          `apiHost not available for ${this}. Cannot generate production URL`
         );
       }
-      return `${this.efHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;
+      return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;
     }
   }
   __decorateClass([
     consume({ context: apiHostContext, subscribe: true }),
     state()
-  ], EFSourceElement.prototype, "efHost");
+  ], EFSourceElement.prototype, "_apiHost");
   __decorateClass([
     property({ type: String })
   ], EFSourceElement.prototype, "src");

package/dist/elements/src/gui/ContextMixin.js

@@ -6,6 +6,7 @@ import { fetchContext } from "./fetchContext.js";
 import { createRef } from "lit/directives/ref.js";
 import { playingContext, loopContext } from "./playingContext.js";
 import { efContext } from "./efContext.js";
+import { apiHostContext } from "./apiHostContext.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -98,13 +99,20 @@ function ContextMixin(superClass) {
     connectedCallback() {
       super.connectedCallback();
       requestAnimationFrame(this.setStageScale);
+      if (this.playing) {
+        this.startPlayback();
+      }
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.stopPlayback();
     }
     update(changedProperties) {
       if (changedProperties.has("playing")) {
         if (this.playing) {
-          this.#startPlayback();
+          this.startPlayback();
         } else {
-          this.#stopPlayback();
+          this.stopPlayback();
         }
       }
       if (changedProperties.has("currentTimeMs") && this.targetTimegroup) {
@@ -132,7 +140,7 @@ function ContextMixin(superClass) {
         this.#syncPlayheadToAudioContext(target, startMs);
       });
     }
-    async #stopPlayback() {
+    async stopPlayback() {
       if (this.#playbackAudioContext) {
         if (this.#playbackAudioContext.state !== "closed") {
           await this.#playbackAudioContext.close();
@@ -143,12 +151,13 @@ function ContextMixin(superClass) {
       }
       this.#playbackAudioContext = null;
     }
-    async #startPlayback() {
-      await this.#stopPlayback();
+    async startPlayback() {
+      await this.stopPlayback();
       const timegroup = this.targetTimegroup;
       if (!timegroup) {
         return;
       }
+      await timegroup.waitForMediaDurations();
       let currentMs = timegroup.currentTimeMs;
       let bufferCount = 0;
       this.#playbackAudioContext = new AudioContext({
@@ -159,6 +168,13 @@ function ContextMixin(superClass) {
       }
       this.#syncPlayheadToAudioContext(timegroup, currentMs);
       const playbackContext = this.#playbackAudioContext;
+      if (playbackContext.state === "suspended") {
+        console.warn(
+          "AudioContext is suspended, media playback will not work until user has interacted with page."
+        );
+        this.playing = false;
+        return;
+      }
       await playbackContext.suspend();
       const fillBuffer = async () => {
         if (bufferCount > 1) {
@@ -213,6 +229,10 @@ function ContextMixin(superClass) {
     provide({ context: focusedElementContext }),
     state()
   ], ContextElement.prototype, "focusedElement");
+  __decorateClass([
+    provide({ context: apiHostContext }),
+    property({ type: String, reflect: true, attribute: "api-host" })
+  ], ContextElement.prototype, "apiHost");
   __decorateClass([
     provide({ context: efContext })
   ], ContextElement.prototype, "efContext");

package/dist/elements/src/gui/apiHostContext.js

@@ -1,5 +1,7 @@
 import { createContext } from "@lit/context";
-const apiHostContext = createContext(Symbol("apiHostContext"));
+const apiHostContext = createContext(
+  Symbol("apiHostContext")
+);
 export {
   apiHostContext
 };

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare class TestContext extends TestContext_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-context": TestContext;
+    }
+}
+declare class EFHostConsumer extends LitElement {
+    apiHost?: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-host-consumer": EFHostConsumer;
+    }
+}
+export {};

package/dist/gui/ContextMixin.d.ts

@@ -3,6 +3,7 @@ import { createRef } from 'lit/directives/ref.js';
 import { EFTimegroup } from '../elements/EFTimegroup.ts';
 export declare class ContextMixinInterface {
     signingURL?: string;
+    apiHost?: string;
     rendering: boolean;
     playing: boolean;
     loop: boolean;

package/dist/gui/apiHostContext.d.ts

@@ -1,3 +1,3 @@
 export declare const apiHostContext: {
-    __context__: string;
+    __context__: string | undefined;
 };

package/package.json

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

package/src/elements/EFCaptions.browsertest.ts

@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import "../gui/EFPreview.ts";
 import "./EFCaptions.ts";
 import "./EFVideo.ts";
 import { v4 } from "uuid";
@@ -46,5 +47,23 @@ describe("EFCaptions", () => {
         `https://editframe.dev/api/v1/caption_files/${id}:example.mp4`,
       );
     });
+
+    test("Honors provided apiHost", () => {
+      const preview = document.createElement("ef-preview");
+
+      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);
+      preview.appendChild(captions);
+      document.body.appendChild(preview);
+      preview.apiHost = "test://";
+      expect(captions.captionsPath()).toBe(
+        `test:///api/v1/caption_files/${id}:example.mp4`,
+      );
+    });
   });
 });

package/src/elements/EFCaptions.ts

@@ -93,7 +93,7 @@ export class EFCaptions extends EFSourceMixin(
       if (EF_RENDERING()) {
         return `editframe://api/v1/caption_files/${this.targetElement.assetId}`;
       }
-      return `https://editframe.dev/api/v1/caption_files/${this.targetElement.assetId}`;
+      return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;
     }
     const targetSrc = this.targetElement.src;
     return `/@ef-captions/${targetSrc}`;

package/src/elements/EFImage.browsertest.ts

@@ -1,5 +1,6 @@
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import "./EFImage.ts";
+import "../gui/EFPreview.ts";
 import { v4 } from "uuid";
 
 describe("EFImage", () => {
@@ -44,5 +45,18 @@ describe("EFImage", () => {
         `https://editframe.dev/api/v1/image_files/${id}:example.jpg`,
       );
     });
+
+    test("honors apiHost", () => {
+      const id = v4();
+      const image = document.createElement("ef-image");
+      const preview = document.createElement("ef-preview");
+      image.setAttribute("asset-id", `${id}:example.jpg`);
+      preview.appendChild(image);
+      preview.apiHost = "test://";
+      document.body.appendChild(preview);
+      expect(image.assetPath()).toBe(
+        `test:///api/v1/image_files/${id}:example.jpg`,
+      );
+    });
   });
 });

package/src/elements/EFImage.ts

@@ -54,7 +54,7 @@ export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
       if (EF_RENDERING()) {
         return `editframe://api/v1/image_files/${this.assetId}`;
       }
-      return `https://editframe.dev/api/v1/image_files/${this.assetId}`;
+      return `${this.apiHost}/api/v1/image_files/${this.assetId}`;
     }
     return `/@ef-image/${this.src}`;
   }

package/src/elements/EFMedia.browsertest.ts

@@ -3,6 +3,7 @@ import { v4 } from "uuid";
 import { customElement } from "lit/decorators.js";
 import { EFMedia } from "./EFMedia.ts";
 import "../gui/EFWorkbench.ts";
+import "../gui/EFPreview.ts";
 
 @customElement("test-media")
 class TestMedia extends EFMedia {}
@@ -79,5 +80,31 @@ describe("EFMedia", () => {
         `https://editframe.dev/api/v1/isobmff_tracks/${id}:example.mp4/1`,
       );
     });
+
+    test("honors apiHost in fragmentIndexPath", () => {
+      const id = v4();
+      const element = document.createElement("test-media");
+      element.setAttribute("asset-id", `${id}:example.mp4`);
+      const preview = document.createElement("ef-preview");
+      preview.appendChild(element);
+      preview.apiHost = "test://";
+      document.body.appendChild(preview);
+      expect(element.fragmentIndexPath()).toBe(
+        `test:///api/v1/isobmff_files/${id}:example.mp4/index`,
+      );
+    });
+
+    test("honors apiHost in fragmentTrackPath", () => {
+      const id = v4();
+      const element = document.createElement("test-media");
+      element.setAttribute("asset-id", `${id}:example.mp4`);
+      const preview = document.createElement("ef-preview");
+      preview.appendChild(element);
+      preview.apiHost = "test://";
+      document.body.appendChild(preview);
+      expect(element.fragmentTrackPath("1")).toBe(
+        `test:///api/v1/isobmff_tracks/${id}:example.mp4/1`,
+      );
+    });
   });
 });

package/src/elements/EFMedia.ts

@@ -74,7 +74,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       if (EF_RENDERING()) {
         return `editframe://api/v1/isobmff_files/${this.assetId}/index`;
       }
-      return `https://editframe.dev/api/v1/isobmff_files/${this.assetId}/index`;
+      return `${this.apiHost}/api/v1/isobmff_files/${this.assetId}/index`;
     }
     return `/@ef-track-fragment-index/${this.src ?? ""}`;
   }
@@ -84,7 +84,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       if (EF_RENDERING()) {
         return `editframe://api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
       }
-      return `https://editframe.dev/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
+      return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
     }
     // trackId is only specified as a query  in the @ef-track url shape
     // this is because that system doesn't have a full url matching system.

package/src/elements/EFSourceMixin.ts

@@ -6,6 +6,7 @@ import { property } from "lit/decorators/property.js";
 import { apiHostContext } from "../gui/apiHostContext.ts";
 
 export declare class EFSourceMixinInterface {
+  apiHost?: string;
   productionSrc(): string;
   src: string;
 }
@@ -21,7 +22,11 @@ export function EFSourceMixin<T extends Constructor<LitElement>>(
   class EFSourceElement extends superClass {
     @consume({ context: apiHostContext, subscribe: true })
     @state()
-    private efHost?: string;
+    private _apiHost?: string;
+
+    get apiHost() {
+      return this._apiHost ?? "https://editframe.dev";
+    }
 
     @property({ type: String })
     src = "";
@@ -33,13 +38,13 @@ export function EFSourceMixin<T extends Constructor<LitElement>>(
         );
       }
 
-      if (!this.efHost) {
+      if (!this.apiHost) {
         throw new Error(
-          `efHost not available for ${this}. Cannot generate production URL`,
+          `apiHost not available for ${this}. Cannot generate production URL`,
         );
       }
 
-      return `${this.efHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;
+      return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;
     }
 
     md5SumLoader = new Task(this, {

package/src/gui/ContextMixin.browsertest.ts

@@ -0,0 +1,81 @@
+import { LitElement } from "lit";
+import { customElement } from "lit/decorators/custom-element.js";
+import { describe, expect, test, vi } from "vitest";
+
+import { ContextMixin } from "./ContextMixin.ts";
+import { consume } from "@lit/context";
+import { apiHostContext } from "./apiHostContext.ts";
+
+@customElement("test-context")
+class TestContext extends ContextMixin(LitElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-context": TestContext;
+  }
+}
+
+@customElement("ef-host-consumer")
+class EFHostConsumer extends LitElement {
+  @consume({ context: apiHostContext, subscribe: true })
+  apiHost?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-host-consumer": EFHostConsumer;
+  }
+}
+
+describe("ContextMixin", () => {
+  test("should be defined", () => {
+    expect(ContextMixin).toBeDefined();
+  });
+
+  describe("efHost", () => {
+    test("Provides apiHost", () => {
+      const element = document.createElement("test-context");
+      const consumer = document.createElement("ef-host-consumer");
+      document.body.appendChild(element);
+      element.appendChild(consumer);
+      expect(consumer.apiHost).toBe(element.apiHost);
+
+      element.apiHost = "test";
+      expect(consumer.apiHost).toBe("test");
+
+      element.setAttribute("api-host", "test2");
+      expect(consumer.apiHost).toBe("test2");
+
+      expect(element.apiHost).toBe("test2");
+    });
+  });
+
+  describe("Playback", () => {
+    test("should start playback", () => {
+      const element = document.createElement("test-context");
+      element.playing = true;
+      expect(element.playing).toBe(true);
+    });
+
+    test("playback starts immediately if connected", () => {
+      const element = document.createElement("test-context");
+      // @ts-expect-error startPlayback is private
+      const playbackSpy = vi.spyOn(element, "startPlayback");
+      element.playing = true;
+      expect(element.playing).toBe(true);
+      document.body.appendChild(element);
+      expect(playbackSpy).toHaveBeenCalled();
+    });
+
+    test("playback stops immediately if disconnected", () => {
+      const element = document.createElement("test-context");
+      element.playing = true;
+      expect(element.playing).toBe(true);
+      document.body.appendChild(element);
+      // @ts-expect-error stopPlayback is private
+      const playbackSpy = vi.spyOn(element, "stopPlayback");
+      document.body.removeChild(element);
+      expect(playbackSpy).toHaveBeenCalled();
+    });
+  });
+});

package/src/gui/ContextMixin.ts

@@ -9,9 +9,11 @@ import { createRef } from "lit/directives/ref.js";
 import { loopContext, playingContext } from "./playingContext.ts";
 import type { EFTimegroup } from "../elements/EFTimegroup.ts";
 import { efContext } from "./efContext.ts";
+import { apiHostContext } from "./apiHostContext.ts";
 
 export declare class ContextMixinInterface {
   signingURL?: string;
+  apiHost?: string;
   rendering: boolean;
   playing: boolean;
   loop: boolean;
@@ -34,6 +36,10 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @state()
     focusedElement?: HTMLElement;
 
+    @provide({ context: apiHostContext })
+    @property({ type: String, reflect: true, attribute: "api-host" })
+    apiHost?: string;
+
     @provide({ context: efContext })
     efContext = this;
 
@@ -140,14 +146,22 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       // Preferrably we would use a resizeObserver, but it is difficult to get the first resize
       // timed correctly. So we use requestAnimationFrame as a stop-gap.
       requestAnimationFrame(this.setStageScale);
+      if (this.playing) {
+        this.startPlayback();
+      }
+    }
+
+    disconnectedCallback(): void {
+      super.disconnectedCallback();
+      this.stopPlayback();
     }
 
     update(changedProperties: Map<string | number | symbol, unknown>) {
       if (changedProperties.has("playing")) {
         if (this.playing) {
-          this.#startPlayback();
+          this.startPlayback();
         } else {
-          this.#stopPlayback();
+          this.stopPlayback();
         }
       }
 
@@ -183,7 +197,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       });
     }
 
-    async #stopPlayback() {
+    private async stopPlayback() {
       if (this.#playbackAudioContext) {
         if (this.#playbackAudioContext.state !== "closed") {
           await this.#playbackAudioContext.close();
@@ -195,23 +209,33 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       this.#playbackAudioContext = null;
     }
 
-    async #startPlayback() {
-      await this.#stopPlayback();
+    private async startPlayback() {
+      await this.stopPlayback();
       const timegroup = this.targetTimegroup;
       if (!timegroup) {
         return;
       }
 
+      await timegroup.waitForMediaDurations();
+
       let currentMs = timegroup.currentTimeMs;
       let bufferCount = 0;
       this.#playbackAudioContext = new AudioContext({
         latencyHint: "playback",
       });
+
       if (this.#playbackAnimationFrameRequest) {
         cancelAnimationFrame(this.#playbackAnimationFrameRequest);
       }
       this.#syncPlayheadToAudioContext(timegroup, currentMs);
       const playbackContext = this.#playbackAudioContext;
+      if (playbackContext.state === "suspended") {
+        console.warn(
+          "AudioContext is suspended, media playback will not work until user has interacted with page.",
+        );
+        this.playing = false;
+        return;
+      }
       await playbackContext.suspend();
 
       const fillBuffer = async () => {

package/src/gui/apiHostContext.ts

@@ -1,3 +1,5 @@
 import { createContext } from "@lit/context";
 
-export const apiHostContext = createContext<string>(Symbol("apiHostContext"));
+export const apiHostContext = createContext<string | undefined>(
+  Symbol("apiHostContext"),
+);