","directories":{},"sideEffects":false,"_nodeVersion":"22.6.0","dependencies":{"zod":"3.24.3","jotai":"^2.12.1","konva":"8.4.3","peaks.js":"3.4.2","prop-types":"15.8.1","@vimeo/player":"^2.20.1","waveform-data":"4.5.1","@emotion/react":"^11.10.5","youtube-player":"^5.6.0","@changesets/cli":"^2.27.10","@emotion/styled":"^11.10.5","create-silent-audio":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","typescript":"^5.3.3","@types/node":"22.3.0","@biomejs/biome":"1.9.4","@aims-api/aims-node":"0.0.39","esbuild-plugin-svgr":"3.1.0","@types/vimeo__player":"^2.18.3"},"peerDependencies":{"react":">=18","react-dom":">=18","@types/react":">=18","@types/react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/ui-sdk_0.0.2_1747929988544_0.36868992676075685","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@aims-api/ui-sdk","version":"0.0.3","_id":"@aims-api/ui-sdk@0.0.3","maintainers":[{"name":"afatoga","email":"afatoga@gmail.com"},{"name":"aims-admin","email":"admin@aimsapi.com"},{"name":"wernerdweight","email":"wd@wernerdweight.com"},{"name":"rossoreisen","email":"rossoreisen@gmail.com"}],"dist":{"shasum":"9bb2383635f59070875ac1faa23d3be8070a7d18","tarball":"https://registry.npmjs.org/@aims-api/ui-sdk/-/ui-sdk-0.0.3.tgz","fileCount":13,"integrity":"sha512-ulARkiyvRG2a+MpaWzemnZ3sUPoz9wRbDCtXCY08Y2JBfCvk15pmsiW4juGvLzTm/Sv1KjltDT6IWZFUgWwX/Q==","signatures":[{"sig":"MEUCIQCppLH2VYfAKwpN1PXubGJnwJNDsqrMxs0SPaoc8EMlCgIgWoEBZ0dM7jtfhf4ARUU5q/DQfDtHr/yh0+kxJD7ZQPM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":145789},"main":"dist/index.js","type":"module","_from":"file:aims-api-ui-sdk-0.0.3.tgz","types":"./dist/index.d.ts","scripts":{"dev":"tsup src/index.ts --format esm --dts --watch","lint":"pnpm lint:biome && pnpm ts:check","build":"tsup","lint:fix":"biome check --diagnostic-level=error --write .","ts:check":"tsc --noEmit","lint:biome":"biome check --diagnostic-level=error ."},"_npmUser":{"name":"afatoga","email":"afatoga@gmail.com"},"_resolved":"/private/var/folders/j5/vghg41990n59cm05q67nzxc80000gn/T/7c57f2467a4df0cf0dfe5157b1313829/aims-api-ui-sdk-0.0.3.tgz","_integrity":"sha512-ulARkiyvRG2a+MpaWzemnZ3sUPoz9wRbDCtXCY08Y2JBfCvk15pmsiW4juGvLzTm/Sv1KjltDT6IWZFUgWwX/Q==","_npmVersion":"10.8.2","description":"A React component library to quickly integrate AIMS API features into your frontend application.","directories":{},"sideEffects":false,"_nodeVersion":"22.6.0","dependencies":{"zod":"3.24.3","jotai":"^2.12.1","konva":"8.4.3","peaks.js":"3.4.2","prop-types":"15.8.1","@vimeo/player":"^2.20.1","waveform-data":"4.5.1","@emotion/react":"^11.10.5","youtube-player":"^5.6.0","@emotion/styled":"^11.10.5","create-silent-audio":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","typescript":"^5.3.3","@types/node":"22.3.0","@biomejs/biome":"1.9.4","@aims-api/aims-node":"0.0.39","esbuild-plugin-svgr":"3.1.0","@types/vimeo__player":"^2.18.3"},"peerDependencies":{"react":">=18","react-dom":">=18","@types/react":">=18","@types/react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/ui-sdk_0.0.3_1748253702641_0.020701551187306766","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aims-api/ui-sdk","version":"0.1.1","_id":"@aims-api/ui-sdk@0.1.1","maintainers":[{"name":"afatoga","email":"afatoga@gmail.com"},{"name":"aims-admin","email":"admin@aimsapi.com"},{"name":"wernerdweight","email":"wd@wernerdweight.com"},{"name":"rossoreisen","email":"rossoreisen@gmail.com"}],"dist":{"shasum":"8d33d679d5ea103057f87e4ef76abe256f6d83e9","tarball":"https://registry.npmjs.org/@aims-api/ui-sdk/-/ui-sdk-0.1.1.tgz","fileCount":28,"integrity":"sha512-GHNvSnRsuFvl9TIErUWVo3mE1u2PZjzriJ06x+KKoGVtXQMDjP8GFD3u1CD68zhTX2iMi1b+XcnNdIRPFgKH1w==","signatures":[{"sig":"MEUCIQCQDMcLbYocD4wEMGxtEhgefvXlL6zyyySKjlOvnYMr0gIgGUUb0X/PBiI0ekc6jCUtnLlvUcdIGlyku25qpyQM4iI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":485228},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","gitHead":"1d8267de0d2af56cef7ed5bf6c725d046a87ab01","scripts":{"dev":"tsup src/index.ts --format esm --dts --watch","lint":"pnpm lint:biome && pnpm ts:check","build":"tsup","prepare":"pnpm build","publish":"pnpm publish --access public","lint:fix":"biome check --diagnostic-level=error --write .","ts:check":"tsc --noEmit","lint:biome":"biome check --diagnostic-level=error ."},"_npmUser":{"name":"afatoga","email":"afatoga@gmail.com"},"_npmVersion":"10.8.2","description":"A React component library to quickly integrate AIMS API features into your frontend application.","directories":{},"sideEffects":false,"_nodeVersion":"22.6.0","dependencies":{"zod":"3.24.3","jotai":"^2.12.1","konva":"8.4.3","peaks.js":"3.4.2","prop-types":"15.8.1","@vimeo/player":"^2.20.1","waveform-data":"4.5.1","@emotion/react":"^11.10.5","youtube-player":"^5.6.0","@emotion/styled":"^11.10.5","create-silent-audio":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.4.0","typescript":"5.8.2","@types/node":"22.15.29","@biomejs/biome":"1.9.4","@aims-api/aims-node":"workspace:*","esbuild-plugin-svgr":"3.1.0","@types/vimeo__player":"^2.18.3"},"peerDependencies":{"react":">=18","react-dom":">=18","@types/react":">=18","@types/react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/ui-sdk_0.1.1_1753731311459_0.026071227561872412","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aims-api/ui-sdk","version":"0.1.2","_id":"@aims-api/ui-sdk@0.1.2","maintainers":[{"name":"afatoga","email":"afatoga@gmail.com"},{"name":"aims-admin","email":"admin@aimsapi.com"},{"name":"wernerdweight","email":"wd@wernerdweight.com"},{"name":"rossoreisen","email":"rossoreisen@gmail.com"}],"dist":{"shasum":"d33a3ac8ad51116fd64e4004f1b71e08bda1859e","tarball":"https://registry.npmjs.org/@aims-api/ui-sdk/-/ui-sdk-0.1.2.tgz","fileCount":38,"integrity":"sha512-FPb0bb6MWB/fXxwxUR7hJisOjkAJzRz0Fy1vMP44IQLgYhHfrn3hmwTGyFmmXDmlEBy5xS2uOhVSGdTzA7zMTQ==","signatures":[{"sig":"MEYCIQC5z9FWCJz9wzGhGNM63YHxFYTCEC0oeF5me5eA0vtZRgIhAJsb1p0M6akzGFci2Kwyq59jq1a2af9RKZxbIc7lFv14","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":556069},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","gitHead":"a9e86e57e777b6f6b14d5be1deb229253224b999","scripts":{"dev":"tsup src/index.ts --format esm --dts --watch","lint":"pnpm lint:biome && pnpm ts:check","build":"tsup","prepare":"pnpm build","publish":"pnpm publish --access public","lint:fix":"biome check --diagnostic-level=error --write .","ts:check":"tsc --noEmit","lint:biome":"biome check --diagnostic-level=error ."},"_npmUser":{"name":"afatoga","email":"afatoga@gmail.com"},"_npmVersion":"10.8.2","description":"A React component library to quickly integrate AIMS API features into your frontend application.","directories":{},"sideEffects":false,"_nodeVersion":"22.6.0","dependencies":{"zod":"3.24.3","jotai":"^2.12.1","konva":"8.4.3","peaks.js":"3.4.2","prop-types":"15.8.1","@vimeo/player":"^2.20.1","waveform-data":"4.5.1","@emotion/react":"^11.10.5","youtube-player":"^5.6.0","@emotion/styled":"^11.10.5","create-silent-audio":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.4.0","typescript":"5.8.2","@types/node":"22.15.29","@biomejs/biome":"1.9.4","@aims-api/aims-node":"workspace:*","esbuild-plugin-svgr":"3.1.0","@types/vimeo__player":"^2.18.3"},"peerDependencies":{"react":">=18","react-dom":">=18","@types/react":">=18","@types/react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/ui-sdk_0.1.2_1753792875010_0.9122492494758014","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@aims-api/ui-sdk","version":"0.1.3","_id":"@aims-api/ui-sdk@0.1.3","maintainers":[{"name":"afatoga","email":"afatoga@gmail.com"},{"name":"aims-admin","email":"admin@aimsapi.com"},{"name":"wernerdweight","email":"wd@wernerdweight.com"},{"name":"rossoreisen","email":"rossoreisen@gmail.com"}],"dist":{"shasum":"8b24c9f54fd7191956d9e0f3cd83c6fb8892c1cf","tarball":"https://registry.npmjs.org/@aims-api/ui-sdk/-/ui-sdk-0.1.3.tgz","fileCount":40,"integrity":"sha512-RToxTE6gSs12ed+x2k0Yfk1NvVYjhpPklrLFXOl43/l8V0hmx6QoJVV22eo0T1UnN+mnflYD7AKM+/qrYkovVQ==","signatures":[{"sig":"MEQCIEXlsAbks3Mk1TaVjxXd2npcq7ECjC6whK9tSgaPovGAAiBqVjd/TewNJ6NAPqYSdtyb3C/b4AEJuvRnubwaoE+AAw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":556603},"main":"dist/index.js","type":"module","_from":"file:aims-api-ui-sdk-0.1.3.tgz","types":"./dist/index.d.ts","scripts":{"dev":"tsup src/index.ts --format esm --dts --watch","lint":"pnpm lint:biome && pnpm ts:check","build":"tsup","lint:fix":"biome check --diagnostic-level=error --write .","ts:check":"tsc --noEmit","lint:biome":"biome check --diagnostic-level=error ."},"_npmUser":{"name":"afatoga","email":"afatoga@gmail.com"},"_resolved":"/private/var/folders/zv/2vjr5j1d517b6_0xjkdf9pzc0000gn/T/f7d9ff5889984b55af0b26d1998568d8/aims-api-ui-sdk-0.1.3.tgz","_integrity":"sha512-RToxTE6gSs12ed+x2k0Yfk1NvVYjhpPklrLFXOl43/l8V0hmx6QoJVV22eo0T1UnN+mnflYD7AKM+/qrYkovVQ==","_npmVersion":"10.8.2","description":"A React component library to quickly integrate AIMS API features into your frontend application.","directories":{},"sideEffects":false,"_nodeVersion":"22.6.0","dependencies":{"zod":"3.24.3","jotai":"^2.12.1","konva":"8.4.3","peaks.js":"3.4.2","prop-types":"15.8.1","@vimeo/player":"^2.20.1","waveform-data":"4.5.1","@emotion/react":"^11.10.5","youtube-player":"^5.6.0","@emotion/styled":"^11.10.5","create-silent-audio":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.4.0","typescript":"5.8.2","@types/node":"22.15.29","@biomejs/biome":"1.9.4","@aims-api/aims-node":"0.0.45","esbuild-plugin-svgr":"3.1.0","@types/vimeo__player":"^2.18.3"},"peerDependencies":{"react":">=18","react-dom":">=18","@types/react":">=18","@types/react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/ui-sdk_0.1.3_1755695977830_0.6829594741651823","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@aims-api/ui-sdk","version":"0.2.0","keywords":["audio","segment","waveform"],"_id":"@aims-api/ui-sdk@0.2.0","maintainers":[{"name":"afatoga","email":"afatoga@gmail.com"},{"name":"aims-admin","email":"admin@aimsapi.com"},{"name":"wernerdweight","email":"wd@wernerdweight.com"},{"name":"rossoreisen","email":"rossoreisen@gmail.com"}],"dist":{"shasum":"102a64801f4fdf2b3972b26dfb7ec0e41df819bb","tarball":"https://registry.npmjs.org/@aims-api/ui-sdk/-/ui-sdk-0.2.0.tgz","fileCount":57,"integrity":"sha512-s8gLkLfNTwl44+zFMjlWMzxUXagPNk39saadNWjrqPEVj+CJgiqkvgSdGPqoGkKfyce9g4WmnwXWci10xoO/lg==","signatures":[{"sig":"MEYCIQCm6Xydc6vL5cH9mpRJDFNaV903hQhcNZQ5VGb281hRnQIhALNNdAb9+6T6+wNcj2pfQR+a/SztvrrMPcXKFTXHDaSs","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":670558},"main":"dist/index.js","type":"module","types":"./dist/index.d.ts","gitHead":"1ee75fcf9ec76db0ee8f15007f300e45aa7b4861","scripts":{"dev":"tsup src/index.ts --format esm --dts --watch","lint":"pnpm lint:biome && pnpm ts:check","build":"tsup","prepare":"pnpm build","publish":"pnpm publish --access public","lint:fix":"biome check --diagnostic-level=error --write .","ts:check":"tsc --noEmit","lint:biome":"biome check --diagnostic-level=error ."},"_npmUser":{"name":"afatoga","email":"afatoga@gmail.com"},"_npmVersion":"10.8.2","description":"A React component library to quickly integrate AIMS API features into your frontend application.","directories":{},"sideEffects":false,"_nodeVersion":"22.6.0","dependencies":{"zod":"3.24.3","jotai":"^2.12.1","konva":"8.4.3","peaks.js":"4.0.0","prop-types":"15.8.1","@vimeo/player":"^2.20.1","waveform-data":"4.5.2","@emotion/react":"11.14.0","youtube-player":"^5.6.0","@emotion/styled":"11.14.0","create-silent-audio":"^0.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.5.0","typescript":"5.8.2","@types/node":"22.15.29","@biomejs/biome":"2.2.6","@aims-api/aims-node":"workspace:*","esbuild-plugin-svgr":"3.1.1","@types/vimeo__player":"^2.18.3"},"peerDependencies":{"react":">=18","react-dom":">=18","@types/react":">=18","@types/react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/ui-sdk_0.2.0_1764160345957_0.11583204440423955","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@aims-api/ui-sdk","version":"0.2.1","sideEffects":false,"types":"./dist/index.d.ts","publishConfig":{"access":"public"},"type":"module","main":"dist/index.js","scripts":{"build":"tsup","dev":"tsup src/index.ts --format esm --dts --watch","prepare":"pnpm build","publish":"pnpm publish --access public","ts:check":"tsc --noEmit","lint:biome":"biome check --diagnostic-level=error .","lint":"pnpm lint:biome && pnpm ts:check","lint:fix":"biome check --diagnostic-level=error --write ."},"peerDependencies":{"@types/react":">=18","@types/react-dom":">=18","react":">=18","react-dom":">=18"},"dependencies":{"@emotion/react":"11.14.0","@emotion/styled":"11.14.0","@vimeo/player":"^2.20.1","create-silent-audio":"^0.1.2","jotai":"^2.12.1","konva":"8.4.3","peaks.js":"4.0.0","prop-types":"15.8.1","waveform-data":"4.5.2","youtube-player":"^5.6.0","zod":"3.24.3"},"devDependencies":{"@aims-api/aims-node":"workspace:*","@biomejs/biome":"2.2.6","@types/node":"22.15.29","@types/vimeo__player":"^2.18.3","esbuild-plugin-svgr":"3.1.1","tsup":"8.5.0","typescript":"5.8.2"},"keywords":["audio","segment","waveform"],"_id":"@aims-api/ui-sdk@0.2.1","gitHead":"40e01b4ec29f171ff169b44a58643e31dd3cacc7","description":"A React component library to quickly integrate AIMS API features into your frontend application.","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-jeSwJI6d5LOZ69Vq/LIABY/9hz4yX3hwcvi9ZFRYwqeB2SCuggPd6bEteRYZpmWpJ7dLyfMGQrDiM8gJbTQ4Cg==","shasum":"cb1d03040655aa7a382aa4823c5797385507c418","tarball":"https://registry.npmjs.org/@aims-api/ui-sdk/-/ui-sdk-0.2.1.tgz","fileCount":57,"unpackedSize":677920,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC8IRH4apSf8DuCtlTpaumHdlsVKEZ5egKpyPIoiD/mrwIgQgtgwFppxNRfEDqCedqxK+t6z8BxChRWvkyfbQhlbf8="}]},"_npmUser":{"name":"afatoga","email":"afatoga@gmail.com"},"directories":{},"maintainers":[{"name":"afatoga","email":"afatoga@gmail.com"},{"name":"aims-admin","email":"admin@aimsapi.com"},{"name":"wernerdweight","email":"wd@wernerdweight.com"},{"name":"rossoreisen","email":"rossoreisen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-sdk_0.2.1_1776162891474_0.3436928584087129"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-02T20:47:34.411Z","modified":"2026-04-14T10:34:51.785Z","0.0.1":"2024-12-02T20:47:34.698Z","0.0.2":"2025-05-22T16:06:28.761Z","0.0.3":"2025-05-26T10:01:42.843Z","0.1.0":"2025-07-28T13:01:51.032Z","0.1.1":"2025-07-28T19:35:11.676Z","0.1.2":"2025-07-29T12:41:15.200Z","0.1.3":"2025-08-20T13:19:38.088Z","0.2.0":"2025-11-26T12:32:26.140Z","0.2.1":"2026-04-14T10:34:51.649Z"},"keywords":["audio","segment","waveform"],"description":"A React component library to quickly integrate AIMS API features into your frontend application.","maintainers":[{"name":"afatoga","email":"afatoga@gmail.com"},{"name":"aims-admin","email":"admin@aimsapi.com"},{"name":"wernerdweight","email":"wd@wernerdweight.com"},{"name":"rossoreisen","email":"rossoreisen@gmail.com"}],"readme":"# AIMS UI SDK\n\nA React component library to quickly integrate AIMS API features into your frontend application.\n\nAsk a Question\n\n\n\n\n\n### Installation\n\nTo work with the package you need to have npm (or other package manager) installed.\nThe library is built for React applications only.\n\n```\n npm install @aims-api/ui-sdk\n```\n\n### Segment Tool component\n\nIt fetches data for audio seed, displays waveform, controls playback of audio, and also provides a tool for selecting a segment.\n\n**Features**\n- Waveform rendering (YouTube, Spotify, SoundCloud, TikTok, Vimeo, Apple Music and internal tracks)\n- Playback control\n- Segment selection\n\n**Requirements**\n- React 18+\n- Node.js server environment (e.g. Next.js server, Express.js, Hono...) to setup API handlers for your app.\n- Install @aims-api/aims-node to work seamlessly with AIMS API in Node.js environment, used mainly for fetching link and waveform data. The package also provides types that are used in the client components.\n\n**Getting Started**\n\nPrepare two async handlers for data fetching:\n- `getSeed` (required) a callback used for feeding the SegmentTool with data. It has to return a promise with the seed data (see required type structure). This callback needs to make a request (see `link-info` in examples folder) with some private (env) variables to ensure the handler to work as intended. In case of the promise rejection, you need to propagate message about component malfunction to the user.\n- `fetchWaveformUrl` (optional) during initialization it fetches waveform file from AIMS API, returns a promise with url, which is eventually read and rendered by peaks.js library. If not provided, waveform will be rendered only for sources that provide an audio file - SoundCloud, TikTok, Apple Music, internal tracks.\n\nThe component is exported as a React hook `useSegmentTool`, which returns:\n- component `SegmentTool` (React UI Component)\n- `segmentToolConfig` (JS Object)\n```ts\n type SegmentToolConfig = {\n isAudioPlaying: boolean;\n segmentRange: { from: number | null; to: number | null}\n }\n ```\n- `togglePlayback` (callback to play or pause audio)\n\nIt is important to memoize SegmentTool component to avoid unnecessary re-renders. Also have a look at `SegmentToolComponentProps` type to ensure valid prop structure.\n```ts\n// Only property that matters for memoization is an injected seed. If the value is null, we do not render this component.\nconst MemoizedSegmentTool = memo(SegmentTool, (prevProps, newProps) => prevProps.seed === newProps.seed)\n``` \n\nAll useful types are located in /src/types/SegmentTool.ts. They are also exported in root file, so you can work with them as is shown in the example bellow.\n\n```ts\n// To work with tracks from AIMS search results, we call them internal tracks, set seed properties as following\nconst internalTrackSeed: DiscoverySearch = {\n input: DiscoveryInputs.INTERNAL,\n title: 'track name' // string,\n internalTrack: {\n id: 'trackId', // string OR number \n duration: 120, // number OR null\n audioUrl: 'AUDIO_URL', // mp3 or other audio file supported by peaks.js\n waveformUrl: 'WAVEFORM_URL', // optional parameter (if not provided waveform will be calculated from audio\n // file), url to \"dat\" file is recognized by peaks.js\n }\n}\n\n// In order to render uploaded track, you need to upload file into browser and use this seed structure\nconst uploadedTrackSeed: DiscoverySearch = {\n input: DiscoveryInputs.UPLOAD,\n isSegmentToolAvailable: true,\n title: 'uploaded track' // string,\n uploadInfo: {\n audioUrl: 'AUDIO_URL' // string e.g. 'blob:...',\n format: 'mp3', // string,\n duration: 120 // number OR null,\n },\n}\n ```\n\n**Usage Example**\n\n- Full example is available in /examples/basic including api routes (Next.js notation) \n\n```ts\nimport { ThemeProvider, useSegmentTool, type DiscoverySearch } from '@aims-api/ui-sdk'\n\n/* type DiscoverySearch is located in /src/types/SegmentTool.ts */\n\nconst MyComponent = () => {\n const { segmentToolConfig, SegmentTool, togglePlayback } = useSegmentTool()\n const { isAudioPlaying, segmentRange } = segmentToolConfig\n\n return (\n <>\n \n Promise */}\n fetchWaveformUrl={/* optional, (url: string) => Promise */}\n options={{ // all params are optional\n initialRange: {/* from: number, to: number */},\n playButtonHidden: {/* hide play button; boolean */},\n playheadInitHidden: {/* hide playhead in its initial position (workaround \n // with palette.background.default color); boolean */},\n segmentSelectionDisabled={/* disable selecting segment; boolean */}\n }}\n />\n \n \n {/* Access configuration */}\n
\n \n )\n}\n```\n\nComponent state changes aren’t exported because our application does not interact with them. Upon receiving a seed, the waveform component initially displays a skeleton placeholder. Once the waveform data has been processed by the peaks.js library, the waveform appears instantly.\n\n## License\n\nSee LICENSE and NOTICE for more information.\n\n","readmeFilename":"README.md"}
![\"Created](\"https://img.shields.io/badge/created%20by-AIMS%20API-8137CF\"){kind=icon}
![\"NPM](\"https://img.shields.io/npm/v/@aims-api/ui-sdk.svg\")
\n\n\n### Installation\n\nTo work with the package you need to have npm (or other package manager) installed.\nThe library is built for React applications only.\n\n```\n npm install @aims-api/ui-sdk\n```\n\n### Segment Tool component\n\nIt fetches data for audio seed, displays waveform, controls playback of audio, and also provides a tool for selecting a segment.\n\n**Features**\n- Waveform rendering (YouTube, Spotify, SoundCloud, TikTok, Vimeo, Apple Music and internal tracks)\n- Playback control\n- Segment selection\n\n**Requirements**\n- React 18+\n- Node.js server environment (e.g. Next.js server, Express.js, Hono...) to setup API handlers for your app.\n- Install @aims-api/aims-node to work seamlessly with AIMS API in Node.js environment, used mainly for fetching link and waveform data. The package also provides types that are used in the client components.\n\n**Getting Started**\n\nPrepare two async handlers for data fetching:\n- `getSeed` (required) a callback used for feeding the SegmentTool with data. It has to return a promise with the seed data (see required type structure). This callback needs to make a request (see `link-info` in examples folder) with some private (env) variables to ensure the handler to work as intended. In case of the promise rejection, you need to propagate message about component malfunction to the user.\n- `fetchWaveformUrl` (optional) during initialization it fetches waveform file from AIMS API, returns a promise with url, which is eventually read and rendered by peaks.js library. If not provided, waveform will be rendered only for sources that provide an audio file - SoundCloud, TikTok, Apple Music, internal tracks.\n\nThe component is exported as a React hook `useSegmentTool`, which returns:\n- component `SegmentTool` (React UI Component)\n- `segmentToolConfig` (JS Object)\n```ts\n type SegmentToolConfig = {\n isAudioPlaying: boolean;\n segmentRange: { from: number | null; to: number | null}\n }\n ```\n- `togglePlayback` (callback to play or pause audio)\n\nIt is important to memoize SegmentTool component to avoid unnecessary re-renders. Also have a look at `SegmentToolComponentProps` type to ensure valid prop structure.\n```ts\n// Only property that matters for memoization is an injected seed. If the value is null, we do not render this component.\nconst MemoizedSegmentTool = memo(SegmentTool, (prevProps, newProps) => prevProps.seed === newProps.seed)\n``` \n\nAll useful types are located in /src/types/SegmentTool.ts. They are also exported in root file, so you can work with them as is shown in the example bellow.\n\n```ts\n// To work with tracks from AIMS search results, we call them internal tracks, set seed properties as following\nconst internalTrackSeed: DiscoverySearch = {\n input: DiscoveryInputs.INTERNAL,\n title: 'track name' // string,\n internalTrack: {\n id: 'trackId', // string OR number \n duration: 120, // number OR null\n audioUrl: 'AUDIO_URL', // mp3 or other audio file supported by peaks.js\n waveformUrl: 'WAVEFORM_URL', // optional parameter (if not provided waveform will be calculated from audio\n // file), url to \"dat\" file is recognized by peaks.js\n }\n}\n\n// In order to render uploaded track, you need to upload file into browser and use this seed structure\nconst uploadedTrackSeed: DiscoverySearch = {\n input: DiscoveryInputs.UPLOAD,\n isSegmentToolAvailable: true,\n title: 'uploaded track' // string,\n uploadInfo: {\n audioUrl: 'AUDIO_URL' // string e.g. 'blob:...',\n format: 'mp3', // string,\n duration: 120 // number OR null,\n },\n}\n ```\n\n**Usage Example**\n\n- Full example is available in /examples/basic including api routes (Next.js notation) \n\n```ts\nimport { ThemeProvider, useSegmentTool, type DiscoverySearch } from '@aims-api/ui-sdk'\n\n/* type DiscoverySearch is located in /src/types/SegmentTool.ts */\n\nconst MyComponent = () => {\n const { segmentToolConfig, SegmentTool, togglePlayback } = useSegmentTool()\n const { isAudioPlaying, segmentRange } = segmentToolConfig\n\n return (\n <>\n