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

package/src/elements/EFTimegroup.ts

@@ -1,9 +1,12 @@
-import { LitElement, html, css, type PropertyValueMap } from "lit";
 import { provide } from "@lit/context";
 import { Task } from "@lit/task";
-import { customElement, property } from "lit/decorators.js";
 import debug from "debug";
+import { LitElement, type PropertyValueMap, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { isContextMixin } from "../gui/ContextMixin.ts";
+import { deepGetMediaElements } from "./EFMedia.ts";
 import {
   EFTemporal,
   isEFTemporal,
@@ -11,8 +14,6 @@ import {
   timegroupContext,
 } from "./EFTemporal.ts";
 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");
@@ -243,12 +244,32 @@ export class EFTimegroup 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
+      this.contextProvider === null
     );
   }
 

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,15 +13,14 @@ 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"
-      ${ref(this.canvasRef)}
-    ></canvas>`;
+    return html` <canvas ${ref(this.canvasRef)}></canvas>`;
   }
 
   get canvasElement() {

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/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/ContextMixin.browsertest.ts

@@ -2,10 +2,13 @@ import { LitElement } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { describe, expect, test, vi } from "vitest";
 
-import { ContextMixin } from "./ContextMixin.ts";
 import { consume } from "@lit/context";
+import { ContextMixin } from "./ContextMixin.ts";
 import { apiHostContext } from "./apiHostContext.ts";
 
+// Required to test timeupdate event, we need a duration, and timegroups are a quick way to do that
+import "../elements/EFTimegroup.ts";
+
 @customElement("test-context")
 class TestContext extends ContextMixin(LitElement) {}
 
@@ -49,7 +52,6 @@ describe("ContextMixin", () => {
       expect(element.apiHost).toBe("test2");
     });
   });
-
   describe("Playback", () => {
     test("should start playback", () => {
       const element = document.createElement("test-context");
@@ -78,4 +80,28 @@ describe("ContextMixin", () => {
       expect(playbackSpy).toHaveBeenCalled();
     });
   });
+
+  test("Time update event when the currentTimeMs changed", async () => {
+    const timegroup = document.createElement("ef-timegroup");
+    timegroup.mode = "fixed";
+    timegroup.duration = "10s";
+
+    const preview = document.createElement("test-context");
+    preview.append(timegroup);
+    document.body.append(preview);
+
+    type CurrentTimeEvent = CustomEvent<{ currentTimeMs: number }>;
+
+    // Expect the timeupdate event to be dispatched
+    const timeupdatePromise = new Promise<CurrentTimeEvent>((resolve) => {
+      preview.addEventListener(
+        "timeupdate",
+        (event: Event) => resolve(event as CurrentTimeEvent),
+        { once: true },
+      );
+    });
+    preview.currentTimeMs = 1000;
+    const event = await timeupdatePromise;
+    expect(event.detail.currentTimeMs).toBe(1000);
+  });
 });

package/src/gui/ContextMixin.ts

@@ -1,15 +1,15 @@
-import type { LitElement } from "lit";
 import { provide } from "@lit/context";
+import type { LitElement } from "lit";
 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 { createRef } from "lit/directives/ref.js";
-import { loopContext, playingContext } from "./playingContext.ts";
 import type { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { efContext } from "./efContext.ts";
 import { apiHostContext } from "./apiHostContext.ts";
+import { efContext } from "./efContext.ts";
+import { fetchContext } from "./fetchContext.ts";
+import { type FocusContext, focusContext } from "./focusContext.ts";
+import { focusedElementContext } from "./focusedElementContext.ts";
+import { loopContext, playingContext } from "./playingContext.ts";
 
 export declare class ContextMixinInterface {
   signingURL?: string;
@@ -26,9 +26,19 @@ export declare class ContextMixinInterface {
   pause(): void;
 }
 
+const contextMixinSymbol = Symbol("contextMixin");
+
+export function isContextMixin(value: any): value is ContextMixinInterface {
+  return (
+    typeof value === "object" && value !== null && contextMixinSymbol in value
+  );
+}
+
 type Constructor<T = {}> = new (...args: any[]) => T;
 export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
   class ContextElement extends superClass {
+    [contextMixinSymbol] = true;
+
     @provide({ context: focusContext })
     focusContext = this as FocusContext;
 
@@ -164,10 +174,16 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           this.stopPlayback();
         }
       }
-
       if (changedProperties.has("currentTimeMs") && this.targetTimegroup) {
         if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
           this.targetTimegroup.currentTimeMs = this.currentTimeMs;
+          if (this.isConnected) {
+            this.dispatchEvent(
+              new CustomEvent("timeupdate", {
+                detail: { currentTimeMs: this.currentTimeMs },
+              }),
+            );
+          }
         }
       }
       super.update(changedProperties);

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(
@@ -87,6 +87,13 @@ 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)}px`,
@@ -95,6 +102,12 @@ class FilmstripItem extends TWMixin(LitElement) {
   }
 
   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}px`,
@@ -694,7 +707,14 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         />
         <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
-        <ef-toggle-play><button>${this.playing ? "⏸️" : "▶️"}</button></ef-toggle-play>
+        <ef-toggle-play class="inline-block mx-2">
+          <div slot="pause"> 
+            <button class="bg-white">&#9654;</button>
+          </div>
+          <div slot="play">
+            <button>⏸️</button>
+          </div>
+        </ef-toggle-play>
         <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50">🔁</span>`}</button></ef-toggle-loop>
       </div>
       <div

package/src/gui/EFTogglePlay.ts

@@ -1,33 +1,64 @@
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
 import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 
-import { efContext } from "./efContext.ts";
 import type { ContextMixinInterface } from "./ContextMixin.ts";
+import { efContext } from "./efContext.ts";
 
 @customElement("ef-toggle-play")
 export class EFTogglePlay extends LitElement {
   static styles = [
     css`
       :host {}
+      div {
+        all: inherit;
+      }
     `,
   ];
 
-  @consume({ context: efContext })
+  @consume({ context: efContext, subscribe: true })
   context?: ContextMixinInterface | null;
 
+  @property({ type: String })
+  play = '<button class="text-2xl cursor-pointer">▶️</button>';
+
+  @property({ type: String })
+  pause = '<button class="text-2xl cursor-pointer">⏸️</button>';
+
+  @state()
+  playing = false;
+
   render() {
     return html`
-      <slot @click=${() => {
+      <div
+      @click=${() => {
         if (this.context) {
           if (this.context.playing) {
             this.context.pause();
+            this.playing = false;
           } else {
             this.context.play();
+            this.playing = true;
           }
         }
-      }}></slot>
-    `;
+      }}>
+    ${
+      this.playing
+        ? html`<slot name="play"></slot>`
+        : html`<slot name="pause"></slot>`
+    }
+    </div>`;
+  }
+
+  togglePlay() {
+    this.requestUpdate();
+    if (this.context) {
+      if (this.context.playing) {
+        this.context.pause();
+      } else {
+        this.context.play();
+      }
+    }
   }
 }