@editframe/elements 0.19.2-beta.0 → 0.20.0-beta.0

package/src/gui/EFFilmstrip.ts

@@ -18,7 +18,11 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import { EFAudio } from "../elements/EFAudio.js";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
+import {
+  type Caption,
+  EFCaptions,
+  EFCaptionsActiveWord,
+} from "../elements/EFCaptions.js";
 import { EFImage } from "../elements/EFImage.js";
 import type { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import { EFTimegroup } from "../elements/EFTimegroup.js";
@@ -223,8 +227,295 @@ export class EFVideoFilmstrip extends FilmstripItem {
 
 @customElement("ef-captions-filmstrip")
 export class EFCaptionsFilmstrip extends FilmstripItem {
-  contents() {
-    return html` 📝 `;
+  render() {
+    const captions = this.element as EFCaptions;
+    const captionsData = captions.unifiedCaptionsDataTask.value;
+
+    return html`<div style=${styleMap(this.gutterStyles)}>
+      <div
+        class="bg-slate-300 relative"
+        ?data-focused=${this.isFocused}
+        @mouseenter=${() => {
+          if (this.focusContext) {
+            this.focusContext.focusedElement = this.element;
+          }
+        }}
+        @mouseleave=${() => {
+          if (this.focusContext) {
+            this.focusContext.focusedElement = null;
+          }
+        }}
+      >
+        <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 overflow-hidden"
+          style=${styleMap(this.trimPortionStyles)}
+        >
+          📝 ${this.renderCaptionsData(captionsData)}
+        </div>
+      </div>
+      ${this.renderChildren()}
+    </div>`;
+  }
+
+  renderCaptionsData(captionsData: Caption | null | undefined) {
+    if (!captionsData) {
+      return html``;
+    }
+
+    // Get current time for highlighting active elements
+    const captions = this.element as EFCaptions;
+    const rootTimegroup = captions.rootTimegroup;
+    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+    const captionsLocalTimeMs = currentTimeMs - captions.startTimeMs;
+    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;
+
+    // Show all segments with text content, let them clip naturally
+    const segmentElements = captionsData.segments.map((segment) => {
+      const isActive =
+        captionsLocalTimeSec >= segment.start &&
+        captionsLocalTimeSec < segment.end;
+
+      return html`<div
+        class="absolute border border-slate-600 text-xs overflow-hidden flex items-center ${isActive ? "bg-green-200 border-green-500 font-bold z-[5]" : "bg-slate-100"}"
+        style=${styleMap({
+          left: `${this.pixelsPerMs * segment.start * 1000}px`,
+          width: `${this.pixelsPerMs * (segment.end - segment.start) * 1000}px`,
+          height: "100%",
+          top: "0px",
+        })}
+        title="Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)"
+      >
+        <span class="px-0.5 text-[8px] ${isActive ? "font-bold" : ""}">${segment.text}</span>
+      </div>`;
+    });
+
+    return html`${segmentElements}`;
+  }
+
+  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {
+    // Also render normal DOM children (like ef-captions-active-word elements)
+    return super.renderChildren();
+  }
+}
+
+@customElement("ef-captions-active-word-filmstrip")
+export class EFCaptionsActiveWordFilmstrip extends FilmstripItem {
+  get captionsTrackStyles() {
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    return {
+      position: "relative",
+      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,
+    };
+  }
+
+  render() {
+    // Get parent captions element and its data
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+
+    if (!captionsData) {
+      return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          🗣️ Active Word
+        </div>
+      </div>`;
+    }
+
+    // Get current time for highlighting
+    const rootTimegroup = parentCaptions.rootTimegroup;
+    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;
+
+    return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.word_segments.map((word) => {
+          const isCurrentlyActive =
+            captionsLocalTimeSec >= word.start &&
+            captionsLocalTimeSec < word.end;
+
+          return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-blue-50 border-blue-200"}"
+            style=${styleMap({
+              left: `${this.pixelsPerMs * word.start * 1000}px`,
+              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,
+              height: "100%",
+              top: "0px",
+            })}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap bg-yellow-200">${word.text.trim()}</span>` : ""}
+          </div>`;
+        })}
+      </div>
+    </div>`;
+  }
+}
+
+@customElement("ef-captions-segment-filmstrip")
+export class EFCaptionsSegmentFilmstrip extends FilmstripItem {
+  get captionsTrackStyles() {
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    return {
+      position: "relative",
+      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,
+    };
+  }
+
+  render() {
+    // Get parent captions element and its data
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+
+    if (!captionsData) {
+      return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          📄 Segment
+        </div>
+      </div>`;
+    }
+
+    // Get current time for highlighting
+    const rootTimegroup = parentCaptions.rootTimegroup;
+    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;
+
+    return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.segments.map((segment) => {
+          const isCurrentlyActive =
+            captionsLocalTimeSec >= segment.start &&
+            captionsLocalTimeSec < segment.end;
+
+          return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-green-200 border-green-500 font-bold z-[5]" : "bg-green-50 border-green-200"}"
+            style=${styleMap({
+              left: `${this.pixelsPerMs * segment.start * 1000}px`,
+              width: `${this.pixelsPerMs * (segment.end - segment.start) * 1000}px`,
+              height: "100%",
+              top: "0px",
+            })}
+            title="Segment: '${segment.text}' (${segment.start}s - ${segment.end}s)"
+          >
+            ${isCurrentlyActive ? html`<span class="px-0.5 text-[8px] font-bold whitespace-nowrap bg-green-200">${segment.text}</span>` : ""}
+          </div>`;
+        })}
+      </div>
+    </div>`;
+  }
+}
+
+@customElement("ef-captions-before-word-filmstrip")
+export class EFCaptionsBeforeWordFilmstrip extends FilmstripItem {
+  get captionsTrackStyles() {
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    return {
+      position: "relative",
+      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,
+    };
+  }
+
+  render() {
+    // Get parent captions element and its data
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+
+    if (!captionsData) {
+      return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          ⬅️ Before
+        </div>
+      </div>`;
+    }
+
+    // Get current time for highlighting
+    const rootTimegroup = parentCaptions.rootTimegroup;
+    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;
+
+    return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.word_segments.map((word) => {
+          const isCurrentlyActive =
+            captionsLocalTimeSec >= word.start &&
+            captionsLocalTimeSec < word.end;
+
+          return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
+            style=${styleMap({
+              left: `${this.pixelsPerMs * word.start * 1000}px`,
+              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,
+              height: "100%",
+              top: "0px",
+            })}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+            <!-- No text for before tracks - they're redundant -->
+          </div>`;
+        })}
+      </div>
+    </div>`;
+  }
+}
+
+@customElement("ef-captions-after-word-filmstrip")
+export class EFCaptionsAfterWordFilmstrip extends FilmstripItem {
+  get captionsTrackStyles() {
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    return {
+      position: "relative",
+      left: `${this.pixelsPerMs * (parentCaptions?.startTimeWithinParentMs || 0)}px`,
+      width: `${this.pixelsPerMs * (parentCaptions?.durationMs || 0)}px`,
+    };
+  }
+
+  render() {
+    // Get parent captions element and its data
+    const parentCaptions = this.element.closest("ef-captions") as EFCaptions;
+    const captionsData = parentCaptions?.unifiedCaptionsDataTask.value;
+
+    if (!captionsData) {
+      return html`<div style=${styleMap(this.captionsTrackStyles)}>
+        <div class="bg-slate-300 border border-slate-500 h-[1.1rem] mb-[1px] text-xs">
+          ➡️ After
+        </div>
+      </div>`;
+    }
+
+    // Get current time for highlighting
+    const rootTimegroup = parentCaptions.rootTimegroup;
+    const currentTimeMs = rootTimegroup?.currentTimeMs || 0;
+    const captionsLocalTimeMs = currentTimeMs - parentCaptions.startTimeMs;
+    const captionsLocalTimeSec = captionsLocalTimeMs / 1000;
+
+    return html`<div style=${styleMap(this.captionsTrackStyles)}>
+      <div class="bg-slate-300 relative border border-slate-500 h-[1.1rem] mb-[1px] w-full">
+        ${captionsData.word_segments.map((word) => {
+          const isCurrentlyActive =
+            captionsLocalTimeSec >= word.start &&
+            captionsLocalTimeSec < word.end;
+
+          return html`<div
+            class="absolute border text-xs overflow-visible flex items-center ${isCurrentlyActive ? "bg-yellow-200 border-yellow-500 font-bold z-[5]" : "bg-purple-50 border-purple-200"}"
+            style=${styleMap({
+              left: `${this.pixelsPerMs * word.start * 1000}px`,
+              width: `${this.pixelsPerMs * (word.end - word.start) * 1000}px`,
+              height: "100%",
+              top: "0px",
+            })}
+            title="Word: '${word.text}' (${word.start}s - ${word.end}s)"
+          >
+            <!-- No text for after tracks - they're redundant -->
+          </div>`;
+        })}
+      </div>
+    </div>`;
   }
 }
 
@@ -496,6 +787,30 @@ const renderFilmstripChildren = (
         .pixelsPerMs=${pixelsPerMs}
       ></ef-captions-filmstrip>`;
     }
+    if (child instanceof EFCaptionsActiveWord) {
+      return html`<ef-captions-active-word-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-active-word-filmstrip>`;
+    }
+    if (child.tagName === "EF-CAPTIONS-SEGMENT") {
+      return html`<ef-captions-segment-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-segment-filmstrip>`;
+    }
+    if (child.tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD") {
+      return html`<ef-captions-before-word-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-before-word-filmstrip>`;
+    }
+    if (child.tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD") {
+      return html`<ef-captions-after-word-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-after-word-filmstrip>`;
+    }
     if (child instanceof EFWaveform) {
       return html`<ef-waveform-filmstrip
         .element=${child}
@@ -769,7 +1084,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
           @mousedown=${this.startScrub}
         >
           <div
-            class="border-red pointer-events-none absolute z-10 h-full w-[2px] border-r-2 border-red-700"
+            class="border-red pointer-events-none absolute z-[20] h-full w-[2px] border-r-2 border-red-700"
             style=${styleMap({
               left: `${this.pixelsPerMs * this.currentTimeMs}px`,
               top: `${this.timelineScrolltop}px`,
@@ -833,6 +1148,10 @@ declare global {
     "ef-audio-filmstrip": EFAudioFilmstrip;
     "ef-video-filmstrip": EFVideoFilmstrip;
     "ef-captions-filmstrip": EFCaptionsFilmstrip;
+    "ef-captions-active-word-filmstrip": EFCaptionsActiveWordFilmstrip;
+    "ef-captions-segment-filmstrip": EFCaptionsSegmentFilmstrip;
+    "ef-captions-before-word-filmstrip": EFCaptionsBeforeWordFilmstrip;
+    "ef-captions-after-word-filmstrip": EFCaptionsAfterWordFilmstrip;
     "ef-waveform-filmstrip": EFWaveformFilmstrip;
     "ef-image-filmstrip": EFImageFilmstrip;
     "ef-html-filmstrip": EFHTMLFilmstrip;

package/src/gui/EFPreview.ts

@@ -1,12 +1,13 @@
 import { provide } from "@lit/context";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
+import { EFTargetable } from "../elements/TargetController.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { TWMixin } from "./TWMixin.js";
 
 @customElement("ef-preview")
-export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
+export class EFPreview extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
   static styles = [
     css`
       :host {

package/src/gui/EFScrubber.ts

@@ -4,6 +4,8 @@ import { customElement, state } from "lit/decorators.js";
 
 import { ref } from "lit/directives/ref.js";
 import type { ContextMixinInterface } from "./ContextMixin.js";
+import { currentTimeContext } from "./currentTimeContext.js";
+import { durationContext } from "./durationContext.js";
 import { efContext } from "./efContext.js";
 import { playingContext } from "./playingContext.js";
 
@@ -16,8 +18,10 @@ export class EFScrubber extends LitElement {
       --ef-scrubber-background: rgb(209 213 219);
       --ef-scrubber-progress-color: rgb(37 99 235);
       --ef-scrubber-handle-size: 12px;
-      display: block;
       width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
     
     .scrubber {
@@ -60,14 +64,17 @@ export class EFScrubber extends LitElement {
   @consume({ context: playingContext, subscribe: true })
   playing = false;
 
-  @state()
-  private lastTimeUpdateProgress = 0;
+  @consume({ context: currentTimeContext, subscribe: true })
+  currentTimeMs = Number.NaN;
+
+  @consume({ context: durationContext, subscribe: true })
+  durationMs = 0;
 
   @state()
   private scrubProgress = 0;
 
   @state()
-  private isDragging = false;
+  private isMoving = false;
 
   private scrubberRef?: HTMLElement;
 
@@ -79,30 +86,33 @@ export class EFScrubber extends LitElement {
     const progress = Math.max(0, Math.min(1, x / rect.width));
 
     this.scrubProgress = progress;
-    this.context.currentTimeMs =
-      progress * (this.context.targetTimegroup?.durationMs ?? 0);
+    this.context.currentTimeMs = progress * this.durationMs;
   }
 
-  private boundHandleMouseDown = (e: MouseEvent) => {
-    this.isDragging = true;
+  private boundHandlePointerDown = (e: MouseEvent) => {
+    this.isMoving = true;
     e.preventDefault();
     this.updateProgress(e);
   };
 
-  private boundHandleMouseMove = (e: MouseEvent) => {
-    if (this.isDragging) {
+  private boundHandlePointerMove = (e: MouseEvent) => {
+    if (this.isMoving) {
       this.updateProgress(e);
     }
   };
 
-  private boundHandleMouseUp = () => {
-    this.isDragging = false;
+  private boundHandlePointerUp = () => {
+    this.isMoving = false;
   };
 
   render() {
-    const displayProgress = this.isDragging
+    // Calculate progress from currentTimeMs and duration
+    const currentProgress =
+      this.durationMs > 0 ? (this.currentTimeMs ?? 0) / this.durationMs : 0;
+
+    const displayProgress = this.isMoving
       ? this.scrubProgress
-      : this.lastTimeUpdateProgress;
+      : currentProgress;
 
     return html`
       <div 
@@ -111,7 +121,7 @@ export class EFScrubber extends LitElement {
         })}
         part="scrubber"
         class="scrubber"
-        @mousedown=${this.boundHandleMouseDown}
+        @mousedown=${this.boundHandlePointerDown}
       >
         <div class="progress" style="width: ${displayProgress * 100}%"></div>
         <div class="handle" style="left: ${displayProgress * 100}%"></div>
@@ -121,20 +131,14 @@ export class EFScrubber extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener("mouseup", this.boundHandleMouseUp);
-    window.addEventListener("mousemove", this.boundHandleMouseMove);
-
-    if (this.context) {
-      this.context.addEventListener("timeupdate", (e: Event) => {
-        this.lastTimeUpdateProgress = (e as CustomEvent).detail.progress;
-      });
-    }
+    window.addEventListener("pointerup", this.boundHandlePointerUp);
+    window.addEventListener("pointermove", this.boundHandlePointerMove);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener("mouseup", this.boundHandleMouseUp);
-    window.removeEventListener("mousemove", this.boundHandleMouseMove);
+    window.removeEventListener("pointerup", this.boundHandlePointerUp);
+    window.removeEventListener("pointermove", this.boundHandlePointerMove);
   }
 }