From dfeed305e177e1c780c8ff79735e7ce9483565ca Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Thu, 2 Oct 2025 11:14:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=B0=8D=E8=A9=B1?=
 =?UTF-8?q?=E8=A6=96=E9=A0=BB,=20wip:=20=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/ui/chat/ChatFragment.tsx         |  3 ++-
 client/ui/custom-elements/chat-video.ts | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 client/ui/custom-elements/chat-video.ts

diff --git a/client/ui/chat/ChatFragment.tsx b/client/ui/chat/ChatFragment.tsx
index 52d2b55..67f8b5a 100644
--- a/client/ui/chat/ChatFragment.tsx
+++ b/client/ui/chat/ChatFragment.tsx
@@ -33,7 +33,6 @@ const markedInstance = new marked.Marked({
         },
         image({ text, href }) {
             const type = /^(Video|File)=.*/.exec(text)?.[1] || 'Image'
-
             if (/uploaded_files\/[A-Za-z0-9]+$/.test(href)) {
                 return ({
                     Image: `<chat-image src="${href}" alt="${text}"></chat-image>`,
@@ -272,6 +271,8 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                     const rendeText = DOMPurify.sanitize(markedInstance.parse(msg.text) as string, {
                                         ALLOWED_TAGS: [
                                             "chat-image",
+                                            "chat-video",
+                                            "chat-file",
                                             "span",
                                             "chat-link",
                                         ],
diff --git a/client/ui/custom-elements/chat-video.ts b/client/ui/custom-elements/chat-video.ts
new file mode 100644
index 0000000..073c18d
--- /dev/null
+++ b/client/ui/custom-elements/chat-video.ts
@@ -0,0 +1,17 @@
+import { $ } from 'mdui/jq'
+
+customElements.define('chat-video', class extends HTMLElement {
+    constructor() {
+        super()
+    }
+    connectedCallback() {
+        this.style.display = 'block'
+        const e = new DOMParser().parseFromString(`<video controls>視頻無法播放</video>`, 'text/html').body.firstChild as Node
+        e.style.width = "100%"
+        e.style.height = "100%"
+        e.style.borderRadius = "var(--mdui-shape-corner-medium)"
+        e.alt = $(this).attr('alt') || ""
+        e.src = $(this).attr('src') as string
+        this.appendChild(e)
+    }
+})