@editframe/react 0.0.1

package/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+/.git
+/node_modules
+/dist

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@editframe/react",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./dist/index.d.ts",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "react": "^18.2.0",
+    "uuid": "^9.0.0",
+    "@editframe/embed": "0.1.1",
+    "@editframe/shared-types": "3.11.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/uuid": "^9.0.1",
+    "tsup": "^6.6.3",
+    "tsconfig": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "author": "Editframe",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --minify",
+    "dev": "npm run build -- --watch",
+    "format": "prettier --write '**/*.{js,ts,tsx}' --loglevel error",
+    "lint": "eslint --ext .ts .",
+    "lint:fix": "eslint --ext .ts . --fix",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  }
+}

package/src/Player.tsx

@@ -0,0 +1,77 @@
+import { Player as PlayerClass } from "@editframe/embed";
+import { CompositionConfigEditor } from "@editframe/shared-types";
+import React, { useEffect, useRef } from "react";
+import { v4 as uuid } from "uuid";
+
+export interface IPlayerProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  applicationId?: string;
+  config: CompositionConfigEditor;
+  dimensions?: {
+    height: string;
+    width: string;
+  };
+  hideControls?: boolean;
+  host?: string;
+  loop: boolean;
+  playerState?: "playing" | "paused" | "stopped";
+  seek?: number;
+}
+
+const Player: React.FunctionComponent<IPlayerProps> = ({
+  applicationId,
+  children,
+  config,
+  dimensions,
+  hideControls,
+  host,
+  loop,
+  playerState,
+  seek,
+}) => {
+  const player = useRef(true);
+  const embed = useRef({} as any);
+  const containerId = `ef-player-${uuid().slice(0, 6)}`;
+  useEffect(() => {
+    if (!player.current && !embed.current.setState) {
+      embed.current = new PlayerClass({
+        applicationId,
+        config,
+        containerId,
+        dimensions,
+        host: host || "https://embed.editframe.com",
+        hideControls,
+      });
+      player.current = true;
+    }
+    return () => {
+      player.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (embed.current && embed.current.setState) {
+      embed.current.setState(playerState);
+    }
+    return () => {
+      if (embed.current && embed.current.setState) {
+        embed.current.setState("stopped");
+      }
+    };
+  }, [playerState]);
+  useEffect(() => {
+    if (embed.current && embed.current.setState) {
+      embed.current.seek(seek);
+    }
+    return () => {
+      if (embed.current && embed.current.setState) {
+        embed.current.seek(0);
+      }
+    };
+  }, [seek]);
+
+  return <div id={containerId}>{children}</div>;
+};
+export default Player;

package/src/index.ts

@@ -0,0 +1 @@
+export { default as Player } from "./Player";

package/tsconfig.json

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