asciinema / asciinema-player

Web player for terminal session recordings

asciinema player

asciinema player is a web player for terminal sessions recordings.

Unlike typical web video players, which play heavyweight video files (.mp4, .mov), asciinema player plays lightweight terminal session recordings in the text-based asciicast format (.cast), such as those produced by the asciinema recorder.

The player is built from the ground up with JavaScript and Rust (WASM), and is available as npm package and a standalone JS bundle.

You can use it on any HTML page - in a project documentation, on a blog, or in a conference talk presentation.

It's as easy as adding a single line of Javascript code to your web page:

AsciinemaPlayer.create('demo.cast', document.getElementById('demo'));

Check out the quick start guide for basic setup overview.

You can see the player in action in asciinema documentation.

Notable features:

• ability to copy-paste terminal content - it's just text after all!
• smooth, timing-accurate playback,
• idle time optimization to skip periods of inactivity,
• posters,
• markers for navigation or auto-pause,
• configurable font families and line height,
• automatic terminal scaling to fit into container element in most efficient way,
• full-screen mode,
• multiple color themes for standard 16 colors + support for 256 color palette and 24-bit true color (ISO-8613-3),
• adjustable playback speed,
• looped playback, infinite or finite,
• starting playback at specific time,
• API for programmatic control,
• keyboard shortcuts,
• support for other recording formats like ttyrec, typescript.

Building

Building asciinema player from source requires:

• Node.js and npm,
• Rust compiler (1.77 or later) and Cargo package manager.

To build the project run:

git clone https://github.com/asciinema/asciinema-player
cd asciinema-player
rustup target add wasm32-unknown-unknown
npm install
npm run build
npm run bundle

This produces following output files:

• dist/index.js - ES module, to be import-ed in your JS bundle
• dist/bundle/asciinema-player.js - standalone player script, to be linked directly from a website
• dist/bundle/asciinema-player.min.js - minimized version of the above
• dist/bundle/asciinema-player.css - stylesheet, to be linked directly from a website or included in a CSS bundle

Donations

Sustainability of asciinema development relies on donations and sponsorships.

Please help the software project you use and love. Become a supporter or a corporate sponsor.

asciinema is sponsored by:

• Brightbox
• DataDog

Consulting

If you're interested in integration or customization of asciinema player to suit your needs, check asciinema consulting services.

License

© 2011 Marcin Kulik.

All code is licensed under the Apache License, Version 2.0. See LICENSE file for details.

asciinema-player's Issues

Incorrect terminal width on Firefox

On Firefox (46 Linux) a recording of 80 columns does not display as 80 columns but smaller. The CSS is assigned something like style="width:80ch;...." but only when that "width" value is removed the terminal show the correct size.

Testing with Chrome do not expose the same problem.

A video stopped playing properly

Hello,
this video was playing properly for months:

https://asciinema.org/a/48490

Now, starting from 12 second, artifacts are there on screen.

Playback hooks for audio syncing

This was discussed in https://github.com/asciinema/asciinema.org/issues/63; I'm just creating an issue here since this is where things will be worked on.

I just realized you're doing the next rewrite in cljs/reagent! I'm somewhat tempted to offer help, though I really shouldn't with all the side projects I've committed to... Still, if you feel the need for assistance, it's possible I could be coaxed :-)

grunt-cli ?

i think this needs grunt-cli? else node_modules/.bin/grunt is not there.

asciinema-player.js size is large and growing

asciinema-player.js is a large and growing binary:

Release	Size
v2.0.0, Jan 2016	445 KB
v2.1.0, Mar 2016	471 KB
v2.2.0, Apr 2016	501 KB
v2.3.0, Oct 2016	582 KB
v2.3.1, Nov 2016	618 KB
v2.4.0, Dec 2016	630 KB

Unfortunately, increasing download size means that using the latest version is not always obvious. I have one use in mind that appears to be met by all the features in v2.0.0, so working out how to use the old version has value because it makes my page ~30% smaller.

(As an aside, this is a great project and I really appreciate all the work going on. Thank you for all your effort!)

Rendering on mobile truncates content (even / especially when full screened)

Sorry I imagine this one is going to be an utter pain to debug (wooh different versions of browsers on different phones). However, given the amount of content consumption that has moved onto mobiles I think is kind of important: as a case study, I'm unwilling to distribute links to something that won't display on mobiles.

If you try to render some pages (e.g. https://asciinema.org/a/clqz3z43ct1cq7l1i2ocmtvdd) on mobiles (e.g. native chome browser on stock android in nexus 5, android version 6.0.1, chrome 57.0.2987.132) then text is truncated off the screen.

This seems to apply even if:
i. You record in a smaller window
ii. You full screen the player

In the example included (https://asciinema.org/a/clqz3z43ct1cq7l1i2ocmtvdd) the text fits on the screen normally (thanks to being recorded in a smaller window). But when you full screen the display this stops working.
m

asciinema.vt-test/test-dump fails for :seed 1485523035364

{:shrunk
 {:total-nodes-visited 4161,
  :result false,
  :smallest
  [[(27 91 59 53 102)
    [32 32 32 32 32 32]
    [32 32 32 32]
    [32 32 32]
    [32 32 32 32 32 32 32 32]
    [32 32 32 32 32]
    (27 91 49 74)]],
  :depth 156},
 :num-tests 90,
 :seed 1485523035364,
 :fail
 [[(27 91 49 73)
   [21]
   (27 91 54 56 57 49 109)
   [17]
   [43 71 70 55 67 64666]
   (27 91 59 59 52 67)
   (27 91 57 54 52 59 109)
   [112 24660 65291 13361 94 32103]
   (27 91 48 94)
   (27 91 109)
   [14]
   [105]
   (27 33 34 110)
   (27 45 110)
   [65 115 119 116 62 64453]
   (27 91 59 53 102)
   (27 91 50 52 88)
   (27 91 50 59 59 56 109)
   (27 78)
   (27 116)
   (27 91 54 53 95)
   (27 35 37 81)
   (27 91 83)
   (27 38 36 84)
   [17]
   (27 40 47 102)
   [117 122 65161 48 48 34788]
   [5]
   [63878 71 64 104]
   (27 91 59 50 53 49 59 74)
   [85 121 6845]
   [60 65 54 107 95 66 120 72]
   (27 91 109)
   [21]
   [1]
   [7]
   (27 91 52 124)
   (27 91 55 49 109)
   (27 42 34 97)
   [30]
   (27 91 59 59 56 53 53 109)
   (27 71)
   (27 91 59 49 59 59 59 87)
   [64645 68 88 38 46920]
   [14]
   (27 91 49 59 48 59 74)
   [47]
   [103 25012 110 65143 25195]
   (27 91 54 51 90)
   [1]
   [5]
   [5]
   [14]
   (27 101)
   [17]
   [3]
   [0]]],
 :result false,
 :failing-size 89,
 :test-var "test-dump"}

asciinema-player for React

Hi all,

Does anyone know how to embed asciinema-player into a react component? Currently I cannot set src path correctly.

Thanks in advance.

Implementing wcwidth support

The wcswidth^1 function is required to get how many columns are needed to represent the Unicode string. Most of East Asian Characters need two columns rather than one. This asciinema record shows how East Asian Characters break the asciinema player.

Emojis would require two columns to show after Unicode 9.0.^3

Scrubber out of sync when setting playback speed > 1 on embedded

Code used:

<script src="//asciinema.org/a/19251.js?" id="asciicast-19251" async data-speed="2"></script>

Clicking play and letting it run through at faster-than-1 speed results in scrubber stopping before it reaches end:

Same issue can be seen if you click play and start clicking through scrubber timeline. You are unable to click past the point where it stops.

If you click to end of timeline right when the movie starts, the scrubber will keep moving right, but the movie won't actually play. Clicking to beginning of timeline does not start movie. A page reload is required.

Changing playback speed in the player doesn't work for me

Using both Chrome and Safari on macOS Sierra, pressing the < and > keys doesn't change the playback speed.

Appending ?speed=0.5 to the URL does slow down the playback, so the problem seems to be with the key code logic. Other keys, like f, (space), or 0 to 9 do work though.

Looking at the code, I wonder if the issue is related to the fact that < and > require pressing the Shift key, and the code is inside a (when-not (has-modifiers? dom-event) condition:

https://github.com/asciinema/asciinema-player/blob/7b9acc9/src/asciinema/player/view.cljs#L248

crash when recording and resizing the terminal window

Hello,

I'm using asciinema 0.9.8-1 (from debian repo) on my Debian 8 server, and I access it via Putty on Windows 10.

When I start the record, no problem :

But if I resize during the record, asciinema crashes and I have a lot of Python errors :

Background outside of terminal blinks white randomly in Safari

https://asciinema.org/a/104790?speed=0.5

(possibly related to cursor blinking)

--max-wait

The asciinema play command has a --max-wait option that is very helpful. Could this be implemented in the web player without too much trouble?

cmd-digit shortcut broken by player under Firefox on OS X

We should check if no modifier key is held in key-press->message (

asciinema-player/src/asciinema/player/view.cljs

Line 236 in efdb456

(defn key-press->message [dom-event]

).

Error cross origin when trying to get the json on chrome

my code :

<!DOCTYPE html>
<html>
<head>
    <title>Ma cabanne</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./style/style.css">
    <link rel="stylesheet" type="text/css" href="./assets/asciinema/asciinema-player.css" />
</head>
<body>
    <div id="asciinema-test"></div> 
</body>
</html>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./assets/asciinema/asciinema-player.js"></script>
<script>
    asciinema.player.js.CreatePlayer('asciinema-test', './assets/asciinema/demo.json', { width: 80, height: 24 });
</script>

Make code for embedded video compatible with LibreJS

Embedded videos are detected as non-free JS code by LibreJS.

This script is detected as nonfree, external, and as defining functions or methods
https://asciinema.org/a/89325.js

https://github.com/asciinema/asciinema-player/blob/master/LICENSE#L623
https://www.gnu.org/philosophy/javascript-trap.html
https://www.gnu.org/software/librejs/free-your-javascript.html

<asciinema-player> HTML5 tag/element

See #18.

Add a way to use asciinema-player with a package manager

Is there a way to use a package manager (such as bower) for asciinema-player to keep an updated version and avoid versioning a vendor?

Auto-pause when window/tab loses focus

This would be nice addition. Some examples on how to achieve this: http://www.smashingmagazine.com/2015/01/20/creating-sites-with-the-page-visibility-api/?utm_source=html5weekly&utm_medium=email

Firefox autoplay

asciinema does not work at all in Firefox if autoplay is disabled (media.autoplay.enabled)

asciinema theme for Iterm2

Does anyone have asciinema theme configuration for Iterm2?

.asciinema-theme-asciinema .asciinema-terminal {
    color: #cccccc;
    background-color: #121314;
    border-color: #121314
}

.asciinema-theme-asciinema .fg-bg {
    color: #121314
}

.asciinema-theme-asciinema .bg-fg {
    background-color: #cccccc
}

.asciinema-theme-asciinema .fg-0 {
    color: #000000
}

.asciinema-theme-asciinema .bg-0 {
    background-color: #000000
}

.asciinema-theme-asciinema .fg-1 {
    color: #dd3c69
}

.asciinema-theme-asciinema .bg-1 {
    background-color: #dd3c69
}

.asciinema-theme-asciinema .fg-2 {
    color: #4ebf22
}

.asciinema-theme-asciinema .bg-2 {
    background-color: #4ebf22
}

.asciinema-theme-asciinema .fg-3 {
    color: #ddaf3c
}

.asciinema-theme-asciinema .bg-3 {
    background-color: #ddaf3c
}

.asciinema-theme-asciinema .fg-4 {
    color: #26b0d7
}

.asciinema-theme-asciinema .bg-4 {
    background-color: #26b0d7
}

.asciinema-theme-asciinema .fg-5 {
    color: #b954e1
}

.asciinema-theme-asciinema .bg-5 {
    background-color: #b954e1
}

.asciinema-theme-asciinema .fg-6 {
    color: #54e1b9
}

.asciinema-theme-asciinema .bg-6 {
    background-color: #54e1b9
}

.asciinema-theme-asciinema .fg-7 {
    color: #d9d9d9
}

.asciinema-theme-asciinema .bg-7 {
    background-color: #d9d9d9
}

.asciinema-theme-asciinema .fg-8 {
    color: #4d4d4d
}

.asciinema-theme-asciinema .bg-8 {
    background-color: #4d4d4d
}

.asciinema-theme-asciinema .fg-9 {
    color: #dd3c69
}

.asciinema-theme-asciinema .bg-9 {
    background-color: #dd3c69
}

.asciinema-theme-asciinema .fg-10 {
    color: #4ebf22
}

.asciinema-theme-asciinema .bg-10 {
    background-color: #4ebf22
}

.asciinema-theme-asciinema .fg-11 {
    color: #ddaf3c
}

.asciinema-theme-asciinema .bg-11 {
    background-color: #ddaf3c
}

.asciinema-theme-asciinema .fg-12 {
    color: #26b0d7
}

.asciinema-theme-asciinema .bg-12 {
    background-color: #26b0d7
}

.asciinema-theme-asciinema .fg-13 {
    color: #b954e1
}

.asciinema-theme-asciinema .bg-13 {
    background-color: #b954e1
}

.asciinema-theme-asciinema .fg-14 {
    color: #54e1b9
}

.asciinema-theme-asciinema .bg-14 {
    background-color: #54e1b9
}

.asciinema-theme-asciinema .fg-15 {
    color: #ffffff
}

.asciinema-theme-asciinema .bg-15 {
    background-color: #ffffff
}

Support for strikethrough

Currently, escape code CSI SGR 9 does nothing, but it should (or it would be cool if it could) activate strikethrough, such as default <del> (strikethrough) display in html.

Loop on finish

An option to repeat the playback would be nice, especially for use with autostart.

API for controlling the player from the embedding page

A JavaScript API for communicating with the player allowing the page embedding the player to:

• start
• pause
• set position (seconds from start)
• query status (running/paused/position)

The most important of these functions is programmed start, which would provide a quick and easy way of synchronizing a voiceover audio with the player (as requested by #12). For an example, see http://173.39.240.255:31000/tutorial/getting-started. This is a web page with audio and an Asciienema video. The synchronization method is primitive: the user starts the audio and waits for the narrator to tell them to start the video. This works well enough, but is inelegant. An API allowing supporting external start would allow for a single button that starts both (perhaps with an accompanying select control for voiceover language).

adjust default "keyframe" image based on start time

The player shows an initial image based on the first few seconds of playback, which is great. It would be even better if this could adjust appropriately when data-t or ?t= is specified.

Thanks for asciinema!

Build not working for me

I cloned repo, installed lein and ran lein cljsbuild once release but instead of building, it gave me a stack trace...

➜  asciinema-player git:(master) lein cljsbuild once release
Exception in thread "main" java.util.regex.PatternSyntaxException: Unknown inline modifier near index 2
(?U)^[\p{Alpha}_$]
  ^, compiling:(cljs/util.cljc:159:33)
        at clojure.lang.Compiler.load(Compiler.java:7234)
        at clojure.lang.RT.loadResourceScript(RT.java:371)
        at clojure.lang.RT.loadResourceScript(RT.java:362)
        at clojure.lang.RT.load(RT.java:446)
        at clojure.lang.RT.load(RT.java:412)
        at clojure.core$load$fn__5448.invoke(core.clj:5866)
        at clojure.core$load.doInvoke(core.clj:5865)
        at clojure.lang.RestFn.invoke(RestFn.java:408)
        at clojure.core$load_one.invoke(core.clj:5671)
        at clojure.core$load_lib$fn__5397.invoke(core.clj:5711)
        at clojure.core$load_lib.doInvoke(core.clj:5710)
        at clojure.lang.RestFn.applyTo(RestFn.java:142)
        at clojure.core$apply.invoke(core.clj:632)
        at clojure.core$load_libs.doInvoke(core.clj:5749)
        at clojure.lang.RestFn.applyTo(RestFn.java:137)
        at clojure.core$apply.invoke(core.clj:632)
        at clojure.core$require.doInvoke(core.clj:5832)
        at clojure.lang.RestFn.invoke(RestFn.java:703)
        at cljs.closure$eval111$loading__5340__auto____112.invoke(closure.clj:9)
        at cljs.closure$eval111.invoke(closure.clj:9)
        at clojure.lang.Compiler.eval(Compiler.java:6782)
        at clojure.lang.Compiler.eval(Compiler.java:6771)
        at clojure.lang.Compiler.load(Compiler.java:7227)
        at clojure.lang.RT.loadResourceScript(RT.java:371)
        at clojure.lang.RT.loadResourceScript(RT.java:362)
        at clojure.lang.RT.load(RT.java:446)
        at clojure.lang.RT.load(RT.java:412)
        at clojure.core$load$fn__5448.invoke(core.clj:5866)
        at clojure.core$load.doInvoke(core.clj:5865)
        at clojure.lang.RestFn.invoke(RestFn.java:408)
        at clojure.core$load_one.invoke(core.clj:5671)
        at clojure.core$load_lib$fn__5397.invoke(core.clj:5711)
        at clojure.core$load_lib.doInvoke(core.clj:5710)
        at clojure.lang.RestFn.applyTo(RestFn.java:142)
        at clojure.core$apply.invoke(core.clj:632)
        at clojure.core$load_libs.doInvoke(core.clj:5749)
        at clojure.lang.RestFn.applyTo(RestFn.java:137)
        at clojure.core$apply.invoke(core.clj:634)
        at clojure.core$use.doInvoke(core.clj:5843)
        at clojure.lang.RestFn.invoke(RestFn.java:436)
        at cljsbuild.compiler$eval9$loading__5340__auto____10.invoke(compiler.clj:1)
        at cljsbuild.compiler$eval9.invoke(compiler.clj:1)
        at clojure.lang.Compiler.eval(Compiler.java:6782)
        at clojure.lang.Compiler.eval(Compiler.java:6771)
        at clojure.lang.Compiler.load(Compiler.java:7227)
        at clojure.lang.RT.loadResourceScript(RT.java:371)
        at clojure.lang.RT.loadResourceScript(RT.java:362)
        at clojure.lang.RT.load(RT.java:446)
        at clojure.lang.RT.load(RT.java:412)
        at clojure.core$load$fn__5448.invoke(core.clj:5866)
        at clojure.core$load.doInvoke(core.clj:5865)
        at clojure.lang.RestFn.invoke(RestFn.java:408)
        at clojure.core$load_one.invoke(core.clj:5671)
        at clojure.core$load_lib$fn__5397.invoke(core.clj:5711)
        at clojure.core$load_lib.doInvoke(core.clj:5710)
        at clojure.lang.RestFn.applyTo(RestFn.java:142)
        at clojure.core$apply.invoke(core.clj:632)
        at clojure.core$load_libs.doInvoke(core.clj:5749)
        at clojure.lang.RestFn.applyTo(RestFn.java:137)
        at clojure.core$apply.invoke(core.clj:632)
        at clojure.core$require.doInvoke(core.clj:5832)
        at clojure.lang.RestFn.invoke(RestFn.java:436)
        at user$eval5.invoke(form-init4166229238541378742.clj:1)
        at clojure.lang.Compiler.eval(Compiler.java:6782)
        at clojure.lang.Compiler.eval(Compiler.java:6771)
        at clojure.lang.Compiler.load(Compiler.java:7227)
        at clojure.lang.Compiler.loadFile(Compiler.java:7165)
        at clojure.main$load_script.invoke(main.clj:275)
        at clojure.main$init_opt.invoke(main.clj:280)
        at clojure.main$initialize.invoke(main.clj:308)
        at clojure.main$null_opt.invoke(main.clj:343)
        at clojure.main$main.doInvoke(main.clj:421)
        at clojure.lang.RestFn.invoke(RestFn.java:421)
        at clojure.lang.Var.invoke(Var.java:383)
        at clojure.lang.AFn.applyToHelper(AFn.java:156)
        at clojure.lang.Var.applyTo(Var.java:700)
        at clojure.main.main(main.java:37)
Caused by: java.util.regex.PatternSyntaxException: Unknown inline modifier near index 2
(?U)^[\p{Alpha}_$]
  ^
        at java.util.regex.Pattern.error(Pattern.java:1713)
        at java.util.regex.Pattern.group0(Pattern.java:2519)
        at java.util.regex.Pattern.sequence(Pattern.java:1806)
        at java.util.regex.Pattern.expr(Pattern.java:1752)
        at java.util.regex.Pattern.compile(Pattern.java:1460)
        at java.util.regex.Pattern.<init>(Pattern.java:1133)
        at java.util.regex.Pattern.compile(Pattern.java:823)
        at clojure.lang.LispReader$RegexReader.invoke(LispReader.java:513)
        at clojure.lang.LispReader$DispatchReader.invoke(LispReader.java:691)
        at clojure.lang.LispReader.read(LispReader.java:263)
        at clojure.lang.LispReader.readDelimitedList(LispReader.java:1200)
        at clojure.lang.LispReader$ListReader.invoke(LispReader.java:1049)
        at clojure.lang.LispReader.read(LispReader.java:263)
        at clojure.lang.LispReader.readDelimitedList(LispReader.java:1200)
        at clojure.lang.LispReader$ListReader.invoke(LispReader.java:1049)
        at clojure.lang.LispReader.read(LispReader.java:263)
        at clojure.lang.LispReader.read(LispReader.java:196)
        at clojure.lang.Compiler.load(Compiler.java:7222)
        ... 76 more

Embeddable discovery

Asciicinema is a great tool !
Any chance to implement some embed tags or metadata so that the player can be embeddable in slack, instead of jus a link ?
=> https://api.slack.com/robots

Preloading

Would be nice to have a preload option which would fetch the asciicast file on player initialization, so when the viewer clicks big play button it starts immediately. It should be off by default.

This would enable #15.

Maximum screen width?

The record file play without any problem on my computer but was cropped on asciinema site

Mozilla Firefox 50.1.0

Google Chrome 54.0.2840.59

Arch linux , asciinema 1.3.0 and termite v12

widthtest.zip

https://asciinema.org/a/98762

Convert recording to gif

https://github.com/tav/asciinema2gif/ contains code that uses rendered web page from asciinema website to convert video. One of the popular requests is to convert local recorded session - tav/asciinema2gif#24 How hard it is to achieve that?

Playback start time in URL

It would be useful if asciinema player supported playback start time argument in URLs.
This would allow to refer to a particular place in an asciicast.

We could mimic YouTube format: ?t=37s, ?t=2m10s.
Example: open https://asciinema.org/a/23012?t=18s ==> the playback starts (immediately) from position 0:18.

Users will also be able to mark interesting parts of their asciicasts in the description, e.g.

Tetris in Go, written by jjinux

[0:28](https://asciinema.org/a/20946?t=28s) First row completed.
[3:50](https://asciinema.org/a/20946?t=3m50s) Nice move!

can I hidden the control-bar?

Decide on licensing

I settled on GPLv3 but some people say it's not compatible with ClojureScript's EPL. Needs further investigation.

Theme pull request

Hello asciinema-team,
I wanted to use my own theme in the asciinema player. I tested it and it seems really easy to import another .less file from the themes. Is there a possibility to bring a own theme to the official repository, or maybe even a possibility to easily create a custom theme without recompiling the less every time something changes (maybe a simple asciinema-theme.css which could be added)? If it's possible to contribute with a theme, I'd like to send a pull request of my finally published default terminal theme.
Thank you in advance, nice work, really like asciinema :)

& functions lead to other videos as intented

This is my video: https://asciinema.org/a/9vzt60y52krsjye6m9ol6w81t

add &theme=solarized-dark and you get to a different one:
https://asciinema.org/a/9vzt60y52krsjye6m9ol6w81t&theme=solarized-dark

Same as with &speed=2 as well, while ?t=25 work correctly

Chrome: Uncaught ReferenceError: asciinema is not defined

I tried the basic example with the current version and ran it in Firefox (49) as well as in Google Chrome (54.0.2840.90). While it worked in Firefox it did not in Chrome.

I got the error:

Uncaught ReferenceError: asciinema is not defined
    at HTMLElement.AsciinemaPlayerProto.createdCallback (file:///…/asciinema-player.js:83:5)
    at file:///…/asciinema-player.js:93:12
    at file:///…/asciinema-player.js:94:3

Where I used the following test.html:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="asciinema-player.css" />
</head>
<body>
  <asciinema-player src="tty-records/foo.rec"></asciinema-player>
  <script src="asciinema-player.js"></script>
</body>
</html>

Seek programatically

Currently the only way to control the player is via the user interface.

However, it's possible to play and pause programatically like so:

var click = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});
document.getElementsByClassName("playback-button")[0].dispatchEvent(click);

It's also possible to get the progress:

document.getElementsByClassName("gutter")[0].children[0].style.width

You can also detect whether it's playing with:

// Differentiates between a play and pause button. The play button has one triangle, while
// the pause button consists of two lines. Hence, when playing, the pause button is shown,
// and children.length is 2. 
document.getElementsByClassName("playback-button")[0].children[0].children.length == 2

However, I can't find a method to make the video seek. I know you can press 0 through 9 on the keyboard, but I'm looking for finer (and programmatic) control, so that I can implement my own controls and hide the current ones with display: none.

Is there any way to do this? I'd be happy to implement it myself, but I'm completely lost in Clojure. I honestly don't think it would be that hard to implement, since there is already a seek function; it just needs to be exposed to the API.

Any opinions about that? I saw a reference to the current version being a "rewrite." Was the former version written in JavaScript and stable enough that I could use it?

This is related to #12 is but not exactly the same.

EDIT: Just saw the wiki and it basically lists the methods I just listed, while mentioning that there was no formal API for this. Just hoping there's a workaround for seeking.

Convert script?

I found https://gist.github.com/sickill/504474702dd18c7dc0ec -- is this still needed? if so, would be nice to make a version that's easier to run (ideally something we can npm install and have work reproducibly. (the script calls for installing a bunch of libs for compiling libtsm).

not playing well with mkdocs themes

The mkdocs theme has a require.js which seems to get conky when this javascript from release is added.
https://github.com/mkdocs/mkdocs-bootstrap/
https://github.com/anantshri/mkdocs-reloaded/

I assume this javascript is a combination of multiple smaller script. Any chance we can get individual files and then i can try to debug the issue out.

Missing unicode characters in thumbnail

I've noticed that in preview thumbnails, certain unicode characters are either rendered as the "missing glyph", or not rendered at all.

This is a screenshot of this asciinema cast, with the characters rendered:

This is the preview thumbnail, with those same characters missing:

Character: ⯈

Name: BLACK MEDIUM RIGHT-POINTING TRIANGLE CENTRED

Hex: 0x2bc8

As mentioned before, I've also seen them rendered as the "missing block glyph". This is my profile page on mobile:

They seem to render fine for the previews found in my profile on the desktop.

Memory issue with autoplay + loop

Some of our users were reporting that our site was crashing in their Chrome browsers after some minutes on the homepage. I noticed memory consumption in that page went above 1GB before the tab crashed.

We found the cause to be the asciinema-player. It was configured with autoplay and loop options enabled. Disabling the loop option seems to be a workaround, but maybe you'll want to look for any memory leak issue in your code.

Chrome 48.0.2564.109 (64-bit)
OSX 10.11.3

Change speed of embeded script

Hello,

is it possible to change the speed of the player with the embeded version ?

I saw someone adding data-speed="2" but it does not work for me.

24-bit color support

It would be really excellent if asciinema understood the 24-bit color extension, which is supported by XTerm and a number of other terminal emulators like iTerm2.

The 24-bit color uses these extensions to the SGR command:

To set foreground: CSI 38 ; 2 ; ; ; m
To set background: CSI 48 ; 2 ; ; ; m

In the above, and are 8-bit values for red green and blue channels, printed e.g. via %d.
For example, here are corresponding Go strings for this, as I use them in Tcell - these are terminfo strings that can be displayed via tparam() using r, g, b values as the 3 parameters:

"\x1b[38;2;%p1%d;%p2%d;%p3%dm"
"\x1b[48;2;%p1%d;%p2%d;%p3%dm"

While terminfo doesn't have capabilities for this, I do have support for them in my tcell terminal handling package (see https://github.com/gdamore/tcell ), which allows users/programmers to get the actual intended colors instead of whatever theme overrides may be present. This is mostly useful for displaying images, or in terminal based games (see https://github.com/gdamore/proxima5 for what I am talking about.)

Player very slow, crashes on large, fast-output, multicolor terminal output

The Issue

When you try to view a recoding large, fast-output terminal session, for example, top | lolcat (top doesn't know that the output is not a terminal, and thus prints a bunch of updates really fast), the site starts to lag and sometimes become unresponsive.

Examples

• Piping top to lolcat https://asciinema.org/a/f55bkam3wekhqfte98j4heljy
• cating a bunch of sites through lolcat https://asciinema.org/a/1ct69s5n1rv7mct7ljbjiy6s0

System Info

• MacBook Air (4GB RAM, Core i5), Mid '16, OS X Sierra 10.11, Safari Version 10.0.1 (12602.2.14.0.7), Google Chrome 53.0.2785.89 (64-bit)

Write to GIF?

The standard functionality works beautifully for me...but once in awhile (such as embedding into Github-formatted pages), having a GIF version of the output would be really nice. How feasible would it be as a feature, given the innards of how the player currently works?

Server should return detailed error messages on failed upload

Attempting to upload a file with broken JSON returns a 400 error code:

{
  "version": 1,
  "width": 106,
  "height": 25,
  "duration": 117.074547,
  "command": "/bin/bash",
  "title": "PuPHPet Sample",
  "env": {
    "TERM": "xterm-256color",
    "SHELL": "/bin/bash"
  },
  "stdout": [
    [
      0,
      "\u001b[?1034h\r\r\n\u001b[1m\u001b[30m[\u001b[34m12:30 PM\u001b[30m]-[\u001b[32mjtreminio\u001b[33m@\u001b[32mmacbook\u001b[30m]-[\u001b[35m~/www/puphpet/temp/puphpet-archive\u001b[30m]\u001b[0;33m \u001b[00m\u001b(B\u001b[m\r\r\n\u001b(B\u001b[m$ "
    ],
    [
      2.5,
      ""
    ],
  ]
}

(Trailing comma error).

[09:56 AM]-[jtreminio@macbook]-[~/www/puphpet/temp]
$ asciinema upload asciinema.json
Error: HTTP status: 400 Bad Request

Would it be better to return a message saying "File contains broken JSON"?

The file was hand-edited to remove messages, which is where the error came from.

\e[2m not working properly

(Originally, mistakenly, posted on the asciinema.org repo.)

The dim/faint color attribute (\e[2m) doesn't show up properly in the web player.

Running this script:

#!/bin/bash

printf "\n"
printf "    _   __                           __   \e[2m______      _       __ \e[0m\n"
printf "   / | / /___  _________ ___  ____ _/ /  \e[2m/ ____/___ _(_)___  / /_\e[0m\n"
printf "  /  |/ / __ \/ ___/ __ ´__ \/ __ ´/ /  \e[2m/ /_  / __ ´/ / __ \/ __/\e[0m\n"
printf " / /|  / /_/ / /  / / / / / / /_/ / /  \e[2m/ __/ / /_/ / / / / / /_  \e[0m\n"
printf "/_/ |_/\____/_/  /_/ /_/ /_/\__,_/_/  \e[2m/_/    \__,_/_/_/ /_/\__/  \e[0m\n"
printf "\n"

Produces the expected output in a terminal:

But not in the player:

• black/white: https://asciinema.org/a/4dc8adqp6ydgz4rcph4zvuucb
• colored: https://asciinema.org/a/8muthjs1m0bcbo6f1c4tp8kt1

Breaks possibly when using `\r`

Here is the problem screncast: https://asciinema.org/a/46220mbeu2302v0lihzu0xa2z

Here is an example that works using an alternative program, just for reference and to understand the output that I was expecting: http://showterm.io/ddd89744639247bc98daf

Thanks and Happy New Year!

How to unload or reload existing player? Deleting from DOM and re-adding causes playback errors.

I can't find any official way to change the file name after the player is initialized by JavaScript. How should I un/re-load the player in the browser?

Use case: I'm making a projector page that lists the available asciicast files on the server and tries to re-initialize the player when the user clicks one of the file names. I'm using jQuery to create the player with a default recording when the page loads. I'm also using jQuery to bind click events to the files in the list, which removes the existing player from the DOM and calls the CreatePlayer function with the new file name.

The problem: only the first recording plays. Any players subsequently created always fail during playback—even if it's the only player on the page.

Work around: reload the whole page every time the file name property needs to be altered programmatically.

I assume some variables or properties are left in the window scope when the player node is removed from the DOM, but I don't know how to work around the issue other than to force a full page reload every time. Any advice would be appreciated.