@editframe/elements 0.15.0-beta.19 → 0.15.0-beta.20

package/dist/EF_FRAMEGEN.js

@@ -136,6 +136,7 @@ class EfFramegen {
     await new Promise(queueMicrotask);
     console.log("Awaiting frame tasks");
     const now = performance.now();
+    console.log("HTML", document.body.innerHTML);
     await Promise.all(
       temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => {
         return temporal.frameTask;

package/dist/elements/EFMedia.js

@@ -80,8 +80,11 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
         }
       },
       onComplete: () => {
+        this.requestUpdate("intrinsicDurationMs");
         this.requestUpdate("ownCurrentTimeMs");
+        console.log("Requesting update for durationMs", this, this.rootTimegroup);
         this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
+        this.rootTimegroup?.requestUpdate("durationMs");
       }
     });
     this.initSegmentsLoader = new Task(this, {

package/dist/getRenderInfo.d.ts

@@ -20,8 +20,8 @@ export declare const RenderInfo: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     width: number;
     height: number;
-    fps: number;
     durationMs: number;
+    fps: number;
     assets: {
         efMedia: Record<string, any>;
         efCaptions: string[];
@@ -30,8 +30,8 @@ export declare const RenderInfo: z.ZodObject<{
 }, {
     width: number;
     height: number;
-    fps: number;
     durationMs: number;
+    fps: number;
     assets: {
         efMedia: Record<string, any>;
         efCaptions: string[];

package/dist/gui/EFFitScale.d.ts

@@ -14,7 +14,9 @@ export declare class EFFitScale extends LitElement {
         contentWidth: number;
         contentHeight: number;
     };
+    scaleLastSetOn: HTMLElement | null;
     setScale: () => void;
+    removeScale: () => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/gui/EFFitScale.js

@@ -18,6 +18,7 @@ let EFFitScale = class extends LitElement {
     this.contentRef = createRef();
     this.uniqueId = Math.random().toString(36).substring(2, 15);
     this.scale = 1;
+    this.scaleLastSetOn = null;
     this.setScale = () => {
       if (this.isConnected) {
         const { scale } = this.scaleInfo;
@@ -30,15 +31,28 @@ let EFFitScale = class extends LitElement {
           const scaledHeight = unscaledHeight * scale;
           const translateX = (containerRect.width - scaledWidth) / 2;
           const translateY = (containerRect.height - scaledHeight) / 2;
+          if (this.scaleLastSetOn !== this.contentChild) {
+            this.removeScale();
+          }
           Object.assign(this.contentChild.style, {
             transform: `translate(${translateX.toFixed(4)}px, ${translateY.toFixed(4)}px) scale(${scale.toFixed(4)})`,
             transformOrigin: "top left"
           });
           this.scale = scale;
+          this.scaleLastSetOn = this.contentChild;
         }
         this.animationFrameId = requestAnimationFrame(this.setScale);
       }
     };
+    this.removeScale = () => {
+      if (this.scaleLastSetOn) {
+        Object.assign(this.scaleLastSetOn.style, {
+          transform: "",
+          transformOrigin: ""
+        });
+        this.scaleLastSetOn = null;
+      }
+    };
   }
   createRenderRoot() {
     Object.assign(this.style, {

package/dist/gui/EFWorkbench.js

@@ -61,7 +61,7 @@ let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
     }
   }
   render() {
-    if (this.rendering) {
+    if (this.rendering || typeof window !== "undefined" && window.FRAMEGEN_BRIDGE) {
       return html`
         <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
       `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.15.0-beta.19",
+  "version": "0.15.0-beta.20",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.15.0-beta.19",
+    "@editframe/assets": "0.15.0-beta.20",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFMedia.ts

@@ -137,8 +137,11 @@ export class EFMedia extends EFTargetable(
       }
     },
     onComplete: () => {
+      this.requestUpdate("intrinsicDurationMs");
       this.requestUpdate("ownCurrentTimeMs");
+      console.log("Requesting update for durationMs", this, this.rootTimegroup);
       this.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
+      this.rootTimegroup?.requestUpdate("durationMs");
     },
   });
 

package/src/gui/ContextMixin.ts

@@ -129,9 +129,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @property({ type: Boolean, reflect: true })
     loop = false;
 
-    // @state()
-    // private stageScale = 1;
-
     @property({ type: Boolean })
     rendering = false;
 

package/src/gui/EFFitScale.ts

@@ -87,6 +87,8 @@ export class EFFitScale extends LitElement {
     };
   }
 
+  scaleLastSetOn: HTMLElement | null = null;
+
   setScale = () => {
     if (this.isConnected) {
       const { scale } = this.scaleInfo;
@@ -101,6 +103,11 @@ export class EFFitScale extends LitElement {
         const translateX = (containerRect.width - scaledWidth) / 2;
         const translateY = (containerRect.height - scaledHeight) / 2;
 
+        // In the rare event that the content child is changed, we need to remove the scale
+        // because we don't want to have a scale on the old content child that is somewhere else in the DOM
+        if (this.scaleLastSetOn !== this.contentChild) {
+          this.removeScale();
+        }
         // Use toFixed to avoid floating point precision issues
         // this will update every frame with sub-pixel changes if we don't pin it down
         Object.assign(this.contentChild.style, {
@@ -108,11 +115,22 @@ export class EFFitScale extends LitElement {
           transformOrigin: "top left",
         });
         this.scale = scale;
+        this.scaleLastSetOn = this.contentChild;
       }
       this.animationFrameId = requestAnimationFrame(this.setScale);
     }
   };
 
+  removeScale = () => {
+    if (this.scaleLastSetOn) {
+      Object.assign(this.scaleLastSetOn.style, {
+        transform: "",
+        transformOrigin: "",
+      });
+      this.scaleLastSetOn = null;
+    }
+  };
+
   connectedCallback(): void {
     super.connectedCallback();
     this.animationFrameId = requestAnimationFrame(this.setScale);

package/src/gui/EFWorkbench.ts

@@ -71,7 +71,12 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
   };
 
   render() {
-    if (this.rendering) {
+    // TODO: this.rendering is not correctly set when using the framegen bridge
+    // so to hack we're checking for the existence of the framegen bridge on the window
+    if (
+      this.rendering ||
+      (typeof window !== "undefined" && window.FRAMEGEN_BRIDGE)
+    ) {
       return html`
         <slot class="fixed inset-0 h-full w-full" name="canvas"></slot>
       `;