From 516d2d67eb2c8a791b78dea1d22a2f13b3af4563 Mon Sep 17 00:00:00 2001
From: Myriad-Dreamin <camiyoru@gmail.com>
Date: Tue, 3 Oct 2023 17:55:47 +0800
Subject: [PATCH] dev: update example

---
 fuzzers/corpora/visualize/video_00.typ | 80 +++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 15 deletions(-)

diff --git a/fuzzers/corpora/visualize/video_00.typ b/fuzzers/corpora/visualize/video_00.typ
index 9325d6a7..5df0aa1c 100644
--- a/fuzzers/corpora/visualize/video_00.typ
+++ b/fuzzers/corpora/visualize/video_00.typ
@@ -1,16 +1,66 @@
 
-#image.decode(```
-<svg viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg">
-  <foreignObject width="641px" height="361px">
-    <iframe
-      src="https://player.bilibili.com/player.html?aid=80433022&amp;bvid=BV1GJ411x7h7&amp;cid=137649199&amp;page=1&amp;danmaku=0"
-      scrolling="no"
-      border="0"
-      width="640px"
-      height="360px"
-      frameborder="no"
-      framespacing="0"
-      allowfullscreen="true"
-    ></iframe
-  ></foreignObject>
-</svg>```.text, alt: "!typst-inlined-svg")
+/// HTML extension
+#let xhtml(outer-width: 1024pt, outer-height: 768pt, inner-width: none, inner-height: none, content) = {
+  let t = content.func()
+  let content = if content.func() == raw {
+    content.text
+  } else {
+    content
+  }
+
+  let inner-width = if inner-width == none {
+    outer-width
+  } else {
+    inner-width
+  }
+
+    let inner-height = if inner-height == none {
+        outer-height
+    } else {
+        inner-height
+    }
+
+  let html-embed = {
+    "<svg viewBox=\"0 0 "
+    str(inner-width.pt())
+    " "
+    str(inner-height.pt())
+    "\""
+    " width=\""
+    str(outer-width.pt())
+    "\" height=\""
+    str(outer-height.pt())
+    "\" xmlns=\"http://www.w3.org/2000/svg\">"
+    "<foreignObject width=\""
+    str(inner-width.pt())
+    "\" height=\""
+    str(inner-height.pt())
+    "\">"
+    content
+    "</foreignObject>"
+    "</svg>"
+  }
+
+  image.decode(html-embed, alt: "!typst-inlined-svg")
+}
+
+#set page(height: auto, width: auto)
+
+= Multi-media in Typst
+
+This is a embed video.
+
+#box(xhtml(outer-width: 640pt, outer-height: 360pt, ```html
+<iframe
+  src="https://player.bilibili.com/player.html?aid=80433022&amp;bvid=BV1GJ411x7h7&amp;cid=137649199&amp;page=1&amp;danmaku=0&amp;autoplay=0"
+  scrolling="no"
+  border="0"
+  width="100%"
+  height="100%"
+  frameborder="no"
+  framespacing="0"
+  allowfullscreen="true"
+></iframe>
+```), width: auto, height: auto)
+
+That is a embed video.