player: key-press overlay

[ku1ik]

New asciicast v2 format has a place for keypresses (https://github.com/asciinema/asciinema/blob/fb1e25d933851743f4aed744279ab5361af9ad4b/doc/asciicast-v2.md#i---data-read-from-stdin) and asciinema 2.0 allows recording stdin (https://github.com/asciinema/asciinema/tree/fb1e25d933851743f4aed744279ab5361af9ad4b#rec-filename).

The web player could now use recorded stdin events to display these keystrokes in an overlay.

[shibumi]

any update on this?

[ruslanosipov]

+1

[sametcodes]

+1

[daonb]

I need this to record sessions where I use both zsh & vim so I want the keys to be displayed only when in vim. I guess I'll have to code it myself, but before I do, I want to make sure I got the design right:

IMHO, there are three components we need:

1. Add support for the <track> sub element to display key presses, captions, etc.
2. A new utility to convert a recording's stdin to the WebVTT format supported by <track>.
3. in asciinema.org, add the option to upload a WebVTT file when editing a recording

At first we'll support just a single text track, in the future we can support multiples track without changing the interface.

[daonb]

I've started working with creating the subtitle file and it doesn't look good. Grouping keys together results in captions like "Ihello" (vim). Problem is this caption will be displayed the second I type I and it's too confusing. The keys should be displayed as I type them and that's why I 👎 my idea above.

[rlanore]

Any update on this ?

[bonnefoi]

Any update on this ?

[Kreijstal]

Any update on this?

[RGD2]

I'm very interested in any updates on this.

I think this needs higher priority.

How else to show new users pro tricks like typing SHIFT+(!,$), CTRL+([,E) to insert the last argument from the previous line using readline? Or the way to use proper tab completion?

Ideally, it should be possible in the player to 'step' through each keypress one by one when playing, with only short segments of animation when terminal state changes between keypresses.

This would make it far more useful for what I'd consider asciicinema's 'killer app': Documentation that can show people exactly how to do things, as if they're watching over your shoulder and can see every keypress.

Being able to step the replay means they can watch and possibly follow along the sequence at their own pace, which would make it far less confusing / intimidating.

But they can also watch it at 'full speed', which demonstrates how much time is saved by 'doing it right'.

Else asciicinema replays are more just showing off, and learners will just think 'wow that looks hard, I'll never be able to learn that'.
Wheras what you want them to come away with is 'wow, that's so fast and easy, how come no-one ever showed me this before?'.

[district10]

Subscribed for years...Modifier keys may can not captured under command line. Maybe subtitles or https://en.wikipedia.org/wiki/Danmu ?

[nobodyinperson]

In the meantime, I made this: https://pypi.org/project/termkeymonitor/

Run in a tmux pane, the pressed keys can be displayed in an asciinema cast.

[qaqland]

Any update on this?

Showing keyboard inputs on website asciinema-player is very helpful!

[ivan-developer-01]

Still no updates.

[ku1ik]

I agree this would be a valuable addition, and it's something I still plan to implement when I find time. I'd love to spend more time on this project, so please consider becoming a sponsor to make work on asciinema more sustainable - https://github.com/sponsors/ku1ik/. Thanks!

[mosaleh-dev]

I am willing to put the time to implement this if provided with guidance

[ikks]

Take a look at this PR asciinema/asciinema-player#269
Screencast from 2024-10-09 20-14-40.webm