charmbracelet / vhs

Your CLI home video recorder 📼
MIT License
15.04k stars 251 forks source link

lipgloss padding is rendered incorrectly #282

Closed StarpTech closed 1 year ago

StarpTech commented 1 year ago

See "SUCCESS" label works absolutely fine in terminals.

PassStyle = lipgloss.NewStyle().Bold(true).Foreground(lipgloss.Color("#ffffff")).Background(lipgloss.Color("#5AD900")).Padding(0, 1)
doc.WriteString(fmt.Sprintf("%s %s\n", PassStyle.Render("SUCCESS"), m.internalTask.Name))

demo

maaslalani commented 1 year ago

Hey @StarpTech. Thanks for opening up this issue. It's related to: https://github.com/charmbracelet/vhs/issues/249. It will be fixed once xterm.js 5.2.0 is released.

maaslalani commented 1 year ago

Hey there, this should be fixed now if you use vhs@main:

go install github.com/charmbracelet/vhs@main

and ttyd@main:

brew install ttyd --HEAD

Feel free to reopen this issue if it's not solved for you after updating both dependencies ^

rbergmanaf commented 1 year ago

We are using vhs in Docker and are seeing this issue with ttyd 1.7.3. When we use the ttyd:alpine image (which features the xtermjs update on ttyd main), none of the keyboard input from our tape files ends up making it into the rendered gif/mp4/txt/etc -- the output just features a prompt and blinking cursor.

I can seek more information if needed, but that's all I have at the moment. Very much looking forward to the fix described in xtermjs 5.2.0, but for now we had to revert our Dockerfile to pull from the ttyd 1.7.3 release to keep vhs working.

maaslalani commented 1 year ago

@rbergmanaf Are you using the latest commit in VHS, ttyd 1.7.3 recently changed the terminal to be read only by default which is fixed in a recent commit in VHS: https://github.com/charmbracelet/vhs/commit/22854acdf14babbbc44e0012b09c48f5869a5b15

rbergmanaf commented 1 year ago

Oh my, that was the problem! Sorry I missed that. Thanks for the great tool!