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

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/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/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,8 +310,8 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   }
   #audioContext;
   async fetchAudioSpanningTime(fromMs, toMs) {
-    fromMs -= this.startTimeMs - this.trimStartMs;
-    toMs -= this.startTimeMs - this.trimStartMs;
+    fromMs -= this.startTimeMs - this.trimStartMs - this.sourceInMs;
+    toMs -= this.startTimeMs - this.trimStartMs - this.sourceOutMs;
     await this.trackFragmentIndexLoader.taskComplete;
     const audioTrackId = this.defaultAudioTrackId;
     if (!audioTrackId) {

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) => {
@@ -118,9 +118,68 @@ const EFTemporal = (superClass) => {
     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 +196,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 +279,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 +323,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/gui/EFFilmstrip.js

@@ -1,19 +1,19 @@
+import { consume } from "@lit/context";
 import { css, html, nothing, LitElement } from "lit";
 import { property, customElement, state, eventOptions } from "lit/decorators.js";
-import { consume } from "@lit/context";
-import { styleMap } from "lit/directives/style-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { EFImage } from "../elements/EFImage.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { EFAudio } from "../elements/EFAudio.js";
-import { EFVideo } from "../elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
-import { EFWaveform } from "../elements/EFWaveform.js";
+import { EFImage } from "../elements/EFImage.js";
 import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { EFVideo } from "../elements/EFVideo.js";
+import { EFWaveform } from "../elements/EFWaveform.js";
 import { TimegroupController } from "../elements/TimegroupController.js";
-import { TWMixin } from "./TWMixin.js";
 import { msToTimeCode } from "../msToTimeCode.js";
-import { focusedElementContext } from "./focusedElementContext.js";
+import { TWMixin } from "./TWMixin.js";
 import { focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
 import { playingContext, loopContext } from "./playingContext.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -76,14 +76,14 @@ class FilmstripItem extends TWMixin(LitElement) {
   get gutterStyles() {
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`
+      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`
     };
   }
   get trimPortionStyles() {
     return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * this.element.trimStartMs}px`
+      left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`
     };
   }
   render() {

package/dist/gui/EFFilmstrip.d.ts

@@ -1,9 +1,9 @@
-import { LitElement, nothing, TemplateResult, ReactiveController, PropertyValueMap } from 'lit';
-import { EFImage } from '../elements/EFImage.ts';
+import { LitElement, PropertyValueMap, ReactiveController, TemplateResult, nothing } from 'lit';
 import { EFAudio } from '../elements/EFAudio.ts';
-import { EFVideo } from '../elements/EFVideo.ts';
-import { EFTimegroup } from '../elements/EFTimegroup.ts';
+import { EFImage } from '../elements/EFImage.ts';
 import { TemporalMixinInterface } from '../elements/EFTemporal.ts';
+import { EFTimegroup } from '../elements/EFTimegroup.ts';
+import { EFVideo } from '../elements/EFVideo.ts';
 import { TimegroupController } from '../elements/TimegroupController.ts';
 import { FocusContext } from './focusContext.ts';
 declare class ElementFilmstripController implements ReactiveController {

package/package.json

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

package/src/elements/EFMedia.browsertest.ts

@@ -1,9 +1,12 @@
-import { describe, expect, test, beforeEach, afterEach } from "vitest";
-import { v4 } from "uuid";
 import { customElement } from "lit/decorators.js";
+import { v4 } from "uuid";
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import { EFMedia } from "./EFMedia.ts";
 import "../gui/EFWorkbench.ts";
 import "../gui/EFPreview.ts";
+import { createTestFragmentIndex } from "TEST/createTestFragmentIndex.ts";
+import { useMockWorker } from "TEST/useMockWorker.ts";
+import { http, HttpResponse } from "msw";
 
 @customElement("test-media")
 class TestMedia extends EFMedia {}
@@ -15,6 +18,8 @@ declare global {
 }
 
 describe("EFMedia", () => {
+  const worker = useMockWorker();
+
   test("should be defined", () => {
     const element = document.createElement("test-media");
     expect(element.tagName).toBe("TEST-MEDIA");
@@ -107,4 +112,228 @@ describe("EFMedia", () => {
       );
     });
   });
+
+  describe("calculating duration", () => {
+    test("Computes duration from track fragment index", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+
+      const preview = document.createElement("ef-preview");
+      preview.appendChild(element);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(10_000);
+    });
+    test("Computes duration from track fragment index sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "1s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(9_000);
+      expect(timegroup.durationMs).toBe(9_000);
+    });
+    test("Computes duration from track fragment index sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "6s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(4_000);
+      expect(timegroup.durationMs).toBe(4_000);
+    });
+    test("Computes duration from track fragment index sourceout", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourceout = "6s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(4_000);
+      expect(timegroup.durationMs).toBe(4_000);
+    });
+    test("Computes duration from track fragment index sourceout", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourceout = "5s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(5_000);
+      expect(timegroup.durationMs).toBe(5_000);
+    });
+    test("Computes duration from track fragment index sourceout and sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "1s";
+      element.sourceout = "5s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(4_000);
+      expect(timegroup.durationMs).toBe(4_000);
+    });
+    test("Computes duration from track fragment index sourceout and sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "9s";
+      element.sourceout = "10s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(1_000);
+      expect(timegroup.durationMs).toBe(1_000);
+    });
+  });
 });

package/src/elements/EFMedia.ts

@@ -1,22 +1,22 @@
+import { consume } from "@lit/context";
+import { Task } from "@lit/task";
+import { deepArrayEquals } from "@lit/task/deep-equals.js";
+import debug from "debug";
 import { LitElement, type PropertyValueMap, css } from "lit";
 import { property, state } from "lit/decorators.js";
-import { deepArrayEquals } from "@lit/task/deep-equals.js";
-import { Task } from "@lit/task";
 import type * as MP4Box from "mp4box";
-import { consume } from "@lit/context";
-import debug from "debug";
 
 import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
 
-import { MP4File } from "@editframe/assets/MP4File.js";
 import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
+import { MP4File } from "@editframe/assets/MP4File.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { EF_RENDERING } from "../EF_RENDERING.ts";
+import { apiHostContext } from "../gui/apiHostContext.ts";
+import { EFSourceMixin } from "./EFSourceMixin.ts";
 import { EFTemporal } from "./EFTemporal.ts";
 import { FetchMixin } from "./FetchMixin.ts";
-import { EFSourceMixin } from "./EFSourceMixin.ts";
 import { getStartTimeMs } from "./util.ts";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { apiHostContext } from "../gui/apiHostContext.ts";
-import { EF_RENDERING } from "../EF_RENDERING.ts";
 
 const log = debug("ef:elements:EFMedia");
 
@@ -321,6 +321,38 @@ export 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;
   }
 
@@ -362,8 +394,8 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
   async fetchAudioSpanningTime(fromMs: number, toMs: number) {
     // Adjust range for track's own time
-    fromMs -= this.startTimeMs - this.trimStartMs;
-    toMs -= this.startTimeMs - this.trimStartMs;
+    fromMs -= this.startTimeMs - this.trimStartMs - this.sourceInMs;
+    toMs -= this.startTimeMs - this.trimStartMs - this.sourceOutMs;
 
     await this.trackFragmentIndexLoader.taskComplete;
     const audioTrackId = this.defaultAudioTrackId;

package/src/elements/EFTemporal.browsertest.ts

@@ -0,0 +1,65 @@
+import { LitElement } from "lit";
+import { customElement } from "lit/decorators/custom-element.js";
+import { describe, expect, test } from "vitest";
+import { EFTemporal } from "./EFTemporal.ts";
+
+@customElement("test-temporal")
+class TestTemporal extends EFTemporal(LitElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-temporal": TestTemporal;
+  }
+}
+
+describe("sourcein and sourceout", () => {
+  test("sourcein and sourceout are parsed correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.setAttribute("sourcein", "1s");
+    element.setAttribute("sourceout", "5s");
+    expect(element.sourceInMs).toBe(1_000);
+    expect(element.sourceOutMs).toBe(5_000);
+  });
+
+  test("sourcein and sourceout can be set directly on the element", () => {
+    const element = document.createElement("test-temporal");
+    element.sourcein = "1s";
+    element.sourceout = "5s";
+    expect(element.sourceInMs).toBe(1_000);
+    expect(element.sourceOutMs).toBe(5_000);
+  });
+
+  test("sourcein and sourceout are reflected correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.sourceInMs = 1_000;
+    element.sourceOutMs = 5_000;
+    expect(element.getAttribute("sourcein")).toBe("1s");
+    expect(element.getAttribute("sourceout")).toBe("5s");
+  });
+});
+
+describe("trimstart and trimend", () => {
+  test("trimstart and trimend attributes are parsed correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.setAttribute("trimstart", "1s");
+    element.setAttribute("trimend", "5s");
+    expect(element.trimStartMs).toBe(1_000);
+    expect(element.trimEndMs).toBe(5_000);
+  });
+
+  test("trimstart and trimend properties are reflected correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.trimStartMs = 1_000;
+    element.trimEndMs = 5_000;
+    expect(element.getAttribute("trimstart")).toBe("1s");
+    expect(element.getAttribute("trimend")).toBe("5s");
+  });
+
+  test("trimstart and trimend can be set directly on the element", () => {
+    const element = document.createElement("test-temporal");
+    element.trimstart = "1s";
+    element.trimend = "5s";
+    expect(element.trimStartMs).toBe(1_000);
+    expect(element.trimEndMs).toBe(5_000);
+  });
+});

package/src/elements/EFTemporal.ts

@@ -1,11 +1,11 @@
-import type { LitElement, ReactiveController } from "lit";
 import { consume, createContext } from "@lit/context";
+import type { LitElement, ReactiveController } from "lit";
 import { property, state } from "lit/decorators.js";
 import type { EFTimegroup } from "./EFTimegroup.ts";
 
-import { durationConverter } from "./durationConverter.ts";
 import { Task } from "@lit/task";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { durationConverter } from "./durationConverter.ts";
 
 export const timegroupContext = createContext<EFTimegroup>(
   Symbol("timeGroupContext"),
@@ -15,6 +15,19 @@ 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;
@@ -24,8 +37,6 @@ export declare class TemporalMixinInterface {
 
   set duration(value: string);
   get duration(): string;
-  set trimstart(value: string);
-  set trimend(value: string);
 
   parentTimegroup?: EFTimegroup;
   rootTimegroup?: EFTimegroup;
@@ -158,25 +169,104 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     })
     private _durationMs?: number;
 
+    private _trimStartMs = 0;
     @property({
       type: Number,
       attribute: "trimstart",
       converter: durationConverter,
     })
-    private _trimStartMs = 0;
     public get trimStartMs(): number {
       return this._trimStartMs;
     }
+    public set trimStartMs(value: number) {
+      this._trimStartMs = value;
+      this.setAttribute(
+        "trimstart",
+        durationConverter.toAttribute(value / 1000),
+      );
+    }
+    set trimstart(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("trimstart", value);
+      } else {
+        this.removeAttribute("trimstart");
+      }
+    }
 
+    private _trimEndMs = 0;
     @property({
       type: Number,
       attribute: "trimend",
       converter: durationConverter,
     })
-    private _trimEndMs = 0;
     public get trimEndMs(): number {
       return this._trimEndMs;
     }
+    public set trimEndMs(value: number) {
+      this._trimEndMs = value;
+      this.setAttribute("trimend", durationConverter.toAttribute(value / 1000));
+    }
+    set trimend(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("trimend", value);
+      } else {
+        this.removeAttribute("trimend");
+      }
+    }
+
+    private _sourceInMs: number | undefined;
+    @property({
+      type: Number,
+      attribute: "sourcein",
+      converter: durationConverter,
+      reflect: true,
+    })
+    get sourceInMs(): number | undefined {
+      return this._sourceInMs;
+    }
+    set sourceInMs(value: number | undefined) {
+      this._sourceInMs = value;
+      value !== undefined
+        ? this.setAttribute(
+            "sourcein",
+            durationConverter.toAttribute(value / 1000),
+          )
+        : this.removeAttribute("sourcein");
+    }
+    set sourcein(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("sourcein", value);
+      } else {
+        this.removeAttribute("sourcein");
+      }
+    }
+
+    private _sourceOutMs: number | undefined;
+    @property({
+      type: Number,
+      attribute: "sourceout",
+      converter: durationConverter,
+      reflect: true,
+    })
+    get sourceOutMs(): number | undefined {
+      return this._sourceOutMs;
+    }
+    set sourceOutMs(value: number | undefined) {
+      this._sourceOutMs = value;
+      value !== undefined
+        ? this.setAttribute(
+            "sourceout",
+            durationConverter.toAttribute(value / 1000),
+          )
+        : this.removeAttribute("sourceout");
+    }
+    set sourceout(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("sourceout", value);
+      } else {
+        this.removeAttribute("sourceout");
+      }
+    }
 
     @property({
       type: Number,
@@ -207,6 +297,20 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     // 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;
     }
 
@@ -297,6 +401,21 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
      */
     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,

package/src/elements/EFTimegroup.browsertest.ts

@@ -1,10 +1,10 @@
-import { describe, test, assert, beforeEach } from "vitest";
 import {
   LitElement,
   type TemplateResult,
   html,
   render as litRender,
 } from "lit";
+import { assert, beforeEach, describe, test } from "vitest";
 import { EFTimegroup } from "./EFTimegroup.ts";
 import "./EFTimegroup.ts";
 import { customElement } from "lit/decorators/custom-element.js";

package/src/elements/durationConverter.ts

@@ -24,3 +24,7 @@ export const trimDurationConverter = positiveDurationConverter(
 export const imageDurationConverter = positiveDurationConverter(
   "Image duration must be a positive value in milliseconds or seconds (1s, 1000ms)",
 );
+
+export const sourceDurationConverter = positiveDurationConverter(
+  "Sourcein & sourceout must be a positive value in milliseconds or seconds (1s, 1000ms)",
+);

package/src/gui/EFFilmstrip.ts

@@ -1,37 +1,37 @@
+import { consume } from "@lit/context";
 import {
   LitElement,
-  html,
+  type PropertyValueMap,
+  type ReactiveController,
+  type TemplateResult,
   css,
+  html,
   nothing,
-  type TemplateResult,
-  type ReactiveController,
-  type PropertyValueMap,
 } from "lit";
 import {
   customElement,
-  property,
   eventOptions,
+  property,
   state,
 } from "lit/decorators.js";
-import { consume } from "@lit/context";
+import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { ref, createRef } from "lit/directives/ref.js";
 
-import { EFImage } from "../elements/EFImage.ts";
 import { EFAudio } from "../elements/EFAudio.ts";
-import { EFVideo } from "../elements/EFVideo.ts";
 import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.ts";
-import { EFWaveform } from "../elements/EFWaveform.ts";
-import { EFTimegroup } from "../elements/EFTimegroup.ts";
+import { EFImage } from "../elements/EFImage.ts";
 import type { TemporalMixinInterface } from "../elements/EFTemporal.ts";
+import { EFTimegroup } from "../elements/EFTimegroup.ts";
+import { EFVideo } from "../elements/EFVideo.ts";
+import { EFWaveform } from "../elements/EFWaveform.ts";
 import { TimegroupController } from "../elements/TimegroupController.ts";
-import { TWMixin } from "./TWMixin.ts";
 import { msToTimeCode } from "../msToTimeCode.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { type FocusContext, focusContext } from "./focusContext.ts";
-import { playingContext, loopContext } from "./playingContext.ts";
-import type { EFWorkbench } from "./EFWorkbench.ts";
 import type { EFPreview } from "./EFPreview.ts";
+import type { EFWorkbench } from "./EFWorkbench.ts";
+import { TWMixin } from "./TWMixin.ts";
+import { type FocusContext, focusContext } from "./focusContext.ts";
+import { focusedElementContext } from "./focusedElementContext.ts";
+import { loopContext, playingContext } from "./playingContext.ts";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(
@@ -89,15 +89,15 @@ class FilmstripItem extends TWMixin(LitElement) {
   get gutterStyles() {
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`,
+      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`,
     };
   }
 
   get trimPortionStyles() {
     return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * this.element.trimStartMs}px`,
+      left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`,
     };
   }