@editframe/elements 0.16.7-beta.0 → 0.17.6-beta.0

package/src/elements/EFWaveform.ts

@@ -1,8 +1,8 @@
 import { CSSStyleObserver } from "@bramus/style-observer";
 import { Task } from "@lit/task";
-import { LitElement, type PropertyValueMap, css, html } from "lit";
+import { css, html, LitElement, type PropertyValueMap } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { type Ref, createRef, ref } from "lit/directives/ref.js";
+import { createRef, type Ref, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { TWMixin } from "../gui/TWMixin.js";
@@ -38,7 +38,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   private mutationObserver?: MutationObserver;
 
   render() {
-    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
+    return html`<canvas ${ref(this.canvasRef)}></canvas><div class="text-5xl inline-block bg-red-500">`;
   }
 
   @property({
@@ -78,7 +78,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
       if (this.targetElement) {
         new CrossUpdateController(this.targetElement, this);
       }
-    } catch (e) {
+    } catch (_error) {
       // TODO: determine if this is a critical error, or if we should just ignore it
       // currenty evidence suggests everything still works
       // no target element, no cross update controller

package/src/elements/MediaController.ts

@@ -0,0 +1,108 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+import { JitTranscodingClient } from "../JitTranscodingClient.ts";
+
+export class MediaController implements ReactiveController {
+  #src: string | null = null;
+  #assetId: string | null = null;
+
+  constructor(
+    private host: ReactiveControllerHost & {
+      src: string;
+      assetId: string | null;
+      mode: "asset" | "jit-transcode" | "auto";
+    },
+  ) {
+    this.host.addController(this);
+  }
+
+  get mode() {
+    const actualMode = this.host.mode;
+    if (actualMode === "asset" || actualMode === "jit-transcode") {
+      return actualMode;
+    }
+
+    if (this.host.assetId) {
+      return "asset";
+    }
+
+    if (!this.host.src) {
+      return "asset";
+    }
+
+    if (JitTranscodingClient.isJitTranscodeEligible(this.host.src)) {
+      return "jit-transcode";
+    }
+
+    return "asset";
+  }
+
+  get src() {
+    return this.#src;
+  }
+
+  set src(value: string | null) {
+    if (this.#src !== value) {
+      this.trackUpdate("src", this.#src, value);
+      this.#src = value;
+    }
+  }
+
+  get assetId() {
+    return this.#assetId;
+  }
+  set assetId(value: string | null) {
+    if (this.#assetId !== value) {
+      this.trackUpdate("assetId", this.#assetId, value);
+      this.#assetId = value;
+    }
+  }
+
+  changes: Map<string, { oldValue: any; newValue: any }> | null = null;
+  updatePending = false;
+
+  trackUpdate(key: string, oldValue: any, newValue: any) {
+    this.changes ??= new Map<string, { oldValue: any; newValue: any }>();
+    this.changes.set(key, { oldValue, newValue });
+    if (!this.updatePending) {
+      this.updatePending = true;
+      queueMicrotask(() => {
+        this.endUpdate();
+      });
+    }
+  }
+
+  endUpdate() {
+    try {
+      if (this.changes) {
+        this.handleUpdate(this.changes);
+      }
+    } finally {
+      this.changes = null;
+      this.updatePending = false;
+    }
+  }
+
+  handleUpdate(changes: Map<string, { oldValue: any; newValue: any }>) {
+    if (changes.has("src") || changes.has("assetId") || changes.has("mode")) {
+      console.log("SRC/ASSETID/MODE changed");
+    }
+  }
+
+  hostUpdated(): void {
+    this.src = this.host.src;
+    this.assetId = this.host.assetId;
+  }
+
+  hostConnected() {
+    this.src = this.host.src;
+    this.assetId = this.host.assetId;
+  }
+
+  hostDisconnected() {
+    console.log("hostDisconnected");
+  }
+
+  updated() {
+    console.log("updated");
+  }
+}

package/src/elements/printTaskStatus.ts

@@ -0,0 +1,16 @@
+import { TaskStatus } from "@lit/task";
+
+export const printTaskStatus = (status: TaskStatus) => {
+  switch (status) {
+    case TaskStatus.INITIAL:
+      return "INITIAL";
+    case TaskStatus.ERROR:
+      return "ERROR";
+    case TaskStatus.PENDING:
+      return "PENDING";
+    case TaskStatus.COMPLETE:
+      return "COMPLETE";
+    default:
+      return "UNKNOWN";
+  }
+};

package/src/elements/updateAnimations.ts

@@ -24,6 +24,12 @@ export const updateAnimations = (
     return;
   }
   element.style.display = "";
+
+  // Check if getAnimations is available (Web Animations API - not available in Node.js)
+  if (typeof element.getAnimations !== "function") {
+    return;
+  }
+
   const animations = element.getAnimations({ subtree: true });
   element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
   element.style.setProperty(

package/src/gui/TWMixin.ts

@@ -3,9 +3,16 @@ import type { CSSResult, LitElement } from "lit";
 import twStyle from "./TWMixin.css?inline";
 
 let twSheet: CSSStyleSheet | null = null;
-if (typeof window !== "undefined") {
-  twSheet = new CSSStyleSheet();
-  twSheet.replaceSync(twStyle);
+if (typeof window !== "undefined" && typeof CSSStyleSheet !== "undefined") {
+  try {
+    twSheet = new CSSStyleSheet();
+    if (typeof twSheet.replaceSync === "function") {
+      twSheet.replaceSync(twStyle);
+    }
+  } catch (_error) {
+    // CSSStyleSheet or replaceSync not supported in this environment
+    twSheet = null;
+  }
 }
 export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
   class TWElement extends Base {