@editframe/react 0.0.1 → 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { CompositionConfigEditor } from '@editframe/shared-types';
+import React from 'react';
+
+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;
+}
+declare const Player: React.FunctionComponent<IPlayerProps>;
+
+export { Player };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var c=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var S=(r,t)=>{for(var i in t)c(r,i,{get:t[i],enumerable:!0})},b=(r,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of h(t))!C.call(r,n)&&n!==i&&c(r,n,{get:()=>t[n],enumerable:!(s=P(t,n))||s.enumerable});return r};var v=r=>b(c({},"__esModule",{value:!0}),r);var R={};S(R,{Player:()=>m});module.exports=v(R);var f=require("@editframe/embed"),o=require("react"),d=require("uuid"),y=require("react/jsx-runtime"),E=({applicationId:r,children:t,config:i,dimensions:s,hideControls:n,host:g,loop:H,playerState:u,seek:p})=>{let a=(0,o.useRef)(!0),e=(0,o.useRef)({}),l=`ef-player-${(0,d.v4)().slice(0,6)}`;return(0,o.useEffect)(()=>(!a.current&&!e.current.setState&&(e.current=new f.Player({applicationId:r,config:i,containerId:l,dimensions:s,host:g||"https://embed.editframe.com",hideControls:n}),a.current=!0),()=>{a.current=!1}),[]),(0,o.useEffect)(()=>(e.current&&e.current.setState&&e.current.setState(u),()=>{e.current&&e.current.setState&&e.current.setState("stopped")}),[u]),(0,o.useEffect)(()=>(e.current&&e.current.setState&&e.current.seek(p),()=>{e.current&&e.current.setState&&e.current.seek(0)}),[p]),(0,y.jsx)("div",{id:l,children:t})},m=E;0&&(module.exports={Player});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{Player as d}from"@editframe/embed";import{useEffect as r,useRef as s}from"react";import{v4 as m}from"uuid";import{jsx as P}from"react/jsx-runtime";var y=({applicationId:a,children:c,config:u,dimensions:p,hideControls:l,host:f,loop:h,playerState:n,seek:o})=>{let t=s(!0),e=s({}),i=`ef-player-${m().slice(0,6)}`;return r(()=>(!t.current&&!e.current.setState&&(e.current=new d({applicationId:a,config:u,containerId:i,dimensions:p,host:f||"https://embed.editframe.com",hideControls:l}),t.current=!0),()=>{t.current=!1}),[]),r(()=>(e.current&&e.current.setState&&e.current.setState(n),()=>{e.current&&e.current.setState&&e.current.setState("stopped")}),[n]),r(()=>(e.current&&e.current.setState&&e.current.seek(o),()=>{e.current&&e.current.setState&&e.current.seek(0)}),[o]),P("div",{id:i,children:c})},g=y;export{g as Player};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/react",
-  "version": "0.0.1",
+  "author": "Editframe",
   "description": "",
   "main": "./dist/index.d.ts",
   "types": "./dist/index.d.ts",
@@ -19,10 +19,10 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "author": "Editframe",
-  "publishConfig": {
-    "access": "restricted"
-  },
+  "files": [
+    "dist"
+  ],
+  "version": "0.1.1",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --minify",
     "dev": "npm run build -- --watch",

package/.prettierignore

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

package/src/Player.tsx

@@ -1,77 +0,0 @@
-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

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

package/tsconfig.json

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