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

package/src/elements/EFVideo.ts

@@ -1,11 +1,12 @@
 import { Task } from "@lit/task";
+import { context, trace } from "@opentelemetry/api";
 import debug from "debug";
 import { css, html, type PropertyValueMap } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-
 import { DelayedLoadingState } from "../DelayedLoadingState.js";
 import { TWMixin } from "../gui/TWMixin.js";
+import { withSpan, withSpanSync } from "../otel/tracingHelpers.js";
 import { makeScrubVideoBufferTask } from "./EFMedia/videoTasks/makeScrubVideoBufferTask.ts";
 import { makeScrubVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.ts";
 import { makeScrubVideoInputTask } from "./EFMedia/videoTasks/makeScrubVideoInputTask.ts";
@@ -203,11 +204,40 @@ export class EFVideo extends TWMixin(EFMedia) {
       console.error("frameTask error", error);
     },
     onComplete: () => {},
-    task: async ([_desiredSeekTimeMs]) => {
-      this.unifiedVideoSeekTask.run();
-      await this.unifiedVideoSeekTask.taskComplete;
-      this.paintTask.run();
-      await this.paintTask.taskComplete;
+    task: async ([_desiredSeekTimeMs], { signal }) => {
+      const t0 = performance.now();
+
+      await withSpan(
+        "video.frameTask",
+        {
+          elementId: this.id || "unknown",
+          desiredSeekTimeMs: _desiredSeekTimeMs,
+          src: this.src || "none",
+        },
+        undefined,
+        async (span) => {
+          const t1 = performance.now();
+          span.setAttribute("preworkMs", t1 - t0);
+
+          this.unifiedVideoSeekTask.run();
+          const t2 = performance.now();
+          span.setAttribute("seekRunMs", t2 - t1);
+
+          await this.unifiedVideoSeekTask.taskComplete;
+          const t3 = performance.now();
+          span.setAttribute("seekAwaitMs", t3 - t2);
+          if (signal.aborted) {
+            span.setAttribute("aborted", true);
+            return;
+          }
+
+          const t4 = performance.now();
+          this.paint(_desiredSeekTimeMs, span);
+          const t5 = performance.now();
+          span.setAttribute("paintMs", t5 - t4);
+          span.setAttribute("totalFrameMs", t5 - t0);
+        },
+      );
     },
   });
 
@@ -244,64 +274,92 @@ export class EFVideo extends TWMixin(EFMedia) {
     };
   }
 
-  paintTask = new Task(this, {
-    autoRun: false,
-    args: () => [this.desiredSeekTimeMs] as const,
-    onError: (error) => {
-      console.error("paintTask error", error);
-    },
-    onComplete: () => {},
-    task: async ([_seekToMs], { signal }) => {
-      // Check if we're in production rendering mode vs preview mode
-      const isProductionRendering = this.isInProductionRenderingMode();
-
-      // Unified video system: smart routing to scrub or main, with background upgrades
-      try {
-        await this.unifiedVideoSeekTask.taskComplete;
-        const videoSample = this.unifiedVideoSeekTask.value;
-
-        if (videoSample) {
-          const videoFrame = videoSample.toVideoFrame();
-          try {
-            this.displayFrame(videoFrame, _seekToMs);
-          } finally {
-            videoFrame.close();
+  /**
+   * Paint the current video frame to canvas
+   * Called by frameTask after seek is complete
+   */
+  paint(seekToMs: number, parentSpan?: any): void {
+    const parentContext = parentSpan
+      ? trace.setSpan(context.active(), parentSpan)
+      : undefined;
+
+    withSpanSync(
+      "video.paint",
+      {
+        elementId: this.id || "unknown",
+        seekToMs,
+        src: this.src || "none",
+      },
+      parentContext,
+      (span) => {
+        const t0 = performance.now();
+
+        // Check if we're in production rendering mode vs preview mode
+        const isProductionRendering = this.isInProductionRenderingMode();
+        const t1 = performance.now();
+        span.setAttribute("isProductionRendering", isProductionRendering);
+        span.setAttribute("modeCheckMs", t1 - t0);
+
+        // Unified video system: smart routing to scrub or main, with background upgrades
+        // Note: frameTask guarantees unifiedVideoSeekTask is complete before calling paint
+        try {
+          const t2 = performance.now();
+          const videoSample = this.unifiedVideoSeekTask.value;
+          span.setAttribute("hasVideoSample", !!videoSample);
+          span.setAttribute("valueAccessMs", t2 - t1);
+
+          if (videoSample) {
+            const t3 = performance.now();
+            const videoFrame = videoSample.toVideoFrame();
+            const t4 = performance.now();
+            span.setAttribute("toVideoFrameMs", t4 - t3);
+
+            try {
+              const t5 = performance.now();
+              this.displayFrame(videoFrame, seekToMs, span);
+              const t6 = performance.now();
+              span.setAttribute("displayFrameMs", t6 - t5);
+            } finally {
+              videoFrame.close();
+            }
           }
+        } catch (error) {
+          console.warn("Unified video pipeline error:", error);
         }
-      } catch (error) {
-        console.warn("Unified video pipeline error:", error);
-      }
 
-      // EF_FRAMEGEN-aware rendering mode detection
-      if (!isProductionRendering) {
-        // Preview mode: skip rendering during initialization to prevent artifacts
-        if (
-          !this.rootTimegroup ||
-          (this.rootTimegroup.currentTimeMs === 0 &&
-            this.desiredSeekTimeMs === 0)
-        ) {
-          return; // Skip initialization frame in preview mode
-        }
-        // Preview mode: proceed with rendering
-      } else {
-        // Production rendering mode: only render when EF_FRAMEGEN has explicitly started frame rendering
-        // This prevents initialization frames before the actual render sequence begins
-        if (!this.rootTimegroup) {
-          return;
-        }
+        // EF_FRAMEGEN-aware rendering mode detection
+        if (!isProductionRendering) {
+          // Preview mode: skip rendering during initialization to prevent artifacts
+          if (
+            !this.rootTimegroup ||
+            (this.rootTimegroup.currentTimeMs === 0 &&
+              this.desiredSeekTimeMs === 0)
+          ) {
+            span.setAttribute("skipped", "preview-initialization");
+            return; // Skip initialization frame in preview mode
+          }
+          // Preview mode: proceed with rendering
+        } else {
+          // Production rendering mode: only render when EF_FRAMEGEN has explicitly started frame rendering
+          // This prevents initialization frames before the actual render sequence begins
+          if (!this.rootTimegroup) {
+            span.setAttribute("skipped", "no-root-timegroup");
+            return;
+          }
 
-        if (!this.isFrameRenderingActive()) {
-          return; // Wait for EF_FRAMEGEN to start frame sequence
-        }
+          if (!this.isFrameRenderingActive()) {
+            span.setAttribute("skipped", "frame-rendering-not-active");
+            return; // Wait for EF_FRAMEGEN to start frame sequence
+          }
 
-        // Production mode: EF_FRAMEGEN has started frame sequence, proceed with rendering
-      }
+          // Production mode: EF_FRAMEGEN has started frame sequence, proceed with rendering
+        }
 
-      if (signal.aborted) {
-        return;
-      }
-    },
-  });
+        const tEnd = performance.now();
+        span.setAttribute("totalPaintMs", tEnd - t0);
+      },
+    );
+  }
 
   /**
    * Clear the canvas when element becomes inactive
@@ -318,54 +376,98 @@ export class EFVideo extends TWMixin(EFMedia) {
   /**
    * Display a video frame on the canvas
    */
-  displayFrame(frame: VideoFrame, seekToMs: number): number {
-    log("trace: displayFrame start", { seekToMs, frameFormat: frame.format });
-    if (!this.canvasElement) {
-      log("trace: displayFrame aborted - no canvas element");
-      throw new Error(
-        `Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`,
-      );
-    }
-
-    const ctx = this.canvasElement.getContext("2d");
-    if (!ctx) {
-      log("trace: displayFrame aborted - no canvas context");
-      throw new Error(
-        `Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`,
-      );
-    }
+  displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void {
+    const parentContext = parentSpan
+      ? trace.setSpan(context.active(), parentSpan)
+      : undefined;
+
+    withSpanSync(
+      "video.displayFrame",
+      {
+        elementId: this.id || "unknown",
+        seekToMs,
+        format: frame.format || "unknown",
+        width: frame.codedWidth,
+        height: frame.codedHeight,
+      },
+      parentContext,
+      (span) => {
+        const t0 = performance.now();
 
-    if (frame?.codedWidth && frame?.codedHeight) {
-      if (
-        this.canvasElement.width !== frame.codedWidth ||
-        this.canvasElement.height !== frame.codedHeight
-      ) {
-        log("trace: updating canvas dimensions", {
-          width: frame.codedWidth,
-          height: frame.codedHeight,
+        log("trace: displayFrame start", {
+          seekToMs,
+          frameFormat: frame.format,
         });
-        this.canvasElement.width = frame.codedWidth;
-        this.canvasElement.height = frame.codedHeight;
-      }
-    }
 
-    if (frame.format === null) {
-      log("trace: displayFrame aborted - null frame format");
-      throw new Error(
-        `Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`,
-      );
-    }
+        if (!this.canvasElement) {
+          log("trace: displayFrame aborted - no canvas element");
+          throw new Error(
+            `Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`,
+          );
+        }
+        const t1 = performance.now();
+        span.setAttribute("getCanvasMs", Math.round((t1 - t0) * 100) / 100);
+
+        const ctx = this.canvasElement.getContext("2d");
+        const t2 = performance.now();
+        span.setAttribute("getCtxMs", Math.round((t2 - t1) * 100) / 100);
+
+        if (!ctx) {
+          log("trace: displayFrame aborted - no canvas context");
+          throw new Error(
+            `Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`,
+          );
+        }
 
-    ctx.drawImage(
-      frame,
-      0,
-      0,
-      this.canvasElement.width,
-      this.canvasElement.height,
-    );
-    log("trace: frame drawn to canvas", { seekToMs });
+        let resized = false;
+        if (frame?.codedWidth && frame?.codedHeight) {
+          if (
+            this.canvasElement.width !== frame.codedWidth ||
+            this.canvasElement.height !== frame.codedHeight
+          ) {
+            log("trace: updating canvas dimensions", {
+              width: frame.codedWidth,
+              height: frame.codedHeight,
+            });
+            this.canvasElement.width = frame.codedWidth;
+            this.canvasElement.height = frame.codedHeight;
+            resized = true;
+            const t3 = performance.now();
+            span.setAttribute("resizeMs", Math.round((t3 - t2) * 100) / 100);
+          }
+        }
+        span.setAttribute("canvasResized", resized);
+
+        if (frame.format === null) {
+          log("trace: displayFrame aborted - null frame format");
+          throw new Error(
+            `Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`,
+          );
+        }
 
-    return seekToMs;
+        const tDrawStart = performance.now();
+        ctx.drawImage(
+          frame,
+          0,
+          0,
+          this.canvasElement.width,
+          this.canvasElement.height,
+        );
+        const tDrawEnd = performance.now();
+        span.setAttribute(
+          "drawImageMs",
+          Math.round((tDrawEnd - tDrawStart) * 100) / 100,
+        );
+        span.setAttribute(
+          "totalDisplayMs",
+          Math.round((tDrawEnd - t0) * 100) / 100,
+        );
+        span.setAttribute("canvasWidth", this.canvasElement.width);
+        span.setAttribute("canvasHeight", this.canvasElement.height);
+
+        log("trace: frame drawn to canvas", { seekToMs });
+      },
+    );
   }
 
   /**

package/src/otel/BridgeSpanExporter.ts

@@ -0,0 +1,150 @@
+import { type ExportResult, ExportResultCode } from "@opentelemetry/core";
+import type { ReadableSpan, SpanExporter } from "@opentelemetry/sdk-trace-base";
+
+function toHex(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    return value
+      .map((b) => {
+        const byte = typeof b === "number" ? b : 0;
+        return byte.toString(16).padStart(2, "0");
+      })
+      .join("");
+  }
+  if (ArrayBuffer.isView(value)) {
+    return Array.from(value as Uint8Array)
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
+  }
+  return String(value);
+}
+
+interface OtlpAttributeValue {
+  stringValue?: string;
+  intValue?: number;
+  doubleValue?: number;
+  boolValue?: boolean;
+  arrayValue?: { values: OtlpAttributeValue[] };
+}
+
+function convertAttribute(value: unknown): OtlpAttributeValue {
+  if (typeof value === "string") return { stringValue: value };
+  if (typeof value === "number")
+    return Number.isInteger(value)
+      ? { intValue: value }
+      : { doubleValue: value };
+  if (typeof value === "boolean") return { boolValue: value };
+  if (Array.isArray(value))
+    return { arrayValue: { values: value.map(convertAttribute) } };
+  return { stringValue: String(value) };
+}
+
+interface BridgeWithSpanExport {
+  exportSpans?: (endpoint: string, payload: string) => void;
+}
+
+export class BridgeSpanExporter implements SpanExporter {
+  private bridge: BridgeWithSpanExport;
+  private endpoint: string;
+
+  constructor(bridge: BridgeWithSpanExport, endpoint: string) {
+    this.bridge = bridge;
+    this.endpoint = endpoint;
+  }
+
+  export(
+    spans: ReadableSpan[],
+    resultCallback: (result: ExportResult) => void,
+  ): void {
+    if (!this.bridge?.exportSpans) {
+      resultCallback({ code: ExportResultCode.FAILED });
+      return;
+    }
+
+    try {
+      const otlpPayload = {
+        resourceSpans: [
+          {
+            resource: {
+              attributes: Object.entries(
+                spans[0]?.resource?.attributes || {},
+              ).map(([key, value]) => ({
+                key,
+                value: convertAttribute(value),
+              })),
+            },
+            scopeSpans: [
+              {
+                scope: {
+                  name: "telecine-browser",
+                  version: "1.0.0",
+                },
+                spans: spans.map((span) => {
+                  const ctx = span.spanContext();
+                  return {
+                    traceId: toHex(ctx.traceId),
+                    spanId: toHex(ctx.spanId),
+                    parentSpanId: span.parentSpanId
+                      ? toHex(span.parentSpanId)
+                      : undefined,
+                    name: span.name,
+                    kind: span.kind,
+                    startTimeUnixNano: String(
+                      span.startTime[0] * 1_000_000_000 + span.startTime[1],
+                    ),
+                    endTimeUnixNano: String(
+                      span.endTime[0] * 1_000_000_000 + span.endTime[1],
+                    ),
+                    attributes: Object.entries(span.attributes).map(
+                      ([key, value]) => ({
+                        key,
+                        value: convertAttribute(value),
+                      }),
+                    ),
+                    status: span.status,
+                    events: span.events.map((event) => ({
+                      timeUnixNano: String(
+                        event.time[0] * 1_000_000_000 + event.time[1],
+                      ),
+                      name: event.name,
+                      attributes: Object.entries(event.attributes || {}).map(
+                        ([key, value]) => ({
+                          key,
+                          value: convertAttribute(value),
+                        }),
+                      ),
+                    })),
+                    links: span.links.map((link) => ({
+                      traceId: toHex(link.context.traceId),
+                      spanId: toHex(link.context.spanId),
+                      attributes: Object.entries(link.attributes || {}).map(
+                        ([key, value]) => ({
+                          key,
+                          value: convertAttribute(value),
+                        }),
+                      ),
+                    })),
+                  };
+                }),
+              },
+            ],
+          },
+        ],
+      };
+
+      const serializedPayload = JSON.stringify(otlpPayload);
+
+      this.bridge.exportSpans(this.endpoint, serializedPayload);
+      resultCallback({ code: ExportResultCode.SUCCESS });
+    } catch (error) {
+      resultCallback({
+        code: ExportResultCode.FAILED,
+        error: error instanceof Error ? error : new Error(String(error)),
+      });
+    }
+  }
+
+  shutdown(): Promise<void> {
+    return Promise.resolve();
+  }
+}

package/src/otel/setupBrowserTracing.ts

@@ -0,0 +1,68 @@
+import { ZoneContextManager } from "@opentelemetry/context-zone";
+import { Resource } from "@opentelemetry/resources";
+import {
+  BatchSpanProcessor,
+  SimpleSpanProcessor,
+} from "@opentelemetry/sdk-trace-base";
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+import { BridgeSpanExporter } from "./BridgeSpanExporter.js";
+
+let isInitialized = false;
+let provider: WebTracerProvider | null = null;
+
+interface BridgeWithSpanExport {
+  exportSpans?: (endpoint: string, payload: string) => void;
+}
+
+export interface BrowserTracingConfig {
+  otelEndpoint: string;
+  serviceName?: string;
+  bridge?: BridgeWithSpanExport;
+  useBatching?: boolean;
+}
+
+export function setupBrowserTracing(config: BrowserTracingConfig): void {
+  if (isInitialized) {
+    return;
+  }
+
+  try {
+    if (!config.bridge) {
+      throw new Error("Bridge is required for browser tracing");
+    }
+
+    const exporter = new BridgeSpanExporter(config.bridge, config.otelEndpoint);
+
+    // Use batching to reduce overhead (spans exported in groups rather than one-by-one)
+    const spanProcessor = config.useBatching
+      ? new BatchSpanProcessor(exporter, {
+          maxQueueSize: 100,
+          maxExportBatchSize: 10,
+          scheduledDelayMillis: 500,
+        })
+      : new SimpleSpanProcessor(exporter);
+
+    provider = new WebTracerProvider({
+      resource: new Resource({
+        [ATTR_SERVICE_NAME]: config.serviceName || "telecine-browser",
+      }),
+      spanProcessors: [spanProcessor],
+    });
+
+    // Register with ZoneContextManager for browser context propagation
+    // ZoneContextManager includes zone.js for async context tracking
+    provider.register({
+      contextManager: new ZoneContextManager(),
+    });
+
+    isInitialized = true;
+  } catch (error) {
+    console.error("Failed to initialize browser tracing:", error);
+    throw error;
+  }
+}
+
+export function isBrowserTracingInitialized(): boolean {
+  return isInitialized;
+}