@editframe/elements 0.11.0-beta.10 → 0.11.0-beta.15

package/dist/elements/EFMedia.d.ts

@@ -16,7 +16,7 @@ export declare class EFMedia extends EFMedia_base {
     fragmentIndexPath(): string;
     fragmentTrackPath(trackId: string): string;
     trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex>>;
-    protected initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
+    initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
         trackId: string;
         buffer: MP4Box.MP4ArrayBuffer;
         mp4File: MP4File;

package/dist/elements/EFTimegroup.d.ts

@@ -17,7 +17,17 @@ export declare class EFTimegroup extends EFTimegroup_base {
     connectedCallback(): void;
     get storageKey(): string;
     get durationMs(): number;
-    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex>[]>;
+    /**
+     * Wait for all media elements to load their initial segments.
+     * Ideally we would only need the extracted index json data, but
+     * that caused issues with constructing audio data. We had negative durations
+     * in calculations and it was not clear why.
+     */
+    waitForMediaDurations(): Promise<({
+        trackId: string;
+        buffer: import('mp4box').MP4ArrayBuffer;
+        mp4File: import('../../../assets/src/MP4File.ts').MP4File;
+    }[] | undefined)[]>;
     get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     get contextProvider(): (ParentNode & import('../gui/ContextMixin.ts').ContextMixinInterface) | null;

package/dist/elements/src/elements/EFTemporal.js

@@ -18,15 +18,6 @@ const timegroupContext = createContext(
 );
 const isEFTemporal = (obj) => obj[EF_TEMPORAL];
 const EF_TEMPORAL = Symbol("EF_TEMPORAL");
-const deepGetTemporalElements = (element, temporals = []) => {
-  for (const child of element.children) {
-    if (isEFTemporal(child)) {
-      temporals.push(child);
-    }
-    deepGetTemporalElements(child, temporals);
-  }
-  return temporals;
-};
 const deepGetElementsWithFrameTasks = (element, elements = []) => {
   for (const child of element.children) {
     if ("frameTask" in child && child.frameTask instanceof Task) {
@@ -126,6 +117,9 @@ const EFTemporal = (superClass) => {
       return this._trimStartMs;
     }
     set trimStartMs(value) {
+      if (this._trimStartMs === value) {
+        return;
+      }
       this._trimStartMs = value;
       this.setAttribute(
         "trimstart",
@@ -143,6 +137,9 @@ const EFTemporal = (superClass) => {
       return this._trimEndMs;
     }
     set trimEndMs(value) {
+      if (this._trimEndMs === value) {
+        return;
+      }
       this._trimEndMs = value;
       this.setAttribute("trimend", durationConverter.toAttribute(value / 1e3));
     }
@@ -373,7 +370,6 @@ export {
   EFTemporal,
   OwnCurrentTimeController,
   deepGetElementsWithFrameTasks,
-  deepGetTemporalElements,
   isEFTemporal,
   shallowGetTemporalElements,
   timegroupContext

package/dist/elements/src/elements/EFTimegroup.js

@@ -139,10 +139,16 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
         throw new Error(`Invalid time mode: ${this.mode}`);
     }
   }
+  /**
+   * Wait for all media elements to load their initial segments.
+   * Ideally we would only need the extracted index json data, but
+   * that caused issues with constructing audio data. We had negative durations
+   * in calculations and it was not clear why.
+   */
   async waitForMediaDurations() {
     return await Promise.all(
       deepGetMediaElements(this).map(
-        (media) => media.trackFragmentIndexLoader.taskComplete
+        (media) => media.initSegmentsLoader.taskComplete
       )
     );
   }
@@ -234,7 +240,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
    *
    */
   shouldWrapWithWorkbench() {
-    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.contextProvider === null;
+    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
   }
   wrapWithWorkbench() {
     const workbench = document.createElement("ef-workbench");
@@ -291,10 +297,8 @@ _currentTime = /* @__PURE__ */ new WeakMap();
 _EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
 addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
   await this.waitForMediaDurations();
-  const durationMs = toMs - fromMs;
   await Promise.all(
     deepGetMediaElements(this).map(async (mediaElement) => {
-      await mediaElement.trackFragmentIndexLoader.taskComplete;
       const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
       const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
       const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
@@ -305,15 +309,15 @@ addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
       if (!audio) {
         throw new Error("Failed to fetch audio");
       }
-      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-      const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
-      const ctxDurationMs = ctxEndMs - ctxStartMs;
-      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
       const bufferSource = audioContext.createBufferSource();
       bufferSource.buffer = await audioContext.decodeAudioData(
         await audio.blob.arrayBuffer()
       );
       bufferSource.connect(audioContext.destination);
+      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+      const ctxEndMs = mediaElement.endTimeMs - fromMs;
+      const ctxDurationMs = ctxEndMs - ctxStartMs;
+      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
       bufferSource.start(
         ctxStartMs / 1e3,
         offset / 1e3,

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

@@ -18,14 +18,13 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const contextMixinSymbol = Symbol("contextMixin");
 function isContextMixin(value) {
-  return typeof value === "object" && value !== null && contextMixinSymbol in value;
+  return typeof value === "object" && value !== null && contextMixinSymbol in value.constructor;
 }
 function ContextMixin(superClass) {
   var _a, _b;
   class ContextElement extends (_b = superClass, _a = contextMixinSymbol, _b) {
     constructor() {
       super(...arguments);
-      this[_a] = true;
       this.focusContext = this;
       this.efContext = this;
       this.fetch = async (url, init = {}) => {
@@ -101,6 +100,9 @@ function ContextMixin(superClass) {
       this.#playbackAnimationFrameRequest = null;
       this.#AUDIO_PLAYBACK_SLICE_MS = 1e3;
     }
+    static {
+      this[_a] = true;
+    }
     #URLTokens;
     connectedCallback() {
       super.connectedCallback();

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

@@ -1,11 +1,8 @@
 import { html, css, LitElement } from "lit";
-import { TaskStatus } from "@lit/task";
 import { eventOptions, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { deepGetTemporalElements } from "../elements/EFTemporal.js";
-import { TWMixin } from "./TWMixin.js";
-import { shallowGetTimegroups } from "../elements/EFTimegroup.js";
 import { ContextMixin } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -87,26 +84,6 @@ let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
       </div>
     `;
   }
-  async stepThrough() {
-    const stepDurationMs = 1e3 / 30;
-    const timegroups = shallowGetTimegroups(this);
-    const firstGroup = timegroups[0];
-    if (!firstGroup) {
-      throw new Error("No temporal elements found");
-    }
-    firstGroup.currentTimeMs = 0;
-    const temporals = deepGetTemporalElements(this);
-    const frameCount = Math.ceil(firstGroup.durationMs / stepDurationMs);
-    const busyTasks = temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => temporal.frameTask);
-    await Promise.all(busyTasks.map((task) => task.taskComplete));
-    for (let i = 0; i < frameCount; i++) {
-      firstGroup.currentTimeMs = i * stepDurationMs;
-      await new Promise(queueMicrotask);
-      const busyTasks2 = temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => temporal.frameTask);
-      await Promise.all(busyTasks2.map((task) => task.taskComplete));
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-    }
-  }
 };
 EFWorkbench.styles = [
   css`

package/dist/gui/EFWorkbench.d.ts

@@ -8,7 +8,6 @@ export declare class EFWorkbench extends EFWorkbench_base {
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     drawOverlays: () => void;
     render(): import('lit-html').TemplateResult<1>;
-    stepThrough(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

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

package/src/elements/EFMedia.ts

@@ -104,7 +104,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     },
   });
 
-  protected initSegmentsLoader = new Task(this, {
+  public initSegmentsLoader = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () =>
       [this.trackFragmentIndexLoader.value, this.src, this.fetch] as const,

package/src/elements/EFTemporal.ts

@@ -187,6 +187,9 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return this._trimStartMs;
     }
     public set trimStartMs(value: number) {
+      if (this._trimStartMs === value) {
+        return;
+      }
       this._trimStartMs = value;
       this.setAttribute(
         "trimstart",
@@ -211,6 +214,9 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return this._trimEndMs;
     }
     public set trimEndMs(value: number) {
+      if (this._trimEndMs === value) {
+        return;
+      }
       this._trimEndMs = value;
       this.setAttribute("trimend", durationConverter.toAttribute(value / 1000));
     }

package/src/elements/EFTimegroup.ts

@@ -152,10 +152,16 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
 
+  /**
+   * Wait for all media elements to load their initial segments.
+   * Ideally we would only need the extracted index json data, but
+   * that caused issues with constructing audio data. We had negative durations
+   * in calculations and it was not clear why.
+   */
   async waitForMediaDurations() {
     return await Promise.all(
       deepGetMediaElements(this).map(
-        (media) => media.trackFragmentIndexLoader.taskComplete,
+        (media) => media.initSegmentsLoader.taskComplete,
       ),
     );
   }
@@ -269,7 +275,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return (
       EF_INTERACTIVE &&
       this.closest("ef-timegroup") === this &&
-      this.contextProvider === null
+      this.closest("ef-preview") === null &&
+      this.closest("ef-workbench") === null &&
+      this.closest("test-context") === null
     );
   }
 
@@ -307,12 +315,8 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   ) {
     await this.waitForMediaDurations();
 
-    const durationMs = toMs - fromMs;
-
     await Promise.all(
       deepGetMediaElements(this).map(async (mediaElement) => {
-        await mediaElement.trackFragmentIndexLoader.taskComplete;
-
         const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
         const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
         const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
@@ -325,19 +329,19 @@ export class EFTimegroup extends EFTemporal(LitElement) {
           throw new Error("Failed to fetch audio");
         }
 
-        const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-        const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
-        const ctxDurationMs = ctxEndMs - ctxStartMs;
-
-        const offset =
-          Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-
         const bufferSource = audioContext.createBufferSource();
         bufferSource.buffer = await audioContext.decodeAudioData(
           await audio.blob.arrayBuffer(),
         );
         bufferSource.connect(audioContext.destination);
 
+        const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+        const ctxEndMs = mediaElement.endTimeMs - fromMs;
+        const ctxDurationMs = ctxEndMs - ctxStartMs;
+
+        const offset =
+          Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
+
         bufferSource.start(
           ctxStartMs / 1000,
           offset / 1000,

package/src/gui/ContextMixin.ts

@@ -30,14 +30,16 @@ const contextMixinSymbol = Symbol("contextMixin");
 
 export function isContextMixin(value: any): value is ContextMixinInterface {
   return (
-    typeof value === "object" && value !== null && contextMixinSymbol in value
+    typeof value === "object" &&
+    value !== null &&
+    contextMixinSymbol in value.constructor
   );
 }
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
   class ContextElement extends superClass {
-    [contextMixinSymbol] = true;
+    static [contextMixinSymbol] = true;
 
     @provide({ context: focusContext })
     focusContext = this as FocusContext;

package/src/gui/EFWorkbench.ts

@@ -1,12 +1,9 @@
-import { LitElement, html, css, type PropertyValueMap } from "lit";
-import { TaskStatus } from "@lit/task";
+import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, eventOptions } from "lit/decorators.js";
-import { ref, createRef } from "lit/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 
-import { deepGetTemporalElements } from "../elements/EFTemporal.ts";
-import { TWMixin } from "./TWMixin.ts";
-import { shallowGetTimegroups } from "../elements/EFTimegroup.ts";
 import { ContextMixin } from "./ContextMixin.ts";
+import { TWMixin } from "./TWMixin.ts";
 
 @customElement("ef-workbench")
 export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
@@ -96,36 +93,6 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
       </div>
     `;
   }
-
-  async stepThrough() {
-    const stepDurationMs = 1000 / 30;
-    const timegroups = shallowGetTimegroups(this);
-    const firstGroup = timegroups[0];
-    if (!firstGroup) {
-      throw new Error("No temporal elements found");
-    }
-    firstGroup.currentTimeMs = 0;
-
-    const temporals = deepGetTemporalElements(this);
-    const frameCount = Math.ceil(firstGroup.durationMs / stepDurationMs);
-
-    const busyTasks = temporals
-      .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
-      .map((temporal) => temporal.frameTask);
-
-    await Promise.all(busyTasks.map((task) => task.taskComplete));
-
-    for (let i = 0; i < frameCount; i++) {
-      firstGroup.currentTimeMs = i * stepDurationMs;
-      await new Promise<void>(queueMicrotask);
-      const busyTasks = temporals
-        .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
-        .map((temporal) => temporal.frameTask);
-
-      await Promise.all(busyTasks.map((task) => task.taskComplete));
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-    }
-  }
 }
 
 declare global {