@editframe/elements 0.12.0-beta.6 → 0.13.0-beta.1

package/src/gui/ContextMixin.ts

@@ -1,15 +1,19 @@
-import { provide } from "@lit/context";
+import { createContext, provide } from "@lit/context";
 import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { createRef } from "lit/directives/ref.js";
-import type { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { apiHostContext } from "./apiHostContext.ts";
-import { efContext } from "./efContext.ts";
-import { fetchContext } from "./fetchContext.ts";
-import { type FocusContext, focusContext } from "./focusContext.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { loopContext, playingContext } from "./playingContext.ts";
+import type { EFTimegroup } from "../elements/EFTimegroup.js";
+import { apiHostContext } from "./apiHostContext.js";
+import { efContext } from "./efContext.js";
+import { fetchContext } from "./fetchContext.js";
+import { type FocusContext, focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
+
+export const targetTimegroupContext = createContext<EFTimegroup | null>(
+  "target-timegroup",
+);
 
 export declare class ContextMixinInterface extends LitElement {
   signingURL?: string;
@@ -55,6 +59,10 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @provide({ context: efContext })
     efContext = this;
 
+    @provide({ context: targetTimegroupContext })
+    @state()
+    targetTimegroup: EFTimegroup | null = null;
+
     @provide({ context: fetchContext })
     fetch = async (url: string, init: RequestInit = {}) => {
       init.headers ||= {};
@@ -106,8 +114,8 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @property({ type: Boolean, reflect: true })
     loop = false;
 
-    @state()
-    private stageScale = 1;
+    // @state()
+    // private stageScale = 1;
 
     @property({ type: Boolean })
     rendering = false;
@@ -121,49 +129,32 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     #FPS = 30;
     #MS_PER_FRAME = 1000 / this.#FPS;
 
-    setStageScale = () => {
-      if (this.isConnected && !this.rendering) {
-        const canvasElement = this.canvasRef.value;
-        const stageElement = this.stageRef.value;
-        const canvasChild = canvasElement?.assignedElements()[0];
-        if (stageElement && canvasElement && canvasChild) {
-          // Determine the appropriate scale factor to make the canvas fit into
-          canvasElement.style.width = `${canvasChild.clientWidth}px`;
-          canvasElement.style.height = `${canvasChild.clientHeight}px`;
-          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})`;
-              canvasElement.style.transformOrigin = "center left";
-            }
-            this.stageScale = scale;
-          } else {
-            const scale = stageWidth / canvasWidth;
-            if (this.stageScale !== scale) {
-              canvasElement.style.transform = `scale(${scale})`;
-              canvasElement.style.transformOrigin = "center left";
-            }
-            this.stageScale = scale;
+    #timegroupObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          const newTimegroup = this.querySelector("ef-timegroup");
+          if (newTimegroup !== this.targetTimegroup) {
+            this.targetTimegroup = newTimegroup;
           }
         }
       }
-      if (this.isConnected) {
-        requestAnimationFrame(this.setStageScale);
-      }
-    };
+    });
 
     connectedCallback(): void {
       super.connectedCallback();
+
+      // Initialize targetTimegroup
+      this.targetTimegroup = this.querySelector("ef-timegroup");
+
+      this.#timegroupObserver.observe(this, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+      });
+
       // Preferrably we would use a resizeObserver, but it is difficult to get the first resize
       // timed correctly. So we use requestAnimationFrame as a stop-gap.
-      requestAnimationFrame(this.setStageScale);
+      // requestAnimationFrame(this.setStageScale);
       if (this.playing) {
         this.startPlayback();
       }
@@ -171,6 +162,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
 
     disconnectedCallback(): void {
       super.disconnectedCallback();
+      this.#timegroupObserver.disconnect();
       this.stopPlayback();
     }
 
@@ -201,10 +193,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       super.update(changedProperties);
     }
 
-    get targetTimegroup() {
-      return this.querySelector("ef-timegroup");
-    }
-
     play() {
       this.playing = true;
     }
@@ -252,6 +240,14 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       await timegroup.waitForMediaDurations();
 
       let currentMs = timegroup.currentTimeMs;
+      const fromMs = currentMs;
+      const toMs = timegroup.endTimeMs;
+
+      if (fromMs >= toMs) {
+        this.pause();
+        return;
+      }
+
       let bufferCount = 0;
       this.#playbackAudioContext = new AudioContext({
         latencyHint: "playback",
@@ -281,9 +277,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         }
       };
 
-      const fromMs = currentMs;
-      const toMs = timegroup.endTimeMs;
-
       const queueBufferSource = async () => {
         if (currentMs >= toMs) {
           return false;

package/src/gui/EFFilmstrip.ts

@@ -17,21 +17,22 @@ import {
 import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 
-import { EFAudio } from "../elements/EFAudio.ts";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.ts";
-import { EFImage } from "../elements/EFImage.ts";
-import type { TemporalMixinInterface } from "../elements/EFTemporal.ts";
-import { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { EFVideo } from "../elements/EFVideo.ts";
-import { EFWaveform } from "../elements/EFWaveform.ts";
-import { TimegroupController } from "../elements/TimegroupController.ts";
-import { msToTimeCode } from "../msToTimeCode.ts";
-import type { EFPreview } from "./EFPreview.ts";
-import type { EFWorkbench } from "./EFWorkbench.ts";
-import { TWMixin } from "./TWMixin.ts";
-import { type FocusContext, focusContext } from "./focusContext.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { loopContext, playingContext } from "./playingContext.ts";
+import { EFAudio } from "../elements/EFAudio.js";
+import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
+import { EFImage } from "../elements/EFImage.js";
+import type { TemporalMixinInterface } from "../elements/EFTemporal.js";
+import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { EFVideo } from "../elements/EFVideo.js";
+import { EFWaveform } from "../elements/EFWaveform.js";
+import { TimegroupController } from "../elements/TimegroupController.js";
+import { msToTimeCode } from "../msToTimeCode.js";
+import { targetTimegroupContext } from "./ContextMixin.ts";
+import type { EFPreview } from "./EFPreview.js";
+import type { EFWorkbench } from "./EFWorkbench.js";
+import { TWMixin } from "./TWMixin.js";
+import { type FocusContext, focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(
@@ -336,7 +337,7 @@ class EFHierarchyItem<
       </div>`;
   }
 
-  renderChildren(): Array<TemplateResult<1>> | typeof nothing {
+  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {
     return renderHierarchyChildren(Array.from(this.element.children));
   }
 }
@@ -419,8 +420,11 @@ class EFHTMLHierarchyItem extends EFHierarchyItem {
 
 const renderHierarchyChildren = (
   children: Element[],
-): Array<TemplateResult<1>> => {
+): Array<TemplateResult<1> | typeof nothing> => {
   return children.map((child) => {
+    if (child instanceof HTMLElement && child.dataset?.efHidden) {
+      return nothing;
+    }
     if (child instanceof EFTimegroup) {
       return html`<ef-timegroup-hierarchy-item
         .element=${child}
@@ -467,6 +471,9 @@ const renderFilmstripChildren = (
   pixelsPerMs: number,
 ): Array<TemplateResult<1> | typeof nothing> => {
   return children.map((child) => {
+    if (child instanceof HTMLElement && child.dataset?.efHidden) {
+      return nothing;
+    }
     if (child instanceof EFTimegroup) {
       return html`<ef-timegroup-filmstrip
         .element=${child}
@@ -513,6 +520,14 @@ const renderFilmstripChildren = (
 
 @customElement("ef-filmstrip")
 export class EFFilmstrip extends TWMixin(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+    `,
+  ];
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
@@ -535,15 +550,35 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   @state()
   currentTimeMs = 0;
 
+  @property({ type: Boolean, reflect: true, attribute: "auto-scale" })
+  autoScale = false;
+
+  private resizeObserver = new ResizeObserver(() => {
+    if (this.autoScale) {
+      this.updatePixelsPerMs();
+    }
+  });
+
   connectedCallback(): void {
     super.connectedCallback();
     this.#bindToTargetTimegroup();
     window.addEventListener("keypress", this.#handleKeyPress);
+
+    this.resizeObserver.observe(this);
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
     window.removeEventListener("keypress", this.#handleKeyPress);
+    this.resizeObserver.disconnect();
+  }
+
+  updatePixelsPerMs() {
+    const target = this.targetTimegroup;
+    const gutter = this.gutterRef.value;
+    if (target && gutter && gutter.clientWidth > 0) {
+      this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);
+    }
   }
 
   #bindToTargetTimegroup() {
@@ -645,7 +680,9 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   @eventOptions({ passive: false })
   scrollScrub(e: WheelEvent) {
     if (this.targetTimegroup && this.gutter && !this.playing) {
-      e.preventDefault();
+      if (e.deltaX !== 0) {
+        e.preventDefault(); // Prevent default side scroll behavior only
+      }
       // Avoid over-scrolling to the left
       if (
         this.gutterRef.value &&
@@ -694,38 +731,42 @@ export class EFFilmstrip extends TWMixin(LitElement) {
       <div
         class="z-20 col-span-2 border-b-slate-600 bg-slate-100 shadow shadow-slate-300"
       >
-        <input
-          type="range"
-          .value=${this.pixelsPerMs}
-          min="0.01"
-          max="0.1"
-          step="0.001"
-          @input=${(e: Event) => {
-            const target = e.target as HTMLInputElement;
-            this.pixelsPerMs = Number.parseFloat(target.value);
-          }}
-        />
+        ${
+          !this.autoScale
+            ? html`<input
+              type="range"
+              .value=${this.pixelsPerMs}
+              min="0.01"
+              max="0.1"
+              step="0.001"
+              @input=${(e: Event) => {
+                const target = e.target as HTMLInputElement;
+                this.pixelsPerMs = Number.parseFloat(target.value);
+              }}
+            />`
+            : nothing
+        }
         <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
         <ef-toggle-play class="inline-block mx-2">
           <div slot="pause"> 
-            <button class="bg-white">&#9654;</button>
+            <button>⏸️</button>
           </div>
           <div slot="play">
-            <button>⏸️</button>
+            <button>▶️</button>
           </div>
         </ef-toggle-play>
-        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50">🔁</span>`}</button></ef-toggle-loop>
+        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50 line-through">🔁</span>`}</button></ef-toggle-loop>
       </div>
       <div
-        class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600 overflow-auto"
+        class="z-10 pl-1 pr-1 pt-[8px] shadow shadow-slate-600 overflow-auto"
         ${ref(this.hierarchyRef)}
         @scroll=${this.syncHierarchyScroll}
       >
         ${renderHierarchyChildren(target ? [target] : [])}
       </div>
       <div
-        class="h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-2"
+        class="flex h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-[8px]"
         id="gutter"
         ${ref(this.gutterRef)}
         @scroll=${this.syncGutterScroll}
@@ -767,8 +808,23 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     return this.closest("ef-workbench, ef-preview") as EFWorkbench | EFPreview;
   }
 
-  get targetTimegroup() {
-    return this.#contextElement?.targetTimegroup;
+  @property({ type: String })
+  target?: string;
+
+  @consume({ context: targetTimegroupContext, subscribe: true })
+  @state()
+  targetTimegroup?: EFTimegroup | null;
+
+  protected willUpdate(
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
+  ) {
+    if (changedProperties.has("targetTimegroup")) {
+      this.#bindToTargetTimegroup();
+    }
+    if (this.autoScale) {
+      this.updatePixelsPerMs();
+    }
+    super.willUpdate(changedProperties);
   }
 }
 

package/src/gui/EFFocusOverlay.ts

@@ -0,0 +1,79 @@
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+
+@customElement("ef-focus-overlay")
+export class EFFocusOverlay extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    .overlay {
+      position: fixed;
+      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
+      background: var(--ef-focus-overlay-background, rgb(59, 130, 246));
+      outline: 2px solid var(--ef-focus-overlay-color, rgb(59, 130, 246));
+      mix-blend-mode: multiply;
+      opacity: 0.4;
+      display: none;
+    }
+  `;
+
+  @consume({ context: focusedElementContext, subscribe: true })
+  focusedElement?: HTMLElement | null;
+
+  overlay = createRef<HTMLDivElement>();
+
+  private animationFrame?: number;
+
+  drawOverlay = () => {
+    const overlay = this.overlay.value;
+    if (overlay) {
+      if (this.focusedElement) {
+        overlay.style.display = "block";
+        const rect = this.focusedElement.getBoundingClientRect();
+        Object.assign(overlay.style, {
+          top: `${rect.top}px`,
+          left: `${rect.left}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+        });
+        this.animationFrame = requestAnimationFrame(this.drawOverlay);
+      } else {
+        overlay.style.display = "none";
+      }
+    }
+  };
+
+  render() {
+    return html`<div ${ref(this.overlay)} class="overlay"></div>`;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.drawOverlay();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.animationFrame) {
+      cancelAnimationFrame(this.animationFrame);
+    }
+  }
+
+  protected updated(): void {
+    this.drawOverlay();
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-focus-overlay": EFFocusOverlay;
+  }
+}

package/src/gui/EFPreview.ts

@@ -1,36 +1,53 @@
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
 
-import { ContextMixin } from "./ContextMixin.ts";
-import { TWMixin } from "./TWMixin.ts";
+import { provide } from "@lit/context";
+import { ContextMixin } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin.js";
+import { focusedElementContext } from "./focusedElementContext.js";
 
 @customElement("ef-preview")
 export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
+  @provide({ context: focusedElementContext })
+  focusedElement?: HTMLElement;
+
+  constructor() {
+    super();
+    this.addEventListener("mouseover", (e) => {
+      const target = e.target as HTMLElement;
+      const timegroup = target.closest("ef-timegroup");
+      if (target !== this && timegroup) {
+        this.focusedElement = target;
+      }
+    });
+    this.addEventListener("mouseout", (e) => {
+      const relatedTarget = e.relatedTarget as HTMLElement;
+      const targetingTimegroup = relatedTarget?.closest("ef-timegroup");
+      // Clear focus if:
+      // 1. Moving outside the preview entirely, or
+      // 2. Moving to the preview itself, or
+      // 3. Moving to an element that's not within a timegroup
+      if (
+        !this.contains(relatedTarget) ||
+        relatedTarget === this ||
+        !targetingTimegroup
+      ) {
+        this.focusedElement = undefined;
+      }
+    });
+  }
+
   static styles = [
     css`
       :host {
         display: block;
-        width: 100%;
-        height: 100%;
+        cursor: crosshair;
       }
     `,
   ];
 
   render() {
-    return html`
-      <div
-        ${ref(this.stageRef)}
-        class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
-      >
-        <slot
-          ${ref(this.canvasRef)}
-          class="inline-block"
-          name="canvas"
-        ></slot>
-        <slot name="controls"></slot>
-      </div>
-    `;
+    return html`<slot></slot>`;
   }
 }
 

package/src/gui/EFScrubber.ts

@@ -3,9 +3,9 @@ import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 import { ref } from "lit/directives/ref.js";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
-import { efContext } from "./efContext.ts";
-import { playingContext } from "./playingContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
+import { playingContext } from "./playingContext.js";
 
 @customElement("ef-scrubber")
 export class EFScrubber extends LitElement {

package/src/gui/EFTimeDisplay.ts

@@ -1,8 +1,8 @@
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
-import { efContext } from "./efContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
 
 @customElement("ef-time-display")
 export class EFTimeDisplay extends LitElement {

package/src/gui/EFToggleLoop.ts

@@ -1,9 +1,9 @@
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
 import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
 
-import { efContext } from "./efContext.ts";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
 
 @customElement("ef-toggle-loop")
 export class EFToggleLoop extends LitElement {

package/src/gui/EFTogglePlay.ts

@@ -1,10 +1,10 @@
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 
-import type { ContextMixinInterface } from "./ContextMixin.ts";
-import { efContext } from "./efContext.ts";
-import { playingContext } from "./playingContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
+import { playingContext } from "./playingContext.js";
 
 @customElement("ef-toggle-play")
 export class EFTogglePlay extends LitElement {
@@ -23,12 +23,6 @@ export class EFTogglePlay extends LitElement {
   @consume({ context: playingContext, subscribe: true })
   playing = false;
 
-  @property({ type: String })
-  play = '<button class="text-2xl cursor-pointer">▶️</button>';
-
-  @property({ type: String })
-  pause = '<button class="text-2xl cursor-pointer">⏸️</button>';
-
   render() {
     return html`
       <div

package/src/gui/EFWorkbench.ts

@@ -2,8 +2,8 @@ import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, eventOptions } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
-import { ContextMixin } from "./ContextMixin.ts";
-import { TWMixin } from "./TWMixin.ts";
+import { ContextMixin } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin.js";
 
 @customElement("ef-workbench")
 export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {

package/src/gui/efContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "@lit/context";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
 
 export const efContext = createContext<ContextMixinInterface | null>(
   Symbol("efContext"),