diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..2a811cb1 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,13 @@ +module.exports = { + "env": { + "browser": true, + "es2021": true + }, + "extends": ["eslint:recommended", "@solid/eslint-config-base"], + "parserOptions": { + "ecmaVersion": 12, + "sourceType": "module" + }, + "rules": { + } +}; diff --git a/.gitignore b/.gitignore index d5089a1b..2b87557f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,16 +1,4 @@ -/target -/classes -/checkouts -pom.xml -pom.xml.asc -*.jar -*.class -/.lein-* -/.nrepl-port -/resources/public/js -/resources/public/css -/out -/.repl -.nrepl-history -node_modules/ -*.tgz +.DS_Store +/node_modules +/dist +/public diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index 990064e0..00000000 --- a/.gitmodules +++ /dev/null @@ -1,3 +0,0 @@ -[submodule "vt"] - path = vt - url = https://github.com/asciinema/vt.git diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 18a780d5..00000000 --- a/.travis.yml +++ /dev/null @@ -1,21 +0,0 @@ -language: clojure -jdk: openjdk10 -lein: 2.8.1 -before_install: - - rm "${JAVA_HOME}/lib/security/cacerts" - - ln -s /etc/ssl/certs/java/cacerts "${JAVA_HOME}/lib/security/cacerts" -script: - - lein doo phantom test once - - lein cljsbuild once release - - lein less once -deploy: - provider: releases - api_key: - secure: ObliMV9vtePzP2csggfS2bpK8Q4k1FZpOJhJn0CGH23C5Y/BmmofMdRLzUGOHx8EHCSe5GBkkEnkVKYQ5LGHHe1EbAWLvF3wMP7/WM1buJqxddgHAzkuyoxvztSoMCthWIcmYjdeKNbsgCp8I8eO8cJjUKoUuh70wdJBSmPiDcg= - file: - - resources/public/js/asciinema-player.js - - resources/public/css/asciinema-player.css - skip_cleanup: true - on: - tags: true - repo: asciinema/asciinema-player diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index fc214208..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,100 +0,0 @@ -# asciinema player changelog - -## 2.6.1 (2018-02-21) - -* Fixed support for idle_time_limit embedded in the v2 recording -* Add support for italic text style - -## 2.6.0 (2017-11-10) - -* Added support for [asciicast v2](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md) recording format -* New option: `idle-time-limit`, for optimizing idle time -* Control bar now auto-hides and shows up again on mouse move -* Fixed escape seq handling in `poster` attribute -* Improved memory usage - -## 2.5.0 (2017-08-27) - -* License changed to Apache Software License V2 -* Smaller file size of JS bundle -* Performance improvements -* `cols`/`rows` now affect internal VT size in addition to window size -* Fixed Unicode handling for codepoints >= 0x100000 -* Fixed speed-up (>) / slow-down (<) keys - -## 2.4.1 (2017-02-20) - -* Fixed \e[1J handling when cursor is over last column -* Fixed NPT poster rendering -* Animation frame-rate is now capped to 30 FPS -* Corrected Solarized Light theme colors -* `CreatePlayer` can now accept parsed JSON asciicast as `url` arg -* Various performance optimizations - -## 2.4.0 (2016-12-30) - -* New properties, methods and events on `` DOM element -* Improvements to player's element initialization and shutdown -* Performance optimizations -* Various terminal emulation fixes - -## 2.3.1 (2016-11-05) - -* Fixed `` element loading under Chrome -* Upgraded Reagent (and thus React) dependency -* Changed paths of build artifacts - -## 2.3.0 (2016-10-02) - -* `` HTML5 element for even simpler self-hosting - -## 2.2.0 (2016-04-22) - -* New option: `preload`, for prefetching of recording on player initialization -* Changed namespace to asciinema.player -* Various terminal emulation fixes -* Internal refactoring - -## 2.1.0 (2016-03-03) - -* `startAt` option doesn't imply `autoPlay: true` anymore -* `startAt` option now accepts number of seconds or time in format "hh:mm:ss" -* `fontSize` option accepts any CSS `font-size` value (e.g. `15px`) -* Various terminal emulation fixes -* Support for live streaming from SSE (Server-Sent Events) endpoints -* `snapshot` option has been renamed to `poster` (old name still works) - -## 2.0.0 (2016-01-06) - -* New API -* Added support for direct playback of asciicast V1 format -* New option: `startAt`, for specifying playback start point (in seconds) -* Improved rendering of lines with non-monospace characters -* New keyboard shortcuts -* New themes: asciinema, Monokai -* Displaying title and author info in full-screen mode - -## 1.2.0 (2015-04-23) - -* Simplified API -* Keyboard shortcuts: space for pause/resume, "f" for toggle full-screen mode -* Official asciinema logo is now used as the big "play button" -* Fixed `loop` option in some edge cases -* Improved progress bar behavior - -## 1.1.0 (2014-07-27) - -* New option: `loop` -* Support for Powerline Symbols font -* Improved line height across devices/browsers -* Many minor visual tweaks and fixes -* New theme: Solarized Light - -## 1.0.0 (2014-05-14) - -* Rewritten using React.js -* Improved seeking performance - -## 0.1 (2013-10-04) - -* Initial version (source code in asciinema.org repository) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index e6ae684f..00000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,36 +0,0 @@ -# Contributing to asciinema - -First, if you're opening a Github issue make sure it goes to the correct repository: - -* [asciinema/asciinema](https://github.com/asciinema/asciinema/issues) - command-line recorder -* [asciinema/asciinema.org](https://github.com/asciinema/asciinema-server/issues) - public website hosting recordings -* [asciinema/asciinema-player](https://github.com/asciinema/asciinema-player/issues) - player - -## Reporting bugs - -Open an issue in Github issue tracker. -Tell us what's the problem and include steps to reproduce it (reliably). -Including your OS/browser/terminal name and version in the report would be great. - -## Submitting patches with bug fixes - -If you found a bug and made a patch for it: - -* make sure all tests pass -* send us a pull request, including a description of the fix (referencing an existing issue if there's one) - -## Requesting new features - -We welcome all ideas. -If you believe most asciinema users would benefit from implementing your idea then feel free to open a Github issue. -However, as this is an open-source project maintained by a small team of volunteers we simply can't implement all of them due to limited resources. Please keep that in mind. - -## Proposing features/changes (pull requests) - -If you want to propose code change, either introducing a new feature or improving an existing one, please first discuss this with asciinema team. You can simply open a separate issue for a discussion or join #asciinema IRC channel on freenode. - -## Asking for help - -Github issue tracker is not a support forum. If you need help then either [join -#asciinema IRC channel on freenode](https://kiwiirc.com/nextclient/irc.freenode.net/#asciinema) or -ask a question on [asciinema community forum](https://discourse.asciinema.org/). diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 68ae373c..00000000 --- a/LICENSE +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "{}" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright 2011-2017 Marcin Kulik - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. \ No newline at end of file diff --git a/Makefile b/Makefile new file mode 100644 index 00000000..773f1700 --- /dev/null +++ b/Makefile @@ -0,0 +1,2 @@ +vt-js/pkg/vt_js.js: vt-js/src/lib.rs vt-js/src/utils.rs + cd vt-js && wasm-pack build \ No newline at end of file diff --git a/README.md b/README.md index ec03afe6..de2af35a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -_Note: This is README for `development` branch. [See the version for latest stable release](https://github.com/asciinema/asciinema-player/blob/master/README.md)._ +_Note: This README applies to development branch. See the version for the latest stable release [here](https://github.com/asciinema/asciinema-player/blob/master/README.md)._ # asciinema player @@ -6,13 +6,13 @@ _Note: This is README for `development` branch. [See the version for latest stab Web player for terminal session recordings (as produced by [asciinema recorder](https://github.com/asciinema/asciinema)) that you can -use on your website by simply adding `` tag. +use on your own website. ## About asciinema player is an open-source terminal session player written in -ClojureScript. Contrary to other _video_ players asciinema player doesn't play -heavy-weight video files (`.mp4`, `.webm` etc) but instead it plays light-weight +Javascript and Rust/WASM. Unlike other _video_ players asciinema player doesn't play +heavy-weight video files (`.mp4`, `.webm` etc) and instead plays light-weight terminal session files called [asciicasts](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md). @@ -29,23 +29,23 @@ and the recordings yourself then read on, it's very simple. ## Features -* HTML5 [`` element](#use-the-player-in-your-html-page) you can use in your website's markup, -* copy-paste of terminal content (it's just a text after all!), -* [idle time optimization](#idle-time-limit), -* [predefined and custom font sizes](#font-size), -* [custom poster](#poster), -* [custom playback speeds](#speed), -* [looped playback](#loop), -* [starting playback at specific time](#start-at), -* [programmatic control via methods/events/properties on the HTML element](#controlling-the-player-programmatically), +* ability to copy-paste terminal content - it's just a text after all!, +* ultra smooth, timing-accurate playback, +* [automatic font scaling](#fit) to fit into container element in most efficient way, +* [idle time optimization](#idletimelimit) to skip longer periods of inactivity, +* [predefined and custom font sizes](#fontsize), +* [NPT-based or custom text poster](#poster), +* [adjustable playback speed](#speed), +* [looped playback](#loop), infinite or finite, +* ๐Ÿšง [starting playback at specific time](#startat), * [keyboard shortcuts](#keyboard-shortcuts), * [multiple color schemes for standard 16 colors](#theme), -* 256 color palette / 24-bit true color (ISO-8613-3), +* full support for 256 color palette and 24-bit true color (ISO-8613-3), * full-screen mode. -## Self-hosting quick start +## Quick start -The following example shows how to use asciinema player on your own website, +The following examples show how to use asciinema player on your own website, without depending on asciinema.org. It assumes you have obtained terminal session recording file by either: @@ -55,18 +55,18 @@ It assumes you have obtained terminal session recording file by either: * downloading an existing recording from asciinema.org by appending `.cast` to the asciicast page URL (for example: https://asciinema.org/a/28307.cast). -### Download the player +### Use the standalone player bundle in your HTML page -Download latest version of the player from +Download latest version of the player bundle from [releases page](https://github.com/asciinema/asciinema-player/releases). You -only need `asciinema-player.js` and `asciinema-player.css` files. +only need `asciinema-player.min.js` and `asciinema-player.css` files. -### Use the player in your HTML page +First, add `asciinema-player.min.js`, `asciinema-player.css`and the `.cast` file of +your recording to your site's assets. The HTML snippet below assumes they're in +the web server's root directory. -First, add `asciinema-player.js`, `asciinema-player.css`and the `.cast` file -with your recording to your site's assets. - -Then add necessary includes to your HTML document: +Then add necessary includes to your HTML document and initialize the player +inside an empty `
` element: ```html @@ -77,17 +77,59 @@ Then add necessary includes to your HTML document: ... - +
... - + + ``` -## `` element attributes +### Use the player in your own application bundle + +Add `asciinema-player` to your `devDependencies`: + +```bash +npm install --save-dev asciinema-player@3.0.0-beta.1 +``` + +Add empty `
` element to your page to contain the player. + +Import and use `create` function from `asciinema-player` module: + +```javascript +import * as AsciinemaPlayer from 'asciinema-player'; +AsciinemaPlayer.create('/demo.cast', document.getElementById('demo')); +``` + +Finally, include player's CSS file - found in the npm package at +`dist/bundle/asciinema-player.css` - in your CSS bundle. + +## API + +To mount the player in your page call the `create` function exported by the +`asciinema-player` ES module with 2 arguments: the URL (or path) to the +asciicast file and the container DOM element to mount the player in. + +To pass additional options to the player turn the first argument into an object +with `src` attribute and any number of options: + +```javascript +AsciinemaPlayer.create({ + src: '/demo.cast', + loop: true, + theme: 'solarized-dark' +}, document.getElementById('demo')); +``` + +See below for a full list of available options. ### `cols` +Type: number + Number of columns of player's terminal. When not set it defaults to 80 (until asciicast gets loaded) and to terminal @@ -99,6 +141,8 @@ when it gets loaded. ### `rows` +Type: number + Number of lines of player's terminal. When not set it defaults to 24 (until asciicast gets loaded) and to terminal @@ -108,22 +152,36 @@ Same recommendation as for `cols` applies here. ### `autoplay` -Set this attribute to any value if playback should start automatically. Defaults -to no autoplay. +Type: boolean + +Set this option to `true` if playback should start automatically. + +Defaults to `false` - no auto play. ### `preload` -Set this attribute to any value if the recording should be preloaded on player's -initialization. Defaults to no preload. +Type: boolean + +Set this option to `true` if the recording should be preloaded on player's +initialization. + +Defaults to `false` - no preload. ### `loop` -Set this attribute to any value if playback should be looped. Defaults to no -looping. +Type: boolean or number + +Set this option to either `true` or a number if playback should be looped. When +set to a number (e.g. `3`) then the recording will be re-played given number of +times and stopped after that. -### `start-at` +Defaults to `false` - no looping. -Start playback at given time. +### `startAt` + +Type: number or string + +Start playback at a given time. Supported formats: @@ -131,15 +189,21 @@ Supported formats: * 2:03 ("mm:ss") * 1:02:03 ("hh:mm:ss") -Defaults to 0. +Defaults to `0`. ### `speed` -Playback speed. Defaults to 1 (normal speed). 2 means 2x faster. +Type: number + +Playback speed. The value of `2` means 2x faster. -### `idle-time-limit` +Defaults to `1` - normal speed. -Limit terminal inactivity to given number of seconds. +### `idleTimeLimit` + +Type: number + +Limit terminal inactivity to a given number of seconds. For example, when set to `2` any inactivity longer than 2 seconds will be "compressed" to 2 seconds. @@ -150,191 +214,101 @@ Defaults to: `asciinema rec`), - no limit, when it was not specified at the time of recording. -### `poster` - -Poster (preview) to display before playback start. - -The following poster specifications are supported: - -* `npt:2:34` - show recording "frame" at given time -* `data:text/plain,Poster text` - show given text - -The easiest way of specifying a poster is to use `npt:2:34` format. This will -preload the recording and display terminal contents from the recording at 2 min -34 s. - -Example: - -```html - -``` - -Alternatively, a `poster` value of `data:text/plain,This will be printed as -poster\n\rThis in second line` will display arbitrary text. All [ANSI escape -codes](https://en.wikipedia.org/wiki/ANSI_escape_code) can be used to add color -and move the cursor around to produce good looking poster. - -Example of using text poster with cursor positioning: - -```html - -``` - -Defaults to screen contents at `start-at` (or blank terminal when `start-at` is -0). - -### `font-size` - -Size of the terminal font. - -Possible values: - -* `small` -* `medium` -* `big` -* any CSS `font-size` value (e.g. `15px`) - -Defaults to `small`. - ### `theme` +Type: string + Terminal color theme. One of: -* `asciinema` -* `tango` -* `solarized-dark` -* `solarized-light` -* `monokai` +* `"asciinema"` +* `"monokai"` +* `"tango"` +* `"solarized-dark"` +* `"solarized-light"` -Defaults to `asciinema`. +Defaults to `"asciinema"`. You can also [use a custom theme](https://github.com/asciinema/asciinema-player/wiki/Custom-terminal-themes). -### `title` - -Title of the asciicast, displayed in the titlebar in fullscreen mode. - -### `author` - -Author of the asciicast, displayed in the titlebar in fullscreen mode. - -### `author-url` - -URL of the author's homepage/profile. Author name (`author` above) is linked to -this URL. - -### `author-img-url` - -URL of the author's image, displayed in the titlebar in fullscreen mode. - -### Example usage with options - -```html - -``` - -## Controlling the player programmatically - -The player's DOM element provides several properties, methods and events -mimicking -[HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement), -allowing for programmatical control over the player. +### `poster` -### Properties +Type: string -#### duration +Poster (a preview frame) to display until the playback is started. -`duration` property gives the length of the recording in seconds, or zero if no -recording data is available (for ex. before `loadedmetadata` event is -triggered). +The following poster specifications are supported: -```javascript -document.getElementById('player').duration; // 123.45 -``` +* `npt:1:23` - display recording "frame" at given time using [NPT ("Normal Play Time") notation](https://www.ietf.org/rfc/rfc2326.txt) +* `data:text/plain,Poster text` - print given text -#### currentTime +The easiest way of specifying a poster is to use NPT format. For example, +`npt:1:23` will preload the recording and display terminal contents at 1 min 23 +sec. -`currentTime` property gives the current playback time in seconds. Setting this -value seeks the recording to the new time. +Example: ```javascript -document.getElementById('player').currentTime; // 1.23 -document.getElementById('player').currentTime = 33; +AsciinemaPlayer.create({ + src: '/demo.cast', + poster: 'npt:1:23' +}, document.getElementById('demo')); ``` -### Methods - -#### play +Alternatively, a `poster` value of `data:text/plain,This will be printed as +poster\n\rThis in second line` will display arbitrary text. All [ANSI escape +codes](https://en.wikipedia.org/wiki/ANSI_escape_code) can be used to add color +and move the cursor around to produce good looking poster. -`play` method attempts to begin playback of the recording. If the recording -hasn't been preloaded then it tries to load it, and then starts the playback. +Example of using custom text poster with control sequences (aka escape codes): ```javascript -document.getElementById('player').play(); +AsciinemaPlayer.create({ + src: '/demo.cast', + poster: "data:text/plain,I'm regular \x1b[1;32mI'm bold green\x1b[3BI'm 3 lines down" +}, document.getElementById('demo')); ``` -NOTE: If you want to synchronize asciinema player's playback with other elements -on the page (for example `