github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2025-03-13 11:20:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化SC固定栏

Browse Source
This commit is contained in:
John Smith 2020-10-11 14:36:23 +08:00
parent 0e06c4ba24
commit adeba8f552
2 changed files with 50 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/components/ChatRenderer/Ticker.vue
View File

@ -1,28 +1,24 @@
<template>
<yt-live-chat-ticker-renderer>
<yt-live-chat-ticker-renderer :hidden="showMessages.length === 0">
<div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
<div id="items" class="style-scope yt-live-chat-ticker-renderer">
<template v-for="message in messages">
<yt-live-chat-ticker-paid-message-item-renderer :key="message.id" v-if="needToShow(message)"
tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
@click="onItemClick(message)"
>
<div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
:style="{
background: getBgColor(message),
}"
>
<div id="content" class="style-scope yt-live-chat-ticker-paid-message-item-renderer" :style="{
color: getColor(message)
}">
<img-shadow id="author-photo" height="24" width="24" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
:imgUrl="message.avatarUrl"
></img-shadow>
<span id="text" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer">{{getText(message)}}</span>
</div>
<yt-live-chat-ticker-paid-message-item-renderer v-for="message in showMessages" :key="message.raw.id"
tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
@click="onItemClick(message.raw)"
>
<div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer" :style="{
background: message.bgColor,
}">
<div id="content" class="style-scope yt-live-chat-ticker-paid-message-item-renderer" :style="{
color: message.color
}">
<img-shadow id="author-photo" height="24" width="24" class="style-scope yt-live-chat-ticker-paid-message-item-renderer"
:imgUrl="message.raw.avatarUrl"
></img-shadow>
<span id="text" dir="ltr" class="style-scope yt-live-chat-ticker-paid-message-item-renderer">{{message.text}}</span>
</div>
</yt-live-chat-ticker-paid-message-item-renderer>
</template>
</div>
</yt-live-chat-ticker-paid-message-item-renderer>
</div>
</div>
<template v-if="pinnedMessage">
@ -34,7 +30,7 @@
<paid-message :key="pinnedMessage.id" v-else
class="style-scope yt-live-chat-ticker-renderer"
:price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName"
:time="pinnedMessage.time" :content="showContent"
:time="pinnedMessage.time" :content="pinnedMessageShowContent"
></paid-message>
</template>
</yt-live-chat-ticker-renderer>
@ -67,12 +63,27 @@ export default {
MESSAGE_TYPE_MEMBER: constants.MESSAGE_TYPE_MEMBER,
curTime: new Date(),
updateTimerId: window.setInterval(this.updateProgress.bind(this), 1000),
updateTimerId: window.setInterval(this.updateProgress, 1000),
pinnedMessage: null
}
},
computed: {
showContent() {
showMessages() {
let res = []
for (let message of this.messages) {
if (!this.needToShow(message)) {
continue
}
res.push({
raw: message,
bgColor: this.getBgColor(message),
color: this.getColor(message),
text: this.getText(message)
})
}
return res
},
pinnedMessageShowContent() {
if (!this.pinnedMessage) {
return ''
}
@ -88,27 +99,20 @@ export default {
},
methods: {
needToShow(message) {
let pinTime
if (message.type === constants.MESSAGE_TYPE_MEMBER) {
pinTime = 2
} else {
let config = constants.getPriceConfig(message.price)
pinTime = config.pinTime
}
let pinTime = this.getPinTime(message)
return (new Date() - message.addTime) / (60 * 1000) < pinTime
},
getBgColor(message) {
let color1, color2, pinTime
let color1, color2
if (message.type === constants.MESSAGE_TYPE_MEMBER) {
color1 = 'rgba(15,157,88,1)'
color2 = 'rgba(11,128,67,1)'
pinTime = 2
} else {
let config = constants.getPriceConfig(message.type === constants.MESSAGE_TYPE_MEMBER ? 28 : message.price)
let config = constants.getPriceConfig(message.price)
color1 = config.colors.contentBg
color2 = config.colors.headerBg
pinTime = config.pinTime
}
let pinTime = this.getPinTime(message)
let progress = (1 - (this.curTime - message.addTime) / (60 * 1000) / pinTime) * 100
if (progress < 0) {
progress = 0
@ -129,18 +133,19 @@ export default {
}
return 'CN¥' + formatCurrency(message.price)
},
getPinTime(message) {
if (message.type === constants.MESSAGE_TYPE_MEMBER) {
return 2
}
return constants.getPriceConfig(message.price).pinTime
},
updateProgress() {
this.curTime = new Date()
for (let i = 0; i < this.messages.length;) {
let pinTime
if (this.messages[i].type === constants.MESSAGE_TYPE_MEMBER) {
pinTime = 2
} else {
let config = constants.getPriceConfig(this.messages[i].price)
pinTime = config.pinTime
}
if ((this.curTime - this.messages[i].addTime) / (60 * 1000) >= pinTime) {
if (this.pinnedMessage == this.messages[i]) {
let message = this.messages[i]
let pinTime = this.getPinTime(message)
if ((this.curTime - message.addTime) / (60 * 1000) >= pinTime) {
if (this.pinnedMessage == message) {
this.pinnedMessage = null
}
this.messages.splice(i, 1)

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

@ -2,9 +2,7 @@
<yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps
@mousemove="refreshCantScrollStartTime"
>
<ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages" :showGiftName="showGiftName"
:hidden="paidMessages.length === 0"
></ticker>
<ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages" :showGiftName="showGiftName"></ticker>
<yt-live-chat-item-list-renderer class="style-scope yt-live-chat-renderer" allow-scroll>
<div ref="scroller" id="item-scroller" class="style-scope yt-live-chat-item-list-renderer animated" @scroll="onScroll">
<div ref="itemOffset" id="item-offset" class="style-scope yt-live-chat-item-list-renderer" style="height: 0px;">