修改表情相关的一些实现和代码风格

api/chat.py

@@ -56,6 +56,7 @@ class Room(blivedm.BLiveClient, blivedm.BaseHandler):
             medal_level = 0
             medal_room_id = 0
 
+        # TODO 带表情信息
         message = blivedm.DanmakuMessage(
             timestamp=info[0][4],
             msg_type=info[0][9],

frontend/src/api/chat/ChatClientDirect.js

@@ -276,23 +276,21 @@ export default class ChatClientDirect {
       authorType = 0
     }
 
-    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],
-      isNewbie: urank < 10000,
+      isNewbie: info[2][5] < 10000,
       isMobileVerified: !!info[2][6],
       medalLevel: roomId === this.roomId ? medalLevel : 0,
       id: getUuid4Hex(),
-      translation: ''
+      translation: '',
+      emoticon: info[0][13].url || null // TODO 改成对象？
     }
     this.onAddText(data)
   }

frontend/src/api/chat/ChatClientRelay.js

@@ -135,7 +135,8 @@ export default class ChatClientRelay {
         isMobileVerified: !!data[9],
         medalLevel: data[10],
         id: data[11],
-        translation: data[12]
+        translation: data[12],
+        emoticon: null // TODO 支持表情
       }
       this.onAddText(data)
       break

frontend/src/api/chat/ChatClientTest.js

@@ -20,33 +20,9 @@ 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",
+  '/static/img/emoticons/233.png',
+  '/static/img/emoticons/miaoa.png',
+  '/static/img/emoticons/lipu.png'
 ]
 
 const AUTHOR_TYPES = [
@@ -95,11 +71,12 @@ const MESSAGE_GENERATORS = [
           content: randomChoose(CONTENTS),
           isGiftDanmaku: randInt(1, 10) <= 1,
           authorLevel: randInt(0, 60),
-          isNewbie: randInt(1, 10) <= 9,
+          isNewbie: randInt(1, 10) <= 1,
           isMobileVerified: randInt(1, 10) <= 9,
           medalLevel: randInt(0, 40),
           id: getUuid4Hex(),
-          translation: ''
+          translation: '',
+          emoticon: null
         }
       }
     }
@@ -116,14 +93,14 @@ const MESSAGE_GENERATORS = [
           timestamp: new Date().getTime() / 1000,
           authorName: randomChoose(NAMES),
           content: '',
-          emoticon: randomChoose(EMOTICONS),
           isGiftDanmaku: false,
           authorLevel: randInt(0, 60),
-          isNewbie: randInt(1, 10) <= 9,
+          isNewbie: randInt(1, 10) <= 1,
           isMobileVerified: randInt(1, 10) <= 9,
           medalLevel: randInt(0, 40),
           id: getUuid4Hex(),
-          translation: ''
+          translation: '',
+          emoticon: randomChoose(EMOTICONS)
         }
       }
     }

frontend/src/components/ChatRenderer/TextMessage.vue

@@ -6,9 +6,9 @@
     <div id="content" class="style-scope yt-live-chat-text-message-renderer">
       <span id="timestamp" class="style-scope yt-live-chat-text-message-renderer">{{timeText}}</span>
       <yt-live-chat-author-chip class="style-scope yt-live-chat-text-message-renderer">
-        <span id="author-name" dir="auto" class="style-scope yt-live-chat-author-chip" :type="authorTypeText">{{
-          authorName
-          }}<!-- 这里是已验证勋章 -->
+        <span id="author-name" dir="auto" class="style-scope yt-live-chat-author-chip" :type="authorTypeText">
+          <template>{{ authorName }}</template>
+          <!-- 这里是已验证勋章 -->
           <span id="chip-badges" class="style-scope yt-live-chat-author-chip"></span>
         </span>
         <span id="chat-badges" class="style-scope yt-live-chat-author-chip">
@@ -17,15 +17,15 @@
           ></author-badge>
         </span>
       </yt-live-chat-author-chip>
-      <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"
+      <span id="message" class="style-scope yt-live-chat-text-message-renderer">
+        <template v-if="!emoticon">{{ content }}</template>
+        <img v-else class="small-emoji emoji yt-formatted-string style-scope yt-live-chat-text-message-renderer"
+          :src="emoticon" :alt="content" shared-tooltip-text="" id="emoji"
+        >
+        <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>

frontend/src/components/ChatRenderer/index.vue

@@ -13,9 +13,8 @@
               <text-message :key="message.id" v-if="message.type === MESSAGE_TYPE_TEXT"
                 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"
+                :authorType="message.authorType" :content="getShowContent(message)" :emoticon="message.emoticon"
+                :privilegeType="message.privilegeType" :repeated="message.repeated"
               ></text-message>
               <paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_GIFT"
                 class="style-scope yt-live-chat-item-list-renderer"

frontend/src/lang/en.js

@@ -74,7 +74,6 @@ export default {
     memberColor: 'Member color',
     showBadges: 'Show badges',
     showColon: 'Show colon after name',
-    emoticonBubble: 'Show emoticon bubbles',
     emoticonSize: 'Emoticon size',
 
     messages: 'Messages',

frontend/src/lang/ja.js

@@ -74,6 +74,7 @@ export default {
     memberColor: 'メンバーの色',
     showBadges: '勲章を見せる',
     showColon: 'ユーザー名の後にコロンが表示されます',
+    emoticonSize: 'スタンプサイズ',
 
     messages: 'コメント',
     color: '色',

frontend/src/lang/zh.js

@@ -74,7 +74,6 @@ export default {
     memberColor: '舰长颜色',
     showBadges: '显示勋章',
     showColon: '用户名后显示冒号',
-    emoticonBubble: '显示表情气泡',
     emoticonSize: '表情大小',
 
     messages: '消息',

frontend/src/views/StyleGenerator/Legacy.vue

@@ -129,9 +129,13 @@
         <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-row :gutter="20">
+          <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>
@@ -379,7 +383,7 @@ export const DEFAULT_CONFIG = {
   messageLineHeight: 0,
   messageColor: '#ffffff',
   messageOnNewLine: false,
-  emoticonSize: 64,
+  emoticonSize: 18,
 
   showTime: false,
   timeFont: 'Imprima',
@@ -547,8 +551,9 @@ ${!this.form.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #messag
   overflow: visible !important;
 }`}
 
-yt-live-chat-text-message-renderer #emoticon img {
-  width: ${this.form.emoticonSize}px !important;
+yt-live-chat-text-message-renderer #message img {
+  width: auto !important;
+  height: ${this.form.emoticonSize}px !important;
 }`
     },
     timeStyle() {

frontend/src/views/StyleGenerator/LineLike.vue

@@ -103,11 +103,6 @@
           </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>
@@ -332,8 +327,7 @@ export const DEFAULT_CONFIG = {
   messageFontSize: 18,
   messageLineHeight: 0,
   messageColor: '#000000',
-  emoticonBubble: true,
-  emoticonSize: 64,
+  emoticonSize: 18,
 
   showTime: false,
   timeFont: 'Noto Sans SC',
@@ -458,8 +452,6 @@ 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;` : ''}
@@ -468,7 +460,6 @@ 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;
@@ -476,8 +467,12 @@ yt-live-chat-text-message-renderer #message {
   border-radius: 30px;
 }
 
+yt-live-chat-text-message-renderer #message img {
+  width: auto !important;
+  height: ${this.form.emoticonSize}px !important;
+}
+
 /* 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;
@@ -487,10 +482,6 @@ 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() {
@@ -607,12 +598,10 @@ yt-live-chat-ticker-sponsor-item-renderer * {
         color = '#ffffff'
       }
       let typeSelector = authorType ? `[author-type="${authorType}"]` : ''
-      return `${this.form.emoticonBubble ? `yt-live-chat-text-message-renderer${typeSelector} #emoticon,` : ''}
-yt-live-chat-text-message-renderer${typeSelector} #message {
+      return `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};
 }`