@editframe/react 0.7.0-beta.8 → 0.8.0-beta.1

package/dist/elements/EFTimegroup.d.ts

@@ -0,0 +1,3 @@
+import { EFTimegroup as EFTimegroupElement } from '../../../elements/src';
+
+export declare const EFTimegroup: import('../create-component.ts').ReactWebComponent<EFTimegroupElement, {}>;

package/dist/gui/EFPreview.d.ts

@@ -0,0 +1,3 @@
+import { EFPreview as EFPreviewElement } from '../../../elements/src';
+
+export declare const EFPreview: import('@lit/react').ReactWebComponent<EFPreviewElement, {}>;

package/dist/gui/EFPreview.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFPreview as EFPreview$1 } from "@editframe/elements";
+const EFPreview = createComponent({
+  tagName: "ef-preview",
+  elementClass: EFPreview$1,
+  react: React
+});
+export {
+  EFPreview
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { EFAudio } from './elements/EFAudio.ts';
+export { EFCaptions, EFCaptionsActiveWord } from './elements/EFCaptions.ts';
+export { EFImage } from './elements/EFImage.ts';
+export { EFTimegroup } from './elements/EFTimegroup.ts';
+export { EFVideo } from './elements/EFVideo.ts';
+export { EFWaveform } from './elements/EFWaveform.ts';
+export { EFWorkbench } from './gui/EFWorkbench.ts';
+export { EFFilmstrip } from './gui/EFFilmstrip.ts';
+export { EFPreview } from './gui/EFPreview.ts';
+export { useTimingInfo } from './hooks/useTimingInfo.ts';

package/dist/index.js

@@ -6,6 +6,7 @@ import { EFVideo } from "./elements/EFVideo.js";
 import { EFWaveform } from "./elements/EFWaveform.js";
 import { EFWorkbench } from "./gui/EFWorkbench.js";
 import { EFFilmstrip } from "./gui/EFFilmstrip.js";
+import { EFPreview } from "./gui/EFPreview.js";
 import { useTimingInfo } from "./hooks/useTimingInfo.js";
 export {
   EFAudio,
@@ -13,6 +14,7 @@ export {
   EFCaptionsActiveWord,
   EFFilmstrip,
   EFImage,
+  EFPreview,
   EFTimegroup,
   EFVideo,
   EFWaveform,

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@editframe/react",
-  "version": "0.7.0-beta.8",
+  "version": "0.8.0-beta.1",
   "description": "",
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/index.js",
-        "types": "./dist/packages/react/src/index.d.ts"
-      },
-      "require": {
-        "default": "./dist/index.cjs",
-        "types": "./dist/packages/react/src/index.d.ts"
+        "types": "./dist/packages/react/src/index.d.ts",
+        "default": "./dist/index.js"
       }
     }
   },
@@ -23,16 +19,18 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.7.0-beta.8",
+    "@editframe/elements": "0.8.0-beta.1",
     "@lit/react": "^1.0.5",
     "debug": "^4.3.5",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "typescript": "^5.5.4",
     "vite-plugin-dts": "^3.9.1",
     "vite-tsconfig-paths": "^4.3.2"
   }

package/src/elements/EFTimegroup.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { createComponent } from "../create-component";
+import { createComponent } from "../create-component.ts";
 import { EFTimegroup as EFTimegroupElement } from "@editframe/elements";
 
 export const EFTimegroup = createComponent({

package/src/gui/EFPreview.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFPreview as EFPreviewElement } from "@editframe/elements";
+
+export const EFPreview = createComponent({
+  tagName: "ef-preview",
+  elementClass: EFPreviewElement,
+  react: React,
+});

package/dist/create-component.cjs

@@ -1,128 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const reservedReactProperties = /* @__PURE__ */ new Set([
-  "id",
-  "children",
-  "localName",
-  "ref",
-  "style",
-  "className"
-]);
-const listenedEvents = /* @__PURE__ */ new WeakMap();
-const addOrUpdateEventListener = (node, event, listener) => {
-  let events = listenedEvents.get(node);
-  if (events === void 0) {
-    listenedEvents.set(node, events = /* @__PURE__ */ new Map());
-  }
-  let handler = events.get(event);
-  if (listener !== void 0) {
-    if (handler === void 0) {
-      events.set(event, handler = { handleEvent: listener });
-      node.addEventListener(event, handler);
-    } else {
-      handler.handleEvent = listener;
-    }
-  } else if (handler !== void 0) {
-    events.delete(event);
-    node.removeEventListener(event, handler);
-  }
-};
-const setProperty = (node, name, value, old, events) => {
-  const event = events?.[name];
-  if (event !== void 0) {
-    if (value !== old) {
-      addOrUpdateEventListener(node, event, value);
-    }
-    return;
-  }
-  node[name] = value;
-  if ((value === void 0 || value === null) && name in HTMLElement.prototype) {
-    node.removeAttribute(name);
-  }
-};
-const createComponent = ({
-  react: React,
-  tagName,
-  elementClass,
-  events,
-  displayName
-}) => {
-  const eventProps = new Set(Object.keys(events ?? {}));
-  {
-    for (const p of reservedReactProperties) {
-      if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {
-        console.warn(
-          `${tagName} contains property ${p} which is a React reserved property. It will be used by React and not set on the element.`
-        );
-      }
-    }
-  }
-  const ReactComponent = React.forwardRef((props, ref) => {
-    const prevElemPropsRef = React.useRef(/* @__PURE__ */ new Map());
-    const elementRef = React.useRef(null);
-    const reactProps = {};
-    const elementProps = {};
-    for (const [k, v] of Object.entries(props)) {
-      if (reservedReactProperties.has(k)) {
-        reactProps[k === "className" ? "class" : k] = v;
-        continue;
-      }
-      if (eventProps.has(k) || k in elementClass.prototype) {
-        elementProps[k] = v;
-        continue;
-      }
-      reactProps[k] = v;
-    }
-    {
-      React.useLayoutEffect(() => {
-        if (elementRef.current === null) {
-          return;
-        }
-        const newElemProps = /* @__PURE__ */ new Map();
-        for (const key in elementProps) {
-          setProperty(
-            elementRef.current,
-            key,
-            props[key],
-            prevElemPropsRef.current.get(key),
-            events
-          );
-          prevElemPropsRef.current.delete(key);
-          newElemProps.set(key, props[key]);
-        }
-        for (const [key, value] of prevElemPropsRef.current) {
-          setProperty(elementRef.current, key, void 0, value, events);
-        }
-        prevElemPropsRef.current = newElemProps;
-      });
-      React.useLayoutEffect(() => {
-        elementRef.current?.removeAttribute("defer-hydration");
-      }, []);
-    }
-    {
-      reactProps.suppressHydrationWarning = true;
-    }
-    return React.createElement(tagName, {
-      ...reactProps,
-      ref: React.useCallback(
-        (node) => {
-          elementRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref !== null) {
-            ref.current = node;
-          }
-        },
-        [ref]
-      )
-    });
-  });
-  ReactComponent.displayName = displayName ?? elementClass.name;
-  return ReactComponent;
-};
-exports.createComponent = createComponent;

package/dist/elements/EFAudio.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@lit/react");
-const elements = require("@editframe/elements");
-const EFAudio = react.createComponent({
-  tagName: "ef-audio",
-  elementClass: elements.EFAudio,
-  react: React
-});
-exports.EFAudio = EFAudio;

package/dist/elements/EFCaptions.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@lit/react");
-const elements = require("@editframe/elements");
-const EFCaptions = react.createComponent({
-  tagName: "ef-captions",
-  elementClass: elements.EFCaptions,
-  react: React
-});
-const EFCaptionsActiveWord = react.createComponent({
-  tagName: "ef-captions-active-word",
-  elementClass: elements.EFCaptionsActiveWord,
-  react: React
-});
-exports.EFCaptions = EFCaptions;
-exports.EFCaptionsActiveWord = EFCaptionsActiveWord;

package/dist/elements/EFImage.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@lit/react");
-const elements = require("@editframe/elements");
-const EFImage = react.createComponent({
-  tagName: "ef-image",
-  elementClass: elements.EFImage,
-  react: React
-});
-exports.EFImage = EFImage;

package/dist/elements/EFTimegroup.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const createComponent = require("../create-component.cjs");
-const elements = require("@editframe/elements");
-const EFTimegroup = createComponent.createComponent({
-  tagName: "ef-timegroup",
-  elementClass: elements.EFTimegroup,
-  react: React
-});
-exports.EFTimegroup = EFTimegroup;

package/dist/elements/EFVideo.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@lit/react");
-const elements = require("@editframe/elements");
-const EFVideo = react.createComponent({
-  tagName: "ef-video",
-  elementClass: elements.EFVideo,
-  react: React
-});
-exports.EFVideo = EFVideo;

package/dist/elements/EFWaveform.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@lit/react");
-const elements = require("@editframe/elements");
-const EFWaveform = react.createComponent({
-  tagName: "ef-waveform",
-  elementClass: elements.EFWaveform,
-  react: React
-});
-exports.EFWaveform = EFWaveform;

package/dist/gui/EFFilmstrip.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@lit/react");
-const elements = require("@editframe/elements");
-const EFFilmstrip = react.createComponent({
-  tagName: "ef-filmstrip",
-  elementClass: elements.EFFilmstrip,
-  react: React
-});
-exports.EFFilmstrip = EFFilmstrip;

package/dist/gui/EFWorkbench.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const react = require("@lit/react");
-const elements = require("@editframe/elements");
-const EFWorkbench = react.createComponent({
-  tagName: "ef-workbench",
-  elementClass: elements.EFWorkbench,
-  react: React
-});
-exports.EFWorkbench = EFWorkbench;

package/dist/hooks/useTimingInfo.cjs

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-class CurrentTimeController {
-  constructor(host, setCurrentTime) {
-    this.host = host;
-    this.setCurrentTime = setCurrentTime;
-    this.host.addController(this);
-  }
-  hostDisconnected() {
-    this.host.removeController(this);
-  }
-  hostUpdated() {
-    this.setCurrentTime({
-      ownCurrentTimeMs: this.host.ownCurrentTimeMs,
-      durationMs: this.host.durationMs,
-      percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs
-    });
-  }
-}
-const useTimingInfo = (timegroupRef = React.useRef(null)) => {
-  const [timeInfo, setTimeInfo] = React.useState({
-    ownCurrentTimeMs: 0,
-    durationMs: 0,
-    percentComplete: 0
-  });
-  React.useEffect(() => {
-    if (!timegroupRef.current) {
-      throw new Error("Timegroup ref not set");
-    }
-    new CurrentTimeController(timegroupRef.current, setTimeInfo);
-  }, [timegroupRef.current]);
-  return { ...timeInfo, ref: timegroupRef };
-};
-exports.useTimingInfo = useTimingInfo;

package/dist/index.cjs

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EFAudio = require("./elements/EFAudio.cjs");
-const EFCaptions = require("./elements/EFCaptions.cjs");
-const EFImage = require("./elements/EFImage.cjs");
-const EFTimegroup = require("./elements/EFTimegroup.cjs");
-const EFVideo = require("./elements/EFVideo.cjs");
-const EFWaveform = require("./elements/EFWaveform.cjs");
-const EFWorkbench = require("./gui/EFWorkbench.cjs");
-const EFFilmstrip = require("./gui/EFFilmstrip.cjs");
-const useTimingInfo = require("./hooks/useTimingInfo.cjs");
-exports.EFAudio = EFAudio.EFAudio;
-exports.EFCaptions = EFCaptions.EFCaptions;
-exports.EFCaptionsActiveWord = EFCaptions.EFCaptionsActiveWord;
-exports.EFImage = EFImage.EFImage;
-exports.EFTimegroup = EFTimegroup.EFTimegroup;
-exports.EFVideo = EFVideo.EFVideo;
-exports.EFWaveform = EFWaveform.EFWaveform;
-exports.EFWorkbench = EFWorkbench.EFWorkbench;
-exports.EFFilmstrip = EFFilmstrip.EFFilmstrip;
-exports.useTimingInfo = useTimingInfo.useTimingInfo;

package/dist/packages/react/src/elements/EFTimegroup.d.ts

@@ -1,3 +0,0 @@
-import { EFTimegroup as EFTimegroupElement } from '../../../elements/src';
-
-export declare const EFTimegroup: import('../create-component').ReactWebComponent<EFTimegroupElement, {}>;

package/dist/packages/react/src/index.d.ts

@@ -1,9 +0,0 @@
-export { EFAudio } from './elements/EFAudio';
-export { EFCaptions, EFCaptionsActiveWord } from './elements/EFCaptions';
-export { EFImage } from './elements/EFImage';
-export { EFTimegroup } from './elements/EFTimegroup';
-export { EFVideo } from './elements/EFVideo';
-export { EFWaveform } from './elements/EFWaveform';
-export { EFWorkbench } from './gui/EFWorkbench';
-export { EFFilmstrip } from './gui/EFFilmstrip';
-export { useTimingInfo } from './hooks/useTimingInfo';