feat: 聊天視頻 (初始化)

client/index.html

@@ -23,7 +23,6 @@
         <span slot="headline">错误</span>
         <span slot="description" id="ErrorDialog_Message"></span>
     </mdui-dialog>
-    <input style="display: none;" id="copy_to_clipboard_fallback"></input>
 
     <script nomodule>
         alert('很抱歉, 此应用无法在较旧的浏览器运行, 请使用基于 Chromium 89+ 的浏览器(内核)使用 :(')

client/index.ts

@@ -7,6 +7,7 @@ import * as React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import './ui/custom-elements/chat-image.ts'
+import './ui/custom-elements/chat-video.ts'
 
 const urlParams = new URL(location.href).searchParams
 

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",
                                         ],

client/ui/copyToClipboard.ts

@@ -1,14 +1,20 @@
-import { $ } from 'mdui/jq'
-
 export default function copyToClipboard(text: string) {
-    if (navigator.clipboard) {
+    if (navigator.clipboard)
-        navigator.clipboard.writeText(text)
+        return navigator.clipboard.writeText(text)
-    } else {
+    return new Promise((res rej) => {
-        const input = $('#copy_to_clipboard_fallback').get(0) as HTMLInputElement
+        if (document.hasFocus()) {
-        input.value = text
+            const a = document.createElement("textarea")
-        input.select()
+            document.body.appendChild(a)
-        input.setSelectionRange(0, 1145141919810)
+            a.style.position = "fixed"
-        document.execCommand('copy')
+            a.style.clip = "rect(0 0 0 0)"
-        input.setSelectionRange(null, null)
+            a.style.top = "10px"
-    }
+            a.value = text
-}
+            a.select()
+            document.execCommand("copy", true)
+            document.body.removeChild(a)
+            res()
+        } else {
+            rej()
+        }
+    })
+}

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)
+    }
+})