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

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

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

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

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

77
views/chat.py
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save