添加表情支持 (#55)

* 添加表情支持 * 添加表情的样式生成器选项 * 修复了样式生成器表情气泡总为舰长颜色
2025-03-14 03:40:36 +08:00 · 2021-12-26 19:12:25 +08:00 · 2021-12-26 19:12:25 +08:00 · 34f8d88e05
commit 34f8d88e05
parent 776b354517
9 changed files with 101 additions and 3 deletions
--- a/frontend/src/api/chat/ChatClientDirect.js
+++ b/frontend/src/api/chat/ChatClientDirect.js
@ -277,12 +277,14 @@ export default class ChatClientDirect {
    }

    let urank = info[2][5]
+    let emoticon = info[0][13].url || null
    let data = {
      avatarUrl: await avatar.getAvatarUrl(uid),
      timestamp: info[0][4] / 1000,
      authorName: info[2][1],
      authorType: authorType,
      content: info[1],
+      emoticon,
      privilegeType: privilegeType,
      isGiftDanmaku: !!info[0][9],
      authorLevel: info[4][0],
--- a/frontend/src/api/chat/ChatClientTest.js
+++ b/frontend/src/api/chat/ChatClientTest.js
@ -19,6 +19,36 @@ const CONTENTS = [
  '有一说一，这件事大家懂的都懂，不懂的，说了你也不明白，不如不说', '让我看看', '我柜子动了，我不玩了'
 ]

+const EMOTICONS = [
+  "https://i0.hdslb.com/bfs/live/a98e35996545509188fe4d24bd1a56518ea5af48.png",
+  "https://i0.hdslb.com/bfs/live/2af0e252cc3082384edf8165751f6a49eaf76d94.png",
+  "https://i0.hdslb.com/bfs/live/6a034cfac8631035f5877d722379914f628cf120.png",
+  "https://i0.hdslb.com/bfs/live/625989e78079e3dc38d75cb9ac392fe8c1aa4a75.png",
+  "https://i0.hdslb.com/bfs/live/eff44c1fc03311573e8817ca8010aca72404f65c.png",
+  "https://i0.hdslb.com/bfs/live/a9e2acaf72b663c6ad9c39cda4ae01470e13d845.png",
+  "https://i0.hdslb.com/bfs/live/7251dc7df587388a3933743bf38394d12a922cd7.png",
+  "https://i0.hdslb.com/bfs/live/88b49dac03bfd5d4cb49672956f78beb2ebd0d0b.png",
+  "https://i0.hdslb.com/bfs/live/0e28444c8e2faef3169e98e1a41c487144d877d4.png",
+  "https://i0.hdslb.com/bfs/live/aa48737f877cd328162696a4f784b85d4bfca9ce.png",
+  "https://i0.hdslb.com/bfs/live/61e790813c51eab55ebe0699df1e9834c90b68ba.png",
+  "https://i0.hdslb.com/bfs/live/343f7f7e87fa8a07df63f9cba6b776196d9066f0.png",
+  "https://i0.hdslb.com/bfs/live/7b7a2567ad1520f962ee226df777eaf3ca368fbc.png",
+  "https://i0.hdslb.com/bfs/live/39e518474a3673c35245bf6ef8ebfff2c003fdc3.png",
+  "https://i0.hdslb.com/bfs/live/9029486931c3169c3b4f8e69da7589d29a8eadaa.png",
+  "https://i0.hdslb.com/bfs/live/328e93ce9304090f4035e3aa7ef031d015bbc915.png",
+  "https://i0.hdslb.com/bfs/live/aa93b9af7ba03b50df23b64e9afd0d271955cd71.png",
+  "https://i0.hdslb.com/bfs/live/18af5576a4582535a3c828c3ae46a7855d9c6070.png",
+  "https://i0.hdslb.com/bfs/live/4cf43ac5259589e9239c4e908c8149d5952fcc32.png",
+  "https://i0.hdslb.com/bfs/live/40db7427f02a2d9417f8eeed0f71860dfb28df5a.png",
+  "https://i0.hdslb.com/bfs/live/1ba5126b10e5efe3e4e29509d033a37f128beab2.png",
+  "https://i0.hdslb.com/bfs/live/ff840c706fffa682ace766696b9f645e40899f67.png",
+  "https://i0.hdslb.com/bfs/live/08f1aebaa4d9c170aa79cbafe521ef0891bdf2b5.png",
+  "https://i0.hdslb.com/bfs/live/c2650bf9bbc79b682a4b67b24df067fdd3e5e9ca.png",
+  "https://i0.hdslb.com/bfs/live/c3326ceb63587c79e5b4106ee4018dc59389b5c0.png",
+  "https://i0.hdslb.com/bfs/live/7db4188c050f55ec59a1629fbc5a53661e4ba780.png",
+  "https://i0.hdslb.com/bfs/live/cc2652cef69b22117f1911391567bd2957f27e08.png",
+]
+
 const AUTHOR_TYPES = [
  {weight: 10, value: constants.AUTHRO_TYPE_NORMAL},
  {weight: 5, value: constants.AUTHRO_TYPE_MEMBER},
@ -74,6 +104,30 @@ const MESSAGE_GENERATORS = [
      }
    }
  },
+  // 表情
+  {
+    weight: 5,
+    value() {
+      return {
+        type: constants.MESSAGE_TYPE_TEXT,
+        message: {
+          ...randGuardInfo(),
+          avatarUrl: avatar.DEFAULT_AVATAR_URL,
+          timestamp: new Date().getTime() / 1000,
+          authorName: randomChoose(NAMES),
+          content: '',
+          emoticon: randomChoose(EMOTICONS),
+          isGiftDanmaku: false,
+          authorLevel: randInt(0, 60),
+          isNewbie: randInt(1, 10) <= 9,
+          isMobileVerified: randInt(1, 10) <= 9,
+          medalLevel: randInt(0, 40),
+          id: getUuid4Hex(),
+          translation: ''
+        }
+      }
+    }
+  },
  // 礼物
  {
    weight: 1,
--- a/frontend/src/components/ChatRenderer/TextMessage.vue
+++ b/frontend/src/components/ChatRenderer/TextMessage.vue
@ -17,12 +17,15 @@
          ></author-badge>
        </span>
      </yt-live-chat-author-chip>
-      <span id="message" class="style-scope yt-live-chat-text-message-renderer">{{
+      <span v-if="!emoticon" id="message" class="style-scope yt-live-chat-text-message-renderer">{{
        content
        }}<el-badge :value="repeated" :max="99" v-show="repeated > 1" class="style-scope yt-live-chat-text-message-renderer"
          :style="{'--repeated-mark-color': repeatedMarkColor}"
        ></el-badge>
      </span>
+      <div v-if="emoticon" id="emoticon" class="style-scope yt-live-chat-text-message-renderer">
+        <img-shadow :imgUrl="emoticon" width="64" />
+      </div>
    </div>
  </yt-live-chat-text-message-renderer>
 </template>
@ -49,6 +52,7 @@ export default {
    authorName: String,
    authorType: Number,
    content: String,
+    emoticon: String,
    privilegeType: Number,
    repeated: Number
  },
--- a/frontend/src/components/ChatRenderer/index.vue
+++ b/frontend/src/components/ChatRenderer/index.vue
@ -14,6 +14,7 @@
                class="style-scope yt-live-chat-item-list-renderer"
                :avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
                :authorType="message.authorType" :content="getShowContent(message)" :privilegeType="message.privilegeType"
+                :emoticon="message.emoticon"
                :repeated="message.repeated"
              ></text-message>
              <paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_GIFT"
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -74,6 +74,8 @@ export default {
    memberColor: 'Member color',
    showBadges: 'Show badges',
    showColon: 'Show colon after name',
+    emoticonBubble: 'Show emoticon bubbles',
+    emoticonSize: 'Emoticon size',

    messages: 'Messages',
    color: 'Color',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -74,6 +74,8 @@ export default {
    memberColor: '舰长颜色',
    showBadges: '显示勋章',
    showColon: '用户名后显示冒号',
+    emoticonBubble: '显示表情气泡',
+    emoticonSize: '表情大小',

    messages: '消息',
    color: '颜色',
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@ -127,6 +127,7 @@ export default {
        authorName: data.authorName,
        authorType: data.authorType,
        content: data.content,
+        emoticon: data.emoticon,
        privilegeType: data.privilegeType,
        repeated: 1,
        translation: data.translation
--- a/frontend/src/views/StyleGenerator/Legacy.vue
+++ b/frontend/src/views/StyleGenerator/Legacy.vue
@ -129,6 +129,9 @@
        <el-form-item :label="$t('stylegen.onNewLine')">
          <el-switch v-model="form.messageOnNewLine"></el-switch>
        </el-form-item>
+        <el-form-item :label="$t('stylegen.emoticonSize')">
+          <el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
+        </el-form-item>
      </el-card>

      <h3>{{$t('stylegen.time')}}</h3>
@ -376,6 +379,7 @@ export const DEFAULT_CONFIG = {
  messageLineHeight: 0,
  messageColor: '#ffffff',
  messageOnNewLine: false,
+  emoticonSize: 64,

  showTime: false,
  timeFont: 'Imprima',
@ -541,7 +545,11 @@ yt-live-chat-text-message-renderer #message * {
 ${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #message {
  display: block !important;
  overflow: visible !important;
-}`}`
+}`}
+
+yt-live-chat-text-message-renderer #emoticon img {
+  width: ${this.form.emoticonSize}px !important;
+}`
    },
    timeStyle() {
      return common.getTimeStyle(this.form)
--- a/frontend/src/views/StyleGenerator/LineLike.vue
+++ b/frontend/src/views/StyleGenerator/LineLike.vue
@ -102,6 +102,18 @@
            </el-form-item>
          </el-col>
        </el-row>
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.emoticonBubble')">
+              <el-switch v-model="form.emoticonBubble"></el-switch>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item :label="$t('stylegen.emoticonSize')">
+              <el-input v-model.number="form.emoticonSize" type="number" min="0"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
      </el-card>

      <h3>{{$t('stylegen.time')}}</h3>
@ -320,6 +332,8 @@ export const DEFAULT_CONFIG = {
  messageFontSize: 18,
  messageLineHeight: 0,
  messageColor: '#000000',
+  emoticonBubble: true,
+  emoticonSize: 64,

  showTime: false,
  timeFont: 'Noto Sans SC',
@ -444,6 +458,8 @@ yt-live-chat-text-message-renderer #chat-badges {
    },
    messageStyle() {
      return `/* Messages */
+${this.form.emoticonBubble ? `yt-live-chat-text-message-renderer #emoticon,
+yt-live-chat-text-message-renderer #emoticon *,` : ''}
 yt-live-chat-text-message-renderer #message,
 yt-live-chat-text-message-renderer #message * {
  ${this.form.messageColor ? `color: ${this.form.messageColor} !important;` : ''}
@ -452,6 +468,7 @@ yt-live-chat-text-message-renderer #message * {
  line-height: ${this.form.messageLineHeight || this.form.messageFontSize}px !important;
 }

+${this.form.emoticonBubble ? 'yt-live-chat-text-message-renderer${typeSelector} #emoticon,' : ''}
 yt-live-chat-text-message-renderer #message {
  display: block !important;
  overflow: visible !important;
@ -460,6 +477,7 @@ yt-live-chat-text-message-renderer #message {
 }

 /* The triangle beside dialog */
+${this.form.emoticonBubble ? 'yt-live-chat-text-message-renderer${typeSelector} #emoticon::before,' : ''}
 yt-live-chat-text-message-renderer #message::before {
  content: "";
  display: inline-block;
@ -469,6 +487,10 @@ yt-live-chat-text-message-renderer #message::before {
  border: 8px solid transparent;
  border-right: 18px solid;
  transform: rotate(35deg);
+}
+
+yt-live-chat-text-message-renderer #emoticon img {
+  width: ${this.form.emoticonSize}px !important;
 }`
    },
    timeStyle() {
@ -585,10 +607,12 @@ yt-live-chat-ticker-sponsor-item-renderer * {
        color = '#ffffff'
      }
      let typeSelector = authorType ? `[author-type="${authorType}"]` : ''
-      return `yt-live-chat-text-message-renderer${typeSelector} #message {
+      return `${this.form.emoticonBubble ? `yt-live-chat-text-message-renderer${typeSelector} #emoticon,` : ''}
+yt-live-chat-text-message-renderer${typeSelector} #message {
  background-color: ${color} !important;
 }

+${this.form.emoticonBubble ? `yt-live-chat-text-message-renderer${typeSelector} #emoticon::before,` : ''}
 yt-live-chat-text-message-renderer${typeSelector} #message::before {
  border-right-color: ${color};
 }`