From 34f8d88e059fc61a610af6d71f66c81c3c61320d Mon Sep 17 00:00:00 2001 From: Zhu Chuang Date: Sun, 26 Dec 2021 19:12:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A1=A8=E6=83=85=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20(#55)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 添加表情支持 * 添加表情的样式生成器选项 * 修复了样式生成器表情气泡总为舰长颜色 --- frontend/src/api/chat/ChatClientDirect.js | 2 + frontend/src/api/chat/ChatClientTest.js | 54 +++++++++++++++++++ .../components/ChatRenderer/TextMessage.vue | 6 ++- .../src/components/ChatRenderer/index.vue | 1 + frontend/src/lang/en.js | 2 + frontend/src/lang/zh.js | 2 + frontend/src/views/Room.vue | 1 + frontend/src/views/StyleGenerator/Legacy.vue | 10 +++- .../src/views/StyleGenerator/LineLike.vue | 26 ++++++++- 9 files changed, 101 insertions(+), 3 deletions(-) diff --git a/frontend/src/api/chat/ChatClientDirect.js b/frontend/src/api/chat/ChatClientDirect.js index 728bee9..bcdd900 100644 --- 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], diff --git a/frontend/src/api/chat/ChatClientTest.js b/frontend/src/api/chat/ChatClientTest.js index 2da93ed..b39d4d1 100644 --- 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, diff --git a/frontend/src/components/ChatRenderer/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue index 5f3e803..4aa3b1a 100644 --- a/frontend/src/components/ChatRenderer/TextMessage.vue +++ b/frontend/src/components/ChatRenderer/TextMessage.vue @@ -17,12 +17,15 @@ > - {{ + {{ content }} +
+ +
@@ -49,6 +52,7 @@ export default { authorName: String, authorType: Number, content: String, + emoticon: String, privilegeType: Number, repeated: Number }, diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue index 7ae6cc4..f139eba 100644 --- 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" > + + +

{{$t('stylegen.time')}}

@@ -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) diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue index b2aad8d..fe14874 100644 --- a/frontend/src/views/StyleGenerator/LineLike.vue +++ b/frontend/src/views/StyleGenerator/LineLike.vue @@ -102,6 +102,18 @@ + + + + + + + + + + + +

{{$t('stylegen.time')}}

@@ -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}; }`