Support asciicast files as new markup (#22448)

Support [asciicast
files](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v2.md)
as a new markup via
[asciinema-player](https://github.com/asciinema/asciinema-player). For
more on asciinema, see the [introduction](https://asciinema.org/).

So users can use asciinema recorder to generate an asciicast file (or
you can download a sample file from
https://asciinema.org/a/335480.cast?dl=1), then upload it to Gitea and
play it on Gitea.

Snapshots:
<details>

## Upload asciicast files

<img width="1134" alt="image"
src="https://user-images.githubusercontent.com/9418365/212461061-cc2c7181-0e14-4534-af55-1ec60a639fd1.png">

## Open an asciicast file

<img width="1137" alt="image"
src="https://user-images.githubusercontent.com/9418365/212461090-a3b5141f-4894-430d-a2b4-ea257801a0ed.png">

## Play it

<img width="1144" alt="image"
src="https://user-images.githubusercontent.com/9418365/212461157-4e82db69-0e41-471d-928f-ac1fe0737105.png">

## Copy contents from the "video"

<img width="1145" alt="image"
src="https://user-images.githubusercontent.com/9418365/212461286-211612bc-15d6-427a-89a9-6abff5c6a0a5.png">


## View the source

<img width="1140" alt="image"
src="https://user-images.githubusercontent.com/9418365/212461187-05473b2d-ba3d-4072-84a6-4aa1e7d82182.png">


</details>

Known issue:

Don't support the [v1 version asciicast
files](https://github.com/asciinema/asciinema/blob/develop/doc/asciicast-v1.md),
it's a poorly designed version, it does not specify the file extension
and uses `*.json` usually, so it's impossible to recognize the files.

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

2 files changed, 16 insertions, 0 deletions

diff --git a/web_src/js/markup/asciicast.js b/web_src/js/markup/asciicast.js
new file mode 100644
index 0000000000..d77c05b7aa
--- /dev/null
+++ b/web_src/js/markup/asciicast.js
@@ -0,0 +1,14 @@
+export async function renderAsciinemaPlayer() {
+  const els = document.querySelectorAll('.asciinema-player-container');
+  if (!els.length) return;
+
+  const player = await import(/* webpackChunkName: "asciinema-player" */'asciinema-player');
+
+  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',
+    });
+  }
+}
diff --git a/web_src/js/markup/content.js b/web_src/js/markup/content.js
index 319c229385..e4ec3d0b4b 100644
--- a/web_src/js/markup/content.js
+++ b/web_src/js/markup/content.js
@@ -1,6 +1,7 @@
 import {renderMermaid} from './mermaid.js';
 import {renderMath} from './math.js';
 import {renderCodeCopy} from './codecopy.js';
+import {renderAsciinemaPlayer} from './asciicast.js';
 import {initMarkupTasklist} from './tasklist.js';
 
 // code that runs for all markup content
@@ -8,6 +9,7 @@ export function initMarkupContent() {
   renderMermaid();
   renderMath();
   renderCodeCopy();
+  renderAsciinemaPlayer();
 }
 
 // code that only runs for comments