Control bar obscures last line

[devkev]

In a command-line terminal recording (very common for asciinema), the most interesting line is frequently the bottom line (since that's where the user is typing the next command, etc). However, this is exactly the region of the terminal that gets obscured by the control bar when it pops up (eg. if the mouse is moved slightly). The user must then wait a few seconds before the bottom line becomes visible again, which can cause them to miss stuff (and then have to mess around rewinding - and remembering to rewind a little extra, to account for the control bar disappear delay). This is very annoying and a poor UX.

My preferred solution is to simply have the control bar always visible underneath the terminal. I have hacked this solution at https://userstyles.org/styles/159240/asciinema-control-bar-below-terminal, which just sets position: static on the control-bar element. But it would be great to fix this properly directly in the player (ie. also get rid of all the other positioning CSS), and make it the default for everyone (instead of needing an external CSS hack). It might be useful to have an option, so that people who prefer the current behaviour can opt-in to it. There's also the issue that adding an option to the html element would probably be fairly easy, but then the preference is controlled by the site author, whereas it's more of an end-user/viewer preference.

[akira-kurogane]

Ah, I see. I didn't recall it being like this before, but I confirm looking at one of my old asciicasts that it's obscuring about 1.5 lines of terminal.

The auto-hide isn't working so well. The lose-focus event is not being triggered when the mouse leaves maybe? If I switch tabs and come back it will aut0-hide. Browser is Chrome 55.0 on Linux.

[ku1ik]

Thanks for bringing this up. I was working on improvements to auto-hiding the other day, and I was sure I fixed this auto-hiding problem, but now I see it's only on my local branch. I'll clean it up and release soon. The fix immediately hides control-bar after moving the mouse out of terminal window.

Then, on the CSS front, having control bar always displayed outside of terminal (below it specifically)... it worked exactly like that in the past, and it was changed to the current behavior some time last year 🙃

What you suggest (prev behavior) does solve the problem of hiding content, but it always requires extra verical space. Also, the animated progress bar and ever changing current time (mm:ss) is a little bit of distraction IMO. But I may be wrong, maybe the previous behavior was better.

[moritzdietz]

Now that 0f95456 is commited this problem seems to be mitigated. There is no additional space between the player control bar and the line where the prompt is at the bottom of the recording but at least now the control bar vanishes instantly.

[ku1ik]

I'm on the fence here, not really sure which way is better, but I'm open for bringing the previous look+behaviour back (keep control bar below terminal at all times).

[moritzdietz]

I compiled from master last night and I must say that without a doubt the current behavior, having the control bar hides immediately, is so nice. My problem with the control bar was that it would not hide, as I know it from YouTube or other video players in a web browser. This would hinder me seeing the prompt and what I am typing there - for example when I type something and then erase the text; no way of knowing what I typed there once the control bar was visible. To me know the UX of it is consistent with what we all see on the web as of today - the control bar hides. Just thought to give some feedback on it.

[MCMaurer]

Hey there- I know it's been a while since this issue was last discussed, but I had a question about implementing the hack that @devkev mentioned. I'm using a GitHub pages website, using posts written in Markdown with Asciinema players embedded. Where would I put the small bit of CSS to force the control bar to stay below the player? I tried putting it in the GH page theme's page.scss file, but that didn't seem to work. I also tried putting it between the <script> tags of the player in the Markdown file itself, but this also didn't seem to work.

The other thing I've tried is forcing iTerm2 to put a newline at the bottom of the window, which would fix the issue nicely, leaving room for the control bar to appear without obscuring the last actual line, but I can't quite figure out how to get this to work.

Thanks!

[MCMaurer]

Just when I thought all hope was lost, I figured out the second workaround! I modified the PS1 prompt, which I'd tried before, but I was able to add a number of index and reverse index characters to get there, as described here: https://superuser.com/questions/1106674/how-to-add-blank-lines-above-the-bottom-in-terminal

This gives enough blank lines that the line of interest in a recording always stays above the control bar.

[cmprmsd]

I'd appreciate if there was an option like hud: always in the player so you could enable it permanently.

[ku1ik]

I have potential solution ready in #215. Need to do some cross-browser testing before I merge but it looks promising.

[ku1ik]

#215 has been merged and released in v3.2.0.