@editframe/elements 0.7.0-beta.1 → 0.7.0-beta.5

package/dist/packages/elements/src/index.d.ts

@@ -1,7 +1,7 @@
 
 export { EFTimegroup } from './elements/EFTimegroup';
-export { EFTimeline } from './elements/EFTimeline';
 export { EFImage } from './elements/EFImage';
+export type { EFMedia } from './elements/EFMedia';
 export { EFAudio } from './elements/EFAudio';
 export { EFVideo } from './elements/EFVideo';
 export { EFCaptions, EFCaptionsActiveWord } from './elements/EFCaptions';

package/dist/packages/elements/src/index.js

@@ -1,7 +1,7 @@
 /* empty css             */
 import { EFTimegroup } from "./elements/EFTimegroup.js";
-import { EFTimeline } from "./elements/EFTimeline.js";
 import { EFImage } from "./elements/EFImage.js";
+import "./elements/EFMedia.js";
 import { EFAudio } from "./elements/EFAudio.js";
 import { EFVideo } from "./elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "./elements/EFCaptions.js";
@@ -17,7 +17,6 @@ export {
   EFFilmstrip,
   EFImage,
   EFTimegroup,
-  EFTimeline,
   EFVideo,
   EFWaveform,
   EFWorkbench

package/dist/style.css

@@ -761,6 +761,10 @@ 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));

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@editframe/elements",
-  "version": "0.7.0-beta.1",
+  "version": "0.7.0-beta.5",
   "description": "",
   "exports": {
     ".": {
-      "import": "./dist/packages/elements/src/index.js",
-      "require": "./dist/packages/elements/src/index.cjs"
+      "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"
+      }
     },
     "./styles.css": "./dist/style.css"
   },
-  "types": "./dist/packages/elements/src/index.d.ts",
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
@@ -19,11 +24,12 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.7.0-beta.1",
-    "@lit/context": "^1.1.1",
-    "@lit/task": "^1.0.0",
+    "@editframe/assets": "0.7.0-beta.5",
+    "@lit/context": "^1.1.2",
+    "@lit/task": "^1.0.1",
     "d3": "^7.9.0",
-    "lit": "^3.1.3",
+    "debug": "^4.3.5",
+    "lit": "^3.1.4",
     "mp4box": "^0.5.2"
   },
   "devDependencies": {

package/src/elements/EFMedia.ts

@@ -1,19 +1,24 @@
 import { LitElement, type PropertyValueMap, css } from "lit";
-import { EFTemporal } from "./EFTemporal";
 import { property, state } from "lit/decorators.js";
 import { deepArrayEquals } from "@lit/task/deep-equals.js";
 import { Task } from "@lit/task";
 import type * as MP4Box from "mp4box";
-import { MP4File } from "@/av/MP4File";
+import { consume } from "@lit/context";
+import debug from "debug";
+
 import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
-import { getStartTimeMs } from "./util";
+
+import { MP4File } from "@/av/MP4File";
+import { EFTemporal } from "./EFTemporal";
 import { VideoAsset } from "@/av/EncodedAsset";
 import { FetchMixin } from "./FetchMixin";
 import { apiHostContext } from "../gui/EFWorkbench";
-import { consume } from "@lit/context";
 import { EFSourceMixin } from "./EFSourceMixin";
+import { getStartTimeMs } from "./util";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
 
+const log = debug("ef:elements:EFMedia");
+
 export const deepGetMediaElements = (
   element: Element,
   medias: EFMedia[] = [],
@@ -313,12 +318,12 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     await this.trackFragmentIndexLoader.taskComplete;
     const audioTrackId = this.defaultAudioTrackId;
     if (!audioTrackId) {
-      console.warn("No audio track found");
+      log("No audio track found");
       return;
     }
     const audioTrackIndex = this.trackFragmentIndexLoader.value?.[audioTrackId];
     if (!audioTrackIndex) {
-      console.warn("No audio track found");
+      log("No audio track found");
       return;
     }
 
@@ -345,12 +350,12 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
     const firstFragment = fragments[0];
     if (!firstFragment) {
-      console.warn("No audio fragments found");
+      log("No audio fragments found");
       return;
     }
     const lastFragment = fragments[fragments.length - 1];
     if (!lastFragment) {
-      console.warn("No audio fragments found");
+      log("No audio fragments found");
       return;
     }
     const fragmentStart = firstFragment.offset;

package/src/elements/EFTemporal.ts

@@ -19,6 +19,9 @@ export declare class TemporalMixinInterface {
   get endTimeMs(): number;
   get ownCurrentTimeMs(): number;
 
+  set duration(value: string);
+  get duration(): string;
+
   parentTimegroup?: EFTimegroup;
   rootTimegroup?: EFTimegroup;
 
@@ -105,7 +108,7 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       if (this.rootTimegroup) {
         this.ownCurrentTimeController = new OwnCurrentTimeController(
           this.rootTimegroup,
-          this,
+          this as InstanceType<Constructor<TemporalMixinInterface> & T>,
         );
       }
     }
@@ -146,9 +149,7 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     // Defining this as a getter to a private property allows us to
     // override it classes that include this mixin.
     get durationMs() {
-      const durationMs =
-        this._durationMs || this.parentTimegroup?.durationMs || 0;
-      return durationMs || 0;
+      return this._durationMs || this.parentTimegroup?.durationMs || 0;
     }
 
     get offsetMs() {
@@ -178,7 +179,9 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       switch (parentTimegroup.mode) {
         case "sequence": {
           const siblingTemorals = shallowGetTemporalElements(parentTimegroup);
-          const ownIndex = siblingTemorals.indexOf(this);
+          const ownIndex = siblingTemorals.indexOf(
+            this as InstanceType<Constructor<TemporalMixinInterface> & T>,
+          );
           if (ownIndex === 0) {
             return parentTimegroup.startTimeMs;
           }

package/src/elements/EFTimegroup.ts

@@ -1,6 +1,9 @@
 import { LitElement, html, css, type PropertyValueMap } from "lit";
 import { provide } from "@lit/context";
+import { Task } from "@lit/task";
 import { customElement, property } from "lit/decorators.js";
+import debug from "debug";
+
 import {
   EFTemporal,
   isEFTemporal,
@@ -10,7 +13,8 @@ import {
 import { TimegroupController } from "./TimegroupController";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
 import { deepGetMediaElements } from "./EFMedia";
-import { Task } from "@lit/task";
+
+const log = debug("ef:elements:EFTimegroup");
 
 export const shallowGetTimegroups = (
   element: Element,
@@ -59,7 +63,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
         }
       }
     } catch (error) {
-      console.warn("Failed to save time to localStorage", error);
+      log("Failed to save time to localStorage", error);
     }
   }
   get currentTime() {
@@ -100,7 +104,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       try {
         return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
       } catch (error) {
-        console.warn("Failed to load time from localStorage", error);
+        log("Failed to load time from localStorage", error);
       }
     }
     return 0;
@@ -148,7 +152,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   get durationMs() {
     switch (this.mode) {
       case "fixed":
-        return super.durationMs || 0;
+        return super.durationMs;
       case "sequence": {
         let duration = 0;
         for (const node of this.childTemporals) {

package/src/gui/EFFilmstrip.ts

@@ -65,14 +65,14 @@ class FilmstripItem extends TWMixin(LitElement) {
     `,
   ];
 
-  @consume({ context: focusContext })
+  @consume({ context: focusContext, subscribe: true })
   focusContext?: FocusContext;
 
   @consume({ context: focusedElement, subscribe: true })
   focusedElement?: HTMLElement | null;
 
   get isFocused() {
-    return this.element && this.focusedElement === this.element;
+    return this.element && this.focusContext?.focusedElement === this.element;
   }
 
   @property({ type: HTMLElement, attribute: false })
@@ -92,6 +92,8 @@ class FilmstripItem extends TWMixin(LitElement) {
   render() {
     return html` <div class="" style=${styleMap(this.styles)}>
       <div
+        class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 hover:bg-blue-400 text-sm data-[focused]:bg-slate-400"
+        ?data-focused=${this.isFocused}
         @mouseenter=${() => {
           if (this.focusContext) {
             this.focusContext.focusedElement = this.element;
@@ -102,8 +104,6 @@ class FilmstripItem extends TWMixin(LitElement) {
             this.focusContext.focusedElement = null;
           }
         }}
-        ?data-focused=${this.isFocused}
-        class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 text-sm data-[focused]:bg-slate-400"
       >
         ${this.animations()}
       </div>
@@ -269,7 +269,7 @@ class EFHierarchyItem<
   }
 
   get isFocused() {
-    return this.element && this.focusedElement === this.element;
+    return this.element && this.focusContext?.focusedElement === this.element;
   }
 
   displayLabel(): TemplateResult<1> | string | typeof nothing {
@@ -280,10 +280,10 @@ class EFHierarchyItem<
     return html` 
       <div>
         <div
-          ?data-focused=${this.isFocused}
           class="peer 
             flex h-[1.1rem] items-center overflow-hidden text-nowrap  border border-slate-500
           bg-slate-200 pl-2 text-xs font-mono hover:bg-slate-400 data-[focused]:bg-slate-400"
+          ?data-focused=${this.isFocused}
           @mouseenter=${() => {
             if (this.focusContext) {
               this.focusContext.focusedElement = this.element;
@@ -504,6 +504,19 @@ export class EFFilmstrip extends TWMixin(LitElement) {
 
   connectedCallback(): void {
     super.connectedCallback();
+    this.#bindToTargetTimegroup();
+    window.addEventListener("keypress", this.#handleKeyPress);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("keypress", this.#handleKeyPress);
+  }
+
+  #bindToTargetTimegroup() {
+    if (this.timegroupController) {
+      this.timegroupController.remove();
+    }
     const target = this.targetTimegroup;
     if (target) {
       this.timegroupController = new TimegroupController(target, this);
@@ -511,13 +524,6 @@ export class EFFilmstrip extends TWMixin(LitElement) {
       // where the filmstrip clobbers the time loaded from localStorage
       this.currentTimeMs = target.currentTimeMs;
     }
-
-    window.addEventListener("keypress", this.#handleKeyPress);
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    window.removeEventListener("keypress", this.#handleKeyPress);
   }
 
   #handleKeyPress = (event: KeyboardEvent) => {
@@ -790,7 +796,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         ${ref(this.hierarchyRef)}
         @scroll=${this.syncHierarchyScroll}
       >
-        ${renderHierarchyChildren(Array.from(target?.children ?? []))}
+        ${renderHierarchyChildren(target ? [target] : [])}
       </div>
       <div
         class="h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-2"
@@ -814,10 +820,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
             ${ref(this.playheadRef)}
           ></div>
 
-          ${renderFilmstripChildren(
-            Array.from(target?.children || []),
-            this.pixelsPerMs,
-          )}
+          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs)}
         </div>
       </div>
     </div>`;
@@ -843,6 +846,9 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         this.targetTimegroup.currentTimeMs = this.currentTimeMs;
       }
     }
+    if (changes.has("target")) {
+      this.#bindToTargetTimegroup();
+    }
   }
 
   get targetTimegroup() {
@@ -851,8 +857,6 @@ export class EFFilmstrip extends TWMixin(LitElement) {
       if (target instanceof EFTimegroup) {
         return target;
       }
-
-      throw new Error("Invalid target, must be an EFTimegroup element");
     }
     return undefined;
   }

package/src/gui/EFWorkbench.ts

@@ -17,13 +17,15 @@ import { shallowGetTimegroups } from "../elements/EFTimegroup";
 export interface FocusContext {
   focusedElement: HTMLElement | null;
 }
-export const focusContext = createContext<FocusContext>(null);
+export const focusContext = createContext<FocusContext>(Symbol("focusContext"));
 
-export const focusedElement = createContext<HTMLElement | null>(null);
+export const focusedElement = createContext<HTMLElement | undefined>(
+  Symbol("focusedElement"),
+);
 
-export const fetchContext = createContext<typeof fetch>(fetch);
+export const fetchContext = createContext<typeof fetch>(Symbol("fetchContext"));
 
-export const apiHostContext = createContext<string>(null);
+export const apiHostContext = createContext<string>(Symbol("apiHostContext"));
 
 @customElement("ef-workbench")
 export class EFWorkbench extends TWMixin(LitElement) {
@@ -92,11 +94,11 @@ export class EFWorkbench extends TWMixin(LitElement) {
   }
 
   @provide({ context: focusContext })
-  focusContext = this;
+  focusContext = this as FocusContext;
 
   @provide({ context: focusedElement })
   @state()
-  focusedElement: HTMLElement | null = null;
+  focusedElement?: HTMLElement;
 
   @provide({ context: fetchContext })
   fetch = (path: URL | RequestInfo, init: RequestInit = {}) => {
@@ -127,7 +129,7 @@ export class EFWorkbench extends TWMixin(LitElement) {
 
   focusOverlay = createRef<HTMLDivElement>();
 
-  protected update(
+  update(
     changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {
     super.update(changedProperties);

package/dist/packages/elements/src/elements/EFTimeline.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-class EFTimeline extends HTMLElement {
-  get durationMs() {
-    let duration = 0;
-    for (const node of this.childNodes) {
-      if ("durationMs" in node && typeof node.durationMs === "number") {
-        duration += node.durationMs;
-      }
-    }
-    return duration;
-  }
-}
-window.customElements.define("ef-timeline", EFTimeline);
-exports.EFTimeline = EFTimeline;

package/dist/packages/elements/src/elements/EFTimeline.d.ts

@@ -1,3 +0,0 @@
-export declare class EFTimeline extends HTMLElement {
-    get durationMs(): number;
-}

package/dist/packages/elements/src/elements/EFTimeline.js

@@ -1,15 +0,0 @@
-class EFTimeline extends HTMLElement {
-  get durationMs() {
-    let duration = 0;
-    for (const node of this.childNodes) {
-      if ("durationMs" in node && typeof node.durationMs === "number") {
-        duration += node.durationMs;
-      }
-    }
-    return duration;
-  }
-}
-window.customElements.define("ef-timeline", EFTimeline);
-export {
-  EFTimeline
-};

package/src/elements/EFTimeline.ts

@@ -1,13 +0,0 @@
-export class EFTimeline extends HTMLElement {
-  get durationMs() {
-    let duration = 0;
-    for (const node of this.childNodes) {
-      if ("durationMs" in node && typeof node.durationMs === "number") {
-        duration += node.durationMs;
-      }
-    }
-    return duration;
-  }
-}
-
-window.customElements.define("ef-timeline", EFTimeline);