@editframe/elements 0.21.0-beta.0 → 0.23.6-beta.0

package/src/gui/EFFilmstrip.ts

@@ -24,13 +24,17 @@ import {
   EFCaptionsActiveWord,
 } from "../elements/EFCaptions.js";
 import { EFImage } from "../elements/EFImage.js";
-import type { TemporalMixinInterface } from "../elements/EFTemporal.js";
+import {
+  isEFTemporal,
+  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 { TargetController } from "../elements/TargetController.js";
 import { TimegroupController } from "../elements/TimegroupController.js";
 import { msToTimeCode } from "../msToTimeCode.js";
-import { targetTimegroupContext } from "./ContextMixin.ts";
+import { targetTemporalContext } from "./ContextMixin.ts";
 import type { EFPreview } from "./EFPreview.js";
 import type { EFWorkbench } from "./EFWorkbench.js";
 import { type FocusContext, focusContext } from "./focusContext.js";
@@ -142,9 +146,17 @@ class FilmstripItem extends TWMixin(LitElement) {
     return renderFilmstripChildren(
       Array.from(this.element.children),
       this.pixelsPerMs,
+      this.hideSelectors,
+      this.showSelectors,
     );
   }
 
+  @property({ type: Array, attribute: false })
+  hideSelectors?: string[];
+
+  @property({ type: Array, attribute: false })
+  showSelectors?: string[];
+
   contents() {
     return html``;
   }
@@ -295,7 +307,12 @@ export class EFCaptionsFilmstrip extends FilmstripItem {
 
   renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {
     // Also render normal DOM children (like ef-captions-active-word elements)
-    return super.renderChildren();
+    return renderFilmstripChildren(
+      Array.from(this.element.children),
+      this.pixelsPerMs,
+      this.hideSelectors,
+      this.showSelectors,
+    );
   }
 }
 
@@ -545,6 +562,8 @@ export class EFTimegroupFilmstrip extends FilmstripItem {
       ${renderFilmstripChildren(
         Array.from(this.element.children || []),
         this.pixelsPerMs,
+        this.hideSelectors,
+        this.showSelectors,
       )}
     </div>
     `;
@@ -559,6 +578,8 @@ export class EFHTMLFilmstrip extends FilmstripItem {
       ${renderFilmstripChildren(
         Array.from(this.element.children || []),
         this.pixelsPerMs,
+        this.hideSelectors,
+        this.showSelectors,
       )}
     `;
   }
@@ -578,6 +599,12 @@ class EFHierarchyItem<
   @consume({ context: focusedElementContext, subscribe: true })
   focusedElement?: HTMLElement | null;
 
+  @property({ type: Array, attribute: false })
+  hideSelectors?: string[];
+
+  @property({ type: Array, attribute: false })
+  showSelectors?: string[];
+
   get icon(): TemplateResult<1> | string {
     return "📼";
   }
@@ -620,7 +647,11 @@ class EFHierarchyItem<
   }
 
   renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {
-    return renderHierarchyChildren(Array.from(this.element.children));
+    return renderHierarchyChildren(
+      Array.from(this.element.children),
+      this.hideSelectors,
+      this.showSelectors,
+    );
   }
 }
 
@@ -700,50 +731,108 @@ class EFHTMLHierarchyItem extends EFHierarchyItem {
   }
 }
 
+const shouldRenderElement = (
+  element: Element,
+  hideSelectors?: string[],
+  showSelectors?: string[],
+): boolean => {
+  if (element instanceof HTMLElement && element.dataset?.efHidden) {
+    return false;
+  }
+
+  // If show selectors are provided (allowlist mode), only render if matches
+  if (showSelectors && showSelectors.length > 0) {
+    return showSelectors.some((selector) => {
+      try {
+        return element.matches(selector);
+      } catch {
+        return false;
+      }
+    });
+  }
+
+  // If hide selectors are provided, don't render if matches
+  if (hideSelectors && hideSelectors.length > 0) {
+    return !hideSelectors.some((selector) => {
+      try {
+        return element.matches(selector);
+      } catch {
+        return false;
+      }
+    });
+  }
+
+  // No filters, render everything
+  return true;
+};
+
 const renderHierarchyChildren = (
   children: Element[],
+  hideSelectors?: string[],
+  showSelectors?: string[],
+  skipRootFiltering = false,
 ): Array<TemplateResult<1> | typeof nothing> => {
   return children.map((child) => {
-    if (child instanceof HTMLElement && child.dataset?.efHidden) {
+    if (
+      !skipRootFiltering &&
+      !shouldRenderElement(child, hideSelectors, showSelectors)
+    ) {
       return nothing;
     }
+
     if (child instanceof EFTimegroup) {
       return html`<ef-timegroup-hierarchy-item
         .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-timegroup-hierarchy-item>`;
     }
     if (child instanceof EFImage) {
       return html`<ef-image-hierarchy-item
         .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-image-hierarchy-item>`;
     }
     if (child instanceof EFAudio) {
       return html`<ef-audio-hierarchy-item
         .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-audio-hierarchy-item>`;
     }
     if (child instanceof EFVideo) {
       return html`<ef-video-hierarchy-item
         .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-video-hierarchy-item>`;
     }
     if (child instanceof EFCaptions) {
       return html`<ef-captions-hierarchy-item
         .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-captions-hierarchy-item>`;
     }
     if (child instanceof EFCaptionsActiveWord) {
       return html`<ef-captions-active-word-hierarchy-item
         .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-captions-active-word-hierarchy-item>`;
     }
     if (child instanceof EFWaveform) {
       return html`<ef-waveform-hierarchy-item
         .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-waveform-hierarchy-item>`;
     }
     return html`<ef-html-hierarchy-item
       .element=${child}
+      .hideSelectors=${hideSelectors}
+      .showSelectors=${showSelectors}
     ></ef-html-hierarchy-item>`;
   });
 };
@@ -751,15 +840,24 @@ const renderHierarchyChildren = (
 const renderFilmstripChildren = (
   children: Element[],
   pixelsPerMs: number,
+  hideSelectors?: string[],
+  showSelectors?: string[],
+  skipRootFiltering = false,
 ): Array<TemplateResult<1> | typeof nothing> => {
   return children.map((child) => {
-    if (child instanceof HTMLElement && child.dataset?.efHidden) {
+    if (
+      !skipRootFiltering &&
+      !shouldRenderElement(child, hideSelectors, showSelectors)
+    ) {
       return nothing;
     }
+
     if (child instanceof EFTimegroup) {
       return html`<ef-timegroup-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       >
       </ef-timegroup-filmstrip>`;
     }
@@ -767,59 +865,79 @@ const renderFilmstripChildren = (
       return html`<ef-image-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-image-filmstrip>`;
     }
     if (child instanceof EFAudio) {
       return html`<ef-audio-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-audio-filmstrip>`;
     }
     if (child instanceof EFVideo) {
       return html`<ef-video-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-video-filmstrip>`;
     }
     if (child instanceof EFCaptions) {
       return html`<ef-captions-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-captions-filmstrip>`;
     }
     if (child instanceof EFCaptionsActiveWord) {
       return html`<ef-captions-active-word-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-captions-active-word-filmstrip>`;
     }
     if (child.tagName === "EF-CAPTIONS-SEGMENT") {
       return html`<ef-captions-segment-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-captions-segment-filmstrip>`;
     }
     if (child.tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD") {
       return html`<ef-captions-before-word-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-captions-before-word-filmstrip>`;
     }
     if (child.tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD") {
       return html`<ef-captions-after-word-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-captions-after-word-filmstrip>`;
     }
     if (child instanceof EFWaveform) {
       return html`<ef-waveform-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
       ></ef-waveform-filmstrip>`;
     }
     return html`<ef-html-filmstrip
       .element=${child}
       .pixelsPerMs=${pixelsPerMs}
+      .hideSelectors=${hideSelectors}
+      .showSelectors=${showSelectors}
     ></ef-html-filmstrip>`;
   });
 };
@@ -839,6 +957,28 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
+  @property({ type: String })
+  hide = "";
+
+  @property({ type: String })
+  show = "";
+
+  get hideSelectors(): string[] | undefined {
+    if (!this.hide) return undefined;
+    return this.hide
+      .split(",")
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0);
+  }
+
+  get showSelectors(): string[] | undefined {
+    if (!this.show) return undefined;
+    return this.show
+      .split(",")
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0);
+  }
+
   @state()
   scrubbing = false;
 
@@ -873,6 +1013,10 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     window.addEventListener("keypress", this.#handleKeyPress);
 
     this.resizeObserver.observe(this);
+
+    if (this.target) {
+      this.#targetController = new TargetController(this);
+    }
   }
 
   disconnectedCallback(): void {
@@ -882,7 +1026,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   }
 
   updatePixelsPerMs() {
-    const target = this.targetTimegroup;
+    const target = this.targetTemporal;
     const gutter = this.gutterRef.value;
     if (target && gutter && gutter.clientWidth > 0) {
       this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);
@@ -893,9 +1037,12 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     if (this.timegroupController) {
       this.timegroupController.remove();
     }
-    const target = this.targetTimegroup;
+    const target = this.targetTemporal;
     if (target) {
-      this.timegroupController = new TimegroupController(target, this);
+      this.timegroupController = new TimegroupController(
+        target as EFTimegroup,
+        this,
+      );
       // Set the current time to the last saved time to avoid a cycle
       // where the filmstrip clobbers the time loaded from localStorage
       this.currentTimeMs = target.currentTimeMs;
@@ -975,16 +1122,16 @@ export class EFFilmstrip extends TWMixin(LitElement) {
       return;
     }
     const rect = gutter.getBoundingClientRect();
-    if (this.targetTimegroup) {
+    if (this.targetTemporal) {
       const layerX = e.pageX - rect.left + gutter.scrollLeft;
       const scrubTimeMs = layerX / this.pixelsPerMs;
-      this.targetTimegroup.currentTimeMs = scrubTimeMs;
+      this.targetTemporal.currentTimeMs = scrubTimeMs;
     }
   }
 
   @eventOptions({ passive: false })
   scrollScrub(e: WheelEvent) {
-    if (this.targetTimegroup && this.gutter && !this.playing) {
+    if (this.targetTemporal && this.gutter && !this.playing) {
       if (e.deltaX !== 0) {
         e.preventDefault(); // Prevent default side scroll behavior only
       }
@@ -1010,7 +1157,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
 
       if (this) {
         this.gutter.scrollBy(e.deltaX, e.deltaY);
-        this.targetTimegroup.currentTimeMs += e.deltaX / this.pixelsPerMs;
+        this.targetTemporal.currentTimeMs += e.deltaX / this.pixelsPerMs;
       }
     }
   }
@@ -1024,7 +1171,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   }
 
   render() {
-    const target = this.targetTimegroup;
+    const target = this.targetTemporal;
 
     return html` <div
       class="grid h-full bg-slate-100"
@@ -1068,7 +1215,12 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         ${ref(this.hierarchyRef)}
         @scroll=${this.syncHierarchyScroll}
       >
-        ${renderHierarchyChildren(target ? [target] : [])}
+        ${renderHierarchyChildren(
+          target ? ([target] as unknown as Element[]) : [],
+          this.hideSelectors,
+          this.showSelectors,
+          true,
+        )}
       </div>
       <div
         class="flex h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-[8px]"
@@ -1092,19 +1244,25 @@ export class EFFilmstrip extends TWMixin(LitElement) {
             ${ref(this.playheadRef)}
           ></div>
 
-          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs)}
+          ${renderFilmstripChildren(
+            target ? ([target] as unknown as Element[]) : [],
+            this.pixelsPerMs,
+            this.hideSelectors,
+            this.showSelectors,
+            true,
+          )}
         </div>
       </div>
     </div>`;
   }
 
   updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
-    if (!this.targetTimegroup) {
+    if (!this.targetTemporal) {
       return;
     }
     if (changes.has("currentTimeMs")) {
-      if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
-        this.targetTimegroup.currentTimeMs = this.currentTimeMs;
+      if (this.targetTemporal.currentTimeMs !== this.currentTimeMs) {
+        this.targetTemporal.currentTimeMs = this.currentTimeMs;
       }
     }
   }
@@ -1114,18 +1272,50 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   }
 
   @property({ type: String })
-  target?: string;
+  target = "";
+
+  @state()
+  targetElement: Element | null = null;
 
-  @consume({ context: targetTimegroupContext, subscribe: true })
+  #targetController?: TargetController;
+  #lastTargetTemporal?: TemporalMixinInterface | null;
+
+  @consume({ context: targetTemporalContext, subscribe: true })
   @state()
-  targetTimegroup?: EFTimegroup | null;
+  private _contextProvidedTemporal?: TemporalMixinInterface | null;
+
+  get targetTemporal(): TemporalMixinInterface | null {
+    const fromTarget =
+      this.targetElement && isEFTemporal(this.targetElement)
+        ? (this.targetElement as TemporalMixinInterface & HTMLElement)
+        : null;
+    const fromContext = this._contextProvidedTemporal;
+
+    if (fromTarget && fromContext && fromTarget !== fromContext) {
+      console.warn(
+        "EFFilmstrip: Both target attribute and parent context found. Using target attribute.",
+        { target: this.target, fromTarget, fromContext },
+      );
+    }
+
+    return fromTarget ?? fromContext ?? null;
+  }
 
   protected willUpdate(
     changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ) {
-    if (changedProperties.has("targetTimegroup")) {
+    if (changedProperties.has("target")) {
+      if (this.target && !this.#targetController) {
+        this.#targetController = new TargetController(this);
+      }
+    }
+
+    const currentTargetTemporal = this.targetTemporal;
+    if (this.#lastTargetTemporal !== currentTargetTemporal) {
       this.#bindToTargetTimegroup();
+      this.#lastTargetTemporal = currentTargetTemporal;
     }
+
     if (this.autoScale) {
       this.updatePixelsPerMs();
     }

package/src/gui/EFPause.browsertest.ts

@@ -0,0 +1,202 @@
+import { html, render } from "lit";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import "../elements/EFTimegroup.js";
+import "../elements/EFVideo.js";
+import "./EFConfiguration.js";
+import "./EFPause.js";
+import "./EFPreview.js";
+
+describe("EFPause", () => {
+  beforeEach(() => {
+    while (document.body.children.length) {
+      document.body.children[0]?.remove();
+    }
+  });
+
+  afterEach(() => {
+    const elements = document.querySelectorAll("ef-pause");
+    for (const element of elements) {
+      element.remove();
+    }
+  });
+
+  test("should be defined", () => {
+    const element = document.createElement("ef-pause");
+    expect(element).toBeDefined();
+    expect(element.tagName).toBe("EF-PAUSE");
+  });
+
+  test("should be hidden when not playing", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-pause>Pause Button</ef-pause>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const pause = container.querySelector("ef-pause") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await pause.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await pause.updateComplete;
+
+    expect(pause.playing).toBe(false);
+    expect(getComputedStyle(pause).display).toBe("none");
+
+    container.remove();
+  });
+
+  test("should be visible when playing", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-pause>Pause Button</ef-pause>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const pause = container.querySelector("ef-pause") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await pause.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await pause.updateComplete;
+
+    expect(getComputedStyle(pause).display).toBe("none");
+
+    // Manually trigger playing state change to test visibility mechanism
+    pause.playing = true;
+    await pause.updateComplete;
+
+    expect(getComputedStyle(pause).display).not.toBe("none");
+
+    container.remove();
+  });
+
+  test("should call pause() when clicked", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-pause>Pause Button</ef-pause>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const pause = container.querySelector("ef-pause") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await pause.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await pause.updateComplete;
+
+    const pauseSpy = vi.spyOn(video.playbackController, "pause");
+
+    pause.click();
+
+    expect(pauseSpy).toHaveBeenCalledTimes(1);
+
+    pauseSpy.mockRestore();
+    container.remove();
+  }, 1000);
+
+  test("should pass through children with default slot", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+            <ef-pause><span id="pause-content">⏸ Pause</span></ef-pause>
+          </ef-preview>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const pause = container.querySelector("ef-pause") as any;
+    const content = container.querySelector("#pause-content");
+
+    await pause.updateComplete;
+
+    expect(content).toBeDefined();
+    expect(content?.textContent).toBe("⏸ Pause");
+
+    container.remove();
+  });
+
+  test("should work with target attribute", async () => {
+    const container = document.createElement("div");
+    render(
+      html`
+        <ef-configuration api-host="http://localhost:63315" signing-url="">
+          <ef-preview id="test-preview">
+            <ef-video src="bars-n-tone.mp4"></ef-video>
+          </ef-preview>
+          <ef-pause target="test-preview">Pause Button</ef-pause>
+        </ef-configuration>
+      `,
+      container,
+    );
+    document.body.appendChild(container);
+
+    const pause = container.querySelector("ef-pause") as any;
+    const preview = container.querySelector("ef-preview") as any;
+    const video = container.querySelector("ef-video") as any;
+
+    await pause.updateComplete;
+    await preview.updateComplete;
+    await video.updateComplete;
+
+    await video.mediaEngineTask.run();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await pause.updateComplete;
+
+    expect(pause.efContext).toBe(preview);
+
+    const pauseSpy = vi.spyOn(video.playbackController, "pause");
+
+    pause.click();
+
+    expect(pauseSpy).toHaveBeenCalledTimes(1);
+
+    pauseSpy.mockRestore();
+    container.remove();
+  }, 1000);
+});