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

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