Akatsuki-Misaki
/
blivechat
mirror of https://github.com/xfgryujk/blivechat.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

滚动条模仿、简化代码

Browse Source
pull/3/head
John Smith 5 years ago
parent 45173e5162
commit 05180c3acb
4 changed files with 97 additions and 105 deletions
Show Stats Download Patch File Download Diff File

23
frontend/src/views/Room/PaidMessage.vue
Unescape Escape View File

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

6
frontend/src/views/Room/TextMessage.vue
Unescape Escape View File

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

96
frontend/src/views/Room/index.vue
Unescape Escape View File

@ -14,24 +14,30 @@
</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>
<template v-for="message in messages"> <div id="item-scroller" ref="scroller" class="style-scope yt-live-chat-item-list-renderer animated">
<text-message :key="message.id" v-if="message.type == 0" <div id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 1800px;">
class="style-scope yt-live-chat-item-list-renderer" <div id="items" class="style-scope yt-live-chat-item-list-renderer" style="overflow: hidden; transform: translateY(0px);">
:avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName" <template v-for="message in messages">
:authorType="message.authorType" :content="message.content" :repeated="message.repeated" <text-message :key="message.id" v-if="message.type == 0"
></text-message> class="style-scope yt-live-chat-item-list-renderer"
<legacy-paid-message :key="message.id" v-else-if="message.type == 1" :avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
class="style-scope yt-live-chat-item-list-renderer" :authorType="message.authorType" :content="message.content" :repeated="message.repeated"
:avatarUrl="message.avatarUrl" :title="message.title" :content="message.content" ></text-message>
:time="message.time" <legacy-paid-message :key="message.id" v-else-if="message.type == 1"
></legacy-paid-message> class="style-scope yt-live-chat-item-list-renderer"
<paid-message :key="message.id" v-else :avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
class="style-scope yt-live-chat-item-list-renderer" :time="message.time"
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName" ></legacy-paid-message>
:time="message.time" :content="message.content" <paid-message :key="message.id" v-else
></paid-message> class="style-scope yt-live-chat-item-list-renderer"
</template> :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-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>

77
views/chat.py
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save