@editframe/elements 0.11.0-beta.1 → 0.11.0-beta.10

package/dist/EF_FRAMEGEN.d.ts

@@ -3,12 +3,12 @@ declare global {
     interface Window {
         EF_FRAMEGEN?: EfFramegen;
         FRAMEGEN_BRIDGE?: {
-            onInitialize: (callback: (renderId: string, renderOptions: VideoRenderOptions) => void) => void;
-            initialized(renderId: string): void;
-            onBeginFrame(callback: (renderId: string, frameNumber: number, isLast: boolean) => void): void;
+            onInitialize: (callback: (renderOptions: VideoRenderOptions) => void) => void;
+            initialized(): void;
+            onBeginFrame(callback: (frameNumber: number, isLast: boolean) => void): void;
             onTriggerCanvas(callback: () => void): void;
-            frameReady(renderId: string, frameNumber: number, audioSamples: ArrayBuffer): void;
-            error(renderId: string, error: Error): void;
+            frameReady(frameNumber: number, audioSamples: ArrayBuffer): void;
+            error(error: Error): void;
         };
     }
 }
@@ -25,19 +25,12 @@ export declare class EfFramegen {
     audioBufferPromise?: Promise<AudioBuffer>;
     renderOptions?: VideoRenderOptions;
     frameBox: HTMLDivElement;
-    BRIDGE: {
-        onInitialize: (callback: (renderId: string, renderOptions: VideoRenderOptions) => void) => void;
-        initialized(renderId: string): void;
-        onBeginFrame(callback: (renderId: string, frameNumber: number, isLast: boolean) => void): void;
-        onTriggerCanvas(callback: () => void): void;
-        frameReady(renderId: string, frameNumber: number, audioSamples: ArrayBuffer): void;
-        error(renderId: string, error: Error): void;
-    } | undefined;
+    BRIDGE: typeof window.FRAMEGEN_BRIDGE;
     triggerCanvas: TriggerCanvas;
     trace(...args: any[]): void;
     constructor();
     connectToBridge(): void;
-    initialize(renderId: string, renderOptions: VideoRenderOptions): Promise<void>;
-    beginFrame(renderId: string, frameNumber: number, isLast: boolean): Promise<string | ArrayBuffer | null | undefined>;
+    initialize(renderOptions: VideoRenderOptions): Promise<void>;
+    beginFrame(frameNumber: number, isLast: boolean): Promise<string | ArrayBuffer | null | undefined>;
 }
 export {};

package/dist/elements/EFMedia.d.ts

@@ -1,8 +1,8 @@
-import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
+import { LitElement, PropertyValueMap } from 'lit';
 import { TrackFragmentIndex, TrackSegment } from '../../../assets/src/index.ts';
-import { MP4File } from '../../../assets/src/MP4File.ts';
 import { VideoAsset } from '../../../assets/src/EncodedAsset.ts';
+import { MP4File } from '../../../assets/src/MP4File.ts';
 import type * as MP4Box from "mp4box";
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
 declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;

package/dist/elements/EFTemporal.browsertest.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare class TestTemporal extends TestTemporal_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-temporal": TestTemporal;
+    }
+}
+export {};

package/dist/elements/EFTemporal.d.ts

@@ -8,6 +8,16 @@ export declare class TemporalMixinInterface {
     get hasOwnDuration(): boolean;
     get trimStartMs(): number;
     get trimEndMs(): number;
+    set trimStartMs(value: number);
+    set trimEndMs(value: number);
+    set trimstart(value: string);
+    set trimend(value: string);
+    get sourceInMs(): number;
+    get sourceOutMs(): number;
+    set sourceInMs(value: number);
+    set sourceOutMs(value: number);
+    set sourcein(value: string);
+    set sourceout(value: string);
     get durationMs(): number;
     get startTimeMs(): number;
     get startTimeWithinParentMs(): number;
@@ -16,8 +26,6 @@ export declare class TemporalMixinInterface {
     get trimAdjustedOwnCurrentTimeMs(): number;
     set duration(value: string);
     get duration(): string;
-    set trimstart(value: string);
-    set trimend(value: string);
     parentTimegroup?: EFTimegroup;
     rootTimegroup?: EFTimegroup;
     frameTask: Task<readonly unknown[], unknown>;

package/dist/elements/EFTimegroup.browsertest.d.ts

@@ -1,4 +1,7 @@
 import { LitElement } from 'lit';
+declare const TestContext_base: (new (...args: any[]) => import('../gui/ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare class TestContext extends TestContext_base {
+}
 declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {
     get hasOwnDuration(): boolean;
@@ -6,6 +9,7 @@ declare class TestTemporal extends TestTemporal_base {
 declare global {
     interface HTMLElementTagNameMap {
         "test-temporal": TestTemporal;
+        "test-context": TestContext;
     }
 }
 export {};

package/dist/elements/EFTimegroup.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
+import { LitElement, PropertyValueMap } from 'lit';
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
 declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFTimegroup extends EFTimegroup_base {
@@ -20,6 +20,17 @@ export declare class EFTimegroup extends EFTimegroup_base {
     waitForMediaDurations(): Promise<Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex>[]>;
     get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    get contextProvider(): (ParentNode & import('../gui/ContextMixin.ts').ContextMixinInterface) | null;
+    /**
+     * Returns true if the timegroup should be wrapped with a workbench.
+     *
+     * A timegroup should be wrapped with a workbench if it is the root-most timegroup
+     * and EF_INTERACTIVE is true.
+     *
+     * If the timegroup is already wrappedin a context provider like ef-preview,
+     * it should NOT be wrapped in a workbench.
+     *
+     */
     shouldWrapWithWorkbench(): boolean;
     wrapWithWorkbench(): void;
     get hasOwnDuration(): boolean;

package/dist/elements/EFWaveform.d.ts

@@ -1,11 +1,11 @@
 import { EFAudio } from './EFAudio.ts';
-import { LitElement } from 'lit';
-import { EFVideo } from './EFVideo.ts';
 import { Task } from '@lit/task';
+import { LitElement } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
+import { EFVideo } from './EFVideo.ts';
 declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFWaveform extends EFWaveform_base {
-    static styles: never[];
+    static styles: import('lit').CSSResult[];
     svgRef: Ref<SVGElement>;
     createRenderRoot(): this;
     render(): import('lit-html').TemplateResult<1>;

package/dist/elements/durationConverter.d.ts

@@ -10,3 +10,7 @@ export declare const imageDurationConverter: {
     fromAttribute: (value: string) => number;
     toAttribute: (value: number) => string;
 };
+export declare const sourceDurationConverter: {
+    fromAttribute: (value: string) => number;
+    toAttribute: (value: number) => string;
+};

package/dist/elements/src/EF_FRAMEGEN.js

@@ -1,8 +1,6 @@
-import debug from "debug";
 import { TaskStatus } from "@lit/task";
 import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.js";
 import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
-const log = debug("ef:elements:EF_FRAMEGEN");
 class TriggerCanvas {
   constructor() {
     this.canvas = document.createElement("canvas");
@@ -23,7 +21,7 @@ class TriggerCanvas {
     this.ctx.fillStyle = "black";
   }
   trigger() {
-    log("TRIGGERING CANVAS");
+    console.log("TRIGGERING CANVAS");
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
 }
@@ -33,9 +31,10 @@ class EfFramegen {
     this.frameDurationMs = 0;
     this.initialBusyTasks = Promise.resolve([]);
     this.frameBox = document.createElement("div");
-    this.BRIDGE = window.FRAMEGEN_BRIDGE;
     this.triggerCanvas = new TriggerCanvas();
+    this.BRIDGE = window.FRAMEGEN_BRIDGE;
     if (this.BRIDGE) {
+      console.log("BRIDGE.constructor (connecting to bridge)");
       this.connectToBridge();
     }
   }
@@ -47,27 +46,28 @@ class EfFramegen {
     if (!BRIDGE) {
       throw new Error("No BRIDGE when attempting to connect to bridge");
     }
-    BRIDGE.onInitialize(async (renderId, renderOptions) => {
-      log("BRIDGE.onInitialize", renderId, renderOptions);
-      await this.initialize(renderId, renderOptions);
-      BRIDGE.initialized(renderId);
+    console.log("BRIDGE.connectToBridge");
+    BRIDGE.onInitialize(async (renderOptions) => {
+      console.log("BRIDGE.onInitialize", renderOptions);
+      await this.initialize(renderOptions);
+      BRIDGE.initialized();
     });
-    BRIDGE.onBeginFrame((renderId, frameNumber, isLast) => {
-      log("BRIDGE.onBeginFrame", renderId, frameNumber, isLast);
-      this.beginFrame(renderId, frameNumber, isLast);
+    BRIDGE.onBeginFrame((frameNumber, isLast) => {
+      console.log("BRIDGE.onBeginFrame", frameNumber, isLast);
+      this.beginFrame(frameNumber, isLast);
     });
   }
-  async initialize(renderId, renderOptions) {
+  async initialize(renderOptions) {
     addEventListener("unhandledrejection", (event) => {
       this.trace("Unhandled rejection:", event.reason);
       if (this.BRIDGE) {
-        this.BRIDGE.error(renderId, event.reason);
+        this.BRIDGE.error(event.reason);
       }
     });
     addEventListener("error", (event) => {
       this.trace("Uncaught error", event.error);
       if (this.BRIDGE) {
-        this.BRIDGE.error(renderId, event.error);
+        this.BRIDGE.error(event.error);
       }
     });
     this.renderOptions = renderOptions;
@@ -107,9 +107,9 @@ class EfFramegen {
       // renderOptions.encoderOptions.fromMs,
       // renderOptions.encoderOptions.toMs,
     );
-    log("Initialized");
+    console.log("Initialized");
   }
-  async beginFrame(renderId, frameNumber, isLast) {
+  async beginFrame(frameNumber, isLast) {
     if (this.renderOptions === void 0) {
       throw new Error("No renderOptions");
     }
@@ -132,18 +132,20 @@ class EfFramegen {
     }
     this.time = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
     firstGroup.currentTimeMs = this.time;
-    log("Awaiting initialBusyTasks");
+    console.log("Awaiting initialBusyTasks");
     await this.initialBusyTasks;
-    log("Awaiting microtask");
+    console.log("Awaiting microtask");
     await new Promise(queueMicrotask);
-    log("Awaiting frame tasks");
+    console.log("Awaiting frame tasks");
     const now = performance.now();
     await Promise.all(
       temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => {
         return temporal.frameTask;
       }).map((task) => task.taskComplete)
     );
-    log(`frame:${frameNumber} All tasks complete ${performance.now() - now}ms`);
+    console.log(
+      `frame:${frameNumber} All tasks complete ${performance.now() - now}ms`
+    );
     if (isLast && this.audioBufferPromise) {
       const renderedAudio = await this.audioBufferPromise;
       const channelCount = renderedAudio.numberOfChannels;
@@ -160,11 +162,7 @@ class EfFramegen {
       }
       if (this.BRIDGE) {
         this.triggerCanvas.trigger();
-        this.BRIDGE.frameReady(
-          renderId,
-          frameNumber,
-          interleavedSamples.buffer
-        );
+        this.BRIDGE.frameReady(frameNumber, interleavedSamples.buffer);
       } else {
         const fileReader = new FileReader();
         fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));
@@ -177,7 +175,7 @@ class EfFramegen {
     } else {
       if (this.BRIDGE) {
         this.triggerCanvas.trigger();
-        this.BRIDGE.frameReady(renderId, frameNumber, new ArrayBuffer(0));
+        this.BRIDGE.frameReady(frameNumber, new ArrayBuffer(0));
       } else {
         const fileReader = new FileReader();
         fileReader.readAsDataURL(new Blob([]));

package/dist/elements/src/elements/EFImage.js

@@ -2,10 +2,10 @@ import { Task } from "@lit/task";
 import { html, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { FetchMixin } from "./FetchMixin.js";
-import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
+import { FetchMixin } from "./FetchMixin.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -90,11 +90,7 @@ EFImage.styles = [
         display: block;
       }
       canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-        object-position: center;
+        all: inherit
       }
     `
 ];

package/dist/elements/src/elements/EFMedia.js

@@ -1,18 +1,18 @@
-import { css, LitElement } from "lit";
-import { property, state } from "lit/decorators.js";
-import { deepArrayEquals } from "@lit/task/deep-equals.js";
-import { Task } from "@lit/task";
 import { consume } from "@lit/context";
+import { Task } from "@lit/task";
+import { deepArrayEquals } from "@lit/task/deep-equals.js";
 import debug from "debug";
-import { MP4File } from "../../../assets/src/MP4File.js";
+import { css, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
 import { VideoAsset } from "../../../assets/src/EncodedAsset.js";
+import { MP4File } from "../../../assets/src/MP4File.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
+import { apiHostContext } from "../gui/apiHostContext.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
-import { EFSourceMixin } from "./EFSourceMixin.js";
 import { getStartTimeMs } from "./util.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { apiHostContext } from "../gui/apiHostContext.js";
-import { EF_RENDERING } from "../EF_RENDERING.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -291,6 +291,18 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (durations.length === 0) {
       return 0;
     }
+    if (this.sourceInMs && this.sourceOutMs && this.sourceOutMs > this.sourceInMs) {
+      return Math.max(this.sourceOutMs - this.sourceInMs);
+    }
+    if (this.sourceInMs) {
+      return Math.max(...durations) - this.trimStartMs - this.trimEndMs - this.sourceInMs;
+    }
+    if (this.sourceOutMs) {
+      return Math.max(...durations) - this.trimStartMs - this.trimEndMs - this.sourceOutMs;
+    }
+    if (this.sourceInMs && this.sourceOutMs) {
+      return Math.max(...durations) - this.trimStartMs - this.trimEndMs - this.sourceOutMs - this.sourceInMs;
+    }
     return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
   get startTimeMs() {
@@ -298,6 +310,12 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   }
   #audioContext;
   async fetchAudioSpanningTime(fromMs, toMs) {
+    if (this.sourceInMs) {
+      fromMs -= this.startTimeMs - this.trimStartMs - this.sourceInMs;
+    }
+    if (this.sourceOutMs) {
+      toMs -= this.startTimeMs - this.trimStartMs - this.sourceOutMs;
+    }
     fromMs -= this.startTimeMs - this.trimStartMs;
     toMs -= this.startTimeMs - this.trimStartMs;
     await this.trackFragmentIndexLoader.taskComplete;

package/dist/elements/src/elements/EFTemporal.js

@@ -1,8 +1,8 @@
 import { createContext, consume } from "@lit/context";
 import { property, state } from "lit/decorators.js";
-import { durationConverter } from "./durationConverter.js";
 import { Task } from "@lit/task";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { durationConverter } from "./durationConverter.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -115,12 +115,78 @@ const EFTemporal = (superClass) => {
     get parentTimegroup() {
       return this.#parentTimegroup;
     }
+    set duration(value) {
+      if (value !== void 0) {
+        this.setAttribute("duration", value);
+      } else {
+        this.removeAttribute("duration");
+      }
+    }
     get trimStartMs() {
       return this._trimStartMs;
     }
+    set trimStartMs(value) {
+      this._trimStartMs = value;
+      this.setAttribute(
+        "trimstart",
+        durationConverter.toAttribute(value / 1e3)
+      );
+    }
+    set trimstart(value) {
+      if (value !== void 0) {
+        this.setAttribute("trimstart", value);
+      } else {
+        this.removeAttribute("trimstart");
+      }
+    }
     get trimEndMs() {
       return this._trimEndMs;
     }
+    set trimEndMs(value) {
+      this._trimEndMs = value;
+      this.setAttribute("trimend", durationConverter.toAttribute(value / 1e3));
+    }
+    set trimend(value) {
+      if (value !== void 0) {
+        this.setAttribute("trimend", value);
+      } else {
+        this.removeAttribute("trimend");
+      }
+    }
+    get sourceInMs() {
+      return this._sourceInMs;
+    }
+    set sourceInMs(value) {
+      this._sourceInMs = value;
+      value !== void 0 ? this.setAttribute(
+        "sourcein",
+        durationConverter.toAttribute(value / 1e3)
+      ) : this.removeAttribute("sourcein");
+    }
+    set sourcein(value) {
+      if (value !== void 0) {
+        this.setAttribute("sourcein", value);
+      } else {
+        this.removeAttribute("sourcein");
+      }
+    }
+    get sourceOutMs() {
+      return this._sourceOutMs;
+    }
+    set sourceOutMs(value) {
+      this._sourceOutMs = value;
+      value !== void 0 ? this.setAttribute(
+        "sourceout",
+        durationConverter.toAttribute(value / 1e3)
+      ) : this.removeAttribute("sourceout");
+    }
+    set sourceout(value) {
+      if (value !== void 0) {
+        this.setAttribute("sourceout", value);
+      } else {
+        this.removeAttribute("sourceout");
+      }
+    }
     get startOffsetMs() {
       return this._startOffsetMs;
     }
@@ -137,6 +203,12 @@ const EFTemporal = (superClass) => {
     // Defining this as a getter to a private property allows us to
     // override it classes that include this mixin.
     get durationMs() {
+      if (this.sourceInMs) {
+        return this._durationMs || this.parentTimegroup?.durationMs || 0 - this.sourceInMs;
+      }
+      if (this.sourceOutMs) {
+        return this._durationMs || this.parentTimegroup?.durationMs || 0 - this.sourceOutMs;
+      }
       return this._durationMs || this.parentTimegroup?.durationMs || 0;
     }
     get offsetMs() {
@@ -214,6 +286,15 @@ const EFTemporal = (superClass) => {
      */
     get trimAdjustedOwnCurrentTimeMs() {
       if (this.rootTimegroup) {
+        if (this.sourceInMs && this.sourceOutMs) {
+          return Math.min(
+            Math.max(
+              0,
+              this.rootTimegroup.currentTimeMs - this.startTimeMs + this.trimStartMs + this.sourceInMs
+            ),
+            this.durationMs + Math.abs(this.startOffsetMs) + this.trimStartMs + this.sourceInMs
+          );
+        }
         return Math.min(
           Math.max(
             0,
@@ -249,14 +330,30 @@ const EFTemporal = (superClass) => {
       attribute: "trimstart",
       converter: durationConverter
     })
-  ], TemporalMixinClass.prototype, "_trimStartMs", 2);
+  ], TemporalMixinClass.prototype, "trimStartMs", 1);
   __decorateClass([
     property({
       type: Number,
       attribute: "trimend",
       converter: durationConverter
     })
-  ], TemporalMixinClass.prototype, "_trimEndMs", 2);
+  ], TemporalMixinClass.prototype, "trimEndMs", 1);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "sourcein",
+      converter: durationConverter,
+      reflect: true
+    })
+  ], TemporalMixinClass.prototype, "sourceInMs", 1);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "sourceout",
+      converter: durationConverter,
+      reflect: true
+    })
+  ], TemporalMixinClass.prototype, "sourceOutMs", 1);
   __decorateClass([
     property({
       type: Number,

package/dist/elements/src/elements/EFTimegroup.js

@@ -1,12 +1,13 @@
-import { html, css, LitElement } from "lit";
 import { provide } from "@lit/context";
 import { Task } from "@lit/task";
-import { property, customElement } from "lit/decorators.js";
 import debug from "debug";
-import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
-import { TimegroupController } from "./TimegroupController.js";
+import { html, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { isContextMixin } from "../gui/ContextMixin.js";
 import { deepGetMediaElements } from "./EFMedia.js";
+import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
+import { TimegroupController } from "./TimegroupController.js";
 import { durationConverter } from "./durationConverter.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -212,8 +213,28 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       }
     }
   }
+  get contextProvider() {
+    let parent = this.parentNode;
+    while (parent) {
+      if (isContextMixin(parent)) {
+        return parent;
+      }
+      parent = parent.parentNode;
+    }
+    return null;
+  }
+  /**
+   * Returns true if the timegroup should be wrapped with a workbench.
+   *
+   * A timegroup should be wrapped with a workbench if it is the root-most timegroup
+   * and EF_INTERACTIVE is true.
+   *
+   * If the timegroup is already wrappedin a context provider like ef-preview,
+   * it should NOT be wrapped in a workbench.
+   *
+   */
   shouldWrapWithWorkbench() {
-    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-workbench") === null && this.closest("ef-preview") === null;
+    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.contextProvider === null;
   }
   wrapWithWorkbench() {
     const workbench = document.createElement("ef-workbench");

package/dist/elements/src/elements/EFVideo.js

@@ -1,9 +1,9 @@
-import { css, html } from "lit";
 import { Task } from "@lit/task";
-import { createRef, ref } from "lit/directives/ref.js";
+import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { EFMedia } from "./EFMedia.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { TWMixin } from "../gui/TWMixin.js";
+import { EFMedia } from "./EFMedia.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -85,10 +85,7 @@ let EFVideo = class extends TWMixin(EFMedia) {
     });
   }
   render() {
-    return html` <canvas
-      class="h-full w-full object-fill"
-      ${ref(this.canvasRef)}
-    ></canvas>`;
+    return html` <canvas ${ref(this.canvasRef)}></canvas>`;
   }
   get canvasElement() {
     return this.canvasRef.value;
@@ -100,6 +97,9 @@ EFVideo.styles = [
       :host {
         display: block;
       }
+      canvas {
+        all: inherit;
+      }
     `
 ];
 EFVideo = __decorateClass([

package/dist/elements/src/elements/EFWaveform.js

@@ -1,14 +1,14 @@
 import { EFAudio } from "./EFAudio.js";
-import { html, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo.js";
-import { EFTemporal } from "./EFTemporal.js";
-import { CrossUpdateController } from "./CrossUpdateController.js";
-import { TWMixin } from "../gui/TWMixin.js";
 import { Task } from "@lit/task";
 import * as d3 from "d3";
+import { html, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { TWMixin } from "../gui/TWMixin.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { EFVideo } from "./EFVideo.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -38,7 +38,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     return this;
   }
   render() {
-    return html` <svg ${ref(this.svgRef)} class="h-full w-full" store></svg> `;
+    return html` <svg ${ref(this.svgRef)} store></svg> `;
   }
   set target(value) {
     this.targetSelector = value;
@@ -205,7 +205,13 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 };
-EFWaveform.styles = [];
+EFWaveform.styles = [
+  css`
+      svg {
+        all: inherit;
+      }
+    `
+];
 __decorateClass([
   property({
     type: String,