{"_id":"@ample-launchpad/ui","_rev":"1-01ed6b9f2ebaf8c0ca653e1f20a00fe1","name":"@ample-launchpad/ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@ample-launchpad/ui","version":"0.1.0","author":{"name":"Manuel Rivera","email":"menu.rivera@gmail.com"},"license":"Apache-2.0","_id":"@ample-launchpad/ui@0.1.0","maintainers":[{"name":"menu.rivera","email":"menu.rivera@gmail.com"}],"homepage":"https://github.com/AmpleProtocol/launchpad#readme","bugs":{"url":"https://github.com/AmpleProtocol/launchpad/issues"},"dist":{"shasum":"5b4b6399919448764e58849a27d56251730852a1","tarball":"https://registry.npmjs.org/@ample-launchpad/ui/-/ui-0.1.0.tgz","fileCount":6,"integrity":"sha512-C853ejx/513NTFFwGjFYrCsoktrIwlaJZzCvBbykicvIfNFDGo8NdCj5WmHwEzesz+MQ7W1BJQtXp2cjEpyCqg==","signatures":[{"sig":"MEYCIQC4mFXh9Mbc21lmk5ydo4c+B96LOdx+F1WY6LTjx1XUEAIhAObAWmm5K42GeMTFZuTIJYjQR+57zs/Um7H0myWltci4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":67664},"main":"dist/index.js","type":"module","_from":"file:ample-launchpad-ui-0.1.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","prepublish":"npm run build"},"_npmUser":{"name":"menu.rivera","email":"menu.rivera@gmail.com"},"_resolved":"/tmp/30000d49875dbb018776684c3efec441/ample-launchpad-ui-0.1.0.tgz","_integrity":"sha512-C853ejx/513NTFFwGjFYrCsoktrIwlaJZzCvBbykicvIfNFDGo8NdCj5WmHwEzesz+MQ7W1BJQtXp2cjEpyCqg==","repository":{"url":"git+https://github.com/AmpleProtocol/launchpad.git","type":"git"},"_npmVersion":"10.5.0","description":"A set of React components and utils to launch and tokenize IP + media anywhere.","directories":{},"_nodeVersion":"21.7.3","dependencies":{"hls.js":"^1.5.15","recharts":"^2.12.7","theme-ui":"^0.16.2","near-api-js":"^4.0.3","tus-js-client":"^4.1.0","@emotion/react":"^11.13.0","@vidstack/react":"^1.12.9","react-hook-form":"^7.52.2"},"_hasShrinkwrap":false,"devDependencies":{"cpx":"^1.5.0","tsup":"^8.0.2","typescript":"^5.4.3","@types/node":"^20.11.30","@types/react":"^18.3.3"},"peerDependencies":{"react":"^18","@ample-launchpad/core":"0.1.0","@ample-launchpad/client":"0.1.0","@near-wallet-selector/core":"^8.9.12"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1725675499636_0.3554239258599601","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@ample-launchpad/ui","version":"0.1.1","description":"A set of React components and utils to launch and tokenize IP + media anywhere.","type":"module","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/AmpleProtocol/launchpad.git"},"author":{"name":"Manuel Rivera","email":"menu.rivera@gmail.com"},"license":"Apache-2.0","bugs":{"url":"https://github.com/AmpleProtocol/launchpad/issues"},"homepage":"https://github.com/AmpleProtocol/launchpad#readme","devDependencies":{"@types/node":"^20.11.30","@types/react":"^18.3.3","cpx":"^1.5.0","tsup":"^8.0.2","typescript":"^5.4.3"},"dependencies":{"@emotion/react":"^11.13.0","@vidstack/react":"^1.12.9","hls.js":"^1.5.15","near-api-js":"^4.0.3","react-hook-form":"^7.52.2","recharts":"^2.12.7","theme-ui":"^0.16.2","tus-js-client":"^4.1.0"},"peerDependencies":{"@near-wallet-selector/core":"^8.9.12","react":"^18","@ample-launchpad/client":"0.1.1","@ample-launchpad/core":"0.1.1"},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","prepublish":"npm run build"},"_id":"@ample-launchpad/ui@0.1.1","_integrity":"sha512-7I8QfQ/FGEsIe9FiqohBmwIzZ1qHVRt+ukQYcFE4ztw6QFg1dBE6wzJRjA7EMr7tb6E9WjGSsxCGX1Y/zSL48A==","_resolved":"/tmp/f8020cf956cc0e8b192e1a5fdbfdb007/ample-launchpad-ui-0.1.1.tgz","_from":"file:ample-launchpad-ui-0.1.1.tgz","_nodeVersion":"21.7.3","_npmVersion":"10.8.3","dist":{"integrity":"sha512-7I8QfQ/FGEsIe9FiqohBmwIzZ1qHVRt+ukQYcFE4ztw6QFg1dBE6wzJRjA7EMr7tb6E9WjGSsxCGX1Y/zSL48A==","shasum":"af249bbb3e7015a07b7caa7889da8e2ac0888363","tarball":"https://registry.npmjs.org/@ample-launchpad/ui/-/ui-0.1.1.tgz","fileCount":6,"unpackedSize":72261,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC19ApVokOnfoERoZwqGTGGLkdHSXAT1Hb3bvaCegoUWAIhAIDDU2PAGsH4wz3LJaY9NqCVQTCmxNevy5ls6sBpXE2S"}]},"_npmUser":{"name":"menu.rivera","email":"menu.rivera@gmail.com"},"directories":{},"maintainers":[{"name":"menu.rivera","email":"menu.rivera@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_0.1.1_1726719202934_0.6275699448444554"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-07T02:18:19.530Z","modified":"2024-09-19T04:13:23.273Z","0.1.0":"2024-09-07T02:18:19.838Z","0.1.1":"2024-09-19T04:13:23.087Z"},"bugs":{"url":"https://github.com/AmpleProtocol/launchpad/issues"},"author":{"name":"Manuel Rivera","email":"menu.rivera@gmail.com"},"license":"Apache-2.0","homepage":"https://github.com/AmpleProtocol/launchpad#readme","repository":{"type":"git","url":"git+https://github.com/AmpleProtocol/launchpad.git"},"description":"A set of React components and utils to launch and tokenize IP + media anywhere.","maintainers":[{"name":"menu.rivera","email":"menu.rivera@gmail.com"}],"readme":"# Ample Launchpad | UI Package\nA set of React components and utils to launch and tokenize IP + media anywhere.\n\n## Quick start\n### Install dependencies\n```sh \nnpm install \\\n    @ample-launchpad/core \\\n    @ample-launchpad/client \\\n    @ample-launchpad/ui\n```\n\n### Init launchpad \n```typescript \n// @ample-launchpad/ui and @ample-launchpad/client packages are intended to be used in tandem with @near-wallet-selector.\n// Please setup wallet selector before using these packages.\n// see example/ for a complete @near-wallet-selector + @ample-launchpad integration\nimport { useState, useEffect } from 'react'\nimport { walletSelector } from 'your-wallet-selector-setup'\nimport { Launchpad, setupLaunchpad } from '@ample-launchpad/client'\nimport { AmpleLaunchpadProvider } from '@ample-launchpad/ui'\nimport \"@ample-launchpad/ui/dist/index.css\"\n\n\nconst ExampleApp = () => {\n    const [launchpad, setLaunchpad] = useState<Launchpad | undefined>()\n\n    useEffect(() => {\n        initLaunchpad()\n    }, [])\n\n    const initLaunchpad = async () => {\n        if(!walletSelector) return\n        const wallet = await walletSelector.wallet()\n\n        const launchpad = await setupLaunchpad({\n            wallet,\n            // you might want to make these env variables\n            network: 'testnet',\n            serverUrl: 'https://your-server-deployment.com',\n            treasuryAddress: 'treasury.your-near-acc.testnet',\n            seriesAddress: 'series.your-near-acc.testnet',\n        })\n\n        setLaunchpad(launchpad)\n    }\n\n    return <>\n        {\n            launchpad \n                ? <AmpleLaunchpadProvider launchpad={launchpad} accentColor='purple'> \n                    {/* content here */}\n                </AmpleLaunchpadProvider>\n                : <div>No launchpad here :(</div>\n        }\n    </>\n}\n```\n\n### Hooks\n#### useLaunchpad\nThis is the main hook to interact with the launchpad, it allows you to access the `Launchpad` instance created during setup.\n```typescript\nimport { useLaunchpad } from '@ample-launchpad/ui'\nimport { IContent } from '@ample-launchpad/client'\n\nconst SomeComponent = () => {\n    const { getContents } = useLaunchpad()\n    const [contents, setContents] = useState<IContent[] | undefined>()\n\n    useEffect(() => {\n        fetchContents()\n    }, [])\n\n    const fetchContents = async () => {\n        const res = await getContents()\n\n        if(res.data.success) setContents(res.data.data)\n    }\n\n    if(!contents) return null\n\n    return <>\n        {contents.map((c, i) => <div key={i}>{c.title}</div>)}\n    </>\n}\n```\n\n#### useStreaming\nThis hook will take care of the tokengated streaming process by asking the user for a signature to validate wallet ownership, get a jwt with that signature and store the access token for each content in local storage.\n\nHere is an example of how to use the `useStreaming` hook along with the Livepeer player component:\n> The following setup is needed to get [Livepeer](https://livepeer.org) metrics working properly. See https://docs.livepeer.org/developers/guides/get-engagement-analytics-via-api#registering-views for more information\n```typescript\nimport { useStreaming } from \"@ample-launchpad/ui\"\nimport { getSrc } from \"@livepeer/react/external\";\nimport * as LivepeerPlayer from \"@livepeer/react/player\";\n\ninterface IProps {\n\tcontentId: string,\n\ttitle: string\n}\nexport const CustomPlayer: React.FC<IProps> = ({ contentId, title }) => {\n\tconst { error, streamingUrl, jwt, tryAgain } = useStreaming(contentId)\n\n\tif (!streamingUrl) return null\n\n\tif (error) return <div>\n\t\t<pre>{error}</pre>\n\t\t<button onClick={tryAgain}>Try again</button>\n\t</div>\n\n\treturn <LivepeerPlayer.Root aspectRatio={null} autoPlay src={getSrc(streamingUrl)} jwt={jwt}>\n\t\t<LivepeerPlayer.Container>\n\t\t\t<LivepeerPlayer.Video controls title={title} muted />\n\t\t</LivepeerPlayer.Container>\n\t</LivepeerPlayer.Root>\n}\n\n```\n\n### React components\n#### `<Launch />`\n```typescript \nimport { Launch } from \"@ample-launchpad/ui\"\n\nconst SomeOtherComponent = () => {\n\treturn <Launch\n        onUploadError={(error) => console.error(error)}\n\t\tonUploadProgress={(progress) => { console.log({ progress }) }}\n\t\tonContentCreated={({ collectionId, contentId }) => { console.log({ collectionId, contentId }) }}\n\t/>\n}\n```\n\n#### `<Royalty />`\n```typescript\nimport { Royalty } from \"@ample-launchpad/ui\"\n\nconst AnotherOne = () => {\n    return <Royalty />\n}\n```\n\n#### `<Player />`\n> This player component handles only the tokengated side of the streaming process. It is not yet capable of sending metrics to the chosen provider. For integrating a custom player with a per-provider metrics system, please see the [useStreaming](#usestreaming) hook.\n```typescript \nimport { Player } from \"@ample-launchpad/ui\"\n\nconst contentId = 'some-content-id'\nconst title = 'Shrek'\n\nconst LastFakeComponent = () => {\n    return <Player contentId={contentId} title={title} />\n}\n```\n","readmeFilename":"README.md"}