github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2025-03-28 21:10:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

添加表情支持 ()

Browse Source 
* 添加表情支持

* 添加表情的样式生成器选项

* 修复了样式生成器表情气泡总为舰长颜色
This commit is contained in:
Zhu Chuang 2021-12-26 19:12:25 +08:00 committed by GitHub
parent 776b354517
commit 34f8d88e05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 101 additions and 3 deletions

2
frontend/src/api/chat/ChatClientDirect.js
View File

@ -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],

54
frontend/src/api/chat/ChatClientTest.js
View File

@ -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,

6
frontend/src/components/ChatRenderer/TextMessage.vue
View File

@ -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
},

1
frontend/src/components/ChatRenderer/index.vue
View File

@ -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"

2
frontend/src/lang/en.js
View File

@ -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',

2
frontend/src/lang/zh.js
View File

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

1
frontend/src/views/Room.vue
View File

@ -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

10
frontend/src/views/StyleGenerator/Legacy.vue
View File

@ -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)

26
frontend/src/views/StyleGenerator/LineLike.vue
View File

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