@editframe/elements 0.7.0-beta.9 → 0.8.0-beta.1

package/src/gui/EFFilmstrip.ts

@@ -1,4 +1,3 @@
-import { EFTimegroup } from "../elements/EFTimegroup";
 import {
   LitElement,
   html,
@@ -14,19 +13,25 @@ import {
   eventOptions,
   state,
 } from "lit/decorators.js";
+import { consume } from "@lit/context";
 import { styleMap } from "lit/directives/style-map.js";
 import { ref, createRef } from "lit/directives/ref.js";
-import { EFImage } from "../elements/EFImage";
-import { EFAudio } from "../elements/EFAudio";
-import { EFVideo } from "../elements/EFVideo";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions";
-import { EFWaveform } from "../elements/EFWaveform";
-import type { TemporalMixinInterface } from "../elements/EFTemporal";
-import { TimegroupController } from "../elements/TimegroupController";
-import { consume } from "@lit/context";
-import { type FocusContext, focusContext, focusedElement } from "./EFWorkbench";
-import { TWMixin } from "./TWMixin";
-import { msToTimeCode } from "@/av/msToTimeCode";
+
+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 type { TemporalMixinInterface } from "../elements/EFTemporal.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 } from "./playingContext.ts";
+import type { EFWorkbench } from "./EFWorkbench.ts";
+import type { EFPreview } from "./EFPreview.ts";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(
@@ -68,14 +73,14 @@ class FilmstripItem extends TWMixin(LitElement) {
   @consume({ context: focusContext, subscribe: true })
   focusContext?: FocusContext;
 
-  @consume({ context: focusedElement, subscribe: true })
+  @consume({ context: focusedElementContext, subscribe: true })
   focusedElement?: HTMLElement | null;
 
   get isFocused() {
     return this.element && this.focusContext?.focusedElement === this.element;
   }
 
-  @property({ type: HTMLElement, attribute: false })
+  @property({ type: Object, attribute: false })
   element: TemporalMixinInterface & LitElement = new EFTimegroup();
 
   @property({ type: Number })
@@ -254,14 +259,14 @@ export class EFHTMLFilmstrip extends FilmstripItem {
 class EFHierarchyItem<
   ElementType extends HTMLElement = HTMLElement,
 > extends TWMixin(LitElement) {
-  @property({ type: HTMLElement, attribute: false })
+  @property({ type: Object, attribute: false })
   // @ts-expect-error This could be initialzed with any HTMLElement
   element: ElementType = new EFTimegroup();
 
   @consume({ context: focusContext })
   focusContext?: FocusContext;
 
-  @consume({ context: focusedElement, subscribe: true })
+  @consume({ context: focusedElementContext, subscribe: true })
   focusedElement?: HTMLElement | null;
 
   get icon(): TemplateResult<1> | string {
@@ -485,23 +490,21 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
-  @property({ type: Number })
-  currentTimeMs = 0;
-
-  @property({ type: String, attribute: "target", reflect: true })
-  targetSelector = "";
-
   @state()
   scrubbing = false;
 
   @state()
-  playing = false;
+  timelineScrolltop = 0;
 
+  @consume({ context: playingContext, subscribe: true })
   @state()
-  timelineScrolltop = 0;
+  playing?: boolean;
 
   timegroupController?: TimegroupController;
 
+  @state()
+  currentTimeMs = 0;
+
   connectedCallback(): void {
     super.connectedCallback();
     this.#bindToTargetTimegroup();
@@ -541,7 +544,9 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         return;
       }
       event.preventDefault();
-      this.playing = !this.playing;
+      if (this.#contextElement) {
+        this.#contextElement.playing = !this.#contextElement.playing;
+      }
     }
   };
 
@@ -561,108 +566,6 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     }
   }
 
-  #lastTick?: DOMHighResTimeStamp;
-
-  #playbackAudioContext: AudioContext | null = null;
-  #playbackAnimationFrameRequest: number | null = null;
-  #AUDIO_PLAYBACK_SLICE_MS = 1000;
-
-  #syncPlayheadToAudioContext(target: EFTimegroup, startMs: number) {
-    target.currentTimeMs =
-      startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1000;
-    this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
-      this.#syncPlayheadToAudioContext(target, startMs);
-    });
-  }
-
-  async #stopPlayback() {
-    if (this.#playbackAudioContext) {
-      if (this.#playbackAudioContext.state !== "closed") {
-        await this.#playbackAudioContext.close();
-      }
-    }
-    if (this.#playbackAnimationFrameRequest) {
-      cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-    }
-    this.#playbackAudioContext = null;
-  }
-
-  async #startPlayback() {
-    await this.#stopPlayback();
-    const timegroup = this.targetTimegroup;
-    if (!timegroup) {
-      return;
-    }
-
-    let currentMs = timegroup.currentTimeMs;
-    let bufferCount = 0;
-    this.#playbackAudioContext = new AudioContext({
-      latencyHint: "playback",
-    });
-    if (this.#playbackAnimationFrameRequest) {
-      cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-    }
-    this.#syncPlayheadToAudioContext(timegroup, currentMs);
-    const playbackContext = this.#playbackAudioContext;
-    await playbackContext.suspend();
-
-    const fillBuffer = async () => {
-      if (bufferCount > 1) {
-        return;
-      }
-      const canFillBuffer = await queueBufferSource();
-      if (canFillBuffer) {
-        fillBuffer();
-      }
-    };
-
-    const fromMs = currentMs;
-    const toMs = timegroup.endTimeMs;
-
-    const queueBufferSource = async () => {
-      if (currentMs >= toMs) {
-        return false;
-      }
-      const startMs = currentMs;
-      const endMs = currentMs + this.#AUDIO_PLAYBACK_SLICE_MS;
-      currentMs += this.#AUDIO_PLAYBACK_SLICE_MS;
-      const audioBuffer = await timegroup.renderAudio(startMs, endMs);
-      bufferCount++;
-      const source = playbackContext.createBufferSource();
-      source.buffer = audioBuffer;
-      source.connect(playbackContext.destination);
-      source.start((startMs - fromMs) / 1000);
-      source.onended = () => {
-        bufferCount--;
-        if (endMs >= toMs) {
-          this.playing = false;
-        } else {
-          fillBuffer();
-        }
-      };
-      return true;
-    };
-
-    await fillBuffer();
-    await playbackContext.resume();
-  }
-
-  advancePlayhead = (tick?: DOMHighResTimeStamp) => {
-    if (this.#lastTick && tick && this.targetTimegroup) {
-      this.targetTimegroup.currentTimeMs += tick - this.#lastTick;
-      if (
-        this.targetTimegroup.currentTimeMs >= this.targetTimegroup.durationMs
-      ) {
-        this.playing = false;
-      }
-    }
-    this.#lastTick = tick;
-
-    if (this.playing) {
-      requestAnimationFrame(this.advancePlayhead);
-    }
-  };
-
   @eventOptions({ capture: false })
   scrub(e: MouseEvent) {
     if (this.playing) {
@@ -777,14 +680,18 @@ export class EFFilmstrip extends TWMixin(LitElement) {
           this.playing
             ? html`<button
               @click=${() => {
-                this.playing = false;
+                if (this.#contextElement) {
+                  this.#contextElement.playing = false;
+                }
               }}
             >
               ⏸️
             </button>`
             : html`<button
               @click=${() => {
-                this.playing = true;
+                if (this.#contextElement) {
+                  this.#contextElement.playing = true;
+                }
               }}
             >
               ▶️
@@ -826,17 +733,6 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     </div>`;
   }
 
-  update(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has("playing")) {
-      if (this.playing) {
-        this.#startPlayback();
-      } else {
-        this.#stopPlayback();
-      }
-    }
-    super.update(changedProperties);
-  }
-
   updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
     if (!this.targetTimegroup) {
       return;
@@ -846,19 +742,14 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         this.targetTimegroup.currentTimeMs = this.currentTimeMs;
       }
     }
-    if (changes.has("target")) {
-      this.#bindToTargetTimegroup();
-    }
+  }
+
+  get #contextElement(): EFWorkbench | EFPreview | null {
+    return this.closest("ef-workbench, ef-preview") as EFWorkbench | EFPreview;
   }
 
   get targetTimegroup() {
-    if (this.getAttribute("target")) {
-      const target = document.getElementById(this.getAttribute("target") ?? "");
-      if (target instanceof EFTimegroup) {
-        return target;
-      }
-    }
-    return undefined;
+    return this.#contextElement?.targetTimegroup;
   }
 }
 

package/src/gui/EFPreview.ts

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+
+import { TWMixin } from "./TWMixin.ts";
+import { ContextMixin } from "./ContextMixin.ts";
+
+@customElement("ef-preview")
+export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div
+        ${ref(this.stageRef)}
+        class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
+      >
+        <slot
+          ${ref(this.canvasRef)}
+          class="inline-block"
+        ></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-preview": EFPreview;
+  }
+}

package/src/gui/EFWorkbench.ts

@@ -1,34 +1,15 @@
-import { createContext, provide } from "@lit/context";
 import { LitElement, html, css, type PropertyValueMap } from "lit";
 import { TaskStatus } from "@lit/task";
-import {
-  customElement,
-  eventOptions,
-  property,
-  state,
-} from "lit/decorators.js";
+import { customElement, eventOptions } from "lit/decorators.js";
 import { ref, createRef } from "lit/directives/ref.js";
 
-import { awaitMicrotask } from "@/util/awaitMicrotask";
-import { deepGetTemporalElements } from "../elements/EFTemporal";
-import { TWMixin } from "./TWMixin";
-import { shallowGetTimegroups } from "../elements/EFTimegroup";
-
-export interface FocusContext {
-  focusedElement: HTMLElement | null;
-}
-export const focusContext = createContext<FocusContext>(Symbol("focusContext"));
-
-export const focusedElement = createContext<HTMLElement | undefined>(
-  Symbol("focusedElement"),
-);
-
-export const fetchContext = createContext<typeof fetch>(Symbol("fetchContext"));
-
-export const apiHostContext = createContext<string>(Symbol("apiHostContext"));
+import { deepGetTemporalElements } from "../elements/EFTemporal.ts";
+import { TWMixin } from "./TWMixin.ts";
+import { shallowGetTimegroups } from "../elements/EFTimegroup.ts";
+import { ContextMixin } from "./ContextMixin.ts";
 
 @customElement("ef-workbench")
-export class EFWorkbench extends TWMixin(LitElement) {
+export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
   static styles = [
     css`
       :host {
@@ -38,51 +19,6 @@ export class EFWorkbench extends TWMixin(LitElement) {
       }
     `,
   ];
-  stageRef = createRef<HTMLDivElement>();
-  canvasRef = createRef<HTMLSlotElement>();
-
-  @state()
-  stageScale = 1;
-
-  setStageScale = () => {
-    if (this.isConnected && !this.rendering) {
-      const canvasElement = this.canvasRef.value;
-      const stageElement = this.stageRef.value;
-      if (stageElement && canvasElement) {
-        // Determine the appropriate scale factor to make the canvas fit into
-        // it's parent element.
-        const stageWidth = stageElement.clientWidth;
-        const stageHeight = stageElement.clientHeight;
-        const canvasWidth = canvasElement.clientWidth;
-        const canvasHeight = canvasElement.clientHeight;
-        const stageRatio = stageWidth / stageHeight;
-        const canvasRatio = canvasWidth / canvasHeight;
-        if (stageRatio > canvasRatio) {
-          const scale = stageHeight / canvasHeight;
-          if (this.stageScale !== scale) {
-            canvasElement.style.transform = `scale(${scale})`;
-          }
-          this.stageScale = scale;
-        } else {
-          const scale = stageWidth / canvasWidth;
-          if (this.stageScale !== scale) {
-            canvasElement.style.transform = `scale(${scale})`;
-          }
-          this.stageScale = scale;
-        }
-      }
-    }
-    if (this.isConnected) {
-      requestAnimationFrame(this.setStageScale);
-    }
-  };
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    // Preferrably we would use a resizeObserver, but it is difficult to get the first resize
-    // timed correctl. So we use requestAnimationFrame as a stop-gap.
-    requestAnimationFrame(this.setStageScale);
-  }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
@@ -93,40 +29,6 @@ export class EFWorkbench extends TWMixin(LitElement) {
     event.preventDefault();
   }
 
-  @provide({ context: focusContext })
-  focusContext = this as FocusContext;
-
-  @provide({ context: focusedElement })
-  @state()
-  focusedElement?: HTMLElement;
-
-  @provide({ context: fetchContext })
-  fetch = (path: URL | RequestInfo, init: RequestInit = {}) => {
-    init.headers ||= {};
-    Object.assign(init.headers, {
-      "Content-Type": "application/json",
-    });
-
-    const bearerToken = this.apiToken;
-    if (bearerToken) {
-      Object.assign(init.headers, {
-        Authorization: `Bearer ${bearerToken}`,
-      });
-    }
-
-    return fetch(path, init);
-  };
-
-  @property({ type: String })
-  apiToken?: string;
-
-  @provide({ context: apiHostContext })
-  @property({ type: String })
-  apiHost = "";
-
-  @property({ type: Boolean })
-  rendering = false;
-
   focusOverlay = createRef<HTMLDivElement>();
 
   update(
@@ -215,7 +117,7 @@ export class EFWorkbench extends TWMixin(LitElement) {
 
     for (let i = 0; i < frameCount; i++) {
       firstGroup.currentTimeMs = i * stepDurationMs;
-      await awaitMicrotask();
+      await new Promise<void>(queueMicrotask);
       const busyTasks = temporals
         .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
         .map((temporal) => temporal.frameTask);

package/src/gui/TWMixin.ts

@@ -2,8 +2,11 @@ import type { LitElement } from "lit";
 // @ts-expect-error cannot figure out how to declare this module as a string
 import twStyle from "./TWMixin.css?inline";
 
-const twSheet = new CSSStyleSheet();
-twSheet.replaceSync(twStyle);
+let twSheet: CSSStyleSheet | null = null;
+if (typeof window !== "undefined") {
+  twSheet = new CSSStyleSheet();
+  twSheet.replaceSync(twStyle);
+}
 export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
   class TWElement extends Base {
     createRenderRoot() {
@@ -13,7 +16,11 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
           "TWMixin can only be applied to elements with shadow roots",
         );
       }
-
+      if (!twSheet) {
+        throw new Error(
+          "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment",
+        );
+      }
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,

package/src/gui/apiHostContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const apiHostContext = createContext<string>(Symbol("apiHostContext"));

package/src/gui/fetchContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+
+export const fetchContext = createContext<
+  (url: string, init?: RequestInit) => Promise<Response>
+>(Symbol("fetchContext"));

package/src/gui/focusContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from "@lit/context";
+
+export interface FocusContext {
+  focusedElement: HTMLElement | null;
+}
+
+export const focusContext = createContext<FocusContext>(Symbol("focusContext"));

package/src/gui/focusedElementContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+
+export const focusedElementContext = createContext<HTMLElement | undefined>(
+  Symbol("focusedElement"),
+);

package/src/gui/playingContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const playingContext = createContext<boolean>(Symbol("playingContext"));

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-# @editframe/elements
-
-## 0.7.0-beta.9
-
-### Patch Changes
-
-- [#33](https://github.com/editframe/elements/pull/33) [`17c4452`](https://github.com/editframe/elements/commit/17c4452f679b042ac0accd9bf520728455e8cc2c) Thanks [@IliasHad](https://github.com/IliasHad)! - resolve lit global package issue

package/postcss.config.cjs

@@ -1,12 +0,0 @@
-const path = require("node:path");
-module.exports = {
-  plugins: {
-    autoprefixer: {},
-    "postcss-import": {},
-    tailwindcss: {
-      config: {
-        content: [path.join(__dirname, "src/**/*.ts")],
-      },
-    },
-  },
-};

package/src/EF_INTERACTIVE.ts

@@ -1,2 +0,0 @@
-export const EF_INTERACTIVE =
-  !window.location.search.includes("EF_NONINTERACTIVE");

package/src/elements.css

@@ -1,22 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html {
-  @apply h-full w-full;
-}
-body {
-  @apply h-full w-full bg-black;
-}
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}

package/src/index.ts

@@ -1,33 +0,0 @@
-import "./elements.css";
-
-import "./elements/EFTimegroup";
-export { EFTimegroup } from "./elements/EFTimegroup";
-
-import "./elements/EFImage";
-export { EFImage } from "./elements/EFImage";
-
-import "./elements/EFMedia";
-export type { EFMedia } from "./elements/EFMedia";
-
-import "./elements/EFAudio";
-export { EFAudio } from "./elements/EFAudio";
-
-import "./elements/EFVideo";
-export { EFVideo } from "./elements/EFVideo";
-
-import "./elements/EFCaptions";
-export { EFCaptions, EFCaptionsActiveWord } from "./elements/EFCaptions";
-
-import "./elements/EFWaveform";
-export { EFWaveform } from "./elements/EFWaveform";
-
-import "./gui/EFWorkbench";
-export { EFWorkbench } from "./gui/EFWorkbench";
-
-import "./gui/EFFilmstrip";
-export { EFFilmstrip } from "./gui/EFFilmstrip";
-
-// @ts-expect-error
-window.EF_REGISTERED = true;
-
-import "./EF_FRAMEGEN";

package/tailwind.config.ts

@@ -1,10 +0,0 @@
-import type { Config } from "tailwindcss";
-
-module.exports = {
-  content: ["./src/**/*.ts"],
-
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config;

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "include": ["src/**/*.ts"],
-  "extends": "../../tsconfig.json"
-}

package/vite.config.ts

@@ -1,8 +0,0 @@
-import path from "node:path";
-
-import { defineViteBuildConfig } from "../defineViteBuildConfig";
-
-export default defineViteBuildConfig({
-  root: path.dirname(new URL(import.meta.url).pathname),
-  name: "editframe-elements",
-});