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