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

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"));