@editframe/elements 0.11.0-beta.8 → 0.11.0-beta.9

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/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/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) => {
@@ -100,6 +100,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,

package/dist/elements/src/gui/EFFilmstrip.js

@@ -74,16 +74,29 @@ class FilmstripItem extends TWMixin(LitElement) {
     return this.element && this.focusContext?.focusedElement === this.element;
   }
   get gutterStyles() {
+    if (this.element.sourceInMs || this.element.sourceOutMs) {
+      return {
+        position: "relative",
+        left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
+        width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`
+      };
+    }
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`
+      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
+      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`
     };
   }
   get trimPortionStyles() {
+    if (this.element.sourceInMs || this.element.sourceOutMs) {
+      return {
+        width: `${this.pixelsPerMs * this.element.durationMs}px`,
+        left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`
+      };
+    }
     return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`
+      left: `${this.pixelsPerMs * this.element.trimStartMs}px`
     };
   }
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.11.0-beta.8",
+  "version": "0.11.0-beta.9",
   "description": "",
   "exports": {
     ".": {
@@ -20,7 +20,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.11.0-beta.8",
+    "@editframe/assets": "0.11.0-beta.9",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFImage.ts

@@ -1,11 +1,11 @@
 import { Task } from "@lit/task";
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { FetchMixin } from "./FetchMixin.ts";
-import { EFSourceMixin } from "./EFSourceMixin.ts";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 import { EF_RENDERING } from "../EF_RENDERING.ts";
+import { EFSourceMixin } from "./EFSourceMixin.ts";
+import { FetchMixin } from "./FetchMixin.ts";
 
 @customElement("ef-image")
 export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
@@ -17,11 +17,7 @@ export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {
         display: block;
       }
       canvas {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-        object-position: center;
+        all: inherit
       }
     `,
   ];

package/src/elements/EFVideo.ts

@@ -1,10 +1,10 @@
-import { html, css } 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 { createRef, ref } from "lit/directives/ref.js";
 
-import { EFMedia } from "./EFMedia.ts";
 import { TWMixin } from "../gui/TWMixin.ts";
+import { EFMedia } from "./EFMedia.ts";
 
 @customElement("ef-video")
 export class EFVideo extends TWMixin(EFMedia) {
@@ -13,10 +13,12 @@ export class EFVideo extends TWMixin(EFMedia) {
       :host {
         display: block;
       }
+      canvas {
+        all: inherit;
+      }
     `,
   ];
   canvasRef = createRef<HTMLCanvasElement>();
-
   render() {
     return html` <canvas
       class="h-full w-full object-fill"

package/src/elements/EFWaveform.ts

@@ -1,27 +1,32 @@
 import { EFAudio } from "./EFAudio.ts";
 
-import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo.ts";
-import { EFTemporal } from "./EFTemporal.ts";
-import { CrossUpdateController } from "./CrossUpdateController.ts";
-import { TWMixin } from "../gui/TWMixin.ts";
 import { Task } from "@lit/task";
 import * as d3 from "d3";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { TWMixin } from "../gui/TWMixin.ts";
+import { CrossUpdateController } from "./CrossUpdateController.ts";
+import { EFTemporal } from "./EFTemporal.ts";
+import { EFVideo } from "./EFVideo.ts";
 
 @customElement("ef-waveform")
 export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
-  static styles = [];
+  static styles = [
+    css`
+      svg {
+        all: inherit;
+      }
+    `,
+  ];
   svgRef: Ref<SVGElement> = createRef();
   createRenderRoot() {
     return this;
   }
   render() {
-    return html` <svg ${ref(this.svgRef)} class="h-full w-full" store></svg> `;
+    return html` <svg ${ref(this.svgRef)} store></svg> `;
   }
-
   @property({
     type: String,
     attribute: "mode",

package/src/gui/EFFilmstrip.ts

@@ -87,17 +87,30 @@ class FilmstripItem extends TWMixin(LitElement) {
   pixelsPerMs = 0.04;
 
   get gutterStyles() {
+    if (this.element.sourceInMs || this.element.sourceOutMs) {
+      return {
+        position: "relative",
+        left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
+        width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`,
+      };
+    }
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`,
+      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
+      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`,
     };
   }
 
   get trimPortionStyles() {
+    if (this.element.sourceInMs || this.element.sourceOutMs) {
+      return {
+        width: `${this.pixelsPerMs * this.element.durationMs}px`,
+        left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`,
+      };
+    }
     return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`,
+      left: `${this.pixelsPerMs * this.element.trimStartMs}px`,
     };
   }