{"_id":"@dom-replay/player-svelte","name":"@dom-replay/player-svelte","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dom-replay/player-svelte","version":"0.0.1","devDependencies":{"@dom-replay/snapshot":"^0.0.1","@dom-replay/types":"^0.0.1","@sveltejs/adapter-auto":"^3.0.0","@sveltejs/kit":"^2.0.0","@sveltejs/package":"^2.0.0","@sveltejs/vite-plugin-svelte":"^3.0.0","@typescript-eslint/eslint-plugin":"^7.0.0","@typescript-eslint/parser":"^7.0.0","eslint-plugin-svelte":"^2.37.0","fast-glob":"^3.3.3","prettier-plugin-svelte":"^3.1.2","svelte":"^4.2.14","svelte-check":"^3.4.3","svelte-preprocess":"^5.0.3","svelte2tsx":"^0.7.30","tslib":"^2.0.0","vite":"^5.3.1","vite-plugin-dts":"4.5.4"},"dependencies":{"@dom-replay/packer":"^0.0.1","@dom-replay/replay":"^0.0.1","@tsconfig/svelte":"^1.0.13"},"description":"dom-replay's replayer UI","main":"./dist/player-svelte.umd.cjs","module":"./dist/player-svelte.js","unpkg":"./dist/player-svelte.umd.cjs","typings":"dist/player-svelte.d.ts","exports":{".":{"import":{"types":"./dist/player-svelte.d.ts","default":"./dist/player-svelte.js"},"require":{"types":"./dist/player-svelte.d.cts","default":"./dist/player-svelte.cjs"}},"./dist/style.css":"./dist/style.css"},"type":"module","keywords":["dom-replay"],"license":"MIT","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"scripts":{"dev":"vite build --watch","build":"vite build","start":"vite","check-types":"svelte-check --tsconfig ./tsconfig.json","prepublish":"pnpm build","lint":"pnpm eslint src/**/*.ts"},"_id":"@dom-replay/player-svelte@0.0.1","_integrity":"sha512-nepJK49TCzLOXU8xN+QAj3xCH7cgqi69mvbjj7HKRLDmqNKFP4X1zbwuk8xzZYTbCNkRBD0AAATU4vXuxdH6iA==","_resolved":"/tmp/bb7d25c4248ec380a74ed4fd9cd55723/dom-replay-player-svelte-0.0.1.tgz","_from":"file:dom-replay-player-svelte-0.0.1.tgz","_nodeVersion":"22.21.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-nepJK49TCzLOXU8xN+QAj3xCH7cgqi69mvbjj7HKRLDmqNKFP4X1zbwuk8xzZYTbCNkRBD0AAATU4vXuxdH6iA==","shasum":"df432d66c0c90f67256565d388009f5b674bf496","tarball":"https://registry.npmjs.org/@dom-replay/player-svelte/-/player-svelte-0.0.1.tgz","fileCount":18,"unpackedSize":5246091,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC+l22bM/nQYXwns8RANmEu21nqLybLqiFpEYVzZXHdXQIhAMWWdU1xirMxB3+8bw8dMyw2CECna5YaftbhplMtn5NU"}]},"_npmUser":{"name":"stradum","email":"vcatalano@gmail.com"},"directories":{},"maintainers":[{"name":"stradum","email":"vcatalano@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/player-svelte_0.0.1_1771304793046_0.48044554925559013"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-17T05:06:32.941Z","0.0.1":"2026-02-17T05:06:33.238Z","modified":"2026-02-17T05:06:33.558Z"},"maintainers":[{"name":"stradum","email":"vcatalano@gmail.com"}],"description":"dom-replay's replayer UI","keywords":["dom-replay"],"license":"MIT","readme":"_Looking for a Vue.js version? Go here --> [@preflight-hq/@dom-replay/player-vue](https://github.com/Preflight-HQ/@dom-replay/player-vue)_\n\n---\n\n# @dom-replay/player-svelte\n\nSince `@dom-replay/replay` only provides a basic UI, you can use `@dom-replay/player-svelte`, which is built on top of `@dom-replay/core` and provides a feature-rich Svelte player UI.\n\n## How is this different from `Replayer` in `@dom-replay/core`?\n\n`@dom-replay/player-svelte` uses the core `Replayer` under the hood, but since `Replayer` doesn't include any UI for controls, `@dom-replay/player-svelte` adds them.\n\n## Installation\n\n@dom-replay/player-svelte can also be included with `\n```\n\nOr installed by using NPM：\n\n```shell\nnpm install --save @dom-replay/player-svelte\n```\n\n```js\nimport Player from '@dom-replay/player-svelte';\nimport '@dom-replay/player-svelte/dist/style.css';\n```\n\n## Usage\n\n```js\nnew Player({\n target: document.body, // customizable root element\n props: {\n events,\n },\n});\n```\n\n## Options\n\n| key | default | description |\n| -------------- | ------------ | ---------------------------------------------------------------------------------------------------- |\n| events | [] | the events for replaying |\n| width | 1024 | the width of the replayer |\n| height | 576 | the height of the replayer |\n| maxScale | 1 | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited |\n| autoPlay | true | whether to autoplay |\n| speed | 1 | The default speed to play at |\n| speedOption | [1, 2, 4, 8] | speed options in UI |\n| showController | true | whether to show the controller UI |\n| tags | {} | customize the custom events style with a key-value map |\n| inactiveColor | #D4D4D4 | Customize the color of inactive periods indicator in the progress bar with a valid CSS color string. |\n| ... | - | all the [Replayer options](../../guide.md#options-1) will be bypassed |\n\n## methods on the Player component\n\n```ts\naddEventListener(event: string, handler: (params: any) => unknown): void;\n```\n\n```ts\naddEvent(event: eventWithTime): void;\n```\n\n```ts\ngetMetaData() => {\n startTime: number;\n endTime: number;\n totalTime: number;\n}\n```\n\n```ts\ngetReplayer() => Replayer;\n```\n\n```ts\ngetMirror() => Mirror;\n```\n\nToggles between play/pause\n\n```ts\ntoggle();\n```\n\nSets speed of player\n\n```ts\nsetSpeed(speed: number)\n```\n\nTurns on/off skip inactive\n\n```ts\ntoggleSkipInactive();\n```\n\nTriggers resize, do this whenever you change width/height\n\n```ts\ntriggerResize();\n```\n\nPlays replay\n\n```ts\nplay();\n```\n\nPauses replay\n\n```ts\npause();\n```\n\nGo to a point in time and pause or play from then\n\n```ts\ngoto(timeOffset: number, play?: boolean)\n```\n\nPlays from a time to a time and (optionally) loop\n\n```ts\nplayRange(\n timeOffset: number,\n endTimeOffset: number,\n startLooping: boolean = false,\n afterHook: undefined | (() => void) = undefined,\n )\n```\n","readmeFilename":"README.md","_rev":"1-bc4148357fe4f98fe200dd8b662ea652"}