@editframe/elements 0.7.0-beta.10 → 0.7.0-beta.12

package/src/elements/EFTemporal.ts

@@ -1,11 +1,11 @@
 import type { LitElement, ReactiveController } from "lit";
 import { consume, createContext } from "@lit/context";
 import { property, state } from "lit/decorators.js";
-import type { EFTimegroup } from "./EFTimegroup";
+import type { EFTimegroup } from "./EFTimegroup.ts";
 
-import { durationConverter } from "./durationConverter";
+import { durationConverter } from "./durationConverter.ts";
 import { Task } from "@lit/task";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 
 export const timegroupContext = createContext<EFTimegroup>(
   Symbol("timeGroupContext"),
@@ -59,10 +59,23 @@ export const deepGetElementsWithFrameTasks = (
   return elements;
 };
 
+let temporalCache: Map<Element, TemporalMixinInterface[]>;
+const resetTemporalCache = () => {
+  temporalCache = new Map();
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(resetTemporalCache);
+  }
+};
+resetTemporalCache();
+
 export const shallowGetTemporalElements = (
   element: Element,
   temporals: TemporalMixinInterface[] = [],
 ) => {
+  const cachedResult = temporalCache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
   for (const child of element.children) {
     if (isEFTemporal(child)) {
       temporals.push(child);
@@ -70,6 +83,7 @@ export const shallowGetTemporalElements = (
       shallowGetTemporalElements(child, temporals);
     }
   }
+  temporalCache.set(element, temporals);
   return temporals;
 };
 
@@ -92,6 +106,15 @@ export class OwnCurrentTimeController implements ReactiveController {
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 
+let startTimeMsCache = new WeakMap<Element, number>();
+const resetStartTimeMsCache = () => {
+  startTimeMsCache = new WeakMap();
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(resetStartTimeMsCache);
+  }
+};
+resetStartTimeMsCache();
+
 export const EFTemporal = <T extends Constructor<LitElement>>(
   superClass: T,
 ) => {
@@ -172,27 +195,41 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     }
 
     get startTimeMs(): number {
+      const cachedStartTime = startTimeMsCache.get(this);
+      if (cachedStartTime !== undefined) {
+        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 as InstanceType<Constructor<TemporalMixinInterface> & T>,
           );
           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/src/elements/EFTimegroup.browsertest.ts

@@ -5,10 +5,10 @@ import {
   html,
   render as litRender,
 } from "lit";
-import { EFTimegroup } from "./EFTimegroup";
-import "./EFTimegroup";
+import { EFTimegroup } from "./EFTimegroup.ts";
+import "./EFTimegroup.ts";
 import { customElement } from "lit/decorators/custom-element.js";
-import { EFTemporal } from "./EFTemporal";
+import { EFTemporal } from "./EFTemporal.ts";
 
 beforeEach(() => {
   for (let i = 0; i < localStorage.length; i++) {

package/src/elements/EFTimegroup.ts

@@ -9,10 +9,10 @@ import {
   isEFTemporal,
   shallowGetTemporalElements,
   timegroupContext,
-} from "./EFTemporal";
-import { TimegroupController } from "./TimegroupController";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
-import { deepGetMediaElements } from "./EFMedia";
+} from "./EFTemporal.ts";
+import { TimegroupController } from "./TimegroupController.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { deepGetMediaElements } from "./EFMedia.ts";
 
 const log = debug("ef:elements:EFTimegroup");
 

package/src/elements/EFVideo.ts

@@ -3,8 +3,8 @@ 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";
+import { EFMedia } from "./EFMedia.ts";
+import { TWMixin } from "../gui/TWMixin.ts";
 
 @customElement("ef-video")
 export class EFVideo extends TWMixin(EFMedia) {

package/src/elements/EFWaveform.ts

@@ -1,15 +1,15 @@
-import { EFAudio } from "./EFAudio";
+import { EFAudio } from "./EFAudio.ts";
 
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo";
-import { EFTemporal } from "./EFTemporal";
-import { CrossUpdateController } from "./CrossUpdateController";
-import { TWMixin } from "../gui/TWMixin";
+import { EFVideo } from "./EFVideo.ts";
+import { EFTemporal } from "./EFTemporal.ts";
+import { CrossUpdateController } from "./CrossUpdateController.ts";
+import { TWMixin } from "../gui/TWMixin.ts";
 import { Task } from "@lit/task";
 import * as d3 from "d3";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 
 @customElement("ef-waveform")
 export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {

package/src/elements/FetchMixin.ts

@@ -1,6 +1,6 @@
 import { consume } from "@lit/context";
 import type { LitElement } from "lit";
-import { fetchContext } from "../gui/EFWorkbench";
+import { fetchContext } from "../gui/EFWorkbench.ts";
 import { state } from "lit/decorators/state.js";
 
 export declare class FetchMixinInterface {

package/src/elements/TimegroupController.ts

@@ -1,5 +1,5 @@
 import type { ReactiveController, LitElement } from "lit";
-import type { EFTimegroup } from "./EFTimegroup";
+import type { EFTimegroup } from "./EFTimegroup.ts";
 
 export class TimegroupController implements ReactiveController {
   constructor(

package/src/elements/durationConverter.ts

@@ -1,4 +1,4 @@
-import { parseTimeToMs } from "./parseTimeToMs";
+import { parseTimeToMs } from "./parseTimeToMs.ts";
 
 export const durationConverter = {
   fromAttribute: (value: string): number => parseTimeToMs(value),

package/src/elements/util.ts

@@ -1,4 +1,4 @@
-import { EFTimegroup } from "./EFTimegroup";
+import { EFTimegroup } from "./EFTimegroup.ts";
 
 export const getRootTimeGroup = (element: Element): EFTimegroup | null => {
   let bestCandidate: EFTimegroup | null = null;

package/src/gui/EFFilmstrip.ts

@@ -1,4 +1,4 @@
-import { EFTimegroup } from "../elements/EFTimegroup";
+import { EFTimegroup } from "../elements/EFTimegroup.ts";
 import {
   LitElement,
   html,
@@ -16,17 +16,21 @@ import {
 } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { ref, createRef } from "lit/directives/ref.js";
-import { EFImage } from "../elements/EFImage";
-import { EFAudio } from "../elements/EFAudio";
-import { EFVideo } from "../elements/EFVideo";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions";
-import { EFWaveform } from "../elements/EFWaveform";
-import type { TemporalMixinInterface } from "../elements/EFTemporal";
-import { TimegroupController } from "../elements/TimegroupController";
+import { EFImage } from "../elements/EFImage.ts";
+import { EFAudio } from "../elements/EFAudio.ts";
+import { EFVideo } from "../elements/EFVideo.ts";
+import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.ts";
+import { EFWaveform } from "../elements/EFWaveform.ts";
+import type { TemporalMixinInterface } from "../elements/EFTemporal.ts";
+import { TimegroupController } from "../elements/TimegroupController.ts";
 import { consume } from "@lit/context";
-import { type FocusContext, focusContext, focusedElement } from "./EFWorkbench";
-import { TWMixin } from "./TWMixin";
-import { msToTimeCode } from "@/av/msToTimeCode";
+import {
+  type FocusContext,
+  focusContext,
+  focusedElement,
+} from "./EFWorkbench.ts";
+import { TWMixin } from "./TWMixin.ts";
+import { msToTimeCode } from "../msToTimeCode.ts";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(
@@ -75,7 +79,7 @@ class FilmstripItem extends TWMixin(LitElement) {
     return this.element && this.focusContext?.focusedElement === this.element;
   }
 
-  @property({ type: HTMLElement, attribute: false })
+  @property({ type: Object, attribute: false })
   element: TemporalMixinInterface & LitElement = new EFTimegroup();
 
   @property({ type: Number })
@@ -254,7 +258,7 @@ export class EFHTMLFilmstrip extends FilmstripItem {
 class EFHierarchyItem<
   ElementType extends HTMLElement = HTMLElement,
 > extends TWMixin(LitElement) {
-  @property({ type: HTMLElement, attribute: false })
+  @property({ type: Object, attribute: false })
   // @ts-expect-error This could be initialzed with any HTMLElement
   element: ElementType = new EFTimegroup();
 

package/src/gui/EFWorkbench.ts

@@ -9,10 +9,9 @@ import {
 } from "lit/decorators.js";
 import { ref, createRef } from "lit/directives/ref.js";
 
-import { awaitMicrotask } from "@/util/awaitMicrotask";
-import { deepGetTemporalElements } from "../elements/EFTemporal";
-import { TWMixin } from "./TWMixin";
-import { shallowGetTimegroups } from "../elements/EFTimegroup";
+import { deepGetTemporalElements } from "../elements/EFTemporal.ts";
+import { TWMixin } from "./TWMixin.ts";
+import { shallowGetTimegroups } from "../elements/EFTimegroup.ts";
 
 export interface FocusContext {
   focusedElement: HTMLElement | null;
@@ -215,7 +214,7 @@ export class EFWorkbench extends TWMixin(LitElement) {
 
     for (let i = 0; i < frameCount; i++) {
       firstGroup.currentTimeMs = i * stepDurationMs;
-      await awaitMicrotask();
+      await new Promise<void>(queueMicrotask);
       const busyTasks = temporals
         .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
         .map((temporal) => temporal.frameTask);

package/src/gui/TWMixin.ts

@@ -2,8 +2,11 @@ import type { LitElement } from "lit";
 // @ts-expect-error cannot figure out how to declare this module as a string
 import twStyle from "./TWMixin.css?inline";
 
-const twSheet = new CSSStyleSheet();
-twSheet.replaceSync(twStyle);
+let twSheet: CSSStyleSheet | null = null;
+if (typeof window !== "undefined") {
+  twSheet = new CSSStyleSheet();
+  twSheet.replaceSync(twStyle);
+}
 export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
   class TWElement extends Base {
     createRenderRoot() {
@@ -13,7 +16,11 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
           "TWMixin can only be applied to elements with shadow roots",
         );
       }
-
+      if (!twSheet) {
+        throw new Error(
+          "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment",
+        );
+      }
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,