fix(deps): update dependency asciinema-player to v3.12.1

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
asciinema-player	3.0.0-rc.1 -> 3.12.1

---

Release Notes

asciinema/asciinema-player (asciinema-player)

v3.12.1: 3.12.1

Compare Source

This version includes additional fix for seeking past the end of recording and restarting the playback.

v3.12.0: 3.12.0

Compare Source

Notable changes:

• Live audio stream support for WebSocket sources (see below)
• Improved adaptive buffer algorithm for WebSocket sources (see below)
• Fixed keyboard shortcuts issue (stopped working) caused by the new mute/unmute icon
• Fixed seeking after playback ended (#​282)

Live audio playback

The audioUrl option, introduced in v3.11, can now also be used with live (WebSocket) sources:

AsciinemaPlayer.create("ws://example.com/ws/stream", document.getElementById("demo"), {
  audioUrl: "http://example.com/icecast/stream.ogg"
});

The URL should be a live audio source - either a direct HTTP audio stream (.mp3, .aac, .ogg, etc) such as Icecast/Shoutcast endpoint, or HLS playlist (.m3u8).

Note that it's not recommended to use autoplay: true option together with audioUrl - browsers often require explicit user activity (click, tap) to enable sound, which in the player's case would be starting the playback by clicking on the play button. Without user click the autoplay will start the playback but the sound likely won't be there.

Also, for the audio playback to work a server that handles the audio URL (e.g. Icecast) must be configured to allow CORS requests from the page (URL) that hosts the player.

New adaptive buffering

The WebSocket driver uses adaptive buffer (expressed in time) to ensure smooth, stutter free playback of live sessions with minimal latency.

The previous algorithm used a moving average over a sliding window of N recent latencies. It did ok-ish job, but given the sparse nature of the event stream (no constant rate) it turned out to be not ideal. Here's how it performed. Red dots are measured latencies, green line is effective buffer time:

The new algorithm uses time based EMA (exponential moving average), which is much more relevant for sparse events, resulting in more stable and overall lower buffer size when applied to a wide spectrum of terminal activities (here applied to the same input latencies as the one above):

v3.11.1: 3.11.1

Compare Source

This release brings additional fixes for audio loading in Safari.

v3.11.0: 3.11.0

Compare Source

Notable changes:

• Synced audio playback (see below)
• JS bundle size reduced by 43 KB (202 KB -> 159 KB) - it's now 78% of the previous release (v3.10) size
• WebSocket driver now uses jitter for exponential backoff calculation when reconnecting
• WebSocket driver can play live sessions encoded in asciicast v3 compatible format
• When loading of a recording takes 3s a loading animation is now shown - this may typically occur during initial buffering of the audio
• Fixed time position update when stepping through a recording with , and . keys

The main new thing in this version is the synced audio playback.

When audioUrl is passed as an option when mounting the player on the page, the player automatically creates hidden audio element, ensures the audio file is ready for playback, and syncs audio playback position with the terminal recording playback (pause, resume, seek just work).

AsciinemaPlayer.create("/demo.cast", document.getElementById("demo"), {
  audioUrl: "https://example.com/voiceover.mp3"
});

There's also a new button (icon) and keyboard shortcut (m key) for muting/unmuting.

Note that for the audio playback to work:

• a server that handles the audio URL must be configured to allow CORS requests from the page (URL) that hosts the player
• that server must support HTTP range requests
• you must not use autoplay: true option - browsers often require explicit user activity (click, tap) to enable sound

Check out this demo:

v3.10.0: 3.10.0

Compare Source

Notable changes:

• vastly improved wide character (CJK/emoji) support (this solves long standing set of issues: #​270, #​266, #​199, #​185)
• added preliminary support for the new asciicast v3 recording format
• added gruvbox-dark theme (thanks @​hupfdule)
• increased cursor blink interval from 500ms to 600ms
• improved screen reader support (thanks @​DataTriny)
• fixed terminal resizing during seek and step actions (thanks @​gustavosbarreto)
• fixed crash when starting the playback while the player is still initializing
• fixed live stream handling when producer reconnects to the server
• various UI tweaks

https://www.npmjs.com/package/asciinema-player/v/3.10.0

v3.9.0: 3.9.0

Compare Source

Notable changes:

• keyboard shortcuts are now easily discoverable via help popup triggered with ? key or the keyboard icon in the control bar
• added "step back", triggered with , (comma) key, a complementary feature for existing "step forward" (. key)
• refactored websocket driver, and upgraded it for recent changes in ALiS protocol (uses WS subprotocol negotiation, supports both 8 and 16 color palettes, partially supports input and marker events, and more)
• player's core can now be run in a split mode, which greatly improves UI responsiveness in certain cases (see below)

https://www.npmjs.com/package/asciinema-player/v/3.9.0

---

The split mode, runs player's UI and player's core (parsing, terminal emulation) in separate OS threads, which improves UI's responsiveness during playback. In this setup the UI code runs in the window context, while the processing code runs in a WebWorker. The benefit of this configuration is typically observed only for high frame-rate / high bandwidth recordings. The player hosted on asciinema.org runs in the split mode. For typical demos/sessions it's not worth the setup hassle. This is advanced setup and in 99% of the cases you don't need it.

v3.8.2: 3.8.2

Compare Source

Notable changes:

• fixed blinking of ascii drawing chars (#​273)
• background color is no longer brightened (value + 8) when blink attribute is set - this caused ugly rendering in some scenarios, and no terminals I tested do this either

v3.8.1: 3.8.1

Compare Source

Notable changes:

• upgraded avt to the latest version
• added dist/bundle/asciinema-player.min.js to package exports to allow pre-3.8.0 usage (#​263)

v3.8.0: 3.8.0

Compare Source

Notable changes:

• added support for colons in SGR color sequences - fixes (asciinema/avt#9, #​154, #​231)
• added support for auto/<theme-name> specification for theme option (see below)
• added help overlay, triggered by "?" key
• improved adaptive buffering algorithm in the websocket driver
• improved rendering of block drawing characters
• made text of the time display and marker tooltips bigger
• made the control bar and markers use terminal theme's foreground and background colors
• added tooltip for the fullscreen button
• added "type": "module" to package.json to fix import error with some bundlers (thanks @​MaddyGuthridge)
• fixed player element focus behavior when clicking on a marker dot or the playback toggle button

https://www.npmjs.com/package/asciinema-player/v/3.8.0

---

Recordings made with asciinema CLI 3.0 or later may embed original terminal theme, which is used by the player when available.

Before this release the only way to let the player use the embedded theme automatically was not specifying the theme option when initializing the player. When the theme option was not used, the player favored the embedded theme, falling back to asciinema theme. There was no way to specify "use the original theme when available, fall back to monokai".

This release adds the ability to specify the above wish as { theme: "auto/monokai" }. You can use any built-in theme, e.g. { theme: "auto/dracula" }, and the player will use Dracula theme if the original theme was not captured at the time of recording.

To always use a specific theme regardless of the presence of the original theme in a recording file, use { theme: "<theme-name>" }, e.g. { theme: "dracula" }.

Default value of the theme option (when one not specified) is now auto/asciinema.

v3.7.1: 3.7.1

Compare Source

Notable changes:

• greatly improved rendering (position, alignment, accuracy) of ascii drawing, block elements, braille patterns and Powerline triangle symbols
• fixed alignment of double-width chars (such as CJK, emoji)
• new adaptive algorithm for buffering in live (websocket) driver, ensuring smooth playback on high-latency or high-jitter network connections
• minor rendering performance improvement via UI updates batching
• improved visibility of play button's drop shadow for themes with light background
• code refactorings and cleanup

https://www.npmjs.com/package/asciinema-player/v/3.7.1

Demo showing the improved rendering in general:

Screenshots showing the fixes to the character alignment and positioning:

v3.7.0: 3.7.0

Compare Source

Notable changes:

• Easier and more future proof custom theme definitions via CSS custom properties - see Custom themes documentation
• Original recording theme is now used when available (for recordings created with asciinema CLI 3.0 or later), unless theme option is explicitly provided
• Workaround for recordings with invalid terminal size (e.g. 0 width) to prevent player crash

https://www.npmjs.com/package/asciinema-player/v/3.7.0

v3.6.4: 3.6.4

Compare Source

This is a minor release, which improves keyboard shortcut handling.

v3.6.3: 3.6.3

Compare Source

This is a minor release that features a major performance bump for the embedded terminal emulator—up to 70% faster emulation in sequence parsing and virtual buffer manipulation. This leaves more CPU cycles available for smoother rendering ✨

v3.6.2: 3.6.2

Compare Source

• terminal emulation improvements (RI, VPR)
• better text reflow upon terminal resize
• fixed big play button centering
• removed redundant CSS styles

v3.6.1: 3.6.1

Compare Source

• implemented terminal resizing via resize events in asciicast file and SIGWINCH entries in typescript files
• added rudimentary screen-reader support (thanks @​bmmcginty!)
• added Dracula theme
• changed handling of user-specified markers - they're not subject to idle time limiter anymore
• upgraded asciinema virtual terminal to latest version

The work on resize feature has been sponsored by ITLook. Thanks @​boris-42 !

v3.6.0

Compare Source

v3.5.0: 3.5.0

Compare Source

• added experimental websocket-based live streaming protocol (ALiS)
• more efficient parsing of typescript and ttyrec recordings
• improved logging
• fixed buffering in websocket driver
• added term size detection in raw handler of websocket driver

https://www.npmjs.com/package/asciinema-player/v/3.5.0

v3.4.0: 3.4.0

Compare Source

• introduced new parsers for typescript and ttyrec formats
• added markers
• added controls option for controling visibility of control bar
• added scrubbing support to the progress bar, allowing for navigattion through the timeline of a recording. Thanks to @​blake-mealey for this contribution #​166!
• added offline state for live drivers
• fixed idleTimeLimit option behaviour with input ("i") events
• fixed time display when pre-buffering in live drivers
• added ability for configuring live drivers' minFrameTime
• right mouse button clicks on scrubber are now ignored
• prefixed most CSS classes to minimize clashes with host page CSS
• other CSS improvements like removing legacy prefixes, etc
• refactorings to driver initialization and poster rendering

v3.3.0: 3.3.0

Compare Source

• improved initialization with regards to obtaining font metrics (helps when embedding in Reveal.js slides)
• exposed input recorded with asciinema rec --stdin via input events
• added inputOffset source option to shift fired input events in time
• fixed player.play() to not act like toggle
• disabled font ligatures
• added minFrameTime source option to change FPS cap (default: 1/60s)
• smoother playback without jitter for websocket and eventsource drivers thanks to (now) default buffer of 100ms
• improved handling of current time for live drivers
• changed loading indicator to more familiar, good looking one
• refactored player core with regards to states player can be in

---

Example use of new input event:

const player = AsciinemaPlayer.create('/demo.cast', document.getElementById('demo'));

player.addEventListener('input', { data } => {
  console.log('input!', JSON.stringify(data));
})

inputOffset source option can be used to shift fired input events in time, e.g. when you need them to fire earlier due to audio samples taking extra time to be emitted:

const player = AsciinemaPlayer.create({
  url: '/demo.cast',
  inputOffset: -0.25
}, document.getElementById('demo'));

player.addEventListener('input', { data } => {
  // this is fired 250 ms earlier than it would be without `inputOffset`
  playSound(data);
})

v3.2.0: 3.2.0

Compare Source

• moved control bar below last terminal line
• added frame stepping with dot key (when paused)
• added ability to implement custom format parser with { url: "...", parser: parserFn } source - doc
• disabled logging by default, can be enabled with { logger: console } option - doc
• upgraded VT module to latest version
• further improvements to Websocket and EventSource (SSE) drivers
• code refactoring, bundler related upgrades

v3.1.2: 3.1.2

Compare Source

• fixed error thrown by ResizeObserver when resizing browser window
• improvements to Websocket and EventSource (SSE) drivers (these are not yet officially supported, will document them in README once they're ready for prime time)

v3.1.1: 3.1.1

Compare Source

• upgraded VT module to latest version
• improved buffer implementation for live sources (websocket, SSE)

v3.1.0: 3.1.0

Compare Source

• added support for faint graphic rendition
• added Nord color theme
• implemented ansi.sys variant of DECSC/DECRC control sequences: CSI s and CSI u
• fixed charset switching (shift out/in control sequence behaviour)
• fixed upper line clearing when scrolling down within scroll region
• improved soft reset (DECSTR control sequence) - charset states (G0, G1, GL) are now reset as well

v3.0.1: 3.0.1

Compare Source

v3.0.0: 3.0.0

Compare Source

Brand new player rewritten from scratch. Smaller, faster, better.

Upgrading from v2 to v3

v2.x used, now deprecated, document.registerElement(...) API for registering
<asciinema-player> custom HTML element. This way of initializing the player
has been removed in v3.x, replaced with standard JavaScript API.

Instead of this v2 code:

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
  ...
</head>
<body>
  ...
  <asciinema-player src="/demo.cast" speed="2" loop></asciinema-player>
  ...
  <script src="/asciinema-player.js"></script>
</body>
</html>

Use this v3 code:

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
  ...
</head>
<body>
  ...
  <div id="demo"></div>
  ...
  <script src="/asciinema-player.min.js"></script>
  <script>
    AsciinemaPlayer.create('/demo.cast', document.getElementById('demo'), {
      speed: 2,
      loop: true
    });
  </script>
</body>
</html>

There's also asciinema-player npm package, which can be
used instead of the standalone bundle. Check the quick start guide for details.

src attribute becomes the first argument to AsciinemaPlayer.create(). The
second argument specifies the container element to mount the player under. All
other option attributes are now passed in options objects as the third argument.

The following table shows how 2.x attributes map to new 3.x options:

2.x attribute	3.x option	example	notes
cols	cols	{ cols: 80 }
rows	rows	{ rows: 24 }
autoplay	autoPlay	{ autoPlay: true }
preload	preload	{ preload: true }
loop	loop	{ loop: true } or { loop: 3 }
start-at	startAt	{ startAt: 33 }
speed	speed	{ speed: 2 }
idle-time-limit	idleTimeLimit	{ idleTimeLimit: 2 }
poster	poster	{ poster: "npt:2:34" }
font-size	terminalFontSize	{ terminalFontSize: "20px", fit: false }	requires fit: false
theme	theme	{ theme: "dracula" }
title	-	-	removed
author	-	-	removed
author-url	-	-	removed
author-img-url	-	-	removed

v3.0.0-rc.4: 3.0.0-rc.4

Compare Source

v3.0.0-rc.3: 3.0.0-rc.3

Compare Source

v3.0.0-rc.2: 3.0.0-rc.2

Compare Source

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 7:46pm

[reconbot]

breaks all the styles