{"_id":"@cyolosecurity/asciinema-player","_rev":"4-7b8e69acd40c4c2f622e40aa30892f03","name":"@cyolosecurity/asciinema-player","dist-tags":{"latest":"3.6.3-3"},"versions":{"3.6.3":{"name":"@cyolosecurity/asciinema-player","description":"Web player for terminal session recordings.","version":"3.6.3","author":{"name":"Marcin Kulik"},"homepage":"https://github.com/cyolosecurity/asciinema-player","repository":{"type":"git","url":"git+https://github.com/cyolosecurity/asciinema-player.git"},"license":"Apache-2.0","main":"dist/index.js","scripts":{"build":"rollup -c --environment production","bundle":"rollup -c rollup.config.bundle.mjs --environment production && lessc src/less/asciinema-player.less >dist/bundle/asciinema-player.css","test":"echo \"Error: no test specified\" && exit 1"},"browserslist":["defaults and supports wasm"],"dependencies":{"@babel/runtime":"^7.21.0","solid-js":"^1.3.0"},"devDependencies":{"@babel/core":"^7.21.3","@babel/plugin-transform-runtime":"^7.21.0","@babel/preset-env":"^7.20.2","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@wasm-tool/rollup-plugin-rust":"^2.3.3","babel-preset-solid":"^1.6.13","eslint":"^7.27.0","eslint-config-airbnb-base":"^14.2.1","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.23.3","eslint-plugin-jest":"^24.3.6","eslint-plugin-prettier":"^3.4.0","less":"^4.1.1","rollup":"^3.18.0"},"bugs":{"url":"https://github.com/cyolosecurity/asciinema-player/issues"},"gitHead":"a11dc26032523a96e28061a6526a71364826c7b9","_id":"@cyolosecurity/asciinema-player@3.6.3","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-0plNhknawlVEiNQ6ZluiUd3EM/M4aSr9UQmyBJHWmcbjWWofmquIzlgNYsPO4Xxgg1FuwQCDGx49GHb+g4npxA==","shasum":"f58abff312c278989e25a2ba8a613c90779f53da","tarball":"https://registry.npmjs.org/@cyolosecurity/asciinema-player/-/asciinema-player-3.6.3.tgz","fileCount":3,"unpackedSize":40248,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4NXLlnwPByeb2twZw5LeWjsm4aLTjh/PDCICt4khiQwIhAMzLdJUu0oM8SoGuPtUOE8pTEQ/pnQ451PkJFdxxcxMd"}]},"_npmUser":{"name":"amityahav","email":"amit@cyolo.io"},"directories":{},"maintainers":[{"name":"amityahav","email":"amit@cyolo.io"},{"name":"yyellin","email":"jonathan@cyolo.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/asciinema-player_3.6.3_1701186842997_0.442816576956405"},"_hasShrinkwrap":false},"3.6.3-1":{"name":"@cyolosecurity/asciinema-player","description":"Web player for terminal session recordings.","version":"3.6.3-1","author":{"name":"Marcin Kulik"},"homepage":"https://github.com/cyolosecurity/asciinema-player","repository":{"type":"git","url":"git+https://github.com/cyolosecurity/asciinema-player.git"},"license":"Apache-2.0","main":"dist/index.js","scripts":{"build":"rollup -c --environment production","bundle":"rollup -c rollup.config.bundle.mjs --environment production && lessc src/less/asciinema-player.less >dist/bundle/asciinema-player.css","test":"echo \"Error: no test specified\" && exit 1"},"browserslist":["defaults and supports wasm"],"dependencies":{"@babel/runtime":"^7.21.0","solid-js":"^1.3.0"},"devDependencies":{"@babel/core":"^7.21.3","@babel/plugin-transform-runtime":"^7.21.0","@babel/preset-env":"^7.20.2","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@wasm-tool/rollup-plugin-rust":"^2.3.3","babel-preset-solid":"^1.6.13","eslint":"^7.27.0","eslint-config-airbnb-base":"^14.2.1","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.23.3","eslint-plugin-jest":"^24.3.6","eslint-plugin-prettier":"^3.4.0","less":"^4.1.1","rollup":"^3.18.0"},"bugs":{"url":"https://github.com/cyolosecurity/asciinema-player/issues"},"gitHead":"b78dc0803e3954d164b593611d2f3b0510d1d5c8","_id":"@cyolosecurity/asciinema-player@3.6.3-1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-SpxqcWGm6cFQD4ZC9tVaU9dklh/hp1HCWioHUe6YLM72DdeROS/usM9A7QsE1XoEt9ReeFDmv2hq5Lo4vHgajA==","shasum":"c4085eec76b6401ba308941234a4f76febaf82b9","tarball":"https://registry.npmjs.org/@cyolosecurity/asciinema-player/-/asciinema-player-3.6.3-1.tgz","fileCount":3,"unpackedSize":38025,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMrG6HfRkdXFOZn30vdHa+A6k5X2S/jEvPKuAbk3cgFQIgOiqcF8ufin7PLgg4fuZEUPRpfUchU5yqXBrEkKl/dA4="}]},"_npmUser":{"name":"amityahav","email":"amit@cyolo.io"},"directories":{},"maintainers":[{"name":"amityahav","email":"amit@cyolo.io"},{"name":"yyellin","email":"jonathan@cyolo.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/asciinema-player_3.6.3-1_1701187789123_0.9368190545225672"},"_hasShrinkwrap":false},"3.6.3-2":{"name":"@cyolosecurity/asciinema-player","description":"Web player for terminal session recordings.","version":"3.6.3-2","author":{"name":"Marcin Kulik"},"homepage":"https://github.com/cyolosecurity/asciinema-player","repository":{"type":"git","url":"git+https://github.com/cyolosecurity/asciinema-player.git"},"license":"Apache-2.0","main":"dist/index.js","scripts":{"build":"rollup -c --environment production","bundle":"rollup -c rollup.config.bundle.mjs --environment production && lessc src/less/asciinema-player.less >dist/bundle/asciinema-player.css","test":"echo \"Error: no test specified\" && exit 1"},"browserslist":["defaults and supports wasm"],"dependencies":{"@babel/runtime":"^7.21.0","solid-js":"^1.3.0"},"devDependencies":{"@babel/core":"^7.21.3","@babel/plugin-transform-runtime":"^7.21.0","@babel/preset-env":"^7.20.2","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@wasm-tool/rollup-plugin-rust":"^2.3.3","babel-preset-solid":"^1.6.13","eslint":"^7.27.0","eslint-config-airbnb-base":"^14.2.1","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.23.3","eslint-plugin-jest":"^24.3.6","eslint-plugin-prettier":"^3.4.0","less":"^4.1.1","rollup":"^3.18.0"},"bugs":{"url":"https://github.com/cyolosecurity/asciinema-player/issues"},"gitHead":"b78dc0803e3954d164b593611d2f3b0510d1d5c8","_id":"@cyolosecurity/asciinema-player@3.6.3-2","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-8Sk+T1lexlSOJBFCwV5RNg2aXw9Q3oVHS/tCiMI2yMU6MMkIePs1XKtLtodjAh4WNQXXYZSgAv+blWUSDWUeEQ==","shasum":"5aa9a3779840e745ba62f66c17e69b6e08f26e20","tarball":"https://registry.npmjs.org/@cyolosecurity/asciinema-player/-/asciinema-player-3.6.3-2.tgz","fileCount":7,"unpackedSize":736051,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjANa+thUR2EUMTdN9RvC31Kk1GwRV7XGQg/pZztAU0QIgbdjhffsLIWLLHGbucKD6hROAvIj4AvCMz2/Z3KzANoY="}]},"_npmUser":{"name":"amityahav","email":"amit@cyolo.io"},"directories":{},"maintainers":[{"name":"amityahav","email":"amit@cyolo.io"},{"name":"yyellin","email":"jonathan@cyolo.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/asciinema-player_3.6.3-2_1701188687545_0.6682352900532234"},"_hasShrinkwrap":false},"3.6.3-3":{"name":"@cyolosecurity/asciinema-player","description":"Web player for terminal session recordings.","version":"3.6.3-3","author":{"name":"Marcin Kulik"},"homepage":"https://github.com/cyolosecurity/asciinema-player","repository":{"type":"git","url":"git+https://github.com/cyolosecurity/asciinema-player.git"},"license":"Apache-2.0","main":"dist/index.js","scripts":{"build":"rollup -c --environment production","bundle":"rollup -c rollup.config.bundle.mjs --environment production && lessc src/less/asciinema-player.less >dist/bundle/asciinema-player.css","test":"echo \"Error: no test specified\" && exit 1"},"browserslist":["defaults and supports wasm"],"dependencies":{"@babel/runtime":"^7.21.0","solid-js":"^1.3.0"},"devDependencies":{"@babel/core":"^7.21.3","@babel/plugin-transform-runtime":"^7.21.0","@babel/preset-env":"^7.20.2","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.4.0","@wasm-tool/rollup-plugin-rust":"^2.3.3","babel-preset-solid":"^1.6.13","eslint":"^7.27.0","eslint-config-airbnb-base":"^14.2.1","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.23.3","eslint-plugin-jest":"^24.3.6","eslint-plugin-prettier":"^3.4.0","less":"^4.1.1","rollup":"^3.18.0"},"bugs":{"url":"https://github.com/cyolosecurity/asciinema-player/issues"},"gitHead":"b78dc0803e3954d164b593611d2f3b0510d1d5c8","_id":"@cyolosecurity/asciinema-player@3.6.3-3","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-5hImQEuQ7rqb1RpFz9BoJ+KLwyEMZUmPNAayoUovunUX+ERGZgOUjyT1QYCU4MifphJ+rJA0Z2nsJ4mX2zbivA==","shasum":"9d98470f1a8c6770697510440546fb1b0d590718","tarball":"https://registry.npmjs.org/@cyolosecurity/asciinema-player/-/asciinema-player-3.6.3-3.tgz","fileCount":7,"unpackedSize":736051,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGw7UqibhB520oKQ4YG7PY1UX18+2RDBjl9Zw8QcUJFrAiEA44m7YsioaZ4TlnIhEzFHdyAbKYq74lmXjoUD+7rLP1g="}]},"_npmUser":{"name":"amityahav","email":"amit@cyolo.io"},"directories":{},"maintainers":[{"name":"amityahav","email":"amit@cyolo.io"},{"name":"yyellin","email":"jonathan@cyolo.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/asciinema-player_3.6.3-3_1701188838544_0.8512498618887019"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-28T15:54:02.824Z","3.6.3":"2023-11-28T15:54:03.169Z","modified":"2024-01-30T11:24:23.896Z","3.6.3-1":"2023-11-28T16:09:49.320Z","3.6.3-2":"2023-11-28T16:24:47.774Z","3.6.3-3":"2023-11-28T16:27:18.765Z"},"maintainers":[{"email":"yair@cyolo.io","name":"yair-cyolo"},{"email":"amit@cyolo.io","name":"amityahav"},{"email":"jonathan@cyolo.io","name":"yyellin"}],"description":"Web player for terminal session recordings.","homepage":"https://github.com/cyolosecurity/asciinema-player","repository":{"type":"git","url":"git+https://github.com/cyolosecurity/asciinema-player.git"},"author":{"name":"Marcin Kulik"},"bugs":{"url":"https://github.com/cyolosecurity/asciinema-player/issues"},"license":"Apache-2.0","readme":"# asciinema player\n\nWeb player for terminal sessions recorded with\n[asciinema](https://github.com/asciinema/asciinema), which you can use on your\nown website.\n\n### Another asciinema-player package?\nYes, We in Cyolo provide full-text search over SSH recordings, in order to support that we had to add additional capabilites.\n\n### Version numbers\nThe npm version we use will correspond to the tag in the original repo, with an additional number corresponding to the patch.\n### Use the player in your own application bundle\n\nAdd `@cyolosecurity/asciinema-player` to your `devDependencies`:\n\n```bash\nnpm install --save-dev @cyolosecurity/asciinema-player@3.6.3-3\n```\n\nAdd empty `<div id=\"demo\"></div>` element to your page to contain the player.\n\nImport and use `create` function from `asciinema-player` module:\n\n```javascript\nimport * as AsciinemaPlayer from '@cyolosecurity/asciinema-player';\nAsciinemaPlayer.create('/demo.cast', document.getElementById('demo'));\n```\n\nFinally, include player's CSS file in your site CSS bundle. You'll find it in\nthe npm package at `dist/bundle/asciinema-player.css`.\n\n## About\n\nasciinema player is an open-source terminal session player written in Javascript\nand Rust. Unlike other _video_ players asciinema player doesn't play\nheavy-weight video files (`.mp4`, `.webm` etc) and instead plays light-weight\nterminal session files called\n[asciicasts](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md).\n\nAsciicast is a capture of terminal's raw output, which needs to be interpreted\nduring playback, therefore the player comes with its own interpreter based on\n[Paul Williams' parser for ANSI-compatible video\nterminals](https://vt100.net/emu/dec_ansi_parser). It's fully compatible with\nmost widely used terminal emulators like xterm, Gnome Terminal, iTerm etc.\n\nYou can see the player in action on [asciinema.org](https://asciinema.org).\n\nIf you don't want to depend on asciinema.org and you prefer to host the player\nand the recordings yourself then read on, it's very simple.\n\nShout-out to our Platinum [sponsors](https://github.com/sponsors/ku1ik), whose\nfinancial support helps keep the project alive:\n\n## Basic usage\n\nTo mount the player on a page, use the `create` function exported by the\n`asciinema-player` ES module with 2 arguments: source (recording URL) and the\ncontainer DOM element to mount the player in:\n\n```javascript\nAsciinemaPlayer.create(src, containerElement);\n```\n\nIn the most common case, a recording is fetched from a URL and is in\n[asciicast](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md)\nformat. You can pass it as full URL, e.g. `\"https://example.com/demo.cast\"`, or\na path, e.g. `\"/demo.cast\"`.\n\nSee [Source](#source) for more ways of loading a recording into the player.\n\nTo pass additional options, when mounting the player, use 3 argument variant:\n\n```javascript\nAsciinemaPlayer.create(src, containerElement, opts);\n```\n\nFor example, enable looping and select Solarized Dark theme:\n\n```javascript\nAsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {\n  loop: true,\n  theme: 'solarized-dark'\n});\n```\n\nSee [Options](#options) for full list of available options.\n\nIf you'd like to control the player programmatically, you can use the functions\nexposed on the object returned from `create` function:\n\n```javascript\nconst player = AsciinemaPlayer.create(src, containerElement);\n\nplayer.play();\n```\n\nSee [API](#api) for details.\n\n## Source\n\nWhile the easiest way of loading a recording into the player is by using\nasciicast file URL, it's also easy to customize the loading procedure or even\nreplace it completely.\n\n### Inlining a recording\n\nIf a recording file is small and you'd rather avoid additional HTTP request, you\ncan inline the recording by using [Data\nURL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs):\n\n```javascript\nAsciinemaPlayer.create('data:text/plain;base64,' + base64encodedAsciicast, containerElement);\n```\n\nFor example:\n\n```javascript\nAsciinemaPlayer.create(\n  'data:text/plain;base64,eyJ2ZXJzaW9uIjogMiwgIndpZHRoIjogODAsICJoZWlnaHQiOiAyNH0KWzAuMSwgIm8iLCAiaGVsbCJdClswLjUsICJvIiwgIm8gIl0KWzIuNSwgIm8iLCAid29ybGQhXG5cciJdCg==',\n  document.getElementById('demo')\n);\n```\n\n### Loading a recording from another source\n\nIf you'd like to load a recording yourself and just pass it over to the player,\nuse `{ data: data }` object as source argument to `create`:\n\n```javascript\nAsciinemaPlayer.create({ data: data }, containerElement);\n```\n\nwhere `data` can be:\n\n- a string containing asciicast in [v1](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v1.md) or [v2](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md) format\n- an object representing asciicast in [v1](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v1.md) format\n- an array representing asciicast in [v2](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md) format\n- a function which when invoked returns one of the above (may be async)\n\nIf `data` is a function, then the player invokes it when playback is started by\na user. If [preload](#preload) option is used, the function is invoked during\nplayer initialization (mounting in DOM).\n\nProvided `data` is parsed with built-in asciicast format parser by default (also\nsee [Playing other recording formats](#playing-other-recording-formats)).\n\nExamples of supported `data` specifications:\n\n```javascript\n// object representing asciicast in v1 format\n{version: 1, width: 80, height: 24, stdout: [[1.0, \"hello \"], [1.0, \"world!\"]]};\n```\n\n```javascript\n// string representing asciicast in v1 format (json)\n'{\"version\": 1, \"width\": 80, \"height\": 24, \"stdout\": [[1.0, \"hello \"], [1.0, \"world!\"]]}';\n```\n\n```javascript\n// array representing asciicast in v2 format\n[\n  {version: 2, width: 80, height: 24},\n  [1.0, \"o\", \"hello \"],\n  [2.0, \"o\", \"world!\"]\n]\n```\n\n```javascript\n// string representing asciicast in v2 format (ndjson)\n'{\"version\": 2, \"width\": 80, \"height\": 24}\\n[1.0, \"o\", \"hello \"]\\n[2.0, \"o\", \"world!\"]';\n```\n\n```javascript\n// function returning a string representing asciicast in v2 format (ndjson)\n() => '{\"version\": 2, \"width\": 80, \"height\": 24}\\n[1.0, \"o\", \"hello \"]\\n[2.0, \"o\", \"world!\"]';\n```\n\nSay you'd like to embed asciicast contents in a (hidden) HTML tag on your page,\nfollowing data source can be used to extract it and pass it to the player:\n\n```javascript\nAsciinemaPlayer.create(\n  { data: document.getElementById('asciicast').textContent.trim() },\n  document.getElementById('demo')\n);\n```\n\n### Customizing URL fetching\n\nIf you'd like to fetch a recording from a URL, but you need to tweak how HTTP\nrequest is performed (configure credentials, change HTTP method, etc), you can do\nso by using `{ url: \"...\", fetchOpts: { ... } }` object as the source argument.\n`fetchOpts` object is then passed to\n[fetch](https://developer.mozilla.org/en-US/docs/Web/API/fetch) (as its 2nd\nargument).\n\nFor example:\n\n```javascript\nAsciinemaPlayer.create(\n  { url: url, fetchOpts: { method: 'POST' } },\n  containerElement\n);\n```\n\nAlternatively, you can use custom data source (as described in previous section)\nand call `fetch` yourself:\n\n```javascript\nAsciinemaPlayer.create(\n  { data: () => fetch(url, { method: 'POST' }) },\n  containerElement\n);\n```\n\n### Playing other recording formats\n\nBy default, a recording is parsed with built-in\n[asciicast](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md)\nformat parser.\n\nIf you have a recording produced by other terminal session recording tool (e.g.\nscript, termrec, ttyrec) you can use one of [built-in file format\nparsers](src/parser/README.md#built-in-parsers), or [implement a custom parser\nfunction](src/parser/README.md#custom-parser).\n\nRecording format parser can be specified in the source argument to\n`AsciinemaPlayer.create` as a string (built-in) or a function (custom):\n\n```javascript\nAsciinemaPlayer.create({ url: url, parser: parser }, containerElement);\n```\n\nSee [Parsers](src/parser/README.md) for information on available built-in\nparsers and how to implement a custom one.\n\n## Options\n\nThe following options can be used to adjust look and feel of the player:\n\n### `cols`\n\nType: number\n\nNumber of columns of player's terminal.\n\nWhen not set it defaults to 80 (until asciicast gets loaded) and to terminal\nwidth saved in the asciicast file (after it gets loaded).\n\nIt's recommended to set it to the same value as in asciicast file to avoid\nplayer resizing itself from 80x24 to actual dimensions of the recording when it\ngets loaded.\n\n### `rows`\n\nType: number\n\nNumber of lines of player's terminal.\n\nWhen not set it defaults to 24 (until asciicast gets loaded) and to terminal\nheight saved in the asciicast file (after it gets loaded).\n\nSame recommendation as for `cols` applies here.\n\n### `autoPlay`\n\nType: boolean\n\nSet this option to `true` if playback should start automatically.\n\nDefaults to `false` - no auto play.\n\n### `preload`\n\nType: boolean\n\nSet this option to `true` if the recording should be preloaded on player's\ninitialization.\n\nDefaults to `false` - no preload.\n\n### `loop`\n\nType: boolean or number\n\nSet this option to either `true` or a number if playback should be looped. When\nset to a number (e.g. `3`) then the recording will be re-played given number of\ntimes and stopped after that.\n\nDefaults to `false` - no looping.\n\n### `startAt`\n\nType: number or string\n\nStart playback at a given time.\n\nSupported formats:\n\n* `123` (number of seconds)\n* `\"2:03\"` (\"mm:ss\")\n* `\"1:02:03\"` (\"hh:mm:ss\")\n\nDefaults to `0`.\n\n### `speed`\n\nType: number\n\nPlayback speed. The value of `2` means 2x faster.\n\nDefaults to `1` - normal speed.\n\n### `idleTimeLimit`\n\nType: number\n\nLimit terminal inactivity to a given number of seconds.\n\nFor example, when set to `2` any inactivity (pauses) longer than 2 seconds will\nbe \"compressed\" to 2 seconds.\n\nDefaults to:\n\n- `idle_time_limit` from asciicast header (saved when passing `-i <sec>` to\n  `asciinema rec`),\n- no limit, when it was not specified at the time of recording.\n\n### `theme`\n\nType: string\n\nTerminal color theme.\n\nOne of:\n\n* `\"asciinema\"`\n* `\"dracula\"`\n* `\"monokai\"`\n* `\"nord\"`\n* `\"solarized-dark\"`\n* `\"solarized-light\"`\n* `\"tango\"`\n\nDefaults to `\"asciinema\"`.\n\nYou can also [use a custom theme](https://github.com/asciinema/asciinema-player/wiki/Custom-terminal-themes).\n\n### `poster`\n\nType: string\n\nPoster (a preview frame) to display until the playback is started.\n\nThe following poster specifications are supported:\n\n* `npt:1:23` - display recording \"frame\" at given time using [NPT (\"Normal Play Time\") notation](https://www.ietf.org/rfc/rfc2326.txt)\n* `data:text/plain,Poster text` - print given text\n\nThe easiest way of specifying a poster is to use NPT format. For example,\n`npt:1:23` will preload the recording and display terminal contents at 1 min 23\nsec.\n\nExample:\n\n```javascript\nAsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {\n  poster: 'npt:1:23'\n});\n```\n\nAlternatively, a `poster` value of `data:text/plain,This will be printed as\nposter\\n\\rThis in second line` will display arbitrary text. All [ANSI escape\ncodes](https://en.wikipedia.org/wiki/ANSI_escape_code) can be used to add color\nand move the cursor around to produce good looking poster.\n\nExample of using custom text poster with control sequences (aka escape codes):\n\n```javascript\nAsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {\n  poster: \"data:text/plain,I'm regular \\x1b[1;32mI'm bold green\\x1b[3BI'm 3 lines down\"\n});\n```\n\nDefaults to blank terminal or, when `startAt` is specified, to screen contents\nat time specified by `startAt`.\n\n### `fit`\n\nType: string\n\nSelects fitting (sizing) behaviour with regards to player's container element.\n\nPossible values:\n\n* `\"width\"` - scale to full width of the container\n* `\"height\"` - scale to full height of the container (requires the container element to have fixed height)\n* `\"both\"` - scale to either full width or height, maximizing usage of available space (requires the container element to have fixed height)\n* `false` / `\"none\"` - don't scale, use fixed size font (also see `fontSize` option below)\n\nDefaults to `\"width\"`.\n\n> Version 2.x of the player supported only the behaviour represented by the\n> `false` value. If you're upgrading from v2 to v3 and want to preserve the sizing\n> behaviour then include `fit: false` option.\n\n### `controls`\n\nType: boolean or \"auto\"\n\nHide or show user controls, i.e. bottom control bar.\n\nValid values:\n\n* `true` - always show controls\n* `false` - never show controls\n* `\"auto\"` - show controls on mouse movement, hide on lack of mouse movement\n\nDefaults to `\"auto\"`.\n\n### `markers`\n\nType: array\n\nAllows providing a list of timeline markers. See [Markers](#markers-1) for\ninformation on what they're useful for.\n\nExample of unlabeled markers:\n\n```javascript\nAsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {\n  markers: [5.0, 25.0, 66.6, 176.5]  // time in seconds\n});\n```\n\nExample of labeled markers:\n\n```javascript\nAsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {\n  markers: [\n    [5.0,   \"Installation\"],  // time in seconds + label\n    [25.0,  \"Configuration\"],\n    [66.6,  \"Usage\"],\n    [176.5, \"Tips & Tricks\"]\n  ]\n});\n```\n\nMarkers set with this option override all [markers embedded in asciicast\nfiles](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md#m---marker).\n\nDefaults to markers found in the recording file.\n\n### `pauseOnMarkers`\n\nType: boolean\n\nIf `pauseOnMarkers` is set to `true`, the playback automatically pauses on every\nmarker encountered and it can be resumed by either pressing the space bar key or\nclicking on the play button. The resumed playback continues until the next\nmarker is encountered.\n\nThis option can be useful in e.g. live demos: you can add markers to a\nrecording, then play it back during presentation, and have the player stop\nwherever you want to explain terminal contents in more detail.\n\nDefaults to `false`.\n\n### `terminalFontSize`\n\nType: string\n\nSize of the terminal font.\n\n_This option is effective only when `fit: false` option is specified as well\n(see above)._\n\nPossible values:\n\n* any valid CSS `font-size` value, e.g. `\"15px\"`\n* `\"small\"`\n* `\"medium\"`\n* `\"big\"`\n\nDefaults to `\"small\"`.\n\n### `terminalFontFamily`\n\nType: string\n\nTerminal font-family override.\n\nUse any valid CSS `font-family` value, e.g `\"'JetBrains Mono', Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace\"`.\n\nSee [Fonts](#fonts) for more information on using custom fonts.\n\n### `terminalLineHeight`\n\nType: number\n\nTerminal line height override.\n\nThe value is relative to the font size (like `em` unit in CSS). For example a\nvalue of `1` makes the line height equal to the font size, leaving no space\nbetween lines. A value of `2` makes it double the font size, etc.\n\nDefaults to `1.33333333`.\n\n### `logger`\n\nType: console-like object\n\nSet this option to `console` (`{ logger: console }`) or any object implementing\nconsole API (`.log()`, `.debug()`, `.info()`, `.warn()`, `.error()` methods) to\nenable logging. Useful during development or when debugging player issues.\n\n## API\n\n```javascript\nimport * as AsciinemaPlayer from 'asciinema-player';\n// skip the above import when using standalone player bundle\n\nconst player = AsciinemaPlayer.create(url, containerElement);\n```\n\nThe object returned by `create` function (saved as `player` const above)\ncontains several functions that can be used to control the player from\nyour code.\n\nFor example, initiate playback and print the length of the recording when it\nstarts:\n\n```javascript\nplayer.play().then(() => {\n  console.log(`started! duration: ${player.getDuration()}`);\n});\n```\n\nThe following functions are available on the player object:\n\n### `getCurrentTime()`\n\nReturns the current playback time in seconds.\n\n```javascript\nplayer.getCurrentTime(); // => 1.23\n```\n\n### `getDuration()`\n\nReturns the length of the recording in seconds, or `null` if the recording is\nnot loaded yet.\n\n```javascript\nplayer.getDuration(); // => 123.45\n```\n\n### `play()`\n\nInitiates playback of the recording. If the recording hasn't been\n[preloaded](#preload) then it's loaded, and playback is started.\n\n```javascript\nplayer.play();\n```\n\nThis function returns a promise which is fulfilled when the playback actually\nstarts.\n\n```javascript\nplayer.play().then(() => {\n  console.log(`started! duration: ${player.getDuration()}`);\n});\n```\n\nIf you want to synchronize asciinema player with other elements on the page (for\nexample `<audio>` element) then you can use this promise for coordination.\nAlternatively you can add event listener for `play`/`playing` events (see\nbelow).\n\n### `pause()`\n\nPauses playback.\n\n```javascript\nplayer.pause();\n```\n\nThe playback is paused immediately.\n\n### `seek(location)`\n\nChanges the playback location to specified time or marker.\n\n`location` argument can be:\n\n- time in seconds, as number, e.g. `15`\n- position in percentage, as string, e.g `'50%'`\n- specific marker by its 0-based index, as `{ marker: i }` object, e.g. `{ marker: 3 }`\n- previous marker, as `{ marker: 'prev' }` object,\n- next marker, as `{ marker: 'next' }` object.\n\nThis function returns a promise which is fulfilled when the location actually\nchanges.\n\n```javascript\nplayer.seek(15).then(() => {\n  console.log(`current time: ${player.getCurrentTime()}`);\n});\n```\n\n### `addEventListener(eventName, handler)`\n\nAdds event listener, binding handler's `this` to the player object.\n\n#### `play` event\n\n`play` event is dispatched when playback is _initiated_, either by clicking play\nbutton or calling `player.play()` method, but _not yet started_.\n\n```javascript\nplayer.addEventListener('play', () => {\n  console.log('play!');\n})\n```\n\n#### `playing` event\n\n`playing` event is dispatched when playback actually starts or resumes from\npause.\n\n```javascript\nplayer.addEventListener('playing', () => {\n  console.log(`playing! we're at: ${this.getCurrentTime()}`);\n})\n```\n\n#### `pause` event\n\n`pause` event is dispatched when playback is paused.\n\n```javascript\nplayer.addEventListener('pause', () => {\n  console.log(\"paused!\");\n})\n```\n\n#### `ended` event\n\n`ended` event is dispatched when playback stops after reaching the end of\nthe recording.\n\n```javascript\nplayer.addEventListener('ended', () => {\n  console.log(\"ended!\");\n})\n```\n\n#### `input` event\n\n`input` event is dispatched for every keyboard input that was recorded.\n\nCallback's 1st argument is an object with `data` field, which contains\nregistered input value. Usually this is ASCII character representing a key, but\nmay be a control character, like `\"\\r\"` (enter), `\"\\u0001\"` (ctrl-a), `\"\\u0003\"`\n(ctrl-c), etc. See [input events in asciicast file\nformat](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md#supported-event-types)\nfor more information.\n\nThis event can be used to play keyboard typing sound or display key presses on\nthe screen amongst other use cases.\n\n```javascript\nplayer.addEventListener('input', ({data}) => {\n  console.log('input!', JSON.stringify(data));\n})\n```\n\n`inputOffset` source option can be used to shift fired input events in time,\ne.g. when you need them to fire earlier due to audio latency etc:\n\n```javascript\nconst player = AsciinemaPlayer.create({\n  url: '/demo.cast',\n  inputOffset: -1.0\n}, document.getElementById('demo'));\n\nplayer.addEventListener('input', ({data}) => {\n  // this is now fired 1 sec ahead of original key press time\n  playSound(data);\n})\n```\n\nNote: `input` events are dispatched only for asciicasts recorded with `--stdin`\noption, e.g. `asciinema rec --stdin demo.cast`.\n\n#### `marker` event\n\n`marker` event is dispatched for every [marker](#markers-1) encountered during\nplayback.\n\nCallback's 1st argument is an object with `index`, `time` and `label` fields,\nwhich represent marker's index (0-based), time and label respectively.\n\nThe following example shows how to implement looping over a section of a\nrecording with combination of `marker` event and [`seek` method](#seeklocation):\n\n```javascript\nplayer.addEventListener('marker', ({ index, time, label }) => {\n  console.log(`marker! ${index} - ${time} - ${label}`);\n\n  if (index == 3) {\n    player.seek({ marker: 2 });\n  }\n})\n```\n\n### `dispose()`\n\nUse this function to dispose of the player, i.e. to shut it down, release all\nresources and remove it from DOM.\n\n## Fonts\n\nBy default the player uses a web safe, platform specific monospace font via\n`font-family` value like this: `\"Consolas, Menlo, 'Bitstream Vera Sans Mono',\nmonospace\"`.\n\nYou can use any custom monospace font with the player by adding `@font-face`\ndefinitions in CSS and calling `AsciinemaPlayer.create` with\n`terminalFontFamily` option. Regular font face is necessary, bold (weight 700)\nis recommended, italic is optional (italics are rarely used in terminal).\n\nIf you use [icons](https://fontawesome.com/) or\n[other](https://github.com/powerline/powerline)\n[symbols](https://github.com/romkatv/powerlevel10k) in your shell you may want\nto use one of [Nerd Fonts](https://www.nerdfonts.com/).\n\nFor example to use [Fira Code](https://github.com/tonsky/FiraCode) Nerd Font try\nthis:\n\n```css\n/* app.css */\n\n@font-face {\n    font-family: \"FiraCode Nerd Font\";\n    src:    local(Fira Code Bold Nerd Font Complete Mono),\n            url(\"/fonts/Fira Code Bold Nerd Font Complete Mono.ttf\") format(\"truetype\");\n    font-stretch: normal;\n    font-style: normal;\n    font-weight: 700;\n}\n\n@font-face {\n    font-family: \"FiraCode Nerd Font\";\n    src:    local(Fira Code Regular Nerd Font Complete Mono),\n            url(\"/fonts/Fira Code Regular Nerd Font Complete Mono.ttf\") format(\"truetype\");\n    font-stretch: normal;\n}\n\n```\n\n```javascript\n// app.js\n\nAsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {\n  terminalFontFamily: \"'FiraCode Nerd Font', monospace\"\n});\n```\n\nNote that the player performs measurement of font metrics (width/height) when it\nmounts on the page, therefore it's highly recommended to ensure chosen font is\nalready loaded before calling `create`. This can be achieved by using [CSS Font\nLoading API](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/load):\n\n```javascript\ndocument.fonts.load(\"1em FiraCode Nerd Font\").then(() => {\n  AsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {\n    terminalFontFamily: \"'FiraCode Nerd Font', monospace\"\n  });\n}\n```\n\n## Markers\n\nMarkers are specific points in recording's timeline, which can be used for\nnavigation within the recording or automation of the player.\n\nThere are several ways of specifying markers for use in the player:\n\n- using [`markers` option](#markers) with `AsciinemaPlayer.create`,\n- embedding markers in the recording - see [asciinema recorder doc on\n  markers](https://github.com/asciinema/asciinema#markers).\n\nSee also [`marker` event](#marker-event).\n\n## Keyboard shortcuts\n\nThe following keyboard shortcuts are currently available (when the player\nelement is focused):\n\n* <kbd>space</kbd> - play / pause\n* <kbd>f</kbd> - toggle fullscreen mode\n* <kbd>←</kbd> / <kbd>→</kbd> - rewind by 5 seconds / fast-forward by 5 seconds\n* <kbd>Shift</kbd> + <kbd>←</kbd> / <kbd>Shift</kbd> + <kbd>→</kbd> - rewind by 10% / fast-forward by 10%\n* <kbd>[</kbd> - rewind to the previous [marker](#markers-1)\n* <kbd>]</kbd> - fast-forward to the next [marker](#markers-1)\n* <kbd>0</kbd>, <kbd>1</kbd>, <kbd>2</kbd> ... <kbd>9</kbd> - jump to 0%, 10%, 20% ... 90%\n* <kbd>.</kbd> - step through a recording a frame at a time (when paused)\n\n## Development\n\nThe project requires [Node.js](https://nodejs.org/),\n[npm](https://www.npmjs.com/) and [Rust](https://www.rust-lang.org/) for\ndevelopment and build related tasks so make sure you have the latest versions\ninstalled.\n\nTo build the project:\n\n    git clone https://github.com/asciinema/asciinema-player\n    cd asciinema-player\n    git submodule update --init\n    rustup target add wasm32-unknown-unknown\n    npm install\n    npm run build\n    npm run bundle\n\nThis produces:\n\n- `dist/index.js` - ES module, to be `import`-ed in your JS bundle\n- `dist/bundle/asciinema-player.js` - standalone player script, to be linked directly from a website\n- `dist/bundle/asciinema-player.min.js` - minimized version of the above\n- `dist/bundle/asciinema-player.css` - stylesheet, to be linked directly from a website or included in a CSS bundle\n\n## Sponsors\n\nasciinema is sponsored by:\n\n- [**Dashcam**](https://dashcam.io?utm_source=asciinemagithub)\n- [Brightbox](https://www.brightbox.com/)\n\n## Consulting\n\nI offer consulting services for asciinema project. See https://asciinema.org/consulting for more information.\n\n## Contributing\n\nIf you want to contribute to this project check out\n[Contributing](https://asciinema.org/contributing) page.\n\n## Authors\n\nDeveloped with passion by [Marcin Kulik](http://ku1ik.com) and great open\nsource [contributors](https://github.com/asciinema/asciinema-player/contributors).\n\n## License\n\n© 2011 Marcin Kulik.\n\nAll code is licensed under the Apache License, Version 2.0. See LICENSE file for details.\n","readmeFilename":"README.md"}