Asciinema Player Controls

Command line applications are more ubiquitous than ever. You can’t develop a website without running npm anymore, and even installing some Mac apps are easier with brew cask.

While violating Rule #6 (Recognition rather than Recall) of Nielsen’s Heuristics, they are also a perfect example for Rule #7 (Flexibility and efficiency of use). Despite an apparent and steep learning curve, command line apps can be more flexible than many GUI-based apps.

Asciinema is an awesome little site—YouTube for command-line apps, if you will. It allows for command-line workflows to be recorded, and playbacks to be shared through a web player. Perfect for tutorials or showcasing smaller apps.

The player has a superpower too: Anything inside it can be copied and pasted. That’s why it’s an amazing tool to follow command-line–only flows—it allows the user to follow alongide with minimal errors.

The problem: Player controls over recordings

The control bar, then, becomes the villain in this story. Sure, it behaves like any other control bar in a media player: it hides when not in focus. But when in focus, it prevents code from being selected. Especially in apps like vim, that takes commands in a line at the bottom of the window, it becomes impossible to select text, and very hard to scrub back and forth to see commands.

See the problem in motion on a desktop browser:

restic is a command-line backup tool that shows its demo through an asciicast. However, a command in the demo becomes very hard to copy once the screen fills up and the prompt becomes the last line of the scren.

It’s worse on a mobile browser:

If you tap on the asciicast, you lose multiple moments of action that fall on those last lines, and rewinding back is no use because it will simply play through it still obscured by the player controls.

The solution: Listen to your users.

It’s not like this is an unknown situation. It’s been discussed on Github, but is not resolved.

Reasons given for not having an always-visible control bar that extends the player a bit also don’t make sense. This is not some immersive experience that would be interrupted by visible external controls. It’s the opposite—it is an interactive tool that should show constant feedback and easy to reach controls.

Don’t copy others. Know your context.