1 files changed, 17 insertions, 0 deletions
diff --git a/web_src/js/markup/asciicast.ts b/web_src/js/markup/asciicast.ts
new file mode 100644
index 0000000000..97b18743a1
--- /dev/null
+++ b/web_src/js/markup/asciicast.ts
@@ -0,0 +1,17 @@
+export async function renderAsciicast() {
+  const els = document.querySelectorAll('.asciinema-player-container');
+  if (!els.length) return;
+
+  const [player] = await Promise.all([
+    import(/* webpackChunkName: "asciinema-player" */'asciinema-player'),
+    import(/* webpackChunkName: "asciinema-player" */'asciinema-player/dist/bundle/asciinema-player.css'),
+  ]);
+
+  for (const el of els) {
+    player.create(el.getAttribute('data-asciinema-player-src'), el, {
+      // poster (a preview frame) to display until the playback is started.
+      // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
+      poster: 'npt:1:0:0',
+    });
+  }
+}