{"_id":"@decent.xyz/ux-components","_rev":"8-44c607e76bbd11005c3b3d39621c5cd3","name":"@decent.xyz/ux-components","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.6":{"name":"@decent.xyz/ux-components","version":"1.0.6","author":{"name":"decent.xyz"},"license":"MIT","_id":"@decent.xyz/ux-components@1.0.6","maintainers":[{"name":"sweetman.eth","email":"sweetmantech@gmail.com"},{"name":"zev2axa","email":"zev@decent.xyz"},{"name":"cdsiren","email":"charlie@decent.xyz"},{"name":"decentxyz","email":"team@decent.xyz"}],"homepage":"https://github.com/decentxyz/ux-components#readme","bugs":{"url":"https://github.com/decentxyz/ux-components/issues"},"dist":{"shasum":"6c1205168b5cb10c9871a6cf51a283b387856468","tarball":"https://registry.npmjs.org/@decent.xyz/ux-components/-/ux-components-1.0.6.tgz","fileCount":57,"integrity":"sha512-QkAOqed4iVHKY8WRyxTZ/bmOWxcXZzDjK+jIWpCq4OPqd8ul8Vqnr7xGWLOIdFKfPfFXIkLRith8SkmvNdzvjA==","signatures":[{"sig":"MEUCIBTs0IXdhKY+tWEDEvsSi6l3ZJA12OJYB/npPZAGSWdLAiEAs9sGEJeaHe0sBXiIoByVOZe32REd74+wtURMtXHVFIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdSwzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeGRAAhX0Ou+iblKUr5cRlE0ERh3JJC15QEX6vNS7ioF8DFejleEUq\r\nPd2xTMbgFVtWMM/jEVmtiCb13jwSXj/s1at62SZ7Pdicc8iZLmjDC4f97t3o\r\nhvBTDlCuRUc5rDQ68nRtAvjNZaZN1+O0j3Tt2gV9dXmVtUrfrKuMVN7w+hHf\r\nlOq3cI2f70y38QiAsvFfCTJCE3QCcfB8DAr+d0WYDK5+mvCqr77GXEU/i28I\r\nJsKGWS35u68cnFNHHdD4xB9Q7WAnz9DtQSWl9RIQgc0tCphNyWGoLJzih3vd\r\n+J7svMQa5WSOrCdiurcOJ0Kj04xas6wSnn5V7wYx+HlZYYxbxXKNtejxeEbM\r\nzs5bpbNALRYvAvnG7tkNPr/LrdkI7TwCwxIYPs8S3PVtJaZwggFnPaQe4Gmk\r\n5WpHoM/lX+7Enfm59SIaKpVAiybsNl+DtMjS99SHJd3PtgiZzKfM+jKx7rRV\r\n+pVnNm152q4/pzSlbR6OUmVwSOdLv4yO0H4HmUzdRotumoB8IEqedd7Wofgp\r\nVvAEa6hMOsPtyNBH8R6htunlKjYQp8ZIl7pkQ0B4xH6liWKMFvWQq/XxocsD\r\nP16fxwuOkJGMCgBtOiSrkChcFZu2hhnkpN1wZw9H4dUeV2MvGbV/9OThw2yU\r\ngE0bp90uDzsScqNbbI+6dQfObKjjQVAcERc=\r\n=JPpI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"lint-staged"}},"source":"src/index.ts","gitHead":"409ed36ad9312b950066e5d52e86d64e80d49f45","private":false,"scripts":{"build":"yarn run prepack","clean":"rm -rf ./dist","prepack":"yarn clean && tsc","publish-prelease":"npm publish --access public --tag=pre-release"},"typings":"dist/index.d.ts","_npmUser":{"name":"sweetman.eth","email":"sweetmantech@gmail.com"},"repository":{"url":"git+https://github.com/decentxyz/ux-components.git","type":"git"},"_npmVersion":"8.1.4","description":"Decent UX Components","directories":{},"lint-staged":{"*.{ts,md}":"prettier src --write"},"_nodeVersion":"17.2.0","dependencies":{"tslib":"^2.2.0","@emotion/css":"^11.1.3","@types/react":"^18.0.25","@radix-ui/react-slider":"^1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":">=17.0.2","prettier":"^2.3.0","react-dom":">=17.0.2","typescript":"^4.2.4","@babel/core":"^7.14.2","babel-loader":"^8.2.2"},"peerDependencies":{"react":">=17.0.2","react-dom":">=17.0.2"},"_npmOperationalInternal":{"tmp":"tmp/ux-components_1.0.6_1668623411157_0.08507188117646991","host":"s3://npm-registry-packages"}},"1.0.7":{"name":"@decent.xyz/ux-components","version":"1.0.7","author":{"name":"decent.xyz"},"license":"MIT","_id":"@decent.xyz/ux-components@1.0.7","maintainers":[{"name":"sweetman.eth","email":"sweetmantech@gmail.com"},{"name":"zev2axa","email":"zev@decent.xyz"},{"name":"cdsiren","email":"charlie@decent.xyz"},{"name":"decentxyz","email":"team@decent.xyz"}],"homepage":"https://github.com/decentxyz/ux-components#readme","bugs":{"url":"https://github.com/decentxyz/ux-components/issues"},"dist":{"shasum":"de816b3c56bdbe6a68cb6ee0141478e7c9f4f56d","tarball":"https://registry.npmjs.org/@decent.xyz/ux-components/-/ux-components-1.0.7.tgz","fileCount":57,"integrity":"sha512-oi0FnZjT3WwBj5MG+iq/rXWaSmuS6T1bOu0lfI1RO0qMe2hfaQeA12A0uQS7doj8a6vas1M8vtk15Vy8EgNeQg==","signatures":[{"sig":"MEUCIQDLIKOBxX5qw1Jy2CowGYP79RV0MivVXNRSQE2JuQaoaAIgAQVswSlJ219n5pfJR68qa+SCgxAMMQBBx6FSG2ZtxCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":80569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjm3zGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7CBAAmRwr5U6d1SZFYGnF20W7Hdgd6qc1+2boh2cgaL0woY0umtAf\r\nHGpmW/RVeywxk5NzBfpK6f7Lvh6qpFlxC3k8VVKTvje5eSvohczz9S/ygjbG\r\nc76epE7Zvx9ZdJxc8+5u2HoUjTSDwx4V46JRFDqA8y9OmYy/aDBoIJmqkfuI\r\nzHdYNlXcQCgdL6qjhBTlaefX3+rbr5dKzmVYbHjZQpcYMVukYCl8J48c7RR9\r\nQ1ejMtfoVlY7EFYI5A6C15ldCQi/Sxk1xx8WNrWEkE37w2mhhp51Q3HVDXyb\r\n4YzxTsuR0gauj98k2plKz1clt5mvbRXFE01QvC6UNmKdsa1oGIrizAdLxkrg\r\n9J5zKmcuFkc/y5BiUEymgI4E2DKO2oFipxVnFgK0gRw27eHV+es6/ctXB+n5\r\nSN3TNf6zLm0FQ1pWHmir94kt5Uo2wd5AUvdb/ICtFXuKS1WQ5aUMk/Gs7J/b\r\nQK2rMZTSRp4DPnNw/g/JGF9GArE1YYLwZ/4DNWWNstQ0/F9dL5Eqo1646QqB\r\nKEdCYjJa/zV2SBYJnAI0aWL6Dwx8AG/LLGdvW4IWYPmIoYpe0hLW8BZT+oIp\r\nQmJ4nXXSvLJbSUo3KdWFXq80nkzQqdx8rtV0HyW3vIhyNjyZ+eqidbSjZRTc\r\nYAxbBsQPqWIW6uunYZ3EplP8/nDahDuAHZg=\r\n=W0W0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","husky":{"hooks":{"pre-commit":"lint-staged"}},"source":"src/index.ts","gitHead":"009d29f3d427bee6e222fc73d3ead6d0ac51b090","private":false,"scripts":{"tsc":"tsc","build":"yarn run prepack","clean":"rm -rf ./dist","prepack":"yarn clean && tsc","publish-prelease":"npm publish --access public --tag=pre-release"},"typings":"dist/index.d.ts","_npmUser":{"name":"sweetman.eth","email":"sweetmantech@gmail.com"},"repository":{"url":"git+https://github.com/decentxyz/ux-components.git","type":"git"},"_npmVersion":"8.1.4","description":"Decent UX Components","directories":{},"lint-staged":{"*.{ts,md}":"prettier src --write"},"_nodeVersion":"17.2.0","dependencies":{"tslib":"^2.2.0","@emotion/css":"^11.1.3","@types/react":"^18.0.25","@radix-ui/react-slider":"^1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":">=17.0.2","prettier":"^2.3.0","react-dom":">=17.0.2","typescript":"^4.2.4","@babel/core":"^7.14.2","babel-loader":"^8.2.2"},"peerDependencies":{"react":">=17.0.2","react-dom":">=17.0.2"},"_npmOperationalInternal":{"tmp":"tmp/ux-components_1.0.7_1671134406336_0.9124658508032915","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-11-16T18:30:11.157Z","modified":"2025-12-09T18:40:25.896Z","1.0.6":"2022-11-16T18:30:11.353Z","1.0.7":"2022-12-15T20:00:06.545Z"},"bugs":{"url":"https://github.com/decentxyz/ux-components/issues"},"author":{"name":"decent.xyz"},"license":"MIT","homepage":"https://github.com/decentxyz/ux-components#readme","repository":{"url":"git+https://github.com/decentxyz/ux-components.git","type":"git"},"description":"Decent UX Components","maintainers":[{"email":"charlie@decent.xyz","name":"cdsiren"},{"email":"itservices@moonpay.com","name":"npmitservices"}],"readme":"# Decent UX Components\n\nDecent's UX Components allows you to easily create your own music player, minting site, or music marketplace with Decent infrastructure.\n\nThis library works alongside the Decent [minting studio](https://hq.decent.xyz/) allows for DAOs and individuals to run their own decentralized record labels. Arbitrary music NFTs across a wide variety of contract implementations are supported.\n\n### Main components:\n\n- ``\n - play / pause button.\n- ``\n - full play bar.\n\n### Quickstart\n\n1. Add package:\n\n```bash\nyarn add decent-audio-player\n```\n\n### ⏯️ decent-audio-player 🎧\n\n- example: [decent-audio-player](https://decentaudioplayer.vercel.app)\n\n2 options:\n\n- `` - single track controls.\n- `` - full-width playbar with playlists.\n\n\n\n### Usage\n\n1. Add Providers:\n\n```tsx\nimport { useReducer } from \"react\";\nimport {\n DispatchPlayerContext,\n PlayerContext,\n playerInitialState,\n playerReducer,\n} from \"decent-audio-player\";\n\nconst App = ({ Component, pageProps }: AppProps) => {\n const [state, dispatch] = useReducer(playerReducer, playerInitialState);\n return (\n \n \n \n \n \n );\n};\n```\n\n2. Render a simple Audio Player:\n\n```tsx\nimport { AudioPlayer } from \"decent-audio-player\";\n\nexport const Page = () => (\n \n);\n```\n\n2. Render a full Persistent Player:\n\n```tsx\nimport { AudioPlayer } from \"decent-audio-player\";\n\nconst PLAYLIST = [\n {\n songUrl:\n \"https://nftstorage.link/ipfs/bafybeihxtxizfgtp5nazudkuc6dvtru2rykyklsse7t5r3rquydirgunxy/SHINY_7.wav\",\n project: \"shiny\",\n artist: \"kat dahlia\",\n website: \"https://github.com/decentxyz\",\n image:\n \"https://nftstorage.link/ipfs/QmVJBGbMXHNyBe62ruPByK5MG6KdbZkSGPiBMfpqRQ6qP2\",\n },\n {\n songUrl:\n \"https://nftstorage.link/ipfs/bafybeid3su3rqfwj7ydk52coz3xinku5vc7uu557t7rdkxx5dswcbxolda\",\n project: \"rugburn by sad alex\",\n artist: \"sad alex & chillpill\",\n website: \"https://github.com/decentxyz\",\n image:\n \"https://nftstorage.link/ipfs/bafybeif55mfehhzipicowg7fpdvdmgulwk6jgz2pbbxwuxjt7pmr7swlvu\",\n },\n];\n\nexport const Page = () => {\n return ;\n};\n```\n\n### Props\n\n- ``\n\n - `size` - size of Audio Player.\n - `audioSrc` - src of audio.\n - `callbackAfterPlay` - function to call after track begins playing.\n - `active` - flag for pre-released tracks to be unplayable / disabled.\n\n- ``\n - `playlist` - Array of Songs `Song[]`.\n\nSong\n\n```\nexport type Song = {\n songUrl: string;\n project: string;\n artist?: string;\n website?: string;\n image: string;\n};\n```\n","readmeFilename":"README.md"}