@editframe/elements 0.6.0-beta.10 → 0.6.0-beta.9

package/dist/packages/elements/src/gui/EFFilmstrip.js

@@ -1,683 +0,0 @@
-import { EFTimegroup } from "../elements/EFTimegroup.js";
-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.js";
-import { EFAudio } from "../elements/EFAudio.js";
-import { EFVideo } from "../elements/EFVideo.js";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
-import { EFWaveform } from "../elements/EFWaveform.js";
-import { TimegroupController } from "../elements/TimegroupController.js";
-import { consume } from "@lit/context";
-import { focusContext, focusedElement } from "./EFWorkbench.js";
-import { TWMixin } from "./TWMixin.js";
-import { msToTimeCode } from "../../../../lib/av/msToTimeCode.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-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) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __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"), member.set(obj, value), 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 {
-      position: "relative",
-      left: `${this.pixelsPerMs * this.element.startTimeWithinParentMs}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));
-      for (const key of CommonEffectKeys) {
-        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>`;
-    }
-    if (child instanceof EFImage) {
-      return html`<ef-image-hierarchy-item
-        .element=${child}
-      ></ef-image-hierarchy-item>`;
-    }
-    if (child instanceof EFAudio) {
-      return html`<ef-audio-hierarchy-item
-        .element=${child}
-      ></ef-audio-hierarchy-item>`;
-    }
-    if (child instanceof EFVideo) {
-      return html`<ef-video-hierarchy-item
-        .element=${child}
-      ></ef-video-hierarchy-item>`;
-    }
-    if (child instanceof EFCaptions) {
-      return html`<ef-captions-hierarchy-item
-        .element=${child}
-      ></ef-captions-hierarchy-item>`;
-    }
-    if (child instanceof EFCaptionsActiveWord) {
-      return html`<ef-captions-active-word-hierarchy-item
-        .element=${child}
-      ></ef-captions-active-word-hierarchy-item>`;
-    }
-    if (child instanceof EFWaveform) {
-      return html`<ef-waveform-hierarchy-item
-        .element=${child}
-      ></ef-waveform-hierarchy-item>`;
-    }
-    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>`;
-    }
-    if (child instanceof EFImage) {
-      return html`<ef-image-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-image-filmstrip>`;
-    }
-    if (child instanceof EFAudio) {
-      return html`<ef-audio-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-audio-filmstrip>`;
-    }
-    if (child instanceof EFVideo) {
-      return html`<ef-video-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-video-filmstrip>`;
-    }
-    if (child instanceof EFCaptions) {
-      return html`<ef-captions-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-captions-filmstrip>`;
-    }
-    if (child instanceof EFWaveform) {
-      return html`<ef-waveform-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-waveform-filmstrip>`;
-    }
-    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);
-    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 && 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 = Number.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");
-    }
-    return void 0;
-  }
-};
-_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
-};