@editframe/react 0.6.0-beta.19 → 0.6.0-beta.22

package/dist/elements/EFAudio.cjs

@@ -0,0 +1,11 @@
+"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/EFAudio.js

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

package/dist/elements/EFCaptions.cjs

@@ -0,0 +1,17 @@
+"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/EFCaptions.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFCaptions as EFCaptions$1, EFCaptionsActiveWord as EFCaptionsActiveWord$1 } from "@editframe/elements";
+const EFCaptions = createComponent({
+  tagName: "ef-captions",
+  elementClass: EFCaptions$1,
+  react: React
+});
+const EFCaptionsActiveWord = createComponent({
+  tagName: "ef-captions-active-word",
+  elementClass: EFCaptionsActiveWord$1,
+  react: React
+});
+export {
+  EFCaptions,
+  EFCaptionsActiveWord
+};

package/dist/elements/EFImage.cjs

@@ -0,0 +1,11 @@
+"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/EFImage.js

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

package/dist/elements/EFTimegroup.cjs

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

package/dist/elements/EFTimegroup.js

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

package/dist/elements/EFVideo.cjs

@@ -0,0 +1,11 @@
+"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/EFVideo.js

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

package/dist/elements/EFWaveform.cjs

@@ -0,0 +1,11 @@
+"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/elements/EFWaveform.js

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

package/dist/gui/EFFilmstrip.cjs

@@ -0,0 +1,11 @@
+"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/EFFilmstrip.js

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

package/dist/gui/EFWorkbench.cjs

@@ -0,0 +1,11 @@
+"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/gui/EFWorkbench.js

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

package/dist/hooks/useTimingInfo.cjs

@@ -0,0 +1,35 @@
+"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/hooks/useTimingInfo.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useRef } from "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 = useRef(null)) => {
+  const [timeInfo, setTimeInfo] = useState({
+    ownCurrentTimeMs: 0,
+    durationMs: 0,
+    percentComplete: 0
+  });
+  useEffect(() => {
+    if (!timegroupRef.current) {
+      throw new Error("Timegroup ref not set");
+    }
+    new CurrentTimeController(timegroupRef.current, setTimeInfo);
+  }, [timegroupRef.current]);
+  return { ...timeInfo, ref: timegroupRef };
+};
+export {
+  useTimingInfo
+};

package/dist/index.cjs

@@ -0,0 +1,21 @@
+"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/index.js

@@ -0,0 +1,21 @@
+import { EFAudio } from "./elements/EFAudio.js";
+import { EFCaptions, EFCaptionsActiveWord } from "./elements/EFCaptions.js";
+import { EFImage } from "./elements/EFImage.js";
+import { EFTimegroup } from "./elements/EFTimegroup.js";
+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 { useTimingInfo } from "./hooks/useTimingInfo.js";
+export {
+  EFAudio,
+  EFCaptions,
+  EFCaptionsActiveWord,
+  EFFilmstrip,
+  EFImage,
+  EFTimegroup,
+  EFVideo,
+  EFWaveform,
+  EFWorkbench,
+  useTimingInfo
+};

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

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

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

@@ -0,0 +1,4 @@
+import { EFCaptions as EFCaptionsElement, EFCaptionsActiveWord as EFCaptionsActiveWordElement } from '../../../elements/src';
+
+export declare const EFCaptions: import('@lit/react').ReactWebComponent<EFCaptionsElement, {}>;
+export declare const EFCaptionsActiveWord: import('@lit/react').ReactWebComponent<EFCaptionsActiveWordElement, {}>;

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

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

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

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

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

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

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

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

package/dist/packages/react/src/gui/EFFilmstrip.d.ts

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

package/dist/packages/react/src/gui/EFWorkbench.d.ts

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

package/dist/packages/react/src/hooks/useTimingInfo.d.ts

@@ -0,0 +1,8 @@
+import { EFTimegroup } from '../../../elements/src';
+
+export declare const useTimingInfo: (timegroupRef?: React.RefObject<EFTimegroup>) => {
+    ref: import('react').RefObject<EFTimegroup>;
+    ownCurrentTimeMs: number;
+    durationMs: number;
+    percentComplete: number;
+};

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

@@ -0,0 +1,9 @@
+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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/react",
-  "version": "0.6.0-beta.19",
+  "version": "0.6.0-beta.22",
   "description": "",
   "exports": {
     ".": {
@@ -23,7 +23,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.6.0-beta.19",
+    "@editframe/elements": "0.6.0-beta.22",
     "@lit/react": "^1.0.5",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"