@editframe/elements 0.15.0-beta.10 → 0.15.0-beta.12

package/dist/elements/EFMedia.d.ts

@@ -19,7 +19,7 @@ export declare class EFMedia extends EFMedia_base {
     get assetId(): string | null;
     fragmentIndexPath(): string;
     fragmentTrackPath(trackId: string): string;
-    trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex>>;
+    trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex> | undefined>;
     initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
         trackId: string;
         buffer: MP4Box.MP4ArrayBuffer;

package/dist/elements/EFMedia.js

@@ -70,8 +70,13 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
     this.trackFragmentIndexLoader = new Task(this, {
       args: () => [this.fragmentIndexPath(), this.fetch],
       task: async ([fragmentIndexPath, fetch], { signal }) => {
-        const response = await fetch(fragmentIndexPath, { signal });
-        return await response.json();
+        try {
+          const response = await fetch(fragmentIndexPath, { signal });
+          return await response.json();
+        } catch (error) {
+          log("Failed to load track fragment index", error);
+          return void 0;
+        }
       },
       onComplete: () => {
         this.requestUpdate("ownCurrentTimeMs");

package/dist/elements/EFTimegroup.d.ts

@@ -27,7 +27,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
      * that caused issues with constructing audio data. We had negative durations
      * in calculations and it was not clear why.
      */
-    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex>[]>;
+    waitForMediaDurations(): Promise<(Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex> | undefined)[]>;
     get childTemporals(): import('./EFTemporal.js').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private updateAnimations;

package/dist/getRenderInfo.d.ts

@@ -0,0 +1,51 @@
+import { z } from 'zod';
+export declare const RenderInfo: z.ZodObject<{
+    width: z.ZodNumber;
+    height: z.ZodNumber;
+    fps: z.ZodNumber;
+    durationMs: z.ZodNumber;
+    assets: z.ZodObject<{
+        efMedia: z.ZodRecord<z.ZodString, z.ZodAny>;
+        efCaptions: z.ZodArray<z.ZodString, "many">;
+        efImage: z.ZodArray<z.ZodString, "many">;
+    }, "strip", z.ZodTypeAny, {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    }, {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    }>;
+}, "strip", z.ZodTypeAny, {
+    width: number;
+    height: number;
+    fps: number;
+    durationMs: number;
+    assets: {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    };
+}, {
+    width: number;
+    height: number;
+    fps: number;
+    durationMs: number;
+    assets: {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    };
+}>;
+export declare const getRenderInfo: () => Promise<{
+    width: number;
+    height: number;
+    fps: number;
+    durationMs: number;
+    assets: {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    };
+}>;

package/dist/getRenderInfo.js

@@ -0,0 +1,72 @@
+import { z } from "zod";
+const RenderInfo = z.object({
+  width: z.number().positive(),
+  height: z.number().positive(),
+  fps: z.number().positive(),
+  durationMs: z.number().positive(),
+  assets: z.object({
+    efMedia: z.record(z.any()),
+    efCaptions: z.array(z.string()),
+    efImage: z.array(z.string())
+  })
+});
+const getRenderInfo = async () => {
+  const rootTimeGroup = document.querySelector("ef-timegroup");
+  if (!rootTimeGroup) {
+    throw new Error("No ef-timegroup found");
+  }
+  console.error("Waiting for media durations", rootTimeGroup);
+  await rootTimeGroup.waitForMediaDurations();
+  const width = rootTimeGroup.clientWidth;
+  const height = rootTimeGroup.clientHeight;
+  const fps = 30;
+  const durationMs = Math.round(rootTimeGroup.durationMs);
+  const elements = document.querySelectorAll(
+    "ef-audio, ef-video, ef-image, ef-captions"
+  );
+  const assets = {
+    efMedia: {},
+    efCaptions: /* @__PURE__ */ new Set(),
+    efImage: /* @__PURE__ */ new Set()
+  };
+  for (const element of elements) {
+    switch (element.tagName) {
+      case "EF-AUDIO":
+      case "EF-VIDEO": {
+        const src = element.src;
+        console.error("Processing element", element.tagName, src);
+        assets.efMedia[src] = element.trackFragmentIndexLoader.value;
+        break;
+      }
+      case "EF-IMAGE": {
+        const src = element.src;
+        console.error("Processing element", element.tagName, src);
+        assets.efImage.add(src);
+        break;
+      }
+      case "EF-CAPTIONS": {
+        const src = element.targetElement?.src;
+        console.error("Processing element", element.tagName, src);
+        assets.efCaptions.add(src);
+        break;
+      }
+    }
+  }
+  const renderInfo = {
+    width,
+    height,
+    fps,
+    durationMs,
+    assets: {
+      efMedia: assets.efMedia,
+      efCaptions: Array.from(assets.efCaptions),
+      efImage: Array.from(assets.efImage)
+    }
+  };
+  console.error("Render info", renderInfo);
+  return renderInfo;
+};
+export {
+  RenderInfo,
+  getRenderInfo
+};

package/dist/gui/TWMixin.js

@@ -18,13 +18,21 @@ function TWMixin(Base) {
           "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment"
         );
       }
+      const constructorStylesheets = [];
+      const constructorStyles = "styles" in this.constructor && this.constructor.styles || [];
+      for (const item of constructorStyles) {
+        if (item.styleSheet) {
+          constructorStylesheets.push(item.styleSheet);
+        }
+      }
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,
-          ...renderRoot.adoptedStyleSheets
+          ...renderRoot.adoptedStyleSheets,
+          ...constructorStylesheets
         ];
       } else {
-        renderRoot.adoptedStyleSheets = [twSheet];
+        renderRoot.adoptedStyleSheets = [twSheet, ...constructorStylesheets];
       }
       return renderRoot;
     }

package/dist/index.d.ts

@@ -14,3 +14,4 @@ export { EFToggleLoop } from './gui/EFToggleLoop.js';
 export { EFScrubber } from './gui/EFScrubber.js';
 export { EFTimeDisplay } from './gui/EFTimeDisplay.js';
 export { EFFocusOverlay } from './gui/EFFocusOverlay.js';
+export { getRenderInfo, RenderInfo } from './getRenderInfo.js';

package/dist/index.js

@@ -16,6 +16,7 @@ import { EFScrubber } from "./gui/EFScrubber.js";
 import { EFTimeDisplay } from "./gui/EFTimeDisplay.js";
 import { EFFocusOverlay } from "./gui/EFFocusOverlay.js";
 import "./EF_FRAMEGEN.js";
+import { RenderInfo, getRenderInfo } from "./getRenderInfo.js";
 if (typeof window !== "undefined") {
   window.EF_REGISTERED = true;
 }
@@ -38,5 +39,7 @@ export {
   EFTogglePlay,
   EFVideo,
   EFWaveform,
-  EFWorkbench
+  EFWorkbench,
+  RenderInfo,
+  getRenderInfo
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.15.0-beta.10",
+  "version": "0.15.0-beta.12",
   "description": "",
   "exports": {
     ".": {
@@ -27,13 +27,14 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.15.0-beta.10",
+    "@editframe/assets": "0.15.0-beta.12",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",
     "debug": "^4.3.5",
     "lit": "^3.1.4",
-    "mp4box": "^0.5.2"
+    "mp4box": "^0.5.2",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/elements/EFMedia.ts

@@ -126,8 +126,14 @@ export class EFMedia extends EFTargetable(
   public trackFragmentIndexLoader = new Task(this, {
     args: () => [this.fragmentIndexPath(), this.fetch] as const,
     task: async ([fragmentIndexPath, fetch], { signal }) => {
-      const response = await fetch(fragmentIndexPath, { signal });
-      return (await response.json()) as Record<number, TrackFragmentIndex>;
+      try {
+        const response = await fetch(fragmentIndexPath, { signal });
+
+        return (await response.json()) as Record<number, TrackFragmentIndex>;
+      } catch (error) {
+        log("Failed to load track fragment index", error);
+        return undefined;
+      }
     },
     onComplete: () => {
       this.requestUpdate("ownCurrentTimeMs");

package/src/gui/TWMixin.ts

@@ -1,4 +1,4 @@
-import type { LitElement } from "lit";
+import type { CSSResult, LitElement } from "lit";
 // @ts-expect-error cannot figure out how to declare this module as a string
 import twStyle from "./TWMixin.css?inline";
 
@@ -21,13 +21,26 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
           "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment",
         );
       }
+
+      const constructorStylesheets: CSSStyleSheet[] = [];
+      const constructorStyles = (("styles" in this.constructor &&
+        this.constructor.styles) ||
+        []) as CSSResult[];
+
+      for (const item of constructorStyles) {
+        if (item.styleSheet) {
+          constructorStylesheets.push(item.styleSheet);
+        }
+      }
+
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,
           ...renderRoot.adoptedStyleSheets,
+          ...constructorStylesheets,
         ];
       } else {
-        renderRoot.adoptedStyleSheets = [twSheet];
+        renderRoot.adoptedStyleSheets = [twSheet, ...constructorStylesheets];
       }
       return renderRoot;
     }