From 1aadf11546435620217f4b2adeea92679fc00c1d Mon Sep 17 00:00:00 2001
From: ChicKo_ <463008393@qq.com>
Date: Tue, 8 Aug 2023 13:55:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E7=AA=97=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88YouTube=E5=92=8CB=E7=AB=99=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chat/components/Message/Text.vue | 38 +++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index 1f82bfc0..f5ff655c 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -50,10 +50,46 @@ const wrapClass = computed(() => {
   ]
 })
 
+function getVideoPreviewer({ type, vid }: { type: 'bilibili' | 'youtube'; vid: string }) {
+  let previewer = ''
+  if (type === 'bilibili') {
+    previewer = `<iframe src="//player.bilibili.com/player.html?bvid=${vid}&autoplay=false" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>`
+  }
+  else if (type === 'youtube') {
+    previewer = `<iframe src="https://www.youtube.com/embed/${vid}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
+  }
+  else {
+    // 更新其他视频网站的在线预览
+  }
+  return `<div style="margin-bottom:16px;maring-right:16px;">${previewer}</div>`
+}
+
+function generateVideoPreviewerText(text: string) {
+  if (!text)
+    return ''
+  // 这里截取视频网站和vid
+  const reg = /(www\.youtube\.com\/watch\?v\=[^\s\)]+)|(www\.bilibili\.com\/video\/[^\s\)]+)/g
+  const links = text.match(reg)
+  return links
+    ? links?.map((link) => {
+      if (link.includes('youtube')) {
+        const pattern = /watch\?v\=([^\s\&\)]+)/
+        const matchResult = link.match(pattern)
+        return matchResult ? getVideoPreviewer({ type: 'youtube', vid: matchResult[1] }) : ''
+      }
+      else {
+        const pattern = /video\/(([^\s\/\?\)]+))/
+        const matchResult = link.match(pattern)
+        return matchResult ? getVideoPreviewer({ type: 'bilibili', vid: matchResult[1] }) : ''
+      }
+    }).join('\n')
+    : ''
+}
+
 const text = computed(() => {
   const value = props.text ?? ''
   if (!props.asRawText)
-    return mdi.render(value)
+    return mdi.render(value) + generateVideoPreviewerText(value)
   return value
 })