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

package/dist/gui/EFFilmstrip.js

@@ -1,12 +1,14 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { loopContext, playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { isEFTemporal } from "../elements/EFTemporal.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
-import { loopContext, playingContext } from "./playingContext.js";
-import { targetTimegroupContext } from "./ContextMixin.js";
+import { targetTemporalContext } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin2.js";
+import { TargetController } from "../elements/TargetController.js";
 import { TimegroupController } from "../elements/TimegroupController.js";
 import { EFTimegroup } from "../elements/EFTimegroup.js";
 import { EFImage } from "../elements/EFImage.js";
-import { TWMixin } from "./TWMixin2.js";
 import { EFAudio } from "../elements/EFAudio.js";
 import { EFVideo } from "../elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
@@ -92,7 +94,7 @@ var FilmstripItem = class extends TWMixin(LitElement) {
     </div>`;
 	}
 	renderChildren() {
-		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs);
+		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs, this.hideSelectors, this.showSelectors);
 	}
 	contents() {
 		return html``;
@@ -147,6 +149,14 @@ __decorate([property({
 	attribute: false
 })], FilmstripItem.prototype, "element", void 0);
 __decorate([property({ type: Number })], FilmstripItem.prototype, "pixelsPerMs", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], FilmstripItem.prototype, "hideSelectors", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], FilmstripItem.prototype, "showSelectors", void 0);
 var EFAudioFilmstrip = class EFAudioFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html``;
@@ -188,7 +198,7 @@ var EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
 		if (!captionsData) return html``;
 		const captions = this.element;
 		const captionsLocalTimeSec = ((captions.rootTimegroup?.currentTimeMs || 0) - captions.startTimeMs) / 1e3;
-		const segmentElements = captionsData.segments.map((segment) => {
+		return html`${captionsData.segments.map((segment) => {
 			const isActive = captionsLocalTimeSec >= segment.start && captionsLocalTimeSec < segment.end;
 			return html`<div
         class="absolute border border-slate-600 text-xs overflow-hidden flex items-center ${isActive ? "bg-green-200 border-green-500 font-bold z-[5]" : "bg-slate-100"}"
@@ -202,11 +212,10 @@ var EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
       >
         <span class="px-0.5 text-[8px] ${isActive ? "font-bold" : ""}">${segment.text}</span>
       </div>`;
-		});
-		return html`${segmentElements}`;
+		})}`;
 	}
 	renderChildren() {
-		return super.renderChildren();
+		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs, this.hideSelectors, this.showSelectors);
 	}
 };
 EFCaptionsFilmstrip = __decorate([customElement("ef-captions-filmstrip")], EFCaptionsFilmstrip);
@@ -311,9 +320,8 @@ var EFCaptionsBeforeWordFilmstrip = class EFCaptionsBeforeWordFilmstrip$1 extend
 		return html`<div style=${styleMap(this.captionsTrackStyles)}>
       <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
         ${captionsData.word_segments.map((word) => {
-			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
 			return html`<div
-            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
+            class="absolute border text-xs overflow-visible flex items-center ${captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
             style=${styleMap({
 				left: `${this.pixelsPerMs * word.start * 1e3}px`,
 				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
@@ -351,9 +359,8 @@ var EFCaptionsAfterWordFilmstrip = class EFCaptionsAfterWordFilmstrip$1 extends
 		return html`<div style=${styleMap(this.captionsTrackStyles)}>
       <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
         ${captionsData.word_segments.map((word) => {
-			const isCurrentlyActive = captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end;
 			return html`<div
-            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
+            class="absolute border text-xs overflow-visible flex items-center ${captionsLocalTimeSec >= word.start && captionsLocalTimeSec < word.end ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
             style=${styleMap({
 				left: `${this.pixelsPerMs * word.start * 1e3}px`,
 				width: `${this.pixelsPerMs * (word.end - word.start) * 1e3}px`,
@@ -389,7 +396,7 @@ var EFTimegroupFilmstrip = class EFTimegroupFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html`
       <span>TIME GROUP</span>
-      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs)}
+      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs, this.hideSelectors, this.showSelectors)}
     </div>
     `;
 	}
@@ -399,7 +406,7 @@ var EFHTMLFilmstrip = class EFHTMLFilmstrip$1 extends FilmstripItem {
 	contents() {
 		return html`
       <span>${this.element.tagName}</span>
-      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs)}
+      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs, this.hideSelectors, this.showSelectors)}
     `;
 	}
 };
@@ -443,7 +450,7 @@ var EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
       </div>`;
 	}
 	renderChildren() {
-		return renderHierarchyChildren(Array.from(this.element.children));
+		return renderHierarchyChildren(Array.from(this.element.children), this.hideSelectors, this.showSelectors);
 	}
 };
 __decorate([property({
@@ -455,6 +462,14 @@ __decorate([consume({
 	context: focusedElementContext,
 	subscribe: true
 })], EFHierarchyItem.prototype, "focusedElement", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], EFHierarchyItem.prototype, "hideSelectors", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], EFHierarchyItem.prototype, "showSelectors", void 0);
 EFHierarchyItem = __decorate([customElement("ef-hierarchy-item")], EFHierarchyItem);
 var EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierarchyItem {
 	get icon() {
@@ -519,82 +534,138 @@ var EFHTMLHierarchyItem = class EFHTMLHierarchyItem$1 extends EFHierarchyItem {
 	}
 };
 EFHTMLHierarchyItem = __decorate([customElement("ef-html-hierarchy-item")], EFHTMLHierarchyItem);
-var renderHierarchyChildren = (children) => {
+var shouldRenderElement = (element, hideSelectors, showSelectors) => {
+	if (element instanceof HTMLElement && element.dataset?.efHidden) return false;
+	if (showSelectors && showSelectors.length > 0) return showSelectors.some((selector) => {
+		try {
+			return element.matches(selector);
+		} catch {
+			return false;
+		}
+	});
+	if (hideSelectors && hideSelectors.length > 0) return !hideSelectors.some((selector) => {
+		try {
+			return element.matches(selector);
+		} catch {
+			return false;
+		}
+	});
+	return true;
+};
+var renderHierarchyChildren = (children, hideSelectors, showSelectors, skipRootFiltering = false) => {
 	return children.map((child) => {
-		if (child instanceof HTMLElement && child.dataset?.efHidden) return nothing;
+		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>`;
 	});
 };
-var renderFilmstripChildren = (children, pixelsPerMs) => {
+var renderFilmstripChildren = (children, pixelsPerMs, hideSelectors, showSelectors, skipRootFiltering = false) => {
 	return children.map((child) => {
-		if (child instanceof HTMLElement && child.dataset?.efHidden) return nothing;
+		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>`;
 		if (child instanceof EFImage) 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>`;
 	});
 };
@@ -602,6 +673,8 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 	constructor(..._args3) {
 		super(..._args3);
 		this.pixelsPerMs = .04;
+		this.hide = "";
+		this.show = "";
 		this.scrubbing = false;
 		this.timelineScrolltop = 0;
 		this.currentTimeMs = 0;
@@ -612,6 +685,8 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		this.gutterRef = createRef();
 		this.hierarchyRef = createRef();
 		this.playheadRef = createRef();
+		this.target = "";
+		this.targetElement = null;
 	}
 	static {
 		this.styles = [css`
@@ -623,11 +698,20 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
       }
     `];
 	}
+	get hideSelectors() {
+		if (!this.hide) return void 0;
+		return this.hide.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+	}
+	get showSelectors() {
+		if (!this.show) return void 0;
+		return this.show.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.#bindToTargetTimegroup();
 		window.addEventListener("keypress", this.#handleKeyPress);
 		this.resizeObserver.observe(this);
+		if (this.target) this.#targetController = new TargetController(this);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -635,13 +719,13 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		this.resizeObserver.disconnect();
 	}
 	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);
 	}
 	#bindToTargetTimegroup() {
 		if (this.timegroupController) this.timegroupController.remove();
-		const target = this.targetTimegroup;
+		const target = this.targetTemporal;
 		if (target) {
 			this.timegroupController = new TimegroupController(target, this);
 			this.currentTimeMs = target.currentTimeMs;
@@ -686,13 +770,13 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		const gutter = this.shadowRoot?.querySelector("#gutter");
 		if (!gutter) return;
 		const rect = gutter.getBoundingClientRect();
-		if (this.targetTimegroup) {
+		if (this.targetTemporal) {
 			const scrubTimeMs = (e.pageX - rect.left + gutter.scrollLeft) / this.pixelsPerMs;
-			this.targetTimegroup.currentTimeMs = scrubTimeMs;
+			this.targetTemporal.currentTimeMs = scrubTimeMs;
 		}
 	}
 	scrollScrub(e) {
-		if (this.targetTimegroup && this.gutter && !this.playing) {
+		if (this.targetTemporal && this.gutter && !this.playing) {
 			if (e.deltaX !== 0) e.preventDefault();
 			if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
 				this.gutter.scrollBy(0, e.deltaY);
@@ -704,7 +788,7 @@ var EFFilmstrip = class EFFilmstrip$1 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;
 			}
 		}
 	}
@@ -712,7 +796,7 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
 		return this.gutterRef.value;
 	}
 	render() {
-		const target = this.targetTimegroup;
+		const target = this.targetTemporal;
 		return html` <div
       class="grid h-full bg-slate-100"
       style=${styleMap({
@@ -751,7 +835,7 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
         ${ref(this.hierarchyRef)}
         @scroll=${this.syncHierarchyScroll}
       >
-        ${renderHierarchyChildren(target ? [target] : [])}
+        ${renderHierarchyChildren(target ? [target] : [], this.hideSelectors, this.showSelectors, true)}
       </div>
       <div
         class="flex h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-[8px]"
@@ -775,27 +859,48 @@ var EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
             ${ref(this.playheadRef)}
           ></div>
 
-          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs)}
+          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs, this.hideSelectors, this.showSelectors, true)}
         </div>
       </div>
     </div>`;
 	}
 	updated(changes) {
-		if (!this.targetTimegroup) return;
+		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;
 		}
 	}
 	get #contextElement() {
 		return this.closest("ef-workbench, ef-preview");
 	}
+	#targetController;
+	#lastTargetTemporal;
+	get targetTemporal() {
+		const fromTarget = this.targetElement && isEFTemporal(this.targetElement) ? this.targetElement : 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;
+	}
 	willUpdate(changedProperties) {
-		if (changedProperties.has("targetTimegroup")) this.#bindToTargetTimegroup();
+		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();
 		super.willUpdate(changedProperties);
 	}
 };
 __decorate([property({ type: Number })], EFFilmstrip.prototype, "pixelsPerMs", void 0);
+__decorate([property({ type: String })], EFFilmstrip.prototype, "hide", void 0);
+__decorate([property({ type: String })], EFFilmstrip.prototype, "show", void 0);
 __decorate([state()], EFFilmstrip.prototype, "scrubbing", void 0);
 __decorate([state()], EFFilmstrip.prototype, "timelineScrolltop", void 0);
 __decorate([consume({
@@ -818,9 +923,10 @@ __decorate([eventOptions({ capture: false })], EFFilmstrip.prototype, "scrub", n
 __decorate([eventOptions({ capture: false })], EFFilmstrip.prototype, "startScrub", null);
 __decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "scrollScrub", null);
 __decorate([property({ type: String })], EFFilmstrip.prototype, "target", void 0);
+__decorate([state()], EFFilmstrip.prototype, "targetElement", void 0);
 __decorate([consume({
-	context: targetTimegroupContext,
+	context: targetTemporalContext,
 	subscribe: true
-}), state()], EFFilmstrip.prototype, "targetTimegroup", void 0);
+}), state()], EFFilmstrip.prototype, "_contextProvidedTemporal", void 0);
 EFFilmstrip = __decorate([customElement("ef-filmstrip")], EFFilmstrip);
 export { EFFilmstrip };

package/dist/gui/EFFitScale.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { createRef } from "lit/directives/ref.js";
@@ -89,10 +89,8 @@ var EFFitScale = class EFFitScale$1 extends LitElement {
 		const containerHeight = this.clientHeight;
 		const contentWidth = this.contentChild.clientWidth;
 		const contentHeight = this.contentChild.clientHeight;
-		const containerRatio = containerWidth / containerHeight;
-		const contentRatio = contentWidth / contentHeight;
 		return {
-			scale: containerRatio > contentRatio ? containerHeight / contentHeight : containerWidth / contentWidth,
+			scale: containerWidth / containerHeight > contentWidth / contentHeight ? containerHeight / contentHeight : containerWidth / contentWidth,
 			containerWidth,
 			containerHeight,
 			contentWidth,

package/dist/gui/EFFocusOverlay.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";

package/dist/gui/EFPause.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { ControllableInterface } from './Controllable.js';
+declare const EFPause_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFPause extends EFPause_base {
+    static styles: import('lit').CSSResult[];
+    playing: boolean;
+    get efContext(): ControllableInterface | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+    handleClick: () => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-pause": EFPause;
+    }
+}
+export {};

package/dist/gui/EFPause.js

@@ -0,0 +1,59 @@
+import { playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { efContext } from "./efContext.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+attachContextRoot();
+var EFPause = class EFPause$1 extends TargetOrContextMixin(LitElement, efContext) {
+	constructor(..._args) {
+		super(..._args);
+		this.playing = false;
+		this.handleClick = () => {
+			if (this.efContext) this.efContext.pause();
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      div {
+        all: inherit;
+      }
+    `];
+	}
+	get efContext() {
+		return this.effectiveContext;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this.handleClick);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("playing")) this.style.display = this.playing ? "" : "none";
+	}
+	render() {
+		return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([consume({
+	context: playingContext,
+	subscribe: true
+}), state()], EFPause.prototype, "playing", void 0);
+EFPause = __decorate([customElement("ef-pause")], EFPause);
+export { EFPause };

package/dist/gui/EFPlay.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { ControllableInterface } from './Controllable.js';
+declare const EFPlay_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFPlay extends EFPlay_base {
+    static styles: import('lit').CSSResult[];
+    playing: boolean;
+    get efContext(): ControllableInterface | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+    handleClick: () => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-play": EFPlay;
+    }
+}
+export {};

package/dist/gui/EFPlay.js

@@ -0,0 +1,59 @@
+import { playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { efContext } from "./efContext.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+attachContextRoot();
+var EFPlay = class EFPlay$1 extends TargetOrContextMixin(LitElement, efContext) {
+	constructor(..._args) {
+		super(..._args);
+		this.playing = false;
+		this.handleClick = () => {
+			if (this.efContext) this.efContext.play();
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      div {
+        all: inherit;
+      }
+    `];
+	}
+	get efContext() {
+		return this.effectiveContext;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this.handleClick);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("playing")) this.style.display = this.playing ? "none" : "";
+	}
+	render() {
+		return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([consume({
+	context: playingContext,
+	subscribe: true
+}), state()], EFPlay.prototype, "playing", void 0);
+EFPlay = __decorate([customElement("ef-play")], EFPlay);
+export { EFPlay };

package/dist/gui/EFPreview.d.ts

@@ -3,6 +3,10 @@ declare const EFPreview_base: (new (...args: any[]) => import('./ContextMixin.js
 export declare class EFPreview extends EFPreview_base {
     static styles: import('lit').CSSResult[];
     focusedElement?: HTMLElement;
+    /**
+     * Find the closest temporal element (timegroup, video, audio, etc.)
+     */
+    private findClosestTemporal;
     constructor();
     render(): import('lit-html').TemplateResult<1>;
 }