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

package/dist/EF_INTERACTIVE.d.ts

@@ -0,0 +1 @@
+export declare let EF_INTERACTIVE: boolean;

package/dist/{lib/av → assets/dist}/EncodedAsset.js

@@ -1,6 +1,6 @@
 import * as MP4Box from "mp4box";
 import debug from "debug";
-import { memoize } from "../util/memoize.js";
+import { memoize } from "./memoize.js";
 import { MP4File } from "./MP4File.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/{packages/elements/src/elements → elements}/EFAudio.d.ts

@@ -1,8 +1,8 @@
-import { EFMedia } from './EFMedia';
+import { EFMedia } from './EFMedia.ts';
 import { Task } from '@lit/task';
 
 export declare class EFAudio extends EFMedia {
-    audioElementRef: import('lit-html/directives/ref').Ref<HTMLAudioElement>;
+    audioElementRef: import('lit-html/directives/ref.js').Ref<HTMLAudioElement>;
     src: string;
     render(): import('lit-html').TemplateResult<1>;
     get audioElement(): HTMLAudioElement | undefined;

package/dist/{packages/elements/src/elements → elements}/EFCaptions.d.ts

@@ -1,9 +1,9 @@
-import { EFAudio } from './EFAudio';
 import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
-import { EFVideo } from './EFVideo';
+import { EFVideo } from './EFVideo.ts';
+import { EFAudio } from './EFAudio.ts';
 
-declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1>;
@@ -13,14 +13,14 @@ export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     get startTimeMs(): number;
     get durationMs(): number;
 }
-declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin').FetchMixinInterface) & typeof LitElement;
+declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
 export declare class EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
     target: null;
     wordStyle: string;
     activeWordContainers: HTMLCollectionOf<EFCaptionsActiveWord>;
     captionsPath(): string;
-    protected md5SumLoader: Task<readonly [null], string | undefined>;
+    protected md5SumLoader: Task<readonly [null, typeof fetch], string | undefined>;
     private captionsDataTask;
     frameTask: Task<import('@lit/task').TaskStatus[], void>;
     connectedCallback(): void;

package/dist/{packages/elements/src/elements → elements}/EFImage.d.ts

@@ -1,11 +1,11 @@
 import { Task } from '@lit/task';
 import { LitElement } from 'lit';
 
-declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin').FetchMixinInterface) & typeof LitElement;
+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 {
     static styles: import('lit').CSSResult[];
-    imageRef: import('lit-html/directives/ref').Ref<HTMLImageElement>;
-    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    imageRef: import('lit-html/directives/ref.js').Ref<HTMLImageElement>;
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
     render(): import('lit-html').TemplateResult<1>;
     assetPath(): string;
     fetchImage: Task<readonly [string, typeof fetch], void>;

package/dist/{packages/elements/src/elements → elements}/EFMedia.d.ts

@@ -1,12 +1,12 @@
 import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
 import { TrackFragmentIndex, TrackSegment } from '../../../assets/src';
-import { MP4File } from '../../../../lib/av/MP4File';
-import { VideoAsset } from '../../../../lib/av/EncodedAsset';
+import { MP4File } from '../../../assets/MP4File.js/src';
+import { VideoAsset } from '../../../assets/EncodedAsset.js/src';
 
 import type * as MP4Box from "mp4box";
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
-declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin').FetchMixinInterface) & typeof LitElement;
+declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
 export declare class EFMedia extends EFMedia_base {
     #private;
     static styles: import('lit').CSSResult[];
@@ -14,7 +14,7 @@ export declare class EFMedia extends EFMedia_base {
     efHost?: string;
     fragmentIndexPath(): string;
     fragmentTrackPath(trackId: string): string;
-    trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex>>;
+    trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex> | undefined>;
     protected initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
         trackId: string;
         buffer: MP4Box.MP4ArrayBuffer;

package/dist/{packages/elements/src/elements → elements}/EFTemporal.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, ReactiveController } from 'lit';
-import { EFTimegroup } from './EFTimegroup';
+import { EFTimegroup } from './EFTimegroup.ts';
 import { Task } from '@lit/task';
 
 export declare const timegroupContext: {

package/dist/{packages/elements/src/elements → elements}/EFTimegroup.browsertest.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 
-declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {
     get hasOwnDuration(): boolean;
 }

package/dist/{packages/elements/src/elements → elements}/EFTimegroup.d.ts

@@ -2,7 +2,7 @@ import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
 
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
-declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFTimegroup extends EFTimegroup_base {
     #private;
     static styles: import('lit').CSSResult;
@@ -20,8 +20,8 @@ export declare class EFTimegroup extends EFTimegroup_base {
     get crossoverStartMs(): number;
     get crossoverEndMs(): number;
     get durationMs(): number;
-    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src').TrackFragmentIndex>[]>;
-    get childTemporals(): import('./EFTemporal').TemporalMixinInterface[];
+    waitForMediaDurations(): Promise<(Record<number, import('packages/assets/dist/Probe.js').TrackFragmentIndex> | undefined)[]>;
+    get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     shouldWrapWithWorkbench(): boolean;
     wrapWithWorkbench(): void;

package/dist/{packages/elements/src/elements → elements}/EFVideo.d.ts

@@ -1,14 +1,14 @@
 import { Task } from '@lit/task';
-import { EFMedia } from './EFMedia';
+import { EFMedia } from './EFMedia.ts';
 
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
     #private;
     static styles: import('lit').CSSResult[];
-    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
     render(): import('lit-html').TemplateResult<1>;
     get canvasElement(): HTMLCanvasElement | undefined;
     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('../../../../lib/av/EncodedAsset').VideoAsset | undefined, number], number | undefined>;
+    paintTask: Task<readonly [import('packages/assets/dist/EncodedAsset.js').VideoAsset | undefined, number], number | undefined>;
 }
 export {};

package/dist/{packages/elements/src/elements → elements}/EFWaveform.d.ts

@@ -1,10 +1,10 @@
-import { EFAudio } from './EFAudio';
+import { EFAudio } from './EFAudio.ts';
 import { LitElement } from 'lit';
-import { EFVideo } from './EFVideo';
+import { EFVideo } from './EFVideo.ts';
 import { Task } from '@lit/task';
 import { Ref } from 'lit/directives/ref.js';
 
-declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFWaveform extends EFWaveform_base {
     static styles: never[];
     svgRef: Ref<SVGElement>;

package/dist/{packages/elements/src/elements → elements}/TimegroupController.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveController, LitElement } from 'lit';
-import { EFTimegroup } from './EFTimegroup';
+import { EFTimegroup } from './EFTimegroup.ts';
 
 export declare class TimegroupController implements ReactiveController {
     private host;

package/dist/{packages/elements → elements}/src/EF_FRAMEGEN.js

@@ -1,6 +1,5 @@
 import debug from "debug";
 import { TaskStatus } from "@lit/task";
-import { awaitMicrotask } from "../../../lib/util/awaitMicrotask.js";
 import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.js";
 import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
 const log = debug("ef:elements:EF_FRAMEGEN");
@@ -136,7 +135,7 @@ class EfFramegen {
     log("Awaiting initialBusyTasks");
     await this.initialBusyTasks;
     log("Awaiting microtask");
-    await awaitMicrotask();
+    await new Promise(queueMicrotask);
     log("Awaiting frame tasks");
     const now = performance.now();
     await Promise.all(
@@ -191,7 +190,9 @@ class EfFramegen {
     }
   }
 }
-window.EF_FRAMEGEN = new EfFramegen();
+if (typeof window !== "undefined") {
+  window.EF_FRAMEGEN = new EfFramegen();
+}
 export {
   EfFramegen
 };

package/dist/elements/src/EF_INTERACTIVE.js

@@ -0,0 +1,7 @@
+let EF_INTERACTIVE = false;
+if (typeof window !== "undefined") {
+  EF_INTERACTIVE = !window.location?.search.includes("EF_NONINTERACTIVE");
+}
+export {
+  EF_INTERACTIVE
+};

package/dist/{packages/elements → elements}/src/elements/EFCaptions.js

@@ -1,8 +1,8 @@
-import { EFAudio } from "./EFAudio.js";
 import { html, css, LitElement } from "lit";
 import { Task } from "@lit/task";
 import { property, customElement } from "lit/decorators.js";
 import { EFVideo } from "./EFVideo.js";
+import { EFAudio } from "./EFAudio.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
 import { FetchMixin } from "./FetchMixin.js";
@@ -65,8 +65,8 @@ let EFCaptions = class extends EFSourceMixin(
     this.activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
     this.md5SumLoader = new Task(this, {
       autoRun: false,
-      args: () => [this.target],
-      task: async ([], { signal }) => {
+      args: () => [this.target, this.fetch],
+      task: async ([_target, fetch], { signal }) => {
         const md5Path = `/@ef-asset/${this.targetElement.src ?? ""}`;
         const response = await fetch(md5Path, { method: "HEAD", signal });
         return response.headers.get("etag") ?? void 0;
@@ -75,8 +75,8 @@ let EFCaptions = class extends EFSourceMixin(
     this.captionsDataTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.captionsPath(), this.fetch],
-      task: async ([captionsPath, fetch2], { signal }) => {
-        const response = await fetch2(captionsPath, { signal });
+      task: async ([captionsPath, fetch], { signal }) => {
+        const response = await fetch(captionsPath, { signal });
         return response.json();
       }
     });

package/dist/{packages/elements → elements}/src/elements/EFMedia.js

@@ -4,14 +4,14 @@ import { deepArrayEquals } from "@lit/task/deep-equals.js";
 import { Task } from "@lit/task";
 import { consume } from "@lit/context";
 import debug from "debug";
-import { MP4File } from "../../../../lib/av/MP4File.js";
+import { MP4File } from "../../../assets/dist/MP4File.js";
+import { VideoAsset } from "../../../assets/dist/EncodedAsset.js";
 import { EFTemporal } from "./EFTemporal.js";
-import { VideoAsset } from "../../../../lib/av/EncodedAsset.js";
 import { FetchMixin } from "./FetchMixin.js";
-import { apiHostContext } from "../gui/EFWorkbench.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { getStartTimeMs } from "./util.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { apiHostContext } from "../gui/apiHostContext.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -41,6 +41,9 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     this.trackFragmentIndexLoader = new Task(this, {
       args: () => [this.fragmentIndexPath(), this.fetch],
       task: async ([fragmentIndexPath, fetch], { signal }) => {
+        if (this.src === "") {
+          return;
+        }
         const response = await fetch(fragmentIndexPath, { signal });
         return await response.json();
       },

package/dist/{packages/elements → elements}/src/elements/EFSourceMixin.js

@@ -1,8 +1,8 @@
 import { consume } from "@lit/context";
-import { apiHostContext } from "../gui/EFWorkbench.js";
 import { state } from "lit/decorators/state.js";
 import { Task } from "@lit/task";
 import { property } from "lit/decorators/property.js";
+import { apiHostContext } from "../gui/apiHostContext.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/{packages/elements → elements}/src/elements/EFTemporal.js

@@ -36,7 +36,19 @@ const deepGetElementsWithFrameTasks = (element, elements = []) => {
   }
   return elements;
 };
+let temporalCache;
+const resetTemporalCache = () => {
+  temporalCache = /* @__PURE__ */ new Map();
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(resetTemporalCache);
+  }
+};
+resetTemporalCache();
 const shallowGetTemporalElements = (element, temporals = []) => {
+  const cachedResult = temporalCache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
   for (const child of element.children) {
     if (isEFTemporal(child)) {
       temporals.push(child);
@@ -44,6 +56,7 @@ const shallowGetTemporalElements = (element, temporals = []) => {
       shallowGetTemporalElements(child, temporals);
     }
   }
+  temporalCache.set(element, temporals);
   return temporals;
 };
 class OwnCurrentTimeController {
@@ -59,6 +72,14 @@ class OwnCurrentTimeController {
     this.host.removeController(this);
   }
 }
+let startTimeMsCache = /* @__PURE__ */ new WeakMap();
+const resetStartTimeMsCache = () => {
+  startTimeMsCache = /* @__PURE__ */ new WeakMap();
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(resetStartTimeMsCache);
+  }
+};
+resetStartTimeMsCache();
 const EFTemporal = (superClass) => {
   class TemporalMixinClass extends superClass {
     constructor() {
@@ -123,27 +144,41 @@ const EFTemporal = (superClass) => {
       return this.startTimeMs - this.parentTemporal.startTimeMs;
     }
     get startTimeMs() {
+      const cachedStartTime = startTimeMsCache.get(this);
+      if (cachedStartTime !== void 0) {
+        return cachedStartTime;
+      }
       const parentTimegroup = this.parentTimegroup;
       if (!parentTimegroup) {
+        startTimeMsCache.set(this, 0);
         return 0;
       }
       switch (parentTimegroup.mode) {
         case "sequence": {
           const siblingTemorals = shallowGetTemporalElements(parentTimegroup);
-          const ownIndex = siblingTemorals.indexOf(
+          const ownIndex = siblingTemorals?.indexOf(
             this
           );
           if (ownIndex === 0) {
+            startTimeMsCache.set(this, parentTimegroup.startTimeMs);
             return parentTimegroup.startTimeMs;
           }
-          const previous = siblingTemorals[ownIndex - 1];
+          const previous = siblingTemorals?.[(ownIndex ?? 0) - 1];
           if (!previous) {
             throw new Error("Previous temporal element not found");
           }
+          startTimeMsCache.set(
+            this,
+            previous.startTimeMs + previous.durationMs
+          );
           return previous.startTimeMs + previous.durationMs;
         }
         case "contain":
         case "fixed":
+          startTimeMsCache.set(
+            this,
+            parentTimegroup.startTimeMs + this.offsetMs
+          );
           return parentTimegroup.startTimeMs + this.offsetMs;
         default:
           throw new Error(`Invalid time mode: ${parentTimegroup.mode}`);

package/dist/{packages/elements → elements}/src/elements/EFTimegroup.js

@@ -93,7 +93,9 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   connectedCallback() {
     super.connectedCallback();
     if (this.id) {
-      __privateSet(this, _currentTime, this.maybeLoadTimeFromLocalStorage());
+      this.waitForMediaDurations().then(() => {
+        __privateSet(this, _currentTime, this.maybeLoadTimeFromLocalStorage());
+      });
     }
     if (this.parentTimegroup) {
       new TimegroupController(this.parentTimegroup, this);
@@ -216,7 +218,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     }
   }
   shouldWrapWithWorkbench() {
-    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-workbench") === null;
+    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-workbench") === null && this.closest("ef-preview") === null;
   }
   wrapWithWorkbench() {
     const workbench = document.createElement("ef-workbench");

package/dist/{packages/elements → elements}/src/elements/FetchMixin.js

@@ -1,6 +1,6 @@
 import { consume } from "@lit/context";
-import { fetchContext } from "../gui/EFWorkbench.js";
 import { state } from "lit/decorators/state.js";
+import { fetchContext } from "../gui/fetchContext.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

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

@@ -0,0 +1,234 @@
+import { provide } from "@lit/context";
+import { state, property } from "lit/decorators.js";
+import { focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { fetchContext } from "./fetchContext.js";
+import { apiHostContext } from "./apiHostContext.js";
+import { createRef } from "lit/directives/ref.js";
+import { playingContext } from "./playingContext.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  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);
+  return result;
+};
+function ContextMixin(superClass) {
+  class ContextElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.focusContext = this;
+      this.fetch = async (url, init = {}) => {
+        init.headers ||= {};
+        Object.assign(init.headers, {
+          "Content-Type": "application/json"
+        });
+        const bearerToken = this.apiToken;
+        if (bearerToken) {
+          Object.assign(init.headers, {
+            Authorization: `Bearer ${bearerToken}`
+          });
+        }
+        if (this.signingURL) {
+          if (!this.#signedURLs[url]) {
+            this.#signedURLs[url] = fetch(this.signingURL, {
+              method: "POST",
+              body: JSON.stringify({ url })
+            }).then(async (response) => {
+              if (response.ok) {
+                return (await response.json()).url;
+              }
+              throw new Error(
+                `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`
+              );
+            });
+          }
+          const signedURL = await this.#signedURLs[url];
+          return fetch(signedURL, init);
+        }
+        return fetch(url, init);
+      };
+      this.#signedURLs = {};
+      this.apiHost = "";
+      this.playing = false;
+      this.loop = false;
+      this.stageScale = 1;
+      this.rendering = false;
+      this.currentTimeMs = 0;
+      this.stageRef = createRef();
+      this.canvasRef = createRef();
+      this.setStageScale = () => {
+        if (this.isConnected && !this.rendering) {
+          const canvasElement = this.canvasRef.value;
+          const stageElement = this.stageRef.value;
+          if (stageElement && canvasElement) {
+            const stageWidth = stageElement.clientWidth;
+            const stageHeight = stageElement.clientHeight;
+            const canvasWidth = canvasElement.clientWidth;
+            const canvasHeight = canvasElement.clientHeight;
+            const stageRatio = stageWidth / stageHeight;
+            const canvasRatio = canvasWidth / canvasHeight;
+            if (stageRatio > canvasRatio) {
+              const scale = stageHeight / canvasHeight;
+              if (this.stageScale !== scale) {
+                canvasElement.style.transform = `scale(${scale})`;
+              }
+              this.stageScale = scale;
+            } else {
+              const scale = stageWidth / canvasWidth;
+              if (this.stageScale !== scale) {
+                canvasElement.style.transform = `scale(${scale})`;
+              }
+              this.stageScale = scale;
+            }
+          }
+        }
+        if (this.isConnected) {
+          requestAnimationFrame(this.setStageScale);
+        }
+      };
+      this.#playbackAudioContext = null;
+      this.#playbackAnimationFrameRequest = null;
+      this.#AUDIO_PLAYBACK_SLICE_MS = 1e3;
+    }
+    #signedURLs;
+    connectedCallback() {
+      super.connectedCallback();
+      requestAnimationFrame(this.setStageScale);
+    }
+    update(changedProperties) {
+      if (changedProperties.has("playing")) {
+        if (this.playing) {
+          this.#startPlayback();
+        } else {
+          this.#stopPlayback();
+        }
+      }
+      if (changedProperties.has("currentTimeMs") && this.targetTimegroup) {
+        if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
+          this.targetTimegroup.currentTimeMs = this.currentTimeMs;
+        }
+      }
+      super.update(changedProperties);
+    }
+    get targetTimegroup() {
+      return this.querySelector("ef-timegroup");
+    }
+    #playbackAudioContext;
+    #playbackAnimationFrameRequest;
+    #AUDIO_PLAYBACK_SLICE_MS;
+    #syncPlayheadToAudioContext(target, startMs) {
+      this.currentTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
+      this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
+        this.#syncPlayheadToAudioContext(target, startMs);
+      });
+    }
+    async #stopPlayback() {
+      if (this.#playbackAudioContext) {
+        if (this.#playbackAudioContext.state !== "closed") {
+          await this.#playbackAudioContext.close();
+        }
+      }
+      if (this.#playbackAnimationFrameRequest) {
+        cancelAnimationFrame(this.#playbackAnimationFrameRequest);
+      }
+      this.#playbackAudioContext = null;
+    }
+    async #startPlayback() {
+      await this.#stopPlayback();
+      const timegroup = this.targetTimegroup;
+      if (!timegroup) {
+        return;
+      }
+      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;
+      await playbackContext.suspend();
+      const fillBuffer = async () => {
+        if (bufferCount > 1) {
+          return;
+        }
+        const canFillBuffer = await queueBufferSource();
+        if (canFillBuffer) {
+          fillBuffer();
+        }
+      };
+      const fromMs = currentMs;
+      const toMs = timegroup.endTimeMs;
+      const queueBufferSource = async () => {
+        if (currentMs >= toMs) {
+          return false;
+        }
+        const startMs = currentMs;
+        const endMs = currentMs + this.#AUDIO_PLAYBACK_SLICE_MS;
+        currentMs += this.#AUDIO_PLAYBACK_SLICE_MS;
+        const audioBuffer = await timegroup.renderAudio(startMs, endMs);
+        bufferCount++;
+        const source = playbackContext.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(playbackContext.destination);
+        source.start((startMs - fromMs) / 1e3);
+        source.onended = () => {
+          bufferCount--;
+          if (endMs >= toMs) {
+            this.playing = false;
+          } else {
+            fillBuffer();
+          }
+        };
+        return true;
+      };
+      await fillBuffer();
+      await playbackContext.resume();
+    }
+  }
+  __decorateClass([
+    provide({ context: focusContext })
+  ], ContextElement.prototype, "focusContext");
+  __decorateClass([
+    provide({ context: focusedElementContext }),
+    state()
+  ], ContextElement.prototype, "focusedElement");
+  __decorateClass([
+    provide({ context: fetchContext })
+  ], ContextElement.prototype, "fetch");
+  __decorateClass([
+    property({ type: String })
+  ], ContextElement.prototype, "signingURL");
+  __decorateClass([
+    property({ type: String })
+  ], ContextElement.prototype, "apiToken");
+  __decorateClass([
+    provide({ context: apiHostContext }),
+    property({ type: String })
+  ], ContextElement.prototype, "apiHost");
+  __decorateClass([
+    provide({ context: playingContext }),
+    property({ type: Boolean, reflect: true })
+  ], ContextElement.prototype, "playing");
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], ContextElement.prototype, "loop");
+  __decorateClass([
+    state()
+  ], ContextElement.prototype, "stageScale");
+  __decorateClass([
+    property({ type: Boolean })
+  ], ContextElement.prototype, "rendering");
+  __decorateClass([
+    state()
+  ], ContextElement.prototype, "currentTimeMs");
+  return ContextElement;
+}
+export {
+  ContextMixin
+};