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

package/dist/gui/EFWorkbench.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { createRef } from 'lit/directives/ref.js';
+
+declare const EFWorkbench_base: (new (...args: any[]) => {
+    focusContext: import('./focusContext.ts').FocusContext;
+    focusedElement?: HTMLElement;
+    fetch: typeof fetch;
+    signingURL?: string;
+    apiToken?: string;
+    apiHost: string;
+    stageScale: number;
+    rendering: boolean;
+    stageRef: ReturnType<typeof createRef>;
+    canvasRef: ReturnType<typeof createRef>;
+    playing: boolean;
+    targetTimegroup?: import('../elements/EFTimegroup.ts').EFTimegroup;
+    currentTimeMs: number;
+}) & typeof LitElement;
+export declare class EFWorkbench extends EFWorkbench_base {
+    static styles: import('lit').CSSResult[];
+    disconnectedCallback(): void;
+    handleStageWheel(event: WheelEvent): void;
+    focusOverlay: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    drawOverlays: () => void;
+    render(): import('lit-html').TemplateResult<1>;
+    stepThrough(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-workbench": EFWorkbench;
+    }
+}
+export {};

package/dist/gui/apiHostContext.d.ts

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

package/dist/gui/fetchContext.d.ts

@@ -0,0 +1,3 @@
+export declare const fetchContext: {
+    __context__: (url: string, init?: RequestInit) => Promise<Response>;
+};

package/dist/gui/focusContext.d.ts

@@ -0,0 +1,6 @@
+export interface FocusContext {
+    focusedElement: HTMLElement | null;
+}
+export declare const focusContext: {
+    __context__: FocusContext;
+};

package/dist/gui/focusedElementContext.d.ts

@@ -0,0 +1,3 @@
+export declare const focusedElementContext: {
+    __context__: HTMLElement | undefined;
+};

package/dist/gui/playingContext.d.ts

@@ -0,0 +1,3 @@
+export declare const playingContext: {
+    __context__: boolean;
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+
+export { EFTimegroup } from './elements/EFTimegroup.ts';
+export { EFImage } from './elements/EFImage.ts';
+export type { EFMedia } from './elements/EFMedia.ts';
+export { EFAudio } from './elements/EFAudio.ts';
+export { EFVideo } from './elements/EFVideo.ts';
+export { EFCaptions, EFCaptionsActiveWord } from './elements/EFCaptions.ts';
+export { EFWaveform } from './elements/EFWaveform.ts';
+export { EFWorkbench } from './gui/EFWorkbench.ts';
+export { EFPreview } from './gui/EFPreview.ts';
+export { EFFilmstrip } from './gui/EFFilmstrip.ts';

package/dist/msToTimeCode.d.ts

@@ -0,0 +1 @@
+export declare const msToTimeCode: (ms: number, subSecond?: boolean) => string;

package/dist/style.css

@@ -740,6 +740,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 html {
   height: 100%;
   width: 100%;
@@ -750,6 +751,7 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -761,30 +763,37 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-slate-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
+
 .peer:hover ~ .peer-hover\:border-slate-400 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
+
 .peer:hover ~ .peer-hover\:bg-slate-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
+
 .data-\[focused\]\:bg-slate-400[data-focused] {
   --tw-bg-opacity: 1;
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
+
 .peer[data-focused] ~ .peer-data-\[focused\]\:border-slate-400 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
+
 .peer[data-focused] ~ .peer-data-\[focused\]\:bg-slate-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@editframe/elements",
-  "version": "0.7.0-beta.8",
+  "version": "0.8.0-beta.1",
   "description": "",
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/packages/elements/src/index.js",
-        "types": "./dist/packages/elements/src/index.d.ts"
-      },
-      "require": {
-        "default": "./dist/packages/elements/src/index.cjs",
-        "types": "./dist/packages/elements/src/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/elements/src/index.js"
       }
     },
     "./styles.css": "./dist/style.css"
@@ -24,7 +20,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.7.0-beta.8",
+    "@editframe/assets": "0.8.0-beta.1",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",
@@ -35,9 +31,10 @@
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@types/dom-webcodecs": "^0.1.11",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.13",
     "autoprefixer": "^10.4.19",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "typescript": "^5.5.4",
     "vite-plugin-dts": "^3.9.1",
     "vite-tsconfig-paths": "^4.3.2"
   }

package/src/elements/EFAudio.ts

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { customElement, property } from "lit/decorators.js";
-import { EFMedia } from "./EFMedia";
+import { EFMedia } from "./EFMedia.ts";
 import { Task } from "@lit/task";
 
 @customElement("ef-audio")

package/src/elements/EFCaptions.ts

@@ -1,13 +1,13 @@
-import { EFAudio } from "./EFAudio";
 import { LitElement, type PropertyValueMap, html, css } from "lit";
 import { Task } from "@lit/task";
 import { customElement, property } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo";
-import { EFTemporal } from "./EFTemporal";
-import { CrossUpdateController } from "./CrossUpdateController";
-import { FetchMixin } from "./FetchMixin";
-import { EFSourceMixin } from "./EFSourceMixin";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
+import { EFVideo } from "./EFVideo.ts";
+import { EFAudio } from "./EFAudio.ts";
+import { EFTemporal } from "./EFTemporal.ts";
+import { CrossUpdateController } from "./CrossUpdateController.ts";
+import { FetchMixin } from "./FetchMixin.ts";
+import { EFSourceMixin } from "./EFSourceMixin.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 
 interface Word {
   text: string;
@@ -93,8 +93,8 @@ export class EFCaptions extends EFSourceMixin(
 
   protected md5SumLoader = new Task(this, {
     autoRun: false,
-    args: () => [this.target] as const,
-    task: async ([], { signal }) => {
+    args: () => [this.target, this.fetch] as const,
+    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") ?? undefined;

package/src/elements/EFImage.ts

@@ -2,9 +2,9 @@ import { Task } from "@lit/task";
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { FetchMixin } from "./FetchMixin";
-import { EFSourceMixin } from "./EFSourceMixin";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
+import { FetchMixin } from "./FetchMixin.ts";
+import { EFSourceMixin } from "./EFSourceMixin.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 
 @customElement("ef-image")
 export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {

package/src/elements/EFMedia.ts

@@ -8,14 +8,14 @@ import debug from "debug";
 
 import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
 
-import { MP4File } from "@/av/MP4File";
-import { EFTemporal } from "./EFTemporal";
-import { VideoAsset } from "@/av/EncodedAsset";
-import { FetchMixin } from "./FetchMixin";
-import { apiHostContext } from "../gui/EFWorkbench";
-import { EFSourceMixin } from "./EFSourceMixin";
-import { getStartTimeMs } from "./util";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
+import { MP4File } from "@editframe/assets/MP4File.js";
+import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
+import { EFTemporal } from "./EFTemporal.ts";
+import { FetchMixin } from "./FetchMixin.ts";
+import { EFSourceMixin } from "./EFSourceMixin.ts";
+import { getStartTimeMs } from "./util.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { apiHostContext } from "../gui/apiHostContext.ts";
 
 const log = debug("ef:elements:EFMedia");
 
@@ -70,6 +70,9 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   public trackFragmentIndexLoader = new Task(this, {
     args: () => [this.fragmentIndexPath(), this.fetch] as const,
     task: async ([fragmentIndexPath, fetch], { signal }) => {
+      if (this.src === "") {
+        return;
+      }
       const response = await fetch(fragmentIndexPath, { signal });
       return (await response.json()) as Record<number, TrackFragmentIndex>;
     },

package/src/elements/EFSourceMixin.ts

@@ -1,9 +1,9 @@
 import { consume } from "@lit/context";
 import type { LitElement } from "lit";
-import { apiHostContext } from "../gui/EFWorkbench";
 import { state } from "lit/decorators/state.js";
 import { Task } from "@lit/task";
 import { property } from "lit/decorators/property.js";
+import { apiHostContext } from "../gui/apiHostContext.ts";
 
 export declare class EFSourceMixinInterface {
   productionSrc(): string;

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");
 
@@ -113,7 +113,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   connectedCallback() {
     super.connectedCallback();
     if (this.id) {
-      this.#currentTime = this.maybeLoadTimeFromLocalStorage();
+      this.waitForMediaDurations().then(() => {
+        this.#currentTime = this.maybeLoadTimeFromLocalStorage();
+      });
     }
 
     if (this.parentTimegroup) {
@@ -265,7 +267,8 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return (
       EF_INTERACTIVE &&
       this.closest("ef-timegroup") === this &&
-      this.closest("ef-workbench") === null
+      this.closest("ef-workbench") === null &&
+      this.closest("ef-preview") === null
     );
   }
 

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,8 +1,9 @@
-import { consume } from "@lit/context";
 import type { LitElement } from "lit";
-import { fetchContext } from "../gui/EFWorkbench";
+import { consume } from "@lit/context";
 import { state } from "lit/decorators/state.js";
 
+import { fetchContext } from "../gui/fetchContext.ts";
+
 export declare class FetchMixinInterface {
   fetch: typeof fetch;
 }
@@ -12,7 +13,8 @@ export function FetchMixin<T extends Constructor<LitElement>>(superClass: T) {
   class FetchElement extends superClass {
     @consume({ context: fetchContext, subscribe: true })
     @state()
-    fetch = fetch.bind(window);
+    fetch: (url: string, init?: RequestInit) => Promise<Response> =
+      fetch.bind(window);
   }
 
   return FetchElement as Constructor<FetchMixinInterface> & T;

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;