mirror of
https://github.com/xfgryujk/blivechat.git
synced 2025-02-06 17:50:43 +08:00
添加SC贴纸
This commit is contained in:
John Smith
parent
833c366707
commit
46baa83458
2
blivedm
2
blivedm
@ -1 +1 @@
|
||||
Subproject commit 0d63944da4558981cd55c1fdbfb11b97837780ff
|
||||
Subproject commit 003d89e9765d1deed8ccbe78755df837541e6295
|
||||
@ -32,66 +32,7 @@
|
||||
|
||||
<script>
|
||||
import ImgShadow from './ImgShadow.vue'
|
||||
|
||||
const COLORS = [
|
||||
{ // $100红
|
||||
price: 1245, // >= 1245，小电视飞船
|
||||
contentBg: 'rgba(230,33,23,1)',
|
||||
headerBg: 'rgba(208,0,0,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
}, { // $50品红
|
||||
price: 450, // 450~1245，摩天大楼
|
||||
contentBg: 'rgba(233,30,99,1)',
|
||||
headerBg: 'rgba(194,24,91,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
}, { // $20橙
|
||||
price: 100, // 100~450，节奏风暴、天空之翼
|
||||
contentBg: 'rgba(245,124,0,1)',
|
||||
headerBg: 'rgba(230,81,0,1)',
|
||||
header: 'rgba(255,255,255,0.87451)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,0.87451)'
|
||||
}, { // $10黄
|
||||
price: 52, // 52~100，疯狂打call
|
||||
contentBg: 'rgba(255,202,40,1)',
|
||||
headerBg: 'rgba(255,179,0,1)',
|
||||
header: 'rgba(0,0,0,0.87451)',
|
||||
authorName: 'rgba(0,0,0,0.541176)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,0.87451)'
|
||||
}, { // $5绿
|
||||
price: 28, // 28~52，礼花
|
||||
contentBg: 'rgba(29,233,182,1)',
|
||||
headerBg: 'rgba(0,191,165,1)',
|
||||
header: 'rgba(0,0,0,1)',
|
||||
authorName: 'rgba(0,0,0,0.541176)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,1)'
|
||||
}, { // $2浅蓝
|
||||
price: 9.9, // 9.9~28，B坷垃
|
||||
contentBg: 'rgba(0,229,255,1)',
|
||||
headerBg: 'rgba(0,184,212,1)',
|
||||
header: 'rgba(0,0,0,1)',
|
||||
authorName: 'rgba(0,0,0,0.701961)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,1)'
|
||||
}, { // $1蓝
|
||||
price: 0, // 0~9.9，丢人
|
||||
contentBg: 'rgba(30,136,229,1)',
|
||||
headerBg: 'rgba(21,101,192,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
}
|
||||
]
|
||||
import * as constants from './constants'
|
||||
|
||||
export default {
|
||||
name: 'PaidMessage',
|
||||
@ -101,18 +42,13 @@ export default {
|
||||
props: {
|
||||
avatarUrl: String,
|
||||
authorName: String,
|
||||
price: Number, // 价格，人民币,
|
||||
price: Number, // 价格，人民币
|
||||
time: String,
|
||||
content: String
|
||||
},
|
||||
computed: {
|
||||
color() {
|
||||
for (const color of COLORS) {
|
||||
if (this.price >= color.price) {
|
||||
return color
|
||||
}
|
||||
}
|
||||
return COLORS[COLORS.length - 1]
|
||||
return constants.getPriceConfig(this.price).colors
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
241
frontend/src/components/ChatRenderer/Ticker.vue
Normal file
241
frontend/src/components/ChatRenderer/Ticker.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<yt-live-chat-ticker-renderer>
|
||||
<div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
|
||||
<div id="items" class="style-scope yt-live-chat-ticker-renderer">
|
||||
<yt-live-chat-ticker-paid-message-item-renderer v-for="message in messages" :key="message.id"
|
||||
tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</yt-live-chat-ticker-paid-message-item-renderer>
|
||||
</div>
|
||||
</div>
|
||||
</yt-live-chat-ticker-renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ImgShadow from './ImgShadow.vue'
|
||||
import * as constants from './constants'
|
||||
|
||||
export default {
|
||||
name: 'Ticker',
|
||||
components: {
|
||||
ImgShadow,
|
||||
},
|
||||
props: {
|
||||
messages: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
updateTimerId: window.setInterval(this.updateProgress.bind(this), 1000)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.clearInterval(this.updateTimerId)
|
||||
},
|
||||
methods: {
|
||||
getBgColor(message) {
|
||||
let config = constants.getPriceConfig(message.type === constants.MESSAGE_TYPE_MEMBER ? 28 : message.price)
|
||||
let color1 = config.colors.contentBg
|
||||
let color2 = config.colors.headerBg
|
||||
let progress = (1 - (new Date() - message.addTime) / (60 * 1000) / config.pinTime) * 100
|
||||
if (progress < 0) {
|
||||
progress = 0
|
||||
} else if (progress > 100) {
|
||||
progress = 100
|
||||
}
|
||||
return `linear-gradient(90deg, ${color1}, ${color1} ${progress}%, ${color2} ${progress}%, ${color2})`
|
||||
},
|
||||
getColor(message) {
|
||||
if (message.type === constants.MESSAGE_TYPE_MEMBER) {
|
||||
return 'rgb(0, 0, 0)'
|
||||
}
|
||||
return constants.getPriceConfig(message.price).colors.header
|
||||
},
|
||||
getText(message) {
|
||||
if (message.type === constants.MESSAGE_TYPE_MEMBER) {
|
||||
return '会员'
|
||||
}
|
||||
return `CN¥${message.price}`
|
||||
},
|
||||
updateProgress() {
|
||||
let curTime = new Date()
|
||||
for (let i = 0; i < this.messages.length;) {
|
||||
let config = constants.getPriceConfig(this.messages[i].type === constants.MESSAGE_TYPE_MEMBER ? 28 : this.messages[i].price)
|
||||
if ((curTime - this.messages[i].addTime) / (60 * 1000) >= config.pinTime) {
|
||||
this.messages.splice(i, 1)
|
||||
} else {
|
||||
i++
|
||||
}
|
||||
}
|
||||
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- yt-live-chat-ticker-renderer -->
|
||||
<style>
|
||||
canvas.yt-live-chat-ticker-renderer, caption.yt-live-chat-ticker-renderer, center.yt-live-chat-ticker-renderer, cite.yt-live-chat-ticker-renderer, code.yt-live-chat-ticker-renderer, dd.yt-live-chat-ticker-renderer, del.yt-live-chat-ticker-renderer, dfn.yt-live-chat-ticker-renderer, div.yt-live-chat-ticker-renderer, dl.yt-live-chat-ticker-renderer, dt.yt-live-chat-ticker-renderer, em.yt-live-chat-ticker-renderer, embed.yt-live-chat-ticker-renderer, fieldset.yt-live-chat-ticker-renderer, font.yt-live-chat-ticker-renderer, form.yt-live-chat-ticker-renderer, h1.yt-live-chat-ticker-renderer, h2.yt-live-chat-ticker-renderer, h3.yt-live-chat-ticker-renderer, h4.yt-live-chat-ticker-renderer, h5.yt-live-chat-ticker-renderer, h6.yt-live-chat-ticker-renderer, hr.yt-live-chat-ticker-renderer, i.yt-live-chat-ticker-renderer, iframe.yt-live-chat-ticker-renderer, img.yt-live-chat-ticker-renderer, ins.yt-live-chat-ticker-renderer, kbd.yt-live-chat-ticker-renderer, label.yt-live-chat-ticker-renderer, legend.yt-live-chat-ticker-renderer, li.yt-live-chat-ticker-renderer, menu.yt-live-chat-ticker-renderer, object.yt-live-chat-ticker-renderer, ol.yt-live-chat-ticker-renderer, p.yt-live-chat-ticker-renderer, pre.yt-live-chat-ticker-renderer, q.yt-live-chat-ticker-renderer, s.yt-live-chat-ticker-renderer, samp.yt-live-chat-ticker-renderer, small.yt-live-chat-ticker-renderer, span.yt-live-chat-ticker-renderer, strike.yt-live-chat-ticker-renderer, strong.yt-live-chat-ticker-renderer, sub.yt-live-chat-ticker-renderer, sup.yt-live-chat-ticker-renderer, table.yt-live-chat-ticker-renderer, tbody.yt-live-chat-ticker-renderer, td.yt-live-chat-ticker-renderer, tfoot.yt-live-chat-ticker-renderer, th.yt-live-chat-ticker-renderer, thead.yt-live-chat-ticker-renderer, tr.yt-live-chat-ticker-renderer, tt.yt-live-chat-ticker-renderer, u.yt-live-chat-ticker-renderer, ul.yt-live-chat-ticker-renderer, var.yt-live-chat-ticker-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-ticker-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-renderer {
|
||||
display: block;
|
||||
background-color: var(--yt-live-chat-header-background-color);
|
||||
}
|
||||
|
||||
#container.yt-live-chat-ticker-renderer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#items.yt-live-chat-ticker-renderer {
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0 24px 8px 24px;
|
||||
}
|
||||
|
||||
#items.yt-live-chat-ticker-renderer>*.yt-live-chat-ticker-renderer {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#left-arrow-container.yt-live-chat-ticker-renderer {
|
||||
background: linear-gradient(to right, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
|
||||
left: 0;
|
||||
padding: 0 16px 0 12px;
|
||||
}
|
||||
|
||||
#right-arrow-container.yt-live-chat-ticker-renderer {
|
||||
background: linear-gradient(to left, var(--yt-live-chat-ticker-arrow-background) 0, var(--yt-live-chat-ticker-arrow-background) 52px, transparent 60px);
|
||||
right: 0;
|
||||
padding: 0 12px 0 16px;
|
||||
}
|
||||
|
||||
#container.yt-live-chat-ticker-renderer:hover #left-arrow-container.yt-live-chat-ticker-renderer, #container.yt-live-chat-ticker-renderer:hover #right-arrow-container.yt-live-chat-ticker-renderer {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#left-arrow-container.yt-live-chat-ticker-renderer, #right-arrow-container.yt-live-chat-ticker-renderer {
|
||||
height: 32px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
transition: opacity 0.3s 0.1s;
|
||||
}
|
||||
|
||||
yt-icon.yt-live-chat-ticker-renderer {
|
||||
background-color: #2196f3;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
padding: 4px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- yt-live-chat-ticker-paid-message-item-renderer -->
|
||||
<style>
|
||||
canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
canvas.yt-live-chat-ticker-paid-message-item-renderer, caption.yt-live-chat-ticker-paid-message-item-renderer, center.yt-live-chat-ticker-paid-message-item-renderer, cite.yt-live-chat-ticker-paid-message-item-renderer, code.yt-live-chat-ticker-paid-message-item-renderer, dd.yt-live-chat-ticker-paid-message-item-renderer, del.yt-live-chat-ticker-paid-message-item-renderer, dfn.yt-live-chat-ticker-paid-message-item-renderer, div.yt-live-chat-ticker-paid-message-item-renderer, dl.yt-live-chat-ticker-paid-message-item-renderer, dt.yt-live-chat-ticker-paid-message-item-renderer, em.yt-live-chat-ticker-paid-message-item-renderer, embed.yt-live-chat-ticker-paid-message-item-renderer, fieldset.yt-live-chat-ticker-paid-message-item-renderer, font.yt-live-chat-ticker-paid-message-item-renderer, form.yt-live-chat-ticker-paid-message-item-renderer, h1.yt-live-chat-ticker-paid-message-item-renderer, h2.yt-live-chat-ticker-paid-message-item-renderer, h3.yt-live-chat-ticker-paid-message-item-renderer, h4.yt-live-chat-ticker-paid-message-item-renderer, h5.yt-live-chat-ticker-paid-message-item-renderer, h6.yt-live-chat-ticker-paid-message-item-renderer, hr.yt-live-chat-ticker-paid-message-item-renderer, i.yt-live-chat-ticker-paid-message-item-renderer, iframe.yt-live-chat-ticker-paid-message-item-renderer, img.yt-live-chat-ticker-paid-message-item-renderer, ins.yt-live-chat-ticker-paid-message-item-renderer, kbd.yt-live-chat-ticker-paid-message-item-renderer, label.yt-live-chat-ticker-paid-message-item-renderer, legend.yt-live-chat-ticker-paid-message-item-renderer, li.yt-live-chat-ticker-paid-message-item-renderer, menu.yt-live-chat-ticker-paid-message-item-renderer, object.yt-live-chat-ticker-paid-message-item-renderer, ol.yt-live-chat-ticker-paid-message-item-renderer, p.yt-live-chat-ticker-paid-message-item-renderer, pre.yt-live-chat-ticker-paid-message-item-renderer, q.yt-live-chat-ticker-paid-message-item-renderer, s.yt-live-chat-ticker-paid-message-item-renderer, samp.yt-live-chat-ticker-paid-message-item-renderer, small.yt-live-chat-ticker-paid-message-item-renderer, span.yt-live-chat-ticker-paid-message-item-renderer, strike.yt-live-chat-ticker-paid-message-item-renderer, strong.yt-live-chat-ticker-paid-message-item-renderer, sub.yt-live-chat-ticker-paid-message-item-renderer, sup.yt-live-chat-ticker-paid-message-item-renderer, table.yt-live-chat-ticker-paid-message-item-renderer, tbody.yt-live-chat-ticker-paid-message-item-renderer, td.yt-live-chat-ticker-paid-message-item-renderer, tfoot.yt-live-chat-ticker-paid-message-item-renderer, th.yt-live-chat-ticker-paid-message-item-renderer, thead.yt-live-chat-ticker-paid-message-item-renderer, tr.yt-live-chat-ticker-paid-message-item-renderer, tt.yt-live-chat-ticker-paid-message-item-renderer, u.yt-live-chat-ticker-paid-message-item-renderer, ul.yt-live-chat-ticker-paid-message-item-renderer, var.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.yt-live-chat-ticker-paid-message-item-renderer[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: width 0.2s;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#container.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer.sliding-down #container.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
opacity: 0.5;
|
||||
transform: translateY(44px);
|
||||
transition: opacity 0.2s, transform 0.2s cubic-bezier(0.4, 0.0, 1, 1);
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer.collapsing {
|
||||
margin-right: 0;
|
||||
transition: margin-right 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer[dimmed] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
yt-img-shadow.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
margin-right: -4px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#content.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#text.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
margin: 0 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
yt-live-chat-ticker-paid-message-item-renderer[is-deleted] #author-photo.yt-live-chat-ticker-paid-message-item-renderer {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +1,4 @@
|
||||
export const AUTHRO_TYPE_NORMAL = 0
|
||||
export const AUTHRO_TYPE_MEMBER = 1
|
||||
export const AUTHRO_TYPE_ADMIN = 2
|
||||
export const AUTHRO_TYPE_OWNER = 3
|
||||
@ -15,3 +16,103 @@ export const GUARD_LEVEL_TO_TEXT = [
|
||||
'提督',
|
||||
'舰长'
|
||||
]
|
||||
|
||||
export const MESSAGE_TYPE_TEXT = 0
|
||||
export const MESSAGE_TYPE_MEMBER = 1
|
||||
export const MESSAGE_TYPE_GIFT = 2
|
||||
|
||||
export const PRICE_CONFIGS = [
|
||||
{ // $100红
|
||||
price: 1245, // >= 1245，小电视飞船
|
||||
colors: {
|
||||
contentBg: 'rgba(230,33,23,1)',
|
||||
headerBg: 'rgba(208,0,0,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
},
|
||||
pinTime: 60
|
||||
},
|
||||
{ // $50品红
|
||||
price: 450, // 450~1245，摩天大楼
|
||||
colors: {
|
||||
contentBg: 'rgba(233,30,99,1)',
|
||||
headerBg: 'rgba(194,24,91,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
},
|
||||
pinTime: 30
|
||||
},
|
||||
{ // $20橙
|
||||
price: 100, // 100~450，节奏风暴、天空之翼
|
||||
colors: {
|
||||
contentBg: 'rgba(245,124,0,1)',
|
||||
headerBg: 'rgba(230,81,0,1)',
|
||||
header: 'rgba(255,255,255,0.87451)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,0.87451)'
|
||||
},
|
||||
pinTime: 10
|
||||
},
|
||||
{ // $10黄
|
||||
price: 52, // 52~100，疯狂打call
|
||||
colors: {
|
||||
contentBg: 'rgba(255,202,40,1)',
|
||||
headerBg: 'rgba(255,179,0,1)',
|
||||
header: 'rgba(0,0,0,0.87451)',
|
||||
authorName: 'rgba(0,0,0,0.541176)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,0.87451)'
|
||||
},
|
||||
pinTime: 5
|
||||
},
|
||||
{ // $5绿
|
||||
price: 28, // 28~52，礼花
|
||||
colors: {
|
||||
contentBg: 'rgba(29,233,182,1)',
|
||||
headerBg: 'rgba(0,191,165,1)',
|
||||
header: 'rgba(0,0,0,1)',
|
||||
authorName: 'rgba(0,0,0,0.541176)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,1)'
|
||||
},
|
||||
pinTime: 2
|
||||
},
|
||||
{ // $2浅蓝
|
||||
price: 9.9, // 9.9~28，B坷垃
|
||||
colors: {
|
||||
contentBg: 'rgba(0,229,255,1)',
|
||||
headerBg: 'rgba(0,184,212,1)',
|
||||
header: 'rgba(0,0,0,1)',
|
||||
authorName: 'rgba(0,0,0,0.701961)',
|
||||
time: 'rgba(0,0,0,0.501961)',
|
||||
content: 'rgba(0,0,0,1)'
|
||||
},
|
||||
pinTime: 0
|
||||
},
|
||||
{ // $1蓝
|
||||
price: 0, // 0~9.9，丢人
|
||||
colors: {
|
||||
contentBg: 'rgba(30,136,229,1)',
|
||||
headerBg: 'rgba(21,101,192,1)',
|
||||
header: 'rgba(255,255,255,1)',
|
||||
authorName: 'rgba(255,255,255,0.701961)',
|
||||
time: 'rgba(255,255,255,0.501961)',
|
||||
content: 'rgba(255,255,255,1)'
|
||||
},
|
||||
pinTime: 0
|
||||
}
|
||||
]
|
||||
|
||||
export function getPriceConfig (price) {
|
||||
for (const config of PRICE_CONFIGS) {
|
||||
if (price >= config.price) {
|
||||
return config
|
||||
}
|
||||
}
|
||||
return PRICE_CONFIGS[PRICE_CONFIGS.length - 1]
|
||||
}
|
||||
|
||||
@ -1,31 +1,18 @@
|
||||
<template>
|
||||
<yt-live-chat-renderer class="style-scope yt-live-chat-app" style="--scrollbar-width:11px;" hide-timestamps>
|
||||
<!-- <yt-live-chat-ticker-renderer>
|
||||
<yt-live-chat-ticker-paid-message-item-renderer style="background-color: rgba(0,184,212,1);">
|
||||
<div id="content">
|
||||
<span id="fake-avatar"></span>
|
||||
<span>$5.00</span>
|
||||
</div>
|
||||
</yt-live-chat-ticker-paid-message-item-renderer>
|
||||
<yt-live-chat-ticker-paid-message-item-renderer style="background-color: rgba(208,0,0,1);">
|
||||
<div id="content">
|
||||
<span id="fake-avatar"></span>
|
||||
<span>$500.00</span>
|
||||
</div>
|
||||
</yt-live-chat-ticker-paid-message-item-renderer>
|
||||
</yt-live-chat-ticker-renderer> -->
|
||||
<ticker class="style-scope yt-live-chat-renderer" :messages="paidMessages"></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 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"
|
||||
<text-message :key="message.id" v-if="message.type === MESSAGE_TYPE_TEXT"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :time="message.time" :authorName="message.authorName"
|
||||
:authorType="message.authorType" :content="message.content" :privilegeType="message.privilegeType"
|
||||
:repeated="message.repeated"
|
||||
></text-message>
|
||||
<legacy-paid-message :key="message.id" v-else-if="message.type == 1"
|
||||
<legacy-paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_MEMBER"
|
||||
class="style-scope yt-live-chat-item-list-renderer"
|
||||
:avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
|
||||
:time="message.time"
|
||||
@ -44,18 +31,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Ticker from './Ticker.vue'
|
||||
import TextMessage from './TextMessage.vue'
|
||||
import LegacyPaidMessage from './LegacyPaidMessage.vue'
|
||||
import PaidMessage from './PaidMessage.vue'
|
||||
import * as constants from './constants'
|
||||
|
||||
export default {
|
||||
name: 'ChatRenderer',
|
||||
components: {
|
||||
Ticker,
|
||||
TextMessage,
|
||||
LegacyPaidMessage,
|
||||
PaidMessage
|
||||
},
|
||||
props: {
|
||||
paidMessages: Array,
|
||||
messages: Array,
|
||||
css: String
|
||||
},
|
||||
@ -63,6 +54,10 @@ export default {
|
||||
let styleElement = document.createElement('style')
|
||||
document.head.appendChild(styleElement)
|
||||
return {
|
||||
MESSAGE_TYPE_TEXT: constants.MESSAGE_TYPE_TEXT,
|
||||
MESSAGE_TYPE_MEMBER: constants.MESSAGE_TYPE_MEMBER,
|
||||
MESSAGE_TYPE_GIFT: constants.MESSAGE_TYPE_GIFT,
|
||||
|
||||
styleElement,
|
||||
canAutoScroll: true
|
||||
}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<chat-renderer :messages="messages" :css="config.css"></chat-renderer>
|
||||
<chat-renderer :paidMessages="paidMessages" :messages="messages" :css="config.css"></chat-renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/api/config'
|
||||
import ChatRenderer from '@/components/ChatRenderer'
|
||||
import * as constants from '@/components/ChatRenderer/constants'
|
||||
|
||||
const COMMAND_JOIN_ROOM = 0
|
||||
const COMMAND_ADD_TEXT = 1
|
||||
@ -27,7 +28,8 @@ export default {
|
||||
messagesBufferTimerId: null,
|
||||
nextId: 0,
|
||||
messagesBuffer: [], // 暂时不显示的消息，可能会丢弃
|
||||
messages: [] // 正在显示的消息
|
||||
messages: [], // 正在显示的消息
|
||||
paidMessages: []
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
@ -84,7 +86,7 @@ export default {
|
||||
break
|
||||
}
|
||||
message = {
|
||||
type: 0, // TextMessage
|
||||
type: constants.MESSAGE_TYPE_TEXT,
|
||||
avatarUrl: data.avatarUrl,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: data.authorName,
|
||||
@ -102,7 +104,7 @@ export default {
|
||||
if (price < this.config.minGiftPrice) // 丢人
|
||||
break
|
||||
message = {
|
||||
type: 2, // PaidMessage
|
||||
type: constants.MESSAGE_TYPE_GIFT,
|
||||
avatarUrl: data.avatarUrl,
|
||||
authorName: data.authorName,
|
||||
price: price,
|
||||
@ -116,7 +118,7 @@ export default {
|
||||
break
|
||||
}
|
||||
message = {
|
||||
type: 1, // LegacyPaidMessage
|
||||
type: constants.MESSAGE_TYPE_MEMBER,
|
||||
avatarUrl: data.avatarUrl,
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: data.authorName,
|
||||
@ -180,7 +182,11 @@ export default {
|
||||
},
|
||||
addMessageShow(message) {
|
||||
message.id = this.nextId++
|
||||
message.addTime = new Date()
|
||||
this.messages.push(message)
|
||||
if (message.type !== constants.MESSAGE_TYPE_TEXT) {
|
||||
this.paidMessages.unshift(message)
|
||||
}
|
||||
// 防止同时添加和删除项目时所有的项目重新渲染 https://github.com/vuejs/vue/issues/6857
|
||||
this.$nextTick(() => {
|
||||
if (this.messages.length > 50) {
|
||||
@ -190,9 +196,15 @@ export default {
|
||||
},
|
||||
handleMessagesBuffer() {
|
||||
// 3秒内未发出则丢弃
|
||||
let i
|
||||
let curTime = new Date()
|
||||
while (this.messagesBuffer.length > 0 && curTime - this.messagesBuffer[0].addTime > 3 * 1000) {
|
||||
this.messagesBuffer.shift()
|
||||
for (i = 0; i < this.messagesBuffer.length; i++) {
|
||||
if (curTime - this.messagesBuffer[i].addTime <= 3 * 1000) {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (i > 0) {
|
||||
this.messages.splice(0, Math.min(i, this.messagesBuffer.length))
|
||||
}
|
||||
if (this.messagesBuffer.length <= 0) {
|
||||
return
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
<el-col :span="12">
|
||||
<div id="example-container">
|
||||
<div id="fakebody">
|
||||
<chat-renderer :messages="messages" :css="exampleCss"></chat-renderer>
|
||||
<chat-renderer :paidMessages="examplePaidMessages" :messages="messages" :css="exampleCss"></chat-renderer>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -208,18 +208,20 @@ import * as constants from '@/components/ChatRenderer/constants'
|
||||
let time = new Date()
|
||||
let textMessageTemplate = {
|
||||
id: 0,
|
||||
type: 0, // TextMessage
|
||||
addTime: time,
|
||||
type: constants.MESSAGE_TYPE_TEXT,
|
||||
avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: '',
|
||||
authorType: 0,
|
||||
authorType: constants.AUTHRO_TYPE_NORMAL,
|
||||
content: '',
|
||||
privilegeType: 0,
|
||||
repeated: 1
|
||||
}
|
||||
let legacyPaidMessageTemplate = {
|
||||
id: 0,
|
||||
type: 1, // LegacyPaidMessage
|
||||
addTime: time,
|
||||
type: constants.MESSAGE_TYPE_MEMBER,
|
||||
avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
|
||||
time: `${time.getMinutes()}:${time.getSeconds()}`,
|
||||
authorName: '',
|
||||
@ -228,7 +230,8 @@ let legacyPaidMessageTemplate = {
|
||||
}
|
||||
let paidMessageTemplate = {
|
||||
id: 0,
|
||||
type: 2, // PaidMessage
|
||||
addTime: time,
|
||||
type: constants.MESSAGE_TYPE_GIFT,
|
||||
avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
|
||||
authorName: '',
|
||||
price: 0,
|
||||
@ -282,6 +285,12 @@ const EXAMPLE_MESSAGES = [
|
||||
content: 'Sent 礼花x1'
|
||||
}
|
||||
]
|
||||
let examplePaidMessages = []
|
||||
for (let message of EXAMPLE_MESSAGES) {
|
||||
if (message.type !== constants.MESSAGE_TYPE_TEXT) {
|
||||
examplePaidMessages.push(message)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'StyleGenerator',
|
||||
@ -296,7 +305,8 @@ export default {
|
||||
form: {...config},
|
||||
result,
|
||||
exampleCss: result.replace(/^body\b/gm, '#fakebody'),
|
||||
messages: EXAMPLE_MESSAGES
|
||||
messages: EXAMPLE_MESSAGES,
|
||||
examplePaidMessages
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user