From 83ff877f54abd88297e81c42f62ccca2f2e03396 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Sat, 14 Oct 2023 17:48:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A4=A7=E8=A1=A8=E6=83=85?=
 =?UTF-8?q?=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatRenderer/TextMessage.vue   |  3 +
 frontend/src/views/Room.vue                   | 56 +++++++++++++++++--
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ChatRenderer/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue
index c09ddf6..266adbc 100644
--- a/frontend/src/components/ChatRenderer/TextMessage.vue
+++ b/frontend/src/components/ChatRenderer/TextMessage.vue
@@ -11,9 +11,12 @@
       <span id="message" class="style-scope yt-live-chat-text-message-renderer">
         <template v-for="(content, index) in richContent">
           <span :key="index" v-if="content.type === CONTENT_TYPE_TEXT">{{ content.text }}</span>
+          <!-- 如果CSS设置的尺寸比属性设置的尺寸还大，在图片加载完后布局会变化，可能导致滚动卡住，没什么好的解决方法 -->
           <img :key="index" v-else-if="content.type === CONTENT_TYPE_IMAGE"
             class="emoji yt-formatted-string style-scope yt-live-chat-text-message-renderer"
             :src="content.url" :alt="content.text" :shared-tooltip-text="content.text" :id="`emoji-${content.text}`"
+            :width="content.width" :height="content.height"
+            :class="{ 'blc-large-emoji': content.height >= 100 }"
           >
         </template>
         <el-badge :value="repeated" :max="99" v-if="repeated > 1" class="style-scope yt-live-chat-text-message-renderer"
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index 2510938..83599f8 100644
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@@ -240,7 +240,7 @@ export default {
     },
 
     /** @param {chatModels.AddTextMsg} data */
-    onAddText(data) {
+    async onAddText(data) {
       if (!this.config.showDanmaku || !this.filterTextMessage(data) || this.mergeSimilarText(data.content)) {
         return
       }
@@ -252,7 +252,7 @@ export default {
         authorName: data.authorName,
         authorType: data.authorType,
         content: data.content,
-        richContent: this.getRichContent(data),
+        richContent: await this.getRichContent(data),
         privilegeType: data.privilegeType,
         repeated: 1,
         translation: data.translation
@@ -398,7 +398,7 @@ export default {
       }
       return this.pronunciationConverter.getPronunciation(text)
     },
-    getRichContent(data) {
+    async getRichContent(data) {
       let richContent = []
 
       // 官方的非文本表情
@@ -406,8 +406,11 @@ export default {
         richContent.push({
           type: constants.CONTENT_TYPE_IMAGE,
           text: data.content,
-          url: data.emoticon
+          url: data.emoticon,
+          width: 0,
+          height: 0
         })
+        this.fillImageContentSizes(richContent)
         return richContent
       }
 
@@ -444,7 +447,9 @@ export default {
         richContent.push({
           type: constants.CONTENT_TYPE_IMAGE,
           text: matchEmoticon.keyword,
-          url: matchEmoticon.url
+          url: matchEmoticon.url,
+          width: 0,
+          height: 0
         })
         pos += matchEmoticon.keyword.length
         startPos = pos
@@ -456,7 +461,48 @@ export default {
           text: data.content.slice(startPos, pos)
         })
       }
+
+      this.fillImageContentSizes(richContent)
       return richContent
+    },
+    async fillImageContentSizes(richContent) {
+      let urlSizeMap = new Map()
+      for (let content of richContent) {
+        if (content.type === constants.CONTENT_TYPE_IMAGE) {
+          urlSizeMap.set(content.url, { width: 0, height: 0 })
+        }
+      }
+      if (urlSizeMap.size === 0) {
+        return
+      }
+
+      let promises = []
+      for (let url of urlSizeMap.keys()) {
+        let urlInClosure = url
+        promises.push(new Promise(
+          resolve => {
+            let img = document.createElement('img')
+            img.onload = () => {
+              let size = urlSizeMap.get(urlInClosure)
+              size.width = img.naturalWidth
+              size.height = img.naturalHeight
+              resolve()
+            }
+            // 获取失败了默认为0
+            img.onerror = resolve
+            img.src = urlInClosure
+          }
+        ))
+      }
+      await Promise.all(promises)
+
+      for (let content of richContent) {
+        if (content.type === constants.CONTENT_TYPE_IMAGE) {
+          let size = urlSizeMap.get(content.url)
+          content.width = size.width
+          content.height = size.height
+        }
+      }
     }
   }
 }