@editframe/elements 0.8.0-beta.2 → 0.8.0-beta.4

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,13 +44,6 @@ 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.#URLTokens[url]) {
           this.#URLTokens[url] = fetch(this.signingURL, {
@@ -77,25 +71,23 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
 
     #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;
@@ -110,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;
@@ -123,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;
           }
@@ -167,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;
@@ -239,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();
           }

package/src/gui/EFFilmstrip.ts

@@ -29,7 +29,7 @@ import { TWMixin } from "./TWMixin.ts";
 import { msToTimeCode } from "../msToTimeCode.ts";
 import { focusedElementContext } from "./focusedElementContext.ts";
 import { type FocusContext, focusContext } from "./focusContext.ts";
-import { playingContext } from "./playingContext.ts";
+import { playingContext, loopContext } from "./playingContext.ts";
 import type { EFWorkbench } from "./EFWorkbench.ts";
 import type { EFPreview } from "./EFPreview.ts";
 
@@ -86,18 +86,25 @@ class FilmstripItem extends TWMixin(LitElement) {
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
-  get styles() {
+  get gutterStyles() {
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * this.element.startTimeWithinParentMs}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() {
+    return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
+      left: `${this.pixelsPerMs * this.element.trimStartMs}px`,
     };
   }
 
   render() {
-    return html` <div class="" style=${styleMap(this.styles)}>
+    return html`<div style=${styleMap(this.gutterStyles)}>
       <div
-        class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 hover:bg-blue-400 text-sm data-[focused]:bg-slate-400"
+        class="bg-slate-300"
         ?data-focused=${this.isFocused}
         @mouseenter=${() => {
           if (this.focusContext) {
@@ -110,7 +117,13 @@ class FilmstripItem extends TWMixin(LitElement) {
           }
         }}
       >
-        ${this.animations()}
+        <div
+          ?data-focused=${this.isFocused}
+          class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 text-sm data-[focused]:bg-slate-400"
+          style=${styleMap(this.trimPortionStyles)}
+        >
+          ${this.animations()}
+        </div>
       </div>
       ${this.renderChildren()}
     </div>`;
@@ -500,6 +513,10 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   @state()
   playing?: boolean;
 
+  @consume({ context: loopContext, subscribe: true })
+  @state()
+  loop?: boolean;
+
   timegroupController?: TimegroupController;
 
   @state()
@@ -532,12 +549,13 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   #handleKeyPress = (event: KeyboardEvent) => {
     // On spacebar, toggle playback
     if (event.key === " ") {
+      const [target] = event.composedPath();
       // CSS selector to match all interactive elements
       const interactiveSelector =
         "input, textarea, button, select, a, [contenteditable]";
 
       // Check if the event target or its ancestor matches an interactive element
-      const closestInteractive = (event.target as HTMLElement | null)?.closest(
+      const closestInteractive = (target as HTMLElement | null)?.closest(
         interactiveSelector,
       );
       if (closestInteractive) {
@@ -676,27 +694,8 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         />
         <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
-        ${
-          this.playing
-            ? html`<button
-              @click=${() => {
-                if (this.#contextElement) {
-                  this.#contextElement.playing = false;
-                }
-              }}
-            >
-              ⏸️
-            </button>`
-            : html`<button
-              @click=${() => {
-                if (this.#contextElement) {
-                  this.#contextElement.playing = true;
-                }
-              }}
-            >
-              ▶️
-            </button>`
-        }
+        <ef-toggle-play><button>${this.playing ? "⏸️" : "▶️"}</button></ef-toggle-play>
+        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50">🔁</span>`}</button></ef-toggle-loop>
       </div>
       <div
         class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600 overflow-auto"

package/src/gui/EFToggleLoop.ts

@@ -0,0 +1,34 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { consume } from "@lit/context";
+
+import { efContext } from "./efContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+
+@customElement("ef-toggle-loop")
+export class EFToggleLoop extends LitElement {
+  static styles = [
+    css`
+      :host {}
+    `,
+  ];
+
+  @consume({ context: efContext })
+  context?: ContextMixinInterface | null;
+
+  render() {
+    return html`
+      <slot @click=${() => {
+        if (this.context) {
+          this.context.loop = !this.context.loop;
+        }
+      }}></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-toggle-loop": EFToggleLoop;
+  }
+}

package/src/gui/EFTogglePlay.ts

@@ -0,0 +1,38 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { consume } from "@lit/context";
+
+import { efContext } from "./efContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+
+@customElement("ef-toggle-play")
+export class EFTogglePlay extends LitElement {
+  static styles = [
+    css`
+      :host {}
+    `,
+  ];
+
+  @consume({ context: efContext })
+  context?: ContextMixinInterface | null;
+
+  render() {
+    return html`
+      <slot @click=${() => {
+        if (this.context) {
+          if (this.context.playing) {
+            this.context.pause();
+          } else {
+            this.context.play();
+          }
+        }
+      }}></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-toggle-play": EFTogglePlay;
+  }
+}

package/src/gui/EFWorkbench.ts

@@ -78,21 +78,21 @@ export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
       >
         <div
           ${ref(this.stageRef)}
-          class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
+          class="relative grid h-full w-full justify-center overflow-hidden"
           @wheel=${this.handleStageWheel}
         >
           <slot
             ${ref(this.canvasRef)}
-            class="inline-block"
             name="canvas"
+            class="inline-block"
           ></slot>
           <div
-            class="border border-blue-500 bg-blue-200 bg-opacity-20"
+            class="border border-blue-500 bg-blue-200 bg-opacity-20 absolute"
             ${ref(this.focusOverlay)}
           ></div>
         </div>
 
-        <slot class="overflow" name="timeline"></slot>
+        <slot class="overflow inline-block" name="timeline"></slot>
       </div>
     `;
   }

package/src/gui/efContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "@lit/context";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+
+export const efContext = createContext<ContextMixinInterface | null>(
+  Symbol("efContext"),
+);

package/src/gui/playingContext.ts

@@ -1,3 +1,5 @@
 import { createContext } from "@lit/context";
 
 export const playingContext = createContext<boolean>(Symbol("playingContext"));
+
+export const loopContext = createContext<boolean>(Symbol("loopContext"));