mirror of
https://github.com/xfgryujk/blivechat.git
synced 2024-12-27 13:20:29 +08:00
滚动条模仿、简化代码
This commit is contained in:
John Smith
parent
45173e5162
commit
05180c3acb
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<yt-live-chat-paid-message-renderer class="style-scope yt-live-chat-item-list-renderer" allow-animations :style="{
|
||||
'--yt-live-chat-paid-message-primary-color': getColor('contentBg'),
|
||||
'--yt-live-chat-paid-message-secondary-color': getColor('headerBg'),
|
||||
'--yt-live-chat-paid-message-header-color': getColor('header'),
|
||||
'--yt-live-chat-paid-message-author-name-color': getColor('authorName'),
|
||||
'--yt-live-chat-paid-message-timestamp-color': getColor('time'),
|
||||
'--yt-live-chat-paid-message-color': getColor('content'),
|
||||
'--yt-live-chat-paid-message-primary-color': color.contentBg,
|
||||
'--yt-live-chat-paid-message-secondary-color': color.headerBg,
|
||||
'--yt-live-chat-paid-message-header-color': color.header,
|
||||
'--yt-live-chat-paid-message-author-name-color': color.authorName,
|
||||
'--yt-live-chat-paid-message-timestamp-color': color.time,
|
||||
'--yt-live-chat-paid-message-color': color.content
|
||||
}"
|
||||
>
|
||||
<div id="card" class="style-scope yt-live-chat-paid-message-renderer">
|
||||
@ -102,13 +102,14 @@ export default {
|
||||
time: String,
|
||||
content: String
|
||||
},
|
||||
methods: {
|
||||
getColor(name) {
|
||||
computed: {
|
||||
color() {
|
||||
for (const color of COLORS) {
|
||||
if (this.price >= color.price)
|
||||
return color[name]
|
||||
if (this.price >= color.price) {
|
||||
return color
|
||||
}
|
||||
}
|
||||
return COLORS[0][name]
|
||||
return COLORS[COLORS.length - 1]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,8 +29,8 @@ const AUTHOR_TYPE_TO_TEXT = [
|
||||
'moderator', // 房管
|
||||
'owner' // 主播
|
||||
]
|
||||
const REPEATED_MARK_COLOR_START = [0x21, 0x96, 0xF3]
|
||||
const REPEATED_MARK_COLOR_END = [0xFF, 0x57, 0x22]
|
||||
const REPEATED_MARK_COLOR_START = [64, 158, 255]
|
||||
const REPEATED_MARK_COLOR_END = [245, 108, 108]
|
||||
|
||||
export default {
|
||||
name: 'TextMessage',
|
||||
@ -67,7 +67,7 @@ export default {
|
||||
|
||||
<style>
|
||||
yt-live-chat-text-message-renderer>#content>.el-badge {
|
||||
margin-left: 0.5em;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
yt-live-chat-text-message-renderer>#content>.el-badge .el-badge__content {
|
||||
|
||||
@ -14,24 +14,30 @@
|
||||
</div>
|
||||
</yt-live-chat-ticker-paid-message-item-renderer>
|
||||
</yt-live-chat-ticker-renderer> -->
|
||||
<yt-live-chat-item-list-renderer ref="list" class="style-scope yt-live-chat-renderer">
|
||||
<template v-for="message in messages">
|
||||
<text-message :key="message.id" v-if="message.type == 0"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
|
||||
:authorType="message.authorType" :content="message.content" :repeated="message.repeated"
|
||||
></text-message>
|
||||
<legacy-paid-message :key="message.id" v-else-if="message.type == 1"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
|
||||
:time="message.time"
|
||||
></legacy-paid-message>
|
||||
<paid-message :key="message.id" v-else
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
||||
:time="message.time" :content="message.content"
|
||||
></paid-message>
|
||||
</template>
|
||||
<yt-live-chat-item-list-renderer class="style-scope yt-live-chat-renderer" allow-scroll>
|
||||
<div id="item-scroller" ref="scroller" class="style-scope yt-live-chat-item-list-renderer animated">
|
||||
<div id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 1800px;">
|
||||
<div id="items" class="style-scope yt-live-chat-item-list-renderer" style="overflow: hidden; transform: translateY(0px);">
|
||||
<template v-for="message in messages">
|
||||
<text-message :key="message.id" v-if="message.type == 0"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
|
||||
:authorType="message.authorType" :content="message.content" :repeated="message.repeated"
|
||||
></text-message>
|
||||
<legacy-paid-message :key="message.id" v-else-if="message.type == 1"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
|
||||
:time="message.time"
|
||||
></legacy-paid-message>
|
||||
<paid-message :key="message.id" v-else
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
||||
:time="message.time" :content="message.content"
|
||||
></paid-message>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</yt-live-chat-item-list-renderer>
|
||||
</yt-live-chat-renderer>
|
||||
</template>
|
||||
@ -93,7 +99,7 @@ export default {
|
||||
this.websocket.close()
|
||||
},
|
||||
updated() {
|
||||
this.$refs.list.scrollTo(0, this.$refs.list.scrollHeight)
|
||||
this.$refs.scroller.scrollTo(0, this.$refs.scroller.scrollHeight)
|
||||
},
|
||||
methods: {
|
||||
onWsOpen() {
|
||||
@ -105,51 +111,49 @@ export default {
|
||||
}))
|
||||
},
|
||||
onWsMessage(event) {
|
||||
let body = JSON.parse(event.data)
|
||||
let {cmd, data} = JSON.parse(event.data)
|
||||
let message = null
|
||||
let time, price
|
||||
switch(body.cmd) {
|
||||
let time = data.timestamp ? new Date(data.timestamp * 1000) : new Date()
|
||||
switch(cmd) {
|
||||
case COMMAND_ADD_TEXT:
|
||||
if (!this.filterTextMessage(body.data) || this.mergeSimilar(body.data.content)) {
|
||||
if (!this.filterTextMessage(data) || this.mergeSimilar(data.content)) {
|
||||
break
|
||||
}
|
||||
time = new Date(body.data.timestamp * 1000)
|
||||
message = {
|
||||
id: this.nextId++,
|
||||
type: 0, // TextMessage
|
||||
avatarUrl: body.data.avatarUrl,
|
||||
avatarUrl: data.avatarUrl,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: body.data.authorName,
|
||||
authorType: body.data.authorType,
|
||||
content: body.data.content,
|
||||
authorName: data.authorName,
|
||||
authorType: data.authorType,
|
||||
content: data.content,
|
||||
repeated: 1
|
||||
}
|
||||
break
|
||||
case COMMAND_ADD_GIFT:
|
||||
price = body.data.totalCoin / 1000
|
||||
case COMMAND_ADD_GIFT: {
|
||||
let price = data.totalCoin / 1000
|
||||
if (price < this.config.minGiftPrice) // 丢人
|
||||
break
|
||||
time = new Date(body.data.timestamp * 1000)
|
||||
message = {
|
||||
id: this.nextId++,
|
||||
type: 2, // PaidMessage
|
||||
avatarUrl: body.data.avatarUrl,
|
||||
authorName: body.data.authorName,
|
||||
avatarUrl: data.avatarUrl,
|
||||
authorName: data.authorName,
|
||||
price: price,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
content: `Sent ${body.data.giftName}x${body.data.giftNum}`
|
||||
content: `Sent ${data.giftName}x${data.giftNum}`
|
||||
}
|
||||
break
|
||||
}
|
||||
case COMMAND_ADD_VIP:
|
||||
time = new Date(body.data.timestamp * 1000)
|
||||
message = {
|
||||
id: this.nextId++,
|
||||
type: 1, // LegacyPaidMessage
|
||||
avatarUrl: body.data.avatarUrl,
|
||||
avatarUrl: data.avatarUrl,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: body.data.authorName,
|
||||
authorName: data.authorName,
|
||||
title: 'NEW MEMBER!',
|
||||
content: `Welcome ${body.data.authorName}`
|
||||
content: `Welcome ${data.authorName}`
|
||||
}
|
||||
break
|
||||
}
|
||||
@ -203,12 +207,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
yt-live-chat-renderer {
|
||||
yt-live-chat-renderer, yt-live-chat-item-list-renderer #item-scroller {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
yt-live-chat-item-list-renderer {
|
||||
overflow-y: scroll !important;
|
||||
yt-live-chat-renderer ::-webkit-scrollbar {
|
||||
content: '';
|
||||
}
|
||||
|
||||
yt-live-chat-renderer ::-webkit-scrollbar-thumb {
|
||||
background-color: hsla(0, 0%, 53.3%, .2);
|
||||
border: 2px solid #fcfcfc;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
yt-live-chat-renderer ::-webkit-scrollbar-track {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -133,10 +133,13 @@ class RoomManager:
|
||||
# 测试用
|
||||
@staticmethod
|
||||
def __send_test_message(room):
|
||||
room.send_message(Command.ADD_TEXT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
base_data = {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
}
|
||||
text_data = {
|
||||
**base_data,
|
||||
'authorType': 0,
|
||||
'content': '我能吞下玻璃而不伤身体',
|
||||
'privilegeType': 0,
|
||||
@ -144,56 +147,30 @@ class RoomManager:
|
||||
'authorLevel': 20,
|
||||
'isNewbie': False,
|
||||
'isMobileVerified': True
|
||||
})
|
||||
room.send_message(Command.ADD_TEXT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': '主播',
|
||||
'authorType': 3,
|
||||
'content': "I can eat glass, it doesn't hurt me.",
|
||||
'privilegeType': 0,
|
||||
'isGiftDanmaku': False,
|
||||
'authorLevel': 20,
|
||||
'isNewbie': False,
|
||||
'isMobileVerified': True
|
||||
})
|
||||
room.send_message(Command.ADD_VIP, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
}
|
||||
vip_data = base_data
|
||||
gift_data = {
|
||||
**base_data,
|
||||
'giftName': '礼花',
|
||||
'giftNum': 1,
|
||||
'totalCoin': 28000
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'giftName': '节奏风暴',
|
||||
'giftNum': 1,
|
||||
'totalCoin': 100000
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'giftName': '摩天大楼',
|
||||
'giftNum': 1,
|
||||
'totalCoin': 450000
|
||||
})
|
||||
room.send_message(Command.ADD_GIFT, {
|
||||
'avatarUrl': 'https://i0.hdslb.com/bfs/face/29b6be8aa611e70a3d3ac219cdaf5e72b604f2de.jpg@48w_48h',
|
||||
'timestamp': time.time(),
|
||||
'authorName': 'xfgryujk',
|
||||
'giftName': '小电视飞船',
|
||||
'giftNum': 1,
|
||||
'totalCoin': 1245000
|
||||
})
|
||||
}
|
||||
room.send_message(Command.ADD_TEXT, text_data)
|
||||
text_data['authorName'] = '主播'
|
||||
text_data['authorType'] = 3
|
||||
text_data['content'] = "I can eat glass, it doesn't hurt me."
|
||||
room.send_message(Command.ADD_TEXT, text_data)
|
||||
room.send_message(Command.ADD_VIP, vip_data)
|
||||
room.send_message(Command.ADD_GIFT, gift_data)
|
||||
gift_data['giftName'] = '节奏风暴'
|
||||
gift_data['totalCoin'] = 100000
|
||||
room.send_message(Command.ADD_GIFT, gift_data)
|
||||
gift_data['giftName'] = '摩天大楼'
|
||||
gift_data['totalCoin'] = 450000
|
||||
room.send_message(Command.ADD_GIFT, gift_data)
|
||||
gift_data['giftName'] = '小电视飞船'
|
||||
gift_data['totalCoin'] = 1245000
|
||||
room.send_message(Command.ADD_GIFT, gift_data)
|
||||
|
||||
|
||||
room_manager = RoomManager()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user