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

防止前端弹幕卡住

Browse Source
This commit is contained in:
John Smith 2020-02-04 20:13:11 +08:00
parent 0cf49ee042
commit b7e06652b4
1 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,10 @@
<template>
<yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps>
<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" :hidden="paidMessages.length === 0"></ticker>
<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" @scroll="onScroll">
<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;">
<div ref="items" id="items" class="style-scope yt-live-chat-item-list-renderer" style="overflow: hidden"
:style="{transform: `translateY(${Math.floor(scrollPixelsRemaining)}px)`}"
@ -86,7 +88,8 @@ export default {
smoothScrollRafHandle: null, // 平滑滚动requestAnimationFrame句柄
lastSmoothScrollUpdate: null, // 平滑滚动上一帧时间
atBottom: true // 滚动到底部，用来判断能否自动滚动
atBottom: true, // 滚动到底部，用来判断能否自动滚动
cantScrollStartTime: null // 开始不能自动滚动的时间，用来防止卡住
}
},
computed: {
@ -336,7 +339,7 @@ export default {
if (this.messagesBuffer.length <= 0) {
return
}
if (!this.canScrollToBottom) {
if (!this.canScrollToBottomOrTimedOut()) {
if (this.messagesBuffer.length > this.maxNumber) {
// 未显示消息数 > 最大可显示数，丢弃
this.messagesBuffer.splice(0, this.messagesBuffer.length - this.maxNumber)
@ -362,7 +365,7 @@ export default {
showNewMessages() {
let hasScrollBar = this.$refs.items.clientHeight > this.$refs.scroller.clientHeight
this.$refs.itemOffset.style.height = `${this.$refs.items.clientHeight}px`
if (!this.canScrollToBottom || !hasScrollBar) {
if (!this.canScrollToBottomOrTimedOut() || !hasScrollBar) {
return
}
@ -436,18 +439,43 @@ export default {
this.maybeScrollToBottom()
},
maybeScrollToBottom() {
if (this.canScrollToBottom) {
if (this.canScrollToBottomOrTimedOut()) {
this.scrollToBottom()
}
},
scrollToBottom() {
this.$refs.scroller.scrollTop = Math.pow(2, 24)
this.atBottom = true
if (this.canScrollToBottom) {
this.cantScrollStartTime = null
}
},
onScroll() {
this.refreshCantScrollStartTime()
let scroller = this.$refs.scroller
this.atBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight < SCROLLED_TO_BOTTOM_EPSILON
if (this.canScrollToBottom) {
this.cantScrollStartTime = null
}
this.flushMessagesBuffer()
},
canScrollToBottomOrTimedOut() {
if (this.canScrollToBottom) {
this.cantScrollStartTime = null
return true
}
// 防止在OBS中卡住，超过一定时间也可以自动滚动
if (!this.cantScrollStartTime) {
this.cantScrollStartTime = new Date()
return false
}
return new Date() - this.cantScrollStartTime >= 10 * 1000
},
refreshCantScrollStartTime() {
// 有鼠标事件时刷新，防止用户看弹幕时自动滚动
if (this.cantScrollStartTime) {
this.cantScrollStartTime = new Date()
}
}
}
}