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

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-
 export { EFTimegroup } from './elements/EFTimegroup.ts';
 export { EFImage } from './elements/EFImage.ts';
 export type { EFMedia } from './elements/EFMedia.ts';
@@ -9,3 +8,5 @@ export { EFWaveform } from './elements/EFWaveform.ts';
 export { EFWorkbench } from './gui/EFWorkbench.ts';
 export { EFPreview } from './gui/EFPreview.ts';
 export { EFFilmstrip } from './gui/EFFilmstrip.ts';
+export { EFTogglePlay } from './gui/EFTogglePlay.ts';
+export { EFToggleLoop } from './gui/EFToggleLoop.ts';

package/dist/style.css

@@ -624,6 +624,9 @@ video {
 .items-center {
   align-items: center;
 }
+.justify-center {
+  justify-content: center;
+}
 .overflow-auto {
   overflow: auto;
 }
@@ -675,6 +678,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
+.bg-slate-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+}
 .bg-opacity-20 {
   --tw-bg-opacity: 0.2;
 }
@@ -764,11 +771,6 @@ body {
   -webkit-text-size-adjust: 100%;
 }
 
-.hover\:bg-blue-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-slate-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.8.0-beta.1",
+  "version": "0.8.0-beta.10",
   "description": "",
   "exports": {
     ".": {
@@ -20,7 +20,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.8.0-beta.1",
+    "@editframe/assets": "0.8.0-beta.10",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",
@@ -35,7 +35,7 @@
     "autoprefixer": "^10.4.19",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "typescript": "^5.5.4",
-    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-dts": "^4.0.3",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }

package/src/elements/EFCaptions.ts

@@ -75,8 +75,12 @@ export class EFCaptions extends EFSourceMixin(
     `,
   ];
 
-  @property({ type: String, attribute: "target" })
-  target = null;
+  @property({ type: String, attribute: "target", reflect: true })
+  targetSelector = "";
+
+  set target(value: string) {
+    this.targetSelector = value;
+  }
 
   @property({ attribute: "word-style" })
   wordStyle = "";
@@ -149,13 +153,15 @@ export class EFCaptions extends EFSourceMixin(
     let endMs = 0;
     for (const segment of caption.segments) {
       if (
-        this.targetElement.ownCurrentTimeMs >= segment.start * 1000 &&
-        this.targetElement.ownCurrentTimeMs <= segment.end * 1000
+        this.targetElement.trimAdjustedOwnCurrentTimeMs >=
+          segment.start * 1000 &&
+        this.targetElement.trimAdjustedOwnCurrentTimeMs <= segment.end * 1000
       ) {
         for (const word of segment.words) {
           if (
-            this.targetElement.ownCurrentTimeMs >= word.start * 1000 &&
-            this.targetElement.ownCurrentTimeMs <= word.end * 1000
+            this.targetElement.trimAdjustedOwnCurrentTimeMs >=
+              word.start * 1000 &&
+            this.targetElement.trimAdjustedOwnCurrentTimeMs <= word.end * 1000
           ) {
             words.push(word.text);
             startMs = word.start * 1000;
@@ -172,11 +178,11 @@ export class EFCaptions extends EFSourceMixin(
   }
 
   get targetElement() {
-    const target = document.getElementById(this.getAttribute("target") ?? "");
+    const target = document.getElementById(this.targetSelector ?? "");
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio  or EFVideo element");
+    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 }
 

package/src/elements/EFMedia.ts

@@ -145,7 +145,11 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
       const result: Record<
         string,
-        { segment: TrackSegment; track: MP4Box.TrackInfo }
+        {
+          segment: TrackSegment;
+          track: MP4Box.TrackInfo;
+          nextSegment?: TrackSegment;
+        }
       > = {};
 
       for (const index of Object.values(fragmentIndex)) {
@@ -161,11 +165,15 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           return (segment.dts / track.timescale) * 1000 <= seekToMs;
         });
 
+        const nextSegment = index.segments.find((segment) => {
+          return (segment.dts / track.timescale) * 1000 > seekToMs;
+        });
+
         if (!segment) {
           return;
         }
 
-        result[index.track] = { segment, track };
+        result[index.track] = { segment, track, nextSegment };
       }
 
       return result;
@@ -187,7 +195,9 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
       const files: Record<string, File> = {};
 
-      for (const [trackId, { segment, track }] of Object.entries(seekResult)) {
+      for (const [trackId, { segment, track, nextSegment }] of Object.entries(
+        seekResult,
+      )) {
         const start = segment.offset;
         const end = segment.offset + segment.size;
 
@@ -196,6 +206,21 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           headers: { Range: `bytes=${start}-${end}` },
         });
 
+        if (nextSegment) {
+          const nextStart = nextSegment.offset;
+          const nextEnd = nextSegment.offset + nextSegment.size;
+          fetch(this.fragmentTrackPath(trackId), {
+            signal,
+            headers: { Range: `bytes=${nextStart}-${nextEnd}` },
+          })
+            .then(() => {
+              log("Prefetched next segment");
+            })
+            .catch((error) => {
+              log("Failed to prefetch next segment", error);
+            });
+        }
+
         const initSegment = Object.values(initSegments).find(
           (initSegment) => initSegment.trackId === String(track.id),
         );
@@ -253,7 +278,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
   ): void {
     if (changedProperties.has("ownCurrentTimeMs")) {
-      this.executeSeek(this.ownCurrentTimeMs);
+      this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
     }
   }
 
@@ -274,7 +299,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (durations.length === 0) {
       return 0;
     }
-    return Math.max(...durations);
+    return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
 
   get startTimeMs() {
@@ -315,8 +340,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;
-    toMs -= this.startTimeMs;
+    fromMs -= this.startTimeMs - this.trimStartMs;
+    toMs -= this.startTimeMs - this.trimStartMs;
 
     await this.trackFragmentIndexLoader.taskComplete;
     const audioTrackId = this.defaultAudioTrackId;
@@ -383,10 +408,13 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
     return {
       blob: audioBlob,
-      startMs: (firstFragment.dts / audioTrackIndex.timescale) * 1000,
+      startMs:
+        (firstFragment.dts / audioTrackIndex.timescale) * 1000 -
+        this.trimStartMs,
       endMs:
         (lastFragment.dts / audioTrackIndex.timescale) * 1000 +
-        (lastFragment.duration / audioTrackIndex.timescale) * 1000,
+        (lastFragment.duration / audioTrackIndex.timescale) * 1000 -
+        this.trimEndMs,
     };
   }
 }

package/src/elements/EFTemporal.ts

@@ -13,11 +13,14 @@ export const timegroupContext = createContext<EFTimegroup>(
 
 export declare class TemporalMixinInterface {
   get hasOwnDuration(): boolean;
+  get trimStartMs(): number;
+  get trimEndMs(): number;
   get durationMs(): number;
   get startTimeMs(): number;
   get startTimeWithinParentMs(): number;
   get endTimeMs(): number;
   get ownCurrentTimeMs(): number;
+  get trimAdjustedOwnCurrentTimeMs(): number;
 
   set duration(value: string);
   get duration(): string;
@@ -153,6 +156,36 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     })
     private _durationMs?: number;
 
+    @property({
+      type: Number,
+      attribute: "trimstart",
+      converter: durationConverter,
+    })
+    private _trimStartMs = 0;
+    public get trimStartMs(): number {
+      return this._trimStartMs;
+    }
+
+    @property({
+      type: Number,
+      attribute: "trimend",
+      converter: durationConverter,
+    })
+    private _trimEndMs = 0;
+    public get trimEndMs(): number {
+      return this._trimEndMs;
+    }
+
+    @property({
+      type: Number,
+      attribute: "startoffset",
+      converter: durationConverter,
+    })
+    private _startOffsetMs = 0;
+    public get startOffsetMs(): number {
+      return this._startOffsetMs;
+    }
+
     @state()
     rootTimegroup?: EFTimegroup = this.getRootTimegroup();
 
@@ -220,9 +253,15 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
           }
           startTimeMsCache.set(
             this,
-            previous.startTimeMs + previous.durationMs,
+            previous.startTimeMs +
+              previous.durationMs -
+              parentTimegroup.overlapMs,
+          );
+          return (
+            previous.startTimeMs +
+            previous.durationMs -
+            parentTimegroup.overlapMs
           );
-          return previous.startTimeMs + previous.durationMs;
         }
         case "contain":
         case "fixed":
@@ -250,6 +289,25 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return 0;
     }
 
+    /**
+     * Used to calculate the internal currentTimeMs of the element. This is useful
+     * for mapping to internal media time codes for audio/video elements.
+     */
+    get trimAdjustedOwnCurrentTimeMs() {
+      if (this.rootTimegroup) {
+        return Math.min(
+          Math.max(
+            0,
+            this.rootTimegroup.currentTimeMs -
+              this.startTimeMs +
+              this.trimStartMs,
+          ),
+          this.durationMs + Math.abs(this.startOffsetMs) + this.trimStartMs,
+        );
+      }
+      return 0;
+    }
+
     frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.ownCurrentTimeMs] as const,

package/src/elements/EFTimegroup.ts

@@ -13,6 +13,7 @@ import {
 import { TimegroupController } from "./TimegroupController.ts";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 import { deepGetMediaElements } from "./EFMedia.ts";
+import { durationConverter } from "./durationConverter.ts";
 
 const log = debug("ef:elements:EFTimegroup");
 
@@ -37,7 +38,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       display: block;
       width: 100%;
       height: 100%;
-      position: relative;
+      position: absolute;
       top: 0;
     }
   `;
@@ -53,6 +54,13 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   })
   mode: "fixed" | "sequence" | "contain" = "sequence";
 
+  @property({
+    type: Number,
+    converter: durationConverter,
+    attribute: "overlap",
+  })
+  overlapMs = 0;
+
   @property({ type: Number })
   set currentTime(time: number) {
     this.#currentTime = Math.max(0, Math.min(time, this.durationMs / 1000));
@@ -76,25 +84,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     this.currentTime = ms / 1000;
   }
 
-  @property({
-    attribute: "crossover",
-    converter: {
-      fromAttribute: (value: string): number => {
-        if (value.endsWith("ms")) {
-          return Number.parseFloat(value);
-        }
-        if (value.endsWith("s")) {
-          return Number.parseFloat(value) * 1000;
-        }
-        throw new Error(
-          "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)",
-        );
-      },
-      toAttribute: (value: number) => `${value}ms`,
-    },
-  })
-  crossoverMs = 0;
-
   render() {
     return html`<slot></slot> `;
   }
@@ -134,32 +123,18 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return `ef-timegroup-${this.id}`;
   }
 
-  get crossoverStartMs() {
-    const parentTimeGroup = this.parentTimegroup;
-    if (!parentTimeGroup || !this.previousElementSibling) {
-      return 0;
-    }
-
-    return parentTimeGroup.crossoverMs;
-  }
-  get crossoverEndMs() {
-    const parentTimeGroup = this.parentTimegroup;
-    if (!parentTimeGroup || !this.nextElementSibling) {
-      return 0;
-    }
-
-    return parentTimeGroup.crossoverMs;
-  }
-
   get durationMs() {
     switch (this.mode) {
       case "fixed":
         return super.durationMs;
       case "sequence": {
         let duration = 0;
-        for (const node of this.childTemporals) {
+        this.childTemporals.forEach((node, index) => {
+          if (index > 0) {
+            duration -= this.overlapMs;
+          }
           duration += node.durationMs;
-        }
+        });
         return duration;
       }
       case "contain": {
@@ -207,9 +182,14 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       this.style.display = "";
 
       const animations = this.getAnimations({ subtree: true });
+      this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
+      this.style.setProperty(
+        "--ef-transition--duration",
+        `${this.parentTimegroup?.overlapMs ?? 0}ms`,
+      );
       this.style.setProperty(
-        "--ef-duration",
-        `${this.durationMs + this.crossoverEndMs + this.crossoverStartMs}ms`,
+        "--ef-transition-out-start",
+        `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`,
       );
 
       for (const animation of animations) {

package/src/elements/EFWaveform.ts

@@ -351,7 +351,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (!this.targetElement.audioBufferTask.value) {
       return;
     }
-    if (this.targetElement.ownCurrentTimeMs > 0) {
+    if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
       const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
       const audioBufferSource = audioContext.createBufferSource();
       audioBufferSource.buffer =
@@ -364,7 +364,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
         0,
         Math.max(
           0,
-          (this.targetElement.ownCurrentTimeMs -
+          (this.targetElement.trimAdjustedOwnCurrentTimeMs -
             this.targetElement.audioBufferTask.value.startOffsetMs) /
             1000,
         ),
@@ -412,6 +412,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio element");
+    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 }

package/src/elements/durationConverter.ts

@@ -4,3 +4,23 @@ export const durationConverter = {
   fromAttribute: (value: string): number => parseTimeToMs(value),
   toAttribute: (value: number) => `${value}s`,
 };
+
+const positiveDurationConverter = (error: string) => {
+  return {
+    fromAttribute: (value: string): number => {
+      if (value.startsWith("-")) {
+        throw new Error(error);
+      }
+      return parseTimeToMs(value);
+    },
+    toAttribute: (value: number) => `${value}s`,
+  };
+};
+
+export const trimDurationConverter = positiveDurationConverter(
+  "Trimstart & trimend must be a positive value in milliseconds or seconds (1s, 1000ms)",
+);
+
+export const imageDurationConverter = positiveDurationConverter(
+  "Image duration must be a positive value in milliseconds or seconds (1s, 1000ms)",
+);

package/src/elements/parseTimeToMs.ts

@@ -1,4 +1,5 @@
 export const parseTimeToMs = (time: string) => {
+  console.log("parseTimeToMs", time);
   if (time.endsWith("ms")) {
     return Number.parseFloat(time);
   }

package/src/gui/ContextMixin.ts

@@ -5,25 +5,23 @@ import { property, state } from "lit/decorators.js";
 import { focusContext, type FocusContext } from "./focusContext.ts";
 import { focusedElementContext } from "./focusedElementContext.ts";
 import { fetchContext } from "./fetchContext.ts";
-import { apiHostContext } from "./apiHostContext.ts";
 import { createRef } from "lit/directives/ref.js";
-import { playingContext } from "./playingContext.ts";
+import { loopContext, playingContext } from "./playingContext.ts";
 import type { EFTimegroup } from "../elements/EFTimegroup.ts";
+import { efContext } from "./efContext.ts";
 
-declare class ContextMixinInterface {
-  focusContext: FocusContext;
-  focusedElement?: HTMLElement;
-  fetch: typeof fetch;
+export declare class ContextMixinInterface {
   signingURL?: string;
-  apiToken?: string;
-  apiHost: string;
-  stageScale: number;
   rendering: boolean;
-  stageRef: ReturnType<typeof createRef<HTMLDivElement>>;
-  canvasRef: ReturnType<typeof createRef<HTMLElement>>;
   playing: boolean;
-  targetTimegroup?: EFTimegroup;
+  loop: boolean;
   currentTimeMs: number;
+  focusedElement?: HTMLElement;
+  stageRef: ReturnType<typeof createRef<HTMLDivElement>>;
+  canvasRef: ReturnType<typeof createRef<HTMLElement>>;
+  targetTimegroup: EFTimegroup | null;
+  play(): void;
+  pause(): void;
 }
 
 type Constructor<T = {}> = new (...args: any[]) => T;
@@ -36,6 +34,9 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     @state()
     focusedElement?: HTMLElement;
 
+    @provide({ context: efContext })
+    efContext = this;
+
     @provide({ context: fetchContext })
     fetch = async (url: string, init: RequestInit = {}) => {
       init.headers ||= {};
@@ -43,21 +44,14 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         "Content-Type": "application/json",
       });
 
-      const bearerToken = this.apiToken;
-      if (bearerToken) {
-        Object.assign(init.headers, {
-          Authorization: `Bearer ${bearerToken}`,
-        });
-      }
-
       if (this.signingURL) {
-        if (!this.#signedURLs[url]) {
-          this.#signedURLs[url] = fetch(this.signingURL, {
+        if (!this.#URLTokens[url]) {
+          this.#URLTokens[url] = fetch(this.signingURL, {
             method: "POST",
             body: JSON.stringify({ url }),
           }).then(async (response) => {
             if (response.ok) {
-              return (await response.json()).url;
+              return (await response.json()).token;
             }
             throw new Error(
               `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`,
@@ -65,35 +59,35 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           });
         }
 
-        const signedURL = await this.#signedURLs[url];
+        const urlToken = await this.#URLTokens[url];
 
-        return fetch(signedURL, init);
+        Object.assign(init.headers, {
+          authorization: `Bearer ${urlToken}`,
+        });
       }
 
       return fetch(url, init);
     };
 
-    #signedURLs: Record<string, Promise<string>> = {};
+    #URLTokens: Record<string, Promise<string>> = {};
 
+    /**
+     * A URL that will be used to generated signed tokens for accessing media files from the
+     * editframe API. This is used to authenticate media requests per-user.
+     */
     @property({ type: String })
     signingURL?: string;
 
-    @property({ type: String })
-    apiToken?: string;
-
-    @provide({ context: apiHostContext })
-    @property({ type: String })
-    apiHost = "";
-
     @provide({ context: playingContext })
     @property({ type: Boolean, reflect: true })
     playing = false;
 
+    @provide({ context: loopContext })
     @property({ type: Boolean, reflect: true })
     loop = false;
 
     @state()
-    stageScale = 1;
+    private stageScale = 1;
 
     @property({ type: Boolean })
     rendering = false;
@@ -108,9 +102,11 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       if (this.isConnected && !this.rendering) {
         const canvasElement = this.canvasRef.value;
         const stageElement = this.stageRef.value;
-        if (stageElement && canvasElement) {
+        const canvasChild = canvasElement?.assignedElements()[0];
+        if (stageElement && canvasElement && canvasChild) {
           // Determine the appropriate scale factor to make the canvas fit into
-          // it's parent element.
+          canvasElement.style.width = `${canvasChild.clientWidth}px`;
+          canvasElement.style.height = `${canvasChild.clientHeight}px`;
           const stageWidth = stageElement.clientWidth;
           const stageHeight = stageElement.clientHeight;
           const canvasWidth = canvasElement.clientWidth;
@@ -121,12 +117,14 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
             const scale = stageHeight / canvasHeight;
             if (this.stageScale !== scale) {
               canvasElement.style.transform = `scale(${scale})`;
+              canvasElement.style.transformOrigin = "top";
             }
             this.stageScale = scale;
           } else {
             const scale = stageWidth / canvasWidth;
             if (this.stageScale !== scale) {
               canvasElement.style.transform = `scale(${scale})`;
+              canvasElement.style.transformOrigin = "top";
             }
             this.stageScale = scale;
           }
@@ -165,6 +163,14 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       return this.querySelector("ef-timegroup");
     }
 
+    play() {
+      this.playing = true;
+    }
+
+    pause() {
+      this.playing = false;
+    }
+
     #playbackAudioContext: AudioContext | null = null;
     #playbackAnimationFrameRequest: number | null = null;
     #AUDIO_PLAYBACK_SLICE_MS = 1000;
@@ -237,7 +243,15 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         source.onended = () => {
           bufferCount--;
           if (endMs >= toMs) {
-            this.playing = false;
+            this.pause();
+            if (this.loop) {
+              this.updateComplete.then(() => {
+                this.currentTimeMs = 0;
+                this.updateComplete.then(() => {
+                  this.play();
+                });
+              });
+            }
           } else {
             fillBuffer();
           }