@editframe/elements 0.5.0-beta.3 → 0.5.0-beta.5

package/dist/elements/gui/EFFilmstrip.mjs

@@ -0,0 +1,680 @@
+import { EFTimegroup } from "../elements/EFTimegroup.mjs";
+import { css, html, nothing, LitElement } from "lit";
+import { property, customElement, state, eventOptions } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { EFImage } from "../elements/EFImage.mjs";
+import { EFAudio } from "../elements/EFAudio.mjs";
+import { EFVideo } from "../elements/EFVideo.mjs";
+import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.mjs";
+import { EFWaveform } from "../elements/EFWaveform.mjs";
+import { TimegroupController } from "../elements/TimegroupController.mjs";
+import { consume } from "@lit/context";
+import { focusContext, focusedElement } from "./EFWorkbench.mjs";
+import { TWMixin } from "./TWMixin.mjs";
+import { msToTimeCode } from "../../editor/msToTimeCode.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _lastTick;
+class ElementFilmstripController {
+  constructor(host, filmstrip) {
+    this.host = host;
+    this.filmstrip = filmstrip;
+    this.host.addController(this);
+  }
+  remove() {
+    this.host.removeController(this);
+  }
+  hostDisconnected() {
+    this.host.removeController(this);
+  }
+  hostUpdated() {
+    this.filmstrip.requestUpdate();
+  }
+}
+const CommonEffectKeys = /* @__PURE__ */ new Set([
+  "offset",
+  "easing",
+  "composite",
+  "computedOffset"
+]);
+class FilmstripItem extends TWMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.element = new EFTimegroup();
+    this.pixelsPerMs = 0.04;
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        display: block;
+      }
+    `
+    ];
+  }
+  get isFocused() {
+    return this.element && this.focusedElement === this.element;
+  }
+  get styles() {
+    return {
+      left: `${this.pixelsPerMs * this.element.startTimeMs}px`,
+      width: `${this.pixelsPerMs * this.element.durationMs}px`
+    };
+  }
+  render() {
+    return html` <div class="" style=${styleMap(this.styles)}>
+      <div
+        @mouseenter=${() => {
+      if (this.focusContext) {
+        this.focusContext.focusedElement = this.element;
+      }
+    }}
+        @mouseleave=${() => {
+      if (this.focusContext) {
+        this.focusContext.focusedElement = null;
+      }
+    }}
+        ?data-focused=${this.isFocused}
+        class="border-outset relative mb-[1px] block h-[1.25rem] text-nowrap border border-slate-500 bg-blue-200 text-sm data-[focused]:bg-slate-400"
+      >
+        ${this.animations()}
+      </div>
+      ${this.renderChildren()}
+    </div>`;
+  }
+  renderChildren() {
+    return renderFilmStripChildren(
+      Array.from(this.element.children),
+      this.pixelsPerMs
+    );
+  }
+  contents() {
+    return html``;
+  }
+  animations() {
+    const animations = this.element.getAnimations();
+    return animations.map((animation) => {
+      const effect = animation.effect;
+      if (!(effect instanceof KeyframeEffect)) {
+        return nothing;
+      }
+      const start = effect.getTiming().delay ?? 0;
+      const duration = effect.getTiming().duration;
+      if (duration === null) {
+        return nothing;
+      }
+      const keyframes = effect.getKeyframes();
+      const firstKeyframe = keyframes[0];
+      if (!firstKeyframe) {
+        return nothing;
+      }
+      const properties = new Set(Object.keys(firstKeyframe));
+      CommonEffectKeys.forEach((key) => properties.delete(key));
+      return html`<div
+        class="relative h-[5px] bg-blue-500 opacity-50"
+        label="animation"
+        style=${styleMap({
+        left: `${this.pixelsPerMs * start}px`,
+        width: `${this.pixelsPerMs * Number(duration)}px`
+      })}
+      >
+        <!-- <div class="text-nowrap">${Array.from(properties).join(
+        " "
+      )}</div> -->
+        ${effect.getKeyframes().map((keyframe) => {
+        return html`<div
+            class="absolute top-0 h-full w-1 bg-red-500"
+            style=${styleMap({
+          left: `${this.pixelsPerMs * keyframe.computedOffset * Number(duration)}px`
+        })}
+          ></div>`;
+      })}
+      </div>`;
+    });
+  }
+  update(changedProperties) {
+    if (changedProperties.has("element") && this.element instanceof LitElement) {
+      this.filmstripController?.remove();
+      this.filmstripController = new ElementFilmstripController(
+        this.element,
+        this
+      );
+    }
+    super.update(changedProperties);
+  }
+}
+__decorateClass([
+  consume({ context: focusContext })
+], FilmstripItem.prototype, "focusContext", 2);
+__decorateClass([
+  consume({ context: focusedElement, subscribe: true })
+], FilmstripItem.prototype, "focusedElement", 2);
+__decorateClass([
+  property({ type: HTMLElement, attribute: false })
+], FilmstripItem.prototype, "element", 2);
+__decorateClass([
+  property({ type: Number })
+], FilmstripItem.prototype, "pixelsPerMs", 2);
+let EFAudioFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html``;
+  }
+};
+EFAudioFilmstrip = __decorateClass([
+  customElement("ef-audio-filmstrip")
+], EFAudioFilmstrip);
+let EFVideoFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 📼 `;
+  }
+};
+EFVideoFilmstrip = __decorateClass([
+  customElement("ef-video-filmstrip")
+], EFVideoFilmstrip);
+let EFCaptionsFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 📝 `;
+  }
+};
+EFCaptionsFilmstrip = __decorateClass([
+  customElement("ef-captions-filmstrip")
+], EFCaptionsFilmstrip);
+let EFWaveformFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 🌊 `;
+  }
+  renderChildren() {
+    return nothing;
+  }
+};
+EFWaveformFilmstrip = __decorateClass([
+  customElement("ef-waveform-filmstrip")
+], EFWaveformFilmstrip);
+let EFImageFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 🖼️ `;
+  }
+};
+EFImageFilmstrip = __decorateClass([
+  customElement("ef-image-filmstrip")
+], EFImageFilmstrip);
+let EFTimegroupFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html`
+      <span>TIME GROUP</span>
+      ${renderFilmStripChildren(
+      Array.from(this.element.children || []),
+      this.pixelsPerMs
+    )}
+    </div>
+    `;
+  }
+};
+EFTimegroupFilmstrip = __decorateClass([
+  customElement("ef-timegroup-filmstrip")
+], EFTimegroupFilmstrip);
+let EFHTMLFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html`
+      <span>${this.element.tagName}</span>
+      ${renderFilmStripChildren(
+      Array.from(this.element.children || []),
+      this.pixelsPerMs
+    )}
+    `;
+  }
+};
+EFHTMLFilmstrip = __decorateClass([
+  customElement("ef-html-filmstrip")
+], EFHTMLFilmstrip);
+let EFHierarchyItem = class extends TWMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.element = new EFTimegroup();
+  }
+  get icon() {
+    return "📼";
+  }
+  get isFocused() {
+    return this.element && this.focusedElement === this.element;
+  }
+  displayLabel() {
+    return nothing;
+  }
+  render() {
+    return html` 
+      <div>
+        <div
+          ?data-focused=${this.isFocused}
+          class="peer 
+            flex h-[1.25rem] items-center overflow-hidden text-nowrap  border border-slate-500
+          bg-slate-200 pl-2 text-sm hover:bg-slate-400 data-[focused]:bg-slate-400"
+          @mouseenter=${() => {
+      if (this.focusContext) {
+        this.focusContext.focusedElement = this.element;
+      }
+    }}
+          @mouseleave=${() => {
+      if (this.focusContext) {
+        this.focusContext.focusedElement = null;
+      }
+    }}
+        >
+          ${this.icon} ${this.displayLabel()}
+        </div>
+        <div
+          class="p-[1px] pb-0 pl-2 pr-0 peer-hover:bg-slate-300 peer-data-[focused]:bg-slate-300 peer-hover:border-slate-400 peer-data-[focused]:border-slate-400""
+        >
+          ${this.renderChildren()}
+        </div>
+      </div>`;
+  }
+  renderChildren() {
+    return renderHierarchyChildren(Array.from(this.element.children));
+  }
+};
+__decorateClass([
+  property({ type: HTMLElement, attribute: false })
+], EFHierarchyItem.prototype, "element", 2);
+__decorateClass([
+  consume({ context: focusContext })
+], EFHierarchyItem.prototype, "focusContext", 2);
+__decorateClass([
+  consume({ context: focusedElement, subscribe: true })
+], EFHierarchyItem.prototype, "focusedElement", 2);
+EFHierarchyItem = __decorateClass([
+  customElement("ef-hierarchy-item")
+], EFHierarchyItem);
+let EFTimegroupHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "🕒";
+  }
+  displayLabel() {
+    return this.element.mode ?? "(no mode)";
+  }
+};
+EFTimegroupHierarchyItem = __decorateClass([
+  customElement("ef-timegroup-hierarchy-item")
+], EFTimegroupHierarchyItem);
+let EFAudioHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "🔊";
+  }
+  displayLabel() {
+    return this.element.getAttribute("src") ?? "(no src)";
+  }
+};
+EFAudioHierarchyItem = __decorateClass([
+  customElement("ef-audio-hierarchy-item")
+], EFAudioHierarchyItem);
+let EFVideoHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "📼";
+  }
+  displayLabel() {
+    return this.element.getAttribute("src") ?? "(no src)";
+  }
+};
+EFVideoHierarchyItem = __decorateClass([
+  customElement("ef-video-hierarchy-item")
+], EFVideoHierarchyItem);
+let EFCaptionsHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "📝 Captions";
+  }
+};
+EFCaptionsHierarchyItem = __decorateClass([
+  customElement("ef-captions-hierarchy-item")
+], EFCaptionsHierarchyItem);
+let EFCaptionsActiveWordHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "🗣️ Active Word";
+  }
+};
+EFCaptionsActiveWordHierarchyItem = __decorateClass([
+  customElement("ef-captions-active-word-hierarchy-item")
+], EFCaptionsActiveWordHierarchyItem);
+let EFWaveformHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "🌊";
+  }
+  renderChildren() {
+    return nothing;
+  }
+};
+EFWaveformHierarchyItem = __decorateClass([
+  customElement("ef-waveform-hierarchy-item")
+], EFWaveformHierarchyItem);
+let EFImageHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "🖼️";
+  }
+  displayLabel() {
+    return this.element.getAttribute("src") ?? "(no src)";
+  }
+};
+EFImageHierarchyItem = __decorateClass([
+  customElement("ef-image-hierarchy-item")
+], EFImageHierarchyItem);
+let EFHTMLHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;
+  }
+};
+EFHTMLHierarchyItem = __decorateClass([
+  customElement("ef-html-hierarchy-item")
+], EFHTMLHierarchyItem);
+const renderHierarchyChildren = (children) => {
+  return children.map((child) => {
+    if (child instanceof EFTimegroup) {
+      return html`<ef-timegroup-hierarchy-item
+        .element=${child}
+      ></ef-timegroup-hierarchy-item>`;
+    } else if (child instanceof EFImage) {
+      return html`<ef-image-hierarchy-item
+        .element=${child}
+      ></ef-image-hierarchy-item>`;
+    } else if (child instanceof EFAudio) {
+      return html`<ef-audio-hierarchy-item
+        .element=${child}
+      ></ef-audio-hierarchy-item>`;
+    } else if (child instanceof EFVideo) {
+      return html`<ef-video-hierarchy-item
+        .element=${child}
+      ></ef-video-hierarchy-item>`;
+    } else if (child instanceof EFCaptions) {
+      return html`<ef-captions-hierarchy-item
+        .element=${child}
+      ></ef-captions-hierarchy-item>`;
+    } else if (child instanceof EFCaptionsActiveWord) {
+      return html`<ef-captions-active-word-hierarchy-item
+        .element=${child}
+      ></ef-captions-active-word-hierarchy-item>`;
+    } else if (child instanceof EFWaveform) {
+      return html`<ef-waveform-hierarchy-item
+        .element=${child}
+      ></ef-waveform-hierarchy-item>`;
+    } else {
+      return html`<ef-html-hierarchy-item
+        .element=${child}
+      ></ef-html-hierarchy-item>`;
+    }
+  });
+};
+const renderFilmStripChildren = (children, pixelsPerMs) => {
+  return children.map((child) => {
+    if (child instanceof EFTimegroup) {
+      return html`<ef-timegroup-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      >
+      </ef-timegroup-filmstrip>`;
+    } else if (child instanceof EFImage) {
+      return html`<ef-image-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-image-filmstrip>`;
+    } else if (child instanceof EFAudio) {
+      return html`<ef-audio-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-audio-filmstrip>`;
+    } else if (child instanceof EFVideo) {
+      return html`<ef-video-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-video-filmstrip>`;
+    } else if (child instanceof EFCaptions) {
+      return html`<ef-captions-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-filmstrip>`;
+    } else if (child instanceof EFWaveform) {
+      return html`<ef-waveform-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-waveform-filmstrip>`;
+    } else {
+      return html`<ef-html-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-html-filmstrip>`;
+    }
+  });
+};
+let EFFilmStrip = class extends TWMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.pixelsPerMs = 0.04;
+    this.currentTimeMs = 0;
+    this.targetSelector = "";
+    this.scrubbing = false;
+    this.playing = false;
+    __privateAdd(this, _lastTick, void 0);
+    this.advancePlayhead = (tick) => {
+      if (__privateGet(this, _lastTick) && tick && this.target) {
+        this.target.currentTimeMs += tick - __privateGet(this, _lastTick);
+        if (this.target.currentTimeMs >= this.target.durationMs) {
+          this.playing = false;
+        }
+      }
+      __privateSet(this, _lastTick, tick);
+      if (this.playing) {
+        requestAnimationFrame(this.advancePlayhead);
+      }
+    };
+    this.gutterRef = createRef();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const target = this.target;
+    if (target) {
+      this.timegroupController = new TimegroupController(target, this);
+      this.currentTimeMs = target.currentTimeMs;
+    }
+  }
+  scrub(e) {
+    if (this.playing) {
+      return;
+    }
+    if (!this.scrubbing) {
+      return;
+    }
+    const gutter = this.shadowRoot?.querySelector("#gutter");
+    if (!gutter) {
+      return;
+    }
+    const rect = gutter.getBoundingClientRect();
+    if (this.target) {
+      const layerX = e.pageX - rect.left + gutter.scrollLeft;
+      this.target.currentTimeMs = layerX / this.pixelsPerMs;
+    }
+  }
+  startScrub(e) {
+    e.preventDefault();
+    this.scrubbing = true;
+    queueMicrotask(() => {
+      const gutter = this.shadowRoot?.querySelector("#gutter");
+      if (!gutter) {
+        return;
+      }
+      const rect = gutter.getBoundingClientRect();
+      if (this.target) {
+        const layerX = e.pageX - rect.left + gutter.scrollLeft;
+        this.target.currentTimeMs = layerX / this.pixelsPerMs;
+      }
+    });
+    addEventListener(
+      "mouseup",
+      () => {
+        this.scrubbing = false;
+      },
+      { once: true }
+    );
+  }
+  scrollScrub(e) {
+    if (this.target && this.gutter && !this.playing) {
+      e.preventDefault();
+      if (this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
+        this.gutter.scrollBy(0, e.deltaY);
+        return;
+      }
+      if (this.gutter.scrollWidth - this.gutter.scrollLeft === this.gutter.clientWidth && e.deltaX > 0) {
+        this.gutter.scrollBy(0, e.deltaY);
+        return;
+      }
+      if (this) {
+        this.gutter.scrollBy(e.deltaX, e.deltaY);
+        this.target.currentTimeMs += e.deltaX / this.pixelsPerMs;
+      }
+    }
+  }
+  get gutter() {
+    return this.gutterRef.value;
+  }
+  render() {
+    const target = this.target;
+    return html` <div
+      class="grid h-full bg-slate-100 "
+      style="grid-template-columns: 200px 1fr; grid-template-rows: 1.5rem 1fr;"
+    >
+      <div
+        class="z-20 col-span-2 border-b-slate-600 bg-slate-100 shadow shadow-slate-300"
+      >
+        <input
+          type="range"
+          .value=${this.pixelsPerMs}
+          min="0.01"
+          max="0.1"
+          step="0.001"
+          @input=${(e) => {
+      const target2 = e.target;
+      this.pixelsPerMs = parseFloat(target2.value);
+    }}
+        />
+        <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
+        <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
+        ${this.playing ? html`<button @click=${() => this.playing = false}>⏸️</button>` : html`<button @click=${() => this.playing = true}>▶️</button>`}
+      </div>
+      <div class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600">
+        ${renderHierarchyChildren(Array.from(target?.children ?? []))}
+      </div>
+      <div
+        class="h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-2"
+        id="gutter"
+        ${ref(this.gutterRef)}
+        @wheel=${this.scrollScrub}
+      >
+        <div
+          class="relative h-full w-full"
+          style="width: ${this.pixelsPerMs * (target?.durationMs ?? 0)}px;"
+          @mousemove=${this.scrub}
+          @mousedown=${this.startScrub}
+        >
+          <div
+            class="border-red pointer-events-none absolute top-0 z-10 h-full  w-[2px] border-r-2 border-red-700"
+            style="left: ${this.pixelsPerMs * this.currentTimeMs}px;"
+          ></div>
+
+          ${renderFilmStripChildren(
+      Array.from(target?.children || []),
+      this.pixelsPerMs
+    )}
+        </div>
+      </div>
+    </div>`;
+  }
+  update(changedProperties) {
+    if (changedProperties.has("playing")) {
+      if (this.playing) {
+        this.advancePlayhead(0);
+      }
+    }
+    super.update(changedProperties);
+  }
+  updated(changes) {
+    if (!this.target) {
+      return;
+    }
+    if (changes.has("currentTimeMs")) {
+      if (this.target.currentTimeMs !== this.currentTimeMs) {
+        this.target.currentTimeMs = this.currentTimeMs;
+      }
+    }
+  }
+  get target() {
+    if (this.getAttribute("target")) {
+      const target = document.querySelector(this.getAttribute("target") ?? "");
+      if (target instanceof EFTimegroup) {
+        return target;
+      }
+      throw new Error("Invalid target, must be an EFTimegroup element");
+    }
+  }
+};
+_lastTick = /* @__PURE__ */ new WeakMap();
+__decorateClass([
+  property({ type: Number })
+], EFFilmStrip.prototype, "pixelsPerMs", 2);
+__decorateClass([
+  property({ type: Number })
+], EFFilmStrip.prototype, "currentTimeMs", 2);
+__decorateClass([
+  property({ type: String, attribute: "target" })
+], EFFilmStrip.prototype, "targetSelector", 2);
+__decorateClass([
+  state()
+], EFFilmStrip.prototype, "scrubbing", 2);
+__decorateClass([
+  state()
+], EFFilmStrip.prototype, "playing", 2);
+__decorateClass([
+  eventOptions({ capture: false })
+], EFFilmStrip.prototype, "scrub", 1);
+__decorateClass([
+  eventOptions({ capture: false })
+], EFFilmStrip.prototype, "startScrub", 1);
+__decorateClass([
+  eventOptions({ passive: false })
+], EFFilmStrip.prototype, "scrollScrub", 1);
+EFFilmStrip = __decorateClass([
+  customElement("ef-filmstrip")
+], EFFilmStrip);
+export {
+  EFAudioFilmstrip,
+  EFCaptionsFilmstrip,
+  EFFilmStrip,
+  EFHTMLFilmstrip,
+  EFImageFilmstrip,
+  EFTimegroupFilmstrip,
+  EFVideoFilmstrip,
+  EFWaveformFilmstrip
+};