asciinema / asciinema-player Goto Github PK
View Code? Open in Web Editor NEWWeb player for terminal session recordings
License: Apache License 2.0
Web player for terminal session recordings
License: Apache License 2.0
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!
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 :)
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
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.
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
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
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
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?
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 :-)
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?
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
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
Hello,
this video was playing properly for months:
Now, starting from 12 second, artifacts are there on screen.
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!
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.
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.
i think this needs grunt-cli? else node_modules/.bin/grunt
is not there.
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.
I settled on GPLv3 but some people say it's not compatible with ClojureScript's EPL. Needs further investigation.
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.
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!
An option to repeat the playback would be nice, especially for use with autostart.
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
https://asciinema.org/a/104790?speed=0.5
(possibly related to cursor blinking)
A JavaScript API for communicating with the player allowing the page embedding the player to:
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).
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?
{: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"}
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.
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.
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.
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.)
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>
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?
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
}
asciinema does not work at all in Firefox if autoplay is disabled (media.autoplay.enabled)
(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:
Hi all,
Does anyone know how to embed asciinema-player into a react component? Currently I cannot set src path correctly.
Thanks in advance.
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.
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.
cat
ing a bunch of sites through lolcat https://asciinema.org/a/1ct69s5n1rv7mct7ljbjiy6s0Asciicinema 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
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
).
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.
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!)
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
<!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>
We should check if no modifier key is held in key-press->message
(
See #18.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.