mirror of
https://github.com/xfgryujk/blivechat.git
synced 2025-02-06 17:50:43 +08:00
修改样式
This commit is contained in:
John Smith
parent
49d58a9a60
commit
a89b64b454
@ -71,7 +71,7 @@ class Room(blivedm.BLiveClient):
|
|||||||
def __parse_buy_guard(self, command):
|
def __parse_buy_guard(self, command):
|
||||||
data = command['data']
|
data = command['data']
|
||||||
return self._on_buy_guard(blivedm.GuardBuyMessage(
|
return self._on_buy_guard(blivedm.GuardBuyMessage(
|
||||||
data['uid'], data['username'], None, None, None,
|
data['uid'], data['username'], data['guard_level'], None, None,
|
||||||
None, None, data['start_time'], None
|
None, None, data['start_time'], None
|
||||||
))
|
))
|
||||||
|
|
||||||
@ -206,7 +206,8 @@ class Room(blivedm.BLiveClient):
|
|||||||
'id': id_,
|
'id': id_,
|
||||||
'avatarUrl': await models.avatar.get_avatar_url(message.uid),
|
'avatarUrl': await models.avatar.get_avatar_url(message.uid),
|
||||||
'timestamp': message.start_time,
|
'timestamp': message.start_time,
|
||||||
'authorName': message.username
|
'authorName': message.username,
|
||||||
|
'privilegeType': message.guard_level
|
||||||
})
|
})
|
||||||
|
|
||||||
async def _on_super_chat(self, message: blivedm.SuperChatMessage):
|
async def _on_super_chat(self, message: blivedm.SuperChatMessage):
|
||||||
@ -427,7 +428,8 @@ class ChatHandler(tornado.websocket.WebSocketHandler):
|
|||||||
]
|
]
|
||||||
member_data = {
|
member_data = {
|
||||||
**base_data,
|
**base_data,
|
||||||
'id': uuid.uuid4().hex
|
'id': uuid.uuid4().hex,
|
||||||
|
'privilegeType': 3
|
||||||
}
|
}
|
||||||
gift_data = {
|
gift_data = {
|
||||||
**base_data,
|
**base_data,
|
||||||
|
|||||||
@ -1,306 +0,0 @@
|
|||||||
<template>
|
|
||||||
<yt-live-chat-legacy-paid-message-renderer class="style-scope yt-live-chat-item-list-renderer">
|
|
||||||
<div id="card" class="style-scope yt-live-chat-legacy-paid-message-renderer">
|
|
||||||
<img-shadow id="author-photo" height="40" width="40" class="style-scope yt-live-chat-legacy-paid-message-renderer"
|
|
||||||
:imgUrl="avatarUrl"
|
|
||||||
></img-shadow>
|
|
||||||
<div id="content" class="style-scope yt-live-chat-legacy-paid-message-renderer">
|
|
||||||
<div id="content-primary-column" class="style-scope yt-live-chat-legacy-paid-message-renderer">
|
|
||||||
<div id="author-name" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{authorName}}</div>
|
|
||||||
<div id="event-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{title}}</div>
|
|
||||||
<div id="detail-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{content}}</div>
|
|
||||||
</div>
|
|
||||||
<div id="timestamp" class="style-scope yt-live-chat-legacy-paid-message-renderer">{{timeText}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="inline-action-button-container" class="style-scope yt-live-chat-legacy-paid-message-renderer" aria-hidden="true">
|
|
||||||
<div id="inline-action-buttons" class="style-scope yt-live-chat-legacy-paid-message-renderer"></div>
|
|
||||||
</div>
|
|
||||||
</yt-live-chat-legacy-paid-message-renderer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import ImgShadow from './ImgShadow.vue'
|
|
||||||
import * as utils from '@/utils'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'LegacyPaidMessage',
|
|
||||||
components: {
|
|
||||||
ImgShadow
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
avatarUrl: String,
|
|
||||||
authorName: String,
|
|
||||||
title: String,
|
|
||||||
content: String,
|
|
||||||
time: Date
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
timeText() {
|
|
||||||
return utils.getTimeTextMinSec(this.time)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- yt-live-chat-legacy-paid-message-renderer -->
|
|
||||||
<style>
|
|
||||||
canvas.yt-live-chat-legacy-paid-message-renderer, caption.yt-live-chat-legacy-paid-message-renderer, center.yt-live-chat-legacy-paid-message-renderer, cite.yt-live-chat-legacy-paid-message-renderer, code.yt-live-chat-legacy-paid-message-renderer, dd.yt-live-chat-legacy-paid-message-renderer, del.yt-live-chat-legacy-paid-message-renderer, dfn.yt-live-chat-legacy-paid-message-renderer, div.yt-live-chat-legacy-paid-message-renderer, dl.yt-live-chat-legacy-paid-message-renderer, dt.yt-live-chat-legacy-paid-message-renderer, em.yt-live-chat-legacy-paid-message-renderer, embed.yt-live-chat-legacy-paid-message-renderer, fieldset.yt-live-chat-legacy-paid-message-renderer, font.yt-live-chat-legacy-paid-message-renderer, form.yt-live-chat-legacy-paid-message-renderer, h1.yt-live-chat-legacy-paid-message-renderer, h2.yt-live-chat-legacy-paid-message-renderer, h3.yt-live-chat-legacy-paid-message-renderer, h4.yt-live-chat-legacy-paid-message-renderer, h5.yt-live-chat-legacy-paid-message-renderer, h6.yt-live-chat-legacy-paid-message-renderer, hr.yt-live-chat-legacy-paid-message-renderer, i.yt-live-chat-legacy-paid-message-renderer, iframe.yt-live-chat-legacy-paid-message-renderer, img.yt-live-chat-legacy-paid-message-renderer, ins.yt-live-chat-legacy-paid-message-renderer, kbd.yt-live-chat-legacy-paid-message-renderer, label.yt-live-chat-legacy-paid-message-renderer, legend.yt-live-chat-legacy-paid-message-renderer, li.yt-live-chat-legacy-paid-message-renderer, menu.yt-live-chat-legacy-paid-message-renderer, object.yt-live-chat-legacy-paid-message-renderer, ol.yt-live-chat-legacy-paid-message-renderer, p.yt-live-chat-legacy-paid-message-renderer, pre.yt-live-chat-legacy-paid-message-renderer, q.yt-live-chat-legacy-paid-message-renderer, s.yt-live-chat-legacy-paid-message-renderer, samp.yt-live-chat-legacy-paid-message-renderer, small.yt-live-chat-legacy-paid-message-renderer, span.yt-live-chat-legacy-paid-message-renderer, strike.yt-live-chat-legacy-paid-message-renderer, strong.yt-live-chat-legacy-paid-message-renderer, sub.yt-live-chat-legacy-paid-message-renderer, sup.yt-live-chat-legacy-paid-message-renderer, table.yt-live-chat-legacy-paid-message-renderer, tbody.yt-live-chat-legacy-paid-message-renderer, td.yt-live-chat-legacy-paid-message-renderer, tfoot.yt-live-chat-legacy-paid-message-renderer, th.yt-live-chat-legacy-paid-message-renderer, thead.yt-live-chat-legacy-paid-message-renderer, tr.yt-live-chat-legacy-paid-message-renderer, tt.yt-live-chat-legacy-paid-message-renderer, u.yt-live-chat-legacy-paid-message-renderer, ul.yt-live-chat-legacy-paid-message-renderer, var.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yt-live-chat-legacy-paid-message-renderer[hidden] {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timestamp.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: var(--yt-live-chat-item-timestamp-display, inline);
|
|
||||||
margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
|
|
||||||
color: var(--yt-live-chat-tertiary-text-color);
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#author-photo.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: block;
|
|
||||||
margin-right: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 50%;
|
|
||||||
-ms-flex: none;
|
|
||||||
-webkit-flex: none;
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-button.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translateX(100px);
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer:hover #menu.yt-live-chat-legacy-paid-message-renderer, yt-live-chat-legacy-paid-message-renderer[menu-visible] #menu.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer:focus-within #menu.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inline-action-button-container.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
position: absolute;
|
|
||||||
top: -4px;
|
|
||||||
right: 0;
|
|
||||||
bottom: -4px;
|
|
||||||
left: 0;
|
|
||||||
background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
|
|
||||||
display: none;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
align-items: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: flex;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
display: var(--yt-live-chat-inline-action-button-container-display, none);
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
|
|
||||||
}
|
|
||||||
|
|
||||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer, #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
--yt-button-icon-size: 36px;
|
|
||||||
--yt-button-icon-padding: 6px;
|
|
||||||
color: hsl(0, 0%, 100%);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
background: hsla(0, 0%, 6.7%, .8);
|
|
||||||
}
|
|
||||||
|
|
||||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>.yt-live-chat-legacy-paid-message-renderer:hover {
|
|
||||||
background: hsl(0, 0%, 6.7%);
|
|
||||||
}
|
|
||||||
|
|
||||||
#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
color: var(--yt-live-chat-additional-inline-action-button-color);
|
|
||||||
background: var(--yt-live-chat-additional-inline-action-button-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>.yt-live-chat-legacy-paid-message-renderer:hover {
|
|
||||||
background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
#additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer:not(:empty) {
|
|
||||||
margin-left: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer:not(:first-child), #additional-inline-action-buttons.yt-live-chat-legacy-paid-message-renderer>*.yt-live-chat-legacy-paid-message-renderer:not(:first-child) {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
--yt-live-chat-sponsor-color: #0f9d58;
|
|
||||||
--yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
|
|
||||||
padding: 4px 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#card.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
position: relative;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background-color: var(--yt-live-chat-sponsor-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
min-height: 40px;
|
|
||||||
display: flex;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
align-items: center;
|
|
||||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #card.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
background-color: var(--yt-live-chat-background-color);
|
|
||||||
color: rgba(0, 0, 0, 0.87);
|
|
||||||
}
|
|
||||||
|
|
||||||
#author-photo.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
-ms-align-self: flex-start;
|
|
||||||
-webkit-align-self: flex-start;
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
#author-name.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #author-name.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: block;
|
|
||||||
margin-right: 8px;
|
|
||||||
color: var(--yt-live-chat-secondary-text-color);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
-ms-flex: 1 1 0.000000001px;
|
|
||||||
-webkit-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
-webkit-flex-basis: 0.000000001px;
|
|
||||||
flex-basis: 0.000000001px;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #content.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: flex;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
-webkit-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #content-primary-column.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: flex;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-ms-flex-align: baseline;
|
|
||||||
-webkit-align-items: baseline;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#event-text.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #event-text.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: inline;
|
|
||||||
height: 24px;
|
|
||||||
min-width: 16px;
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-right: 8px;
|
|
||||||
padding: 0 12px;
|
|
||||||
background-color: var(--yt-live-chat-sponsor-color);
|
|
||||||
color: hsl(0, 0%, 100%);
|
|
||||||
display: inline-flex;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
align-items: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#detail-text.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
font-size: 15px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
#detail-text.yt-live-chat-legacy-paid-message-renderer .emoji.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
width: var(--yt-live-chat-emoji-size);
|
|
||||||
height: var(--yt-live-chat-emoji-size);
|
|
||||||
margin: -1px 2px 1px 2px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #detail-text.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
display: inline;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#detail-text.yt-live-chat-legacy-paid-message-renderer a.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
#detail-text.yt-live-chat-legacy-paid-message-renderer a.yt-live-chat-legacy-paid-message-renderer .mention.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%);
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer[dashboard-money-feed] #menu.yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
margin-top: 8px;
|
|
||||||
background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
421
frontend/src/components/ChatRenderer/MembershipItem.vue
Normal file
421
frontend/src/components/ChatRenderer/MembershipItem.vue
Normal file
@ -0,0 +1,421 @@
|
|||||||
|
<template>
|
||||||
|
<yt-live-chat-membership-item-renderer class="style-scope yt-live-chat-item-list-renderer" show-only-header>
|
||||||
|
<div id="card" class="style-scope yt-live-chat-membership-item-renderer">
|
||||||
|
<div id="header" class="style-scope yt-live-chat-membership-item-renderer">
|
||||||
|
<img-shadow id="author-photo" height="40" width="40" class="style-scope yt-live-chat-membership-item-renderer"
|
||||||
|
:imgUrl="avatarUrl"
|
||||||
|
></img-shadow>
|
||||||
|
<div id="header-content" class="style-scope yt-live-chat-membership-item-renderer">
|
||||||
|
<div id="header-content-primary-column" class="style-scope yt-live-chat-membership-item-renderer">
|
||||||
|
<div id="header-content-inner-column" class="style-scope yt-live-chat-membership-item-renderer">
|
||||||
|
<yt-live-chat-author-chip class="style-scope yt-live-chat-membership-item-renderer">
|
||||||
|
<span id="author-name" dir="auto" class="member style-scope yt-live-chat-author-chip">{{
|
||||||
|
authorName
|
||||||
|
}}<!-- 这里是已验证勋章 -->
|
||||||
|
<span id="chip-badges" class="style-scope yt-live-chat-author-chip"></span>
|
||||||
|
</span>
|
||||||
|
<span id="chat-badges" class="style-scope yt-live-chat-author-chip">
|
||||||
|
<author-badge class="style-scope yt-live-chat-author-chip"
|
||||||
|
:isAdmin="false" :privilegeType="privilegeType"
|
||||||
|
></author-badge>
|
||||||
|
</span>
|
||||||
|
</yt-live-chat-author-chip>
|
||||||
|
</div>
|
||||||
|
<div id="header-subtext" class="style-scope yt-live-chat-membership-item-renderer">{{title}}</div>
|
||||||
|
</div>
|
||||||
|
<div id="timestamp" class="style-scope yt-live-chat-membership-item-renderer">{{timeText}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</yt-live-chat-membership-item-renderer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ImgShadow from './ImgShadow.vue'
|
||||||
|
import AuthorBadge from './AuthorBadge.vue'
|
||||||
|
import * as utils from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MembershipItem',
|
||||||
|
components: {
|
||||||
|
ImgShadow,
|
||||||
|
AuthorBadge
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
avatarUrl: String,
|
||||||
|
authorName: String,
|
||||||
|
privilegeType: Number,
|
||||||
|
title: String,
|
||||||
|
time: Date
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
timeText() {
|
||||||
|
return utils.getTimeTextHourMin(this.time)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- yt-live-chat-membership-item-renderer -->
|
||||||
|
<style>
|
||||||
|
#timestamp.yt-live-chat-membership-item-renderer {
|
||||||
|
display: var(--yt-live-chat-item-timestamp-display, inline);
|
||||||
|
margin: var(--yt-live-chat-item-timestamp-margin, 0 8px 0 0);
|
||||||
|
color: var(--yt-live-chat-tertiary-text-color);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#author-photo.yt-live-chat-membership-item-renderer {
|
||||||
|
display: block;
|
||||||
|
margin-right: 16px;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
-ms-flex: var(--layout-flex-none_-_-ms-flex);
|
||||||
|
-webkit-flex: var(--layout-flex-none_-_-webkit-flex);
|
||||||
|
flex: var(--layout-flex-none_-_flex);
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-button.yt-live-chat-membership-item-renderer {
|
||||||
|
width: var(--yt-live-chat-32px-icon-button_-_width);
|
||||||
|
height: var(--yt-live-chat-32px-icon-button_-_height);
|
||||||
|
padding: var(--yt-live-chat-32px-icon-button_-_padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu.yt-live-chat-membership-item-renderer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
|
||||||
|
transform: translateX(100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer:hover #menu.yt-live-chat-membership-item-renderer,
|
||||||
|
yt-live-chat-membership-item-renderer[menu-visible] #menu.yt-live-chat-membership-item-renderer {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer:focus-within #menu.yt-live-chat-membership-item-renderer {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inline-action-button-container.yt-live-chat-membership-item-renderer {
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
right: 0;
|
||||||
|
bottom: -4px;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
background-color: var(--yt-live-chat-moderation-mode-hover-background-color);
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
-ms-flex-align: var(--layout-center-center_-_-ms-flex-align);
|
||||||
|
-webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
|
||||||
|
align-items: var(--layout-center-center_-_align-items);
|
||||||
|
-ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
|
||||||
|
-webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
|
||||||
|
justify-content: var(--layout-center-center_-_justify-content);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
|
||||||
|
display: var(--layout-horizontal_-_display);
|
||||||
|
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||||
|
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||||
|
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||||
|
|
||||||
|
|
||||||
|
display: var(--yt-live-chat-inline-action-button-container-display, none);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[has-inline-action-buttons][hide-inline-action-buttons]:hover #inline-action-button-container.yt-live-chat-membership-item-renderer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[has-inline-action-buttons]:hover #menu.yt-live-chat-membership-item-renderer {
|
||||||
|
display: var(--yt-live-chat-item-with-inline-actions-context-menu-display, block);
|
||||||
|
}
|
||||||
|
|
||||||
|
#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer,
|
||||||
|
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
|
||||||
|
--yt-button-icon-size: 36px;
|
||||||
|
--yt-button-icon-padding: 6px;
|
||||||
|
|
||||||
|
color: var(--yt-white);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
|
||||||
|
background: var(--yt-luna-black-opacity-lighten-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#inline-action-buttons.yt-live-chat-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
|
||||||
|
background: var(--yt-luna-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer {
|
||||||
|
color: var(--yt-live-chat-additional-inline-action-button-color);
|
||||||
|
background: var(--yt-live-chat-additional-inline-action-button-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>.yt-live-chat-membership-item-renderer:hover {
|
||||||
|
background: var(--yt-live-chat-additional-inline-action-button-background-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer:not(:empty) {
|
||||||
|
margin-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child),
|
||||||
|
#additional-inline-action-buttons.yt-live-chat-membership-item-renderer>*.yt-live-chat-membership-item-renderer:not(:first-child) {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
--yt-live-chat-sponsor-header-color: #0a8043;
|
||||||
|
--yt-live-chat-sponsor-color: #0f9d58;
|
||||||
|
--yt-live-chat-sponsor-text-color: #fff;
|
||||||
|
--yt-live-chat-item-timestamp-display: var(--yt-live-chat-paid-message-timestamp-display, none);
|
||||||
|
|
||||||
|
padding: 4px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
--yt-live-chat-item-timestamp-display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#card.yt-live-chat-membership-item-renderer {
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
display: var(--layout-vertical_-_display);
|
||||||
|
-ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
|
||||||
|
-webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
|
||||||
|
flex-direction: var(--layout-vertical_-_flex-direction);
|
||||||
|
box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #card.yt-live-chat-membership-item-renderer {
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header.yt-live-chat-membership-item-renderer {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background-color: var(--yt-live-chat-sponsor-header-color);
|
||||||
|
padding: 8px 16px;
|
||||||
|
color: #fff;
|
||||||
|
min-height: 20px;
|
||||||
|
|
||||||
|
display: var(--layout-horizontal_-_display);
|
||||||
|
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||||
|
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||||
|
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||||
|
-ms-flex-align: var(--layout-center_-_-ms-flex-align);
|
||||||
|
-webkit-align-items: var(--layout-center_-_-webkit-align-items);
|
||||||
|
align-items: var(--layout-center_-_align-items);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[show-only-header] #header.yt-live-chat-membership-item-renderer {
|
||||||
|
background-color: var(--yt-live-chat-sponsor-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header.yt-live-chat-membership-item-renderer {
|
||||||
|
color: var(--yt-live-chat-secondary-text-color);
|
||||||
|
background-color: var(--yt-live-chat-background-color);
|
||||||
|
-ms-flex-align: var(--layout-start_-_-ms-flex-align);
|
||||||
|
-webkit-align-items: var(--layout-start_-_-webkit-align-items);
|
||||||
|
align-items: var(--layout-start_-_align-items);
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-content.yt-live-chat-membership-item-renderer {
|
||||||
|
display: var(--layout-horizontal_-_display);
|
||||||
|
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||||
|
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||||
|
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||||
|
-ms-flex-pack: var(--layout-justified_-_-ms-flex-pack);
|
||||||
|
-webkit-justify-content: var(--layout-justified_-_-webkit-justify-content);
|
||||||
|
justify-content: var(--layout-justified_-_justify-content);
|
||||||
|
-ms-flex: var(--layout-flex_-_-ms-flex);
|
||||||
|
-webkit-flex: var(--layout-flex_-_-webkit-flex);
|
||||||
|
flex: var(--layout-flex_-_flex);
|
||||||
|
-webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis);
|
||||||
|
flex-basis: var(--layout-flex_-_flex-basis);
|
||||||
|
-ms-flex-align: var(--layout-baseline_-_-ms-flex-align);
|
||||||
|
-webkit-align-items: var(--layout-baseline_-_-webkit-align-items);
|
||||||
|
align-items: var(--layout-baseline_-_align-items);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content.yt-live-chat-membership-item-renderer {
|
||||||
|
display: var(--layout-vertical_-_display);
|
||||||
|
-ms-flex-direction: var(--layout-vertical_-_-ms-flex-direction);
|
||||||
|
-webkit-flex-direction: var(--layout-vertical_-_-webkit-flex-direction);
|
||||||
|
flex-direction: var(--layout-vertical_-_flex-direction);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-content-inner-column.yt-live-chat-membership-item-renderer {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
|
||||||
|
display: var(--layout-horizontal_-_display);
|
||||||
|
-ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction);
|
||||||
|
-webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction);
|
||||||
|
flex-direction: var(--layout-horizontal_-_flex-direction);
|
||||||
|
-ms-flex-align: var(--layout-center_-_-ms-flex-align);
|
||||||
|
-webkit-align-items: var(--layout-center_-_-webkit-align-items);
|
||||||
|
align-items: var(--layout-center_-_align-items);
|
||||||
|
-ms-flex: var(--layout-flex-none_-_-ms-flex);
|
||||||
|
-webkit-flex: var(--layout-flex-none_-_-webkit-flex);
|
||||||
|
flex: var(--layout-flex-none_-_flex);
|
||||||
|
}
|
||||||
|
|
||||||
|
#author-photo.yt-live-chat-membership-item-renderer {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-icon#author-photo.yt-live-chat-membership-item-renderer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-icon#author-photo.yt-live-chat-membership-item-renderer {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
|
||||||
|
--yt-live-chat-sponsor-color: var(--yt-live-chat-sponsor-text-color);
|
||||||
|
--yt-live-chat-secondary-text-color: var(--yt-live-chat-sponsor-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] yt-live-chat-author-chip.yt-live-chat-membership-item-renderer {
|
||||||
|
margin-right: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
--yt-live-chat-sponsor-color: var(--yt-live-chat-secondary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-subtext.yt-live-chat-membership-item-renderer {
|
||||||
|
margin-top: 2px;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-subtext.yt-live-chat-membership-item-renderer:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-subtext.yt-live-chat-membership-item-renderer {
|
||||||
|
margin: 4px 0 13px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: var(--yt-live-chat-secondary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-primary-text.yt-live-chat-membership-item-renderer {
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-word;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-primary-text.yt-live-chat-membership-item-renderer:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) yt-live-chat-author-chip.yt-live-chat-membership-item-renderer,
|
||||||
|
yt-live-chat-membership-item-renderer[has-primary-header-text]:not([dashboard-money-feed]) #header-subtext.yt-live-chat-membership-item-renderer {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #header-primary-text.yt-live-chat-membership-item-renderer {
|
||||||
|
display: inline;
|
||||||
|
height: 24px;
|
||||||
|
min-width: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-right: 8px;
|
||||||
|
padding: 0 12px;
|
||||||
|
background-color: var(--yt-live-chat-sponsor-color);
|
||||||
|
color: var(--yt-white);
|
||||||
|
display: var(--layout-inline_-_display, inline);
|
||||||
|
-ms-flex-align: var(--layout-center-center_-_-ms-flex-align);
|
||||||
|
-webkit-align-items: var(--layout-center-center_-_-webkit-align-items);
|
||||||
|
align-items: var(--layout-center-center_-_align-items);
|
||||||
|
-ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack);
|
||||||
|
-webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content);
|
||||||
|
justify-content: var(--layout-center-center_-_justify-content);
|
||||||
|
font-size: var(--ytd-badge_-_font-size);
|
||||||
|
font-weight: var(--ytd-badge_-_font-weight);
|
||||||
|
line-height: var(--ytd-badge_-_line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
#content.yt-live-chat-membership-item-renderer {
|
||||||
|
background-color: var(--yt-live-chat-sponsor-color);
|
||||||
|
color: var(--yt-live-chat-sponsor-text-color);
|
||||||
|
padding: 8px 16px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-word;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #content.yt-live-chat-membership-item-renderer {
|
||||||
|
background-color: unset;
|
||||||
|
font-size: unset;
|
||||||
|
color: var(--yt-live-chat-secondary-text-color);
|
||||||
|
padding: 0 0 16px 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content.yt-live-chat-membership-item-renderer img.yt-live-chat-membership-item-renderer {
|
||||||
|
width: var(--yt-live-chat-emoji-size);
|
||||||
|
height: var(--yt-live-chat-emoji-size);
|
||||||
|
|
||||||
|
margin: -1px 2px 1px 2px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[show-only-header] #content.yt-live-chat-membership-item-renderer,
|
||||||
|
#deleted-state.yt-live-chat-membership-item-renderer:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#deleted-state.yt-live-chat-membership-item-renderer {
|
||||||
|
display: block;
|
||||||
|
font-style: italic;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.yt-live-chat-membership-item-renderer {
|
||||||
|
display: inline;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
#message.yt-live-chat-membership-item-renderer a.yt-live-chat-membership-item-renderer .mention.yt-live-chat-membership-item-renderer {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu.yt-live-chat-membership-item-renderer {
|
||||||
|
background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-header-color) 100%);
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[show-only-header] #menu.yt-live-chat-membership-item-renderer {
|
||||||
|
background: linear-gradient(to right, transparent, var(--yt-live-chat-sponsor-color) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
yt-live-chat-membership-item-renderer[dashboard-money-feed] #menu.yt-live-chat-membership-item-renderer {
|
||||||
|
margin-top: 8px;
|
||||||
|
background: linear-gradient(to right, transparent, var(--yt-live-chat-background-color) 40%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -56,7 +56,7 @@ export default {
|
|||||||
return 'CN¥' + utils.formatCurrency(this.price)
|
return 'CN¥' + utils.formatCurrency(this.price)
|
||||||
},
|
},
|
||||||
timeText() {
|
timeText() {
|
||||||
return utils.getTimeTextMinSec(this.time)
|
return utils.getTimeTextHourMin(this.time)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -54,7 +54,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
timeText() {
|
timeText() {
|
||||||
return utils.getTimeTextMinSec(this.time)
|
return utils.getTimeTextHourMin(this.time)
|
||||||
},
|
},
|
||||||
authorTypeText() {
|
authorTypeText() {
|
||||||
return constants.AUTHOR_TYPE_TO_TEXT[this.authorType]
|
return constants.AUTHOR_TYPE_TO_TEXT[this.authorType]
|
||||||
|
|||||||
@ -26,11 +26,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="pinnedMessage">
|
<template v-if="pinnedMessage">
|
||||||
<legacy-paid-message :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
|
<membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
|
||||||
class="style-scope yt-live-chat-ticker-renderer"
|
class="style-scope yt-live-chat-ticker-renderer"
|
||||||
:avatarUrl="pinnedMessage.avatarUrl" :title="pinnedMessage.title" :content="pinnedMessage.content"
|
:avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName" :privilegeType="pinnedMessage.privilegeType"
|
||||||
:time="pinnedMessage.time"
|
:title="pinnedMessage.title" :time="pinnedMessage.time"
|
||||||
></legacy-paid-message>
|
></membership-item>
|
||||||
<paid-message :key="pinnedMessage.id" v-else
|
<paid-message :key="pinnedMessage.id" v-else
|
||||||
class="style-scope yt-live-chat-ticker-renderer"
|
class="style-scope yt-live-chat-ticker-renderer"
|
||||||
:price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName"
|
:price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName"
|
||||||
@ -44,7 +44,7 @@
|
|||||||
import * as config from '@/api/config'
|
import * as config from '@/api/config'
|
||||||
import {formatCurrency} from '@/utils'
|
import {formatCurrency} from '@/utils'
|
||||||
import ImgShadow from './ImgShadow.vue'
|
import ImgShadow from './ImgShadow.vue'
|
||||||
import LegacyPaidMessage from './LegacyPaidMessage.vue'
|
import MembershipItem from './MembershipItem.vue'
|
||||||
import PaidMessage from './PaidMessage.vue'
|
import PaidMessage from './PaidMessage.vue'
|
||||||
import * as constants from './constants'
|
import * as constants from './constants'
|
||||||
|
|
||||||
@ -52,7 +52,7 @@ export default {
|
|||||||
name: 'Ticker',
|
name: 'Ticker',
|
||||||
components: {
|
components: {
|
||||||
ImgShadow,
|
ImgShadow,
|
||||||
LegacyPaidMessage,
|
MembershipItem,
|
||||||
PaidMessage
|
PaidMessage
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -23,11 +23,11 @@
|
|||||||
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
||||||
:time="message.time" :content="getGiftShowContent(message)"
|
:time="message.time" :content="getGiftShowContent(message)"
|
||||||
></paid-message>
|
></paid-message>
|
||||||
<legacy-paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_MEMBER"
|
<membership-item :key="message.id" v-else-if="message.type === MESSAGE_TYPE_MEMBER"
|
||||||
class="style-scope yt-live-chat-item-list-renderer"
|
class="style-scope yt-live-chat-item-list-renderer"
|
||||||
:avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
|
:avatarUrl="message.avatarUrl" :authorName="message.authorName" :privilegeType="message.privilegeType"
|
||||||
:time="message.time"
|
:title="message.title" :time="message.time"
|
||||||
></legacy-paid-message>
|
></membership-item>
|
||||||
<paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_SUPER_CHAT"
|
<paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_SUPER_CHAT"
|
||||||
class="style-scope yt-live-chat-item-list-renderer"
|
class="style-scope yt-live-chat-item-list-renderer"
|
||||||
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
|
||||||
@ -45,7 +45,7 @@
|
|||||||
import * as config from '@/api/config'
|
import * as config from '@/api/config'
|
||||||
import Ticker from './Ticker.vue'
|
import Ticker from './Ticker.vue'
|
||||||
import TextMessage from './TextMessage.vue'
|
import TextMessage from './TextMessage.vue'
|
||||||
import LegacyPaidMessage from './LegacyPaidMessage.vue'
|
import MembershipItem from './MembershipItem.vue'
|
||||||
import PaidMessage from './PaidMessage.vue'
|
import PaidMessage from './PaidMessage.vue'
|
||||||
import * as constants from './constants'
|
import * as constants from './constants'
|
||||||
|
|
||||||
@ -57,7 +57,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
Ticker,
|
Ticker,
|
||||||
TextMessage,
|
TextMessage,
|
||||||
LegacyPaidMessage,
|
MembershipItem,
|
||||||
PaidMessage
|
PaidMessage
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@ -628,6 +628,288 @@ html:not(.style-scope) {
|
|||||||
--yt-pdg-paid-stickers-author-name-font-size: 13px;
|
--yt-pdg-paid-stickers-author-name-font-size: 13px;
|
||||||
--yt-pdg-paid-stickers-margin-left: 38px;
|
--yt-pdg-paid-stickers-margin-left: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html:not(.style-scope) {
|
||||||
|
--layout_-_display: flex;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-inline_-_display: inline-flex;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-horizontal_-_display: var(--layout_-_display);
|
||||||
|
--layout-horizontal_-_-ms-flex-direction: row;
|
||||||
|
--layout-horizontal_-_-webkit-flex-direction: row;
|
||||||
|
--layout-horizontal_-_flex-direction: row;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-horizontal-reverse_-_display: var(--layout_-_display);
|
||||||
|
--layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
|
||||||
|
--layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
|
||||||
|
--layout-horizontal-reverse_-_flex-direction: row-reverse;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-vertical_-_display: var(--layout_-_display);
|
||||||
|
--layout-vertical_-_-ms-flex-direction: column;
|
||||||
|
--layout-vertical_-_-webkit-flex-direction: column;
|
||||||
|
--layout-vertical_-_flex-direction: column;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-vertical-reverse_-_display: var(--layout_-_display);
|
||||||
|
--layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
|
||||||
|
--layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
|
||||||
|
--layout-vertical-reverse_-_flex-direction: column-reverse;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-wrap_-_-ms-flex-wrap: wrap;
|
||||||
|
--layout-wrap_-_-webkit-flex-wrap: wrap;
|
||||||
|
--layout-wrap_-_flex-wrap: wrap;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
|
||||||
|
--layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
|
||||||
|
--layout-wrap-reverse_-_flex-wrap: wrap-reverse;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-auto_-_-ms-flex: 1 1 auto;
|
||||||
|
--layout-flex-auto_-_-webkit-flex: 1 1 auto;
|
||||||
|
--layout-flex-auto_-_flex: 1 1 auto;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-none_-_-ms-flex: none;
|
||||||
|
--layout-flex-none_-_-webkit-flex: none;
|
||||||
|
--layout-flex-none_-_flex: none;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex_-_-ms-flex: 1 1 0.000000001px;
|
||||||
|
--layout-flex_-_-webkit-flex: 1;
|
||||||
|
--layout-flex_-_flex: 1;
|
||||||
|
--layout-flex_-_-webkit-flex-basis: 0.000000001px;
|
||||||
|
--layout-flex_-_flex-basis: 0.000000001px;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-2_-_-ms-flex: 2;
|
||||||
|
--layout-flex-2_-_-webkit-flex: 2;
|
||||||
|
--layout-flex-2_-_flex: 2;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-3_-_-ms-flex: 3;
|
||||||
|
--layout-flex-3_-_-webkit-flex: 3;
|
||||||
|
--layout-flex-3_-_flex: 3;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-4_-_-ms-flex: 4;
|
||||||
|
--layout-flex-4_-_-webkit-flex: 4;
|
||||||
|
--layout-flex-4_-_flex: 4;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-5_-_-ms-flex: 5;
|
||||||
|
--layout-flex-5_-_-webkit-flex: 5;
|
||||||
|
--layout-flex-5_-_flex: 5;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-6_-_-ms-flex: 6;
|
||||||
|
--layout-flex-6_-_-webkit-flex: 6;
|
||||||
|
--layout-flex-6_-_flex: 6;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-7_-_-ms-flex: 7;
|
||||||
|
--layout-flex-7_-_-webkit-flex: 7;
|
||||||
|
--layout-flex-7_-_flex: 7;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-8_-_-ms-flex: 8;
|
||||||
|
--layout-flex-8_-_-webkit-flex: 8;
|
||||||
|
--layout-flex-8_-_flex: 8;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-9_-_-ms-flex: 9;
|
||||||
|
--layout-flex-9_-_-webkit-flex: 9;
|
||||||
|
--layout-flex-9_-_flex: 9;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-10_-_-ms-flex: 10;
|
||||||
|
--layout-flex-10_-_-webkit-flex: 10;
|
||||||
|
--layout-flex-10_-_flex: 10;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-11_-_-ms-flex: 11;
|
||||||
|
--layout-flex-11_-_-webkit-flex: 11;
|
||||||
|
--layout-flex-11_-_flex: 11;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-flex-12_-_-ms-flex: 12;
|
||||||
|
--layout-flex-12_-_-webkit-flex: 12;
|
||||||
|
--layout-flex-12_-_flex: 12;
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--layout-start_-_-ms-flex-align: start;
|
||||||
|
--layout-start_-_-webkit-align-items: flex-start;
|
||||||
|
--layout-start_-_align-items: flex-start;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-center_-_-ms-flex-align: center;
|
||||||
|
--layout-center_-_-webkit-align-items: center;
|
||||||
|
--layout-center_-_align-items: center;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-end_-_-ms-flex-align: end;
|
||||||
|
--layout-end_-_-webkit-align-items: flex-end;
|
||||||
|
--layout-end_-_align-items: flex-end;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-baseline_-_-ms-flex-align: baseline;
|
||||||
|
--layout-baseline_-_-webkit-align-items: baseline;
|
||||||
|
--layout-baseline_-_align-items: baseline;
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--layout-start-justified_-_-ms-flex-pack: start;
|
||||||
|
--layout-start-justified_-_-webkit-justify-content: flex-start;
|
||||||
|
--layout-start-justified_-_justify-content: flex-start;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-center-justified_-_-ms-flex-pack: center;
|
||||||
|
--layout-center-justified_-_-webkit-justify-content: center;
|
||||||
|
--layout-center-justified_-_justify-content: center;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-end-justified_-_-ms-flex-pack: end;
|
||||||
|
--layout-end-justified_-_-webkit-justify-content: flex-end;
|
||||||
|
--layout-end-justified_-_justify-content: flex-end;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-around-justified_-_-ms-flex-pack: distribute;
|
||||||
|
--layout-around-justified_-_-webkit-justify-content: space-around;
|
||||||
|
--layout-around-justified_-_justify-content: space-around;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-justified_-_-ms-flex-pack: justify;
|
||||||
|
--layout-justified_-_-webkit-justify-content: space-between;
|
||||||
|
--layout-justified_-_justify-content: space-between;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align);
|
||||||
|
--layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items);
|
||||||
|
--layout-center-center_-_align-items: var(--layout-center_-_align-items);
|
||||||
|
--layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack);
|
||||||
|
--layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content);
|
||||||
|
--layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--layout-self-start_-_-ms-align-self: flex-start;
|
||||||
|
--layout-self-start_-_-webkit-align-self: flex-start;
|
||||||
|
--layout-self-start_-_align-self: flex-start;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-self-center_-_-ms-align-self: center;
|
||||||
|
--layout-self-center_-_-webkit-align-self: center;
|
||||||
|
--layout-self-center_-_align-self: center;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-self-end_-_-ms-align-self: flex-end;
|
||||||
|
--layout-self-end_-_-webkit-align-self: flex-end;
|
||||||
|
--layout-self-end_-_align-self: flex-end;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-self-stretch_-_-ms-align-self: stretch;
|
||||||
|
--layout-self-stretch_-_-webkit-align-self: stretch;
|
||||||
|
--layout-self-stretch_-_align-self: stretch;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-self-baseline_-_-ms-align-self: baseline;
|
||||||
|
--layout-self-baseline_-_-webkit-align-self: baseline;
|
||||||
|
--layout-self-baseline_-_align-self: baseline;
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--layout-start-aligned_-_-ms-flex-line-pack: start;
|
||||||
|
--layout-start-aligned_-_-ms-align-content: flex-start;
|
||||||
|
--layout-start-aligned_-_-webkit-align-content: flex-start;
|
||||||
|
--layout-start-aligned_-_align-content: flex-start;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-end-aligned_-_-ms-flex-line-pack: end;
|
||||||
|
--layout-end-aligned_-_-ms-align-content: flex-end;
|
||||||
|
--layout-end-aligned_-_-webkit-align-content: flex-end;
|
||||||
|
--layout-end-aligned_-_align-content: flex-end;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-center-aligned_-_-ms-flex-line-pack: center;
|
||||||
|
--layout-center-aligned_-_-ms-align-content: center;
|
||||||
|
--layout-center-aligned_-_-webkit-align-content: center;
|
||||||
|
--layout-center-aligned_-_align-content: center;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-between-aligned_-_-ms-flex-line-pack: justify;
|
||||||
|
--layout-between-aligned_-_-ms-align-content: space-between;
|
||||||
|
--layout-between-aligned_-_-webkit-align-content: space-between;
|
||||||
|
--layout-between-aligned_-_align-content: space-between;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-around-aligned_-_-ms-flex-line-pack: distribute;
|
||||||
|
--layout-around-aligned_-_-ms-align-content: space-around;
|
||||||
|
--layout-around-aligned_-_-webkit-align-content: space-around;
|
||||||
|
--layout-around-aligned_-_align-content: space-around;
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--layout-block_-_display: block;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-invisible_-_visibility: hidden !important;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-relative_-_position: relative;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-fit_-_position: absolute;
|
||||||
|
--layout-fit_-_top: 0;
|
||||||
|
--layout-fit_-_right: 0;
|
||||||
|
--layout-fit_-_bottom: 0;
|
||||||
|
--layout-fit_-_left: 0;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-scroll_-_-webkit-overflow-scrolling: touch;
|
||||||
|
--layout-scroll_-_overflow: auto;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-fullbleed_-_margin: 0;
|
||||||
|
--layout-fullbleed_-_height: 100vh;
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--layout-fixed-top_-_position: fixed;
|
||||||
|
--layout-fixed-top_-_top: 0;
|
||||||
|
--layout-fixed-top_-_left: 0;
|
||||||
|
--layout-fixed-top_-_right: 0;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-fixed-right_-_position: fixed;
|
||||||
|
--layout-fixed-right_-_top: 0;
|
||||||
|
--layout-fixed-right_-_right: 0;
|
||||||
|
--layout-fixed-right_-_bottom: 0;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-fixed-bottom_-_position: fixed;
|
||||||
|
--layout-fixed-bottom_-_right: 0;
|
||||||
|
--layout-fixed-bottom_-_bottom: 0;
|
||||||
|
--layout-fixed-bottom_-_left: 0;
|
||||||
|
;
|
||||||
|
|
||||||
|
--layout-fixed-left_-_position: fixed;
|
||||||
|
--layout-fixed-left_-_top: 0;
|
||||||
|
--layout-fixed-left_-_bottom: 0;
|
||||||
|
--layout-fixed-left_-_left: 0;
|
||||||
|
;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- yt-live-chat-app -->
|
<!-- yt-live-chat-app -->
|
||||||
|
|||||||
@ -52,6 +52,7 @@ export default {
|
|||||||
avatarSize: 'Avatar size',
|
avatarSize: 'Avatar size',
|
||||||
|
|
||||||
userNames: 'User names',
|
userNames: 'User names',
|
||||||
|
showUserNames: 'Show user names',
|
||||||
font: 'Font',
|
font: 'Font',
|
||||||
fontSize: 'Font size',
|
fontSize: 'Font size',
|
||||||
lineHeight: 'Line height (0 for default)',
|
lineHeight: 'Line height (0 for default)',
|
||||||
|
|||||||
@ -52,6 +52,7 @@ export default {
|
|||||||
avatarSize: 'アイコンのサイズ',
|
avatarSize: 'アイコンのサイズ',
|
||||||
|
|
||||||
userNames: 'ユーザー名',
|
userNames: 'ユーザー名',
|
||||||
|
showUserNames: 'ユーザー名を表示する',
|
||||||
font: 'フォント',
|
font: 'フォント',
|
||||||
fontSize: 'フォントサイズ',
|
fontSize: 'フォントサイズ',
|
||||||
lineHeight: '行の高さ（0はデフォルト）',
|
lineHeight: '行の高さ（0はデフォルト）',
|
||||||
|
|||||||
@ -52,6 +52,7 @@ export default {
|
|||||||
avatarSize: '头像尺寸',
|
avatarSize: '头像尺寸',
|
||||||
|
|
||||||
userNames: '用户名',
|
userNames: '用户名',
|
||||||
|
showUserNames: '显示用户名',
|
||||||
font: '字体',
|
font: '字体',
|
||||||
fontSize: '字体尺寸',
|
fontSize: '字体尺寸',
|
||||||
lineHeight: '行高（0为默认）',
|
lineHeight: '行高（0为默认）',
|
||||||
|
|||||||
@ -27,8 +27,8 @@ export function formatCurrency (price) {
|
|||||||
}).format(price)
|
}).format(price)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getTimeTextMinSec (date) {
|
export function getTimeTextHourMin (date) {
|
||||||
|
let hour = date.getHours()
|
||||||
let min = ('00' + date.getMinutes()).slice(-2)
|
let min = ('00' + date.getMinutes()).slice(-2)
|
||||||
let sec = ('00' + date.getSeconds()).slice(-2)
|
return `${hour}:${min}`
|
||||||
return `${min}:${sec}`
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -188,8 +188,8 @@ export default {
|
|||||||
avatarUrl: data.avatarUrl,
|
avatarUrl: data.avatarUrl,
|
||||||
time: new Date(data.timestamp * 1000),
|
time: new Date(data.timestamp * 1000),
|
||||||
authorName: data.authorName,
|
authorName: data.authorName,
|
||||||
title: 'NEW MEMBER!',
|
privilegeType: data.privilegeType,
|
||||||
content: `Welcome ${data.authorName}!`
|
title: 'New member'
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
case COMMAND_ADD_SUPER_CHAT:
|
case COMMAND_ADD_SUPER_CHAT:
|
||||||
|
|||||||
@ -22,6 +22,9 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<h3>{{$t('stylegen.userNames')}}</h3>
|
<h3>{{$t('stylegen.userNames')}}</h3>
|
||||||
|
<el-form-item :label="$t('stylegen.showUserNames')">
|
||||||
|
<el-switch v-model="form.showUserNames"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item :label="$t('stylegen.font')">
|
<el-form-item :label="$t('stylegen.font')">
|
||||||
<el-autocomplete v-model="form.userNameFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
|
<el-autocomplete v-model="form.userNameFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -219,15 +222,15 @@ let textMessageTemplate = {
|
|||||||
repeated: 1,
|
repeated: 1,
|
||||||
translation: ''
|
translation: ''
|
||||||
}
|
}
|
||||||
let legacyPaidMessageTemplate = {
|
let membershipItemTemplate = {
|
||||||
id: 0,
|
id: 0,
|
||||||
addTime: time,
|
addTime: time,
|
||||||
type: constants.MESSAGE_TYPE_MEMBER,
|
type: constants.MESSAGE_TYPE_MEMBER,
|
||||||
avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
|
avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
|
||||||
time: time,
|
time: time,
|
||||||
authorName: '',
|
authorName: '',
|
||||||
title: 'NEW MEMBER!',
|
privilegeType: 3,
|
||||||
content: ''
|
title: 'New member'
|
||||||
}
|
}
|
||||||
let paidMessageTemplate = {
|
let paidMessageTemplate = {
|
||||||
id: 0,
|
id: 0,
|
||||||
@ -266,15 +269,14 @@ const EXAMPLE_MESSAGES = [
|
|||||||
content: 'kksk'
|
content: 'kksk'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
...legacyPaidMessageTemplate,
|
...membershipItemTemplate,
|
||||||
id: (nextId++).toString(),
|
id: (nextId++).toString(),
|
||||||
authorName: '进击的冰糖',
|
authorName: '艾米亚official'
|
||||||
content: 'Welcome 进击的冰糖!'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
...paidMessageTemplate,
|
...paidMessageTemplate,
|
||||||
id: (nextId++).toString(),
|
id: (nextId++).toString(),
|
||||||
authorName: '无火的残渣',
|
authorName: '愛里紗メイプル',
|
||||||
price: 66600,
|
price: 66600,
|
||||||
content: 'Sent 小电视飞船x100'
|
content: 'Sent 小电视飞船x100'
|
||||||
},
|
},
|
||||||
@ -288,7 +290,7 @@ const EXAMPLE_MESSAGES = [
|
|||||||
{
|
{
|
||||||
...paidMessageTemplate,
|
...paidMessageTemplate,
|
||||||
id: (nextId++).toString(),
|
id: (nextId++).toString(),
|
||||||
authorName: '夏色祭保護協会会長',
|
authorName: 'AstralisUP',
|
||||||
price: 30,
|
price: 30,
|
||||||
content: '言いたいことがあるんだよ！'
|
content: '言いたいことがあるんだよ！'
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,6 +9,7 @@ export const DEFAULT_CONFIG = {
|
|||||||
showAvatars: true,
|
showAvatars: true,
|
||||||
avatarSize: 24,
|
avatarSize: 24,
|
||||||
|
|
||||||
|
showUserNames: true,
|
||||||
userNameFont: 'Changa One',
|
userNameFont: 'Changa One',
|
||||||
userNameFontSize: 20,
|
userNameFontSize: 20,
|
||||||
userNameLineHeight: 0,
|
userNameLineHeight: 0,
|
||||||
@ -109,11 +110,11 @@ yt-live-chat-renderer * {
|
|||||||
${getShowOutlinesStyle(config)}
|
${getShowOutlinesStyle(config)}
|
||||||
font-family: "${config.messageFont}"${FALLBACK_FONTS};
|
font-family: "${config.messageFont}"${FALLBACK_FONTS};
|
||||||
font-size: ${config.messageFontSize}px !important;
|
font-size: ${config.messageFontSize}px !important;
|
||||||
line-height: ${config.messageLineHeight}px !important;
|
line-height: ${config.messageLineHeight || config.messageFontSize}px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
yt-live-chat-text-message-renderer #content,
|
yt-live-chat-text-message-renderer #content,
|
||||||
yt-live-chat-legacy-paid-message-renderer #content {
|
yt-live-chat-membership-item-renderer #content {
|
||||||
overflow: initial !important;
|
overflow: initial !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -133,12 +134,7 @@ yt-live-chat-message-input-renderer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Reduce side padding. */
|
/* Reduce side padding. */
|
||||||
yt-live-chat-text-message-renderer,
|
yt-live-chat-text-message-renderer {
|
||||||
yt-live-chat-legacy-paid-message-renderer {
|
|
||||||
${getPaddingStyle(config)}
|
|
||||||
}
|
|
||||||
|
|
||||||
yt-live-chat-paid-message-renderer #header {
|
|
||||||
${getPaddingStyle(config)}
|
${getPaddingStyle(config)}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -147,8 +143,8 @@ yt-live-chat-text-message-renderer #author-photo,
|
|||||||
yt-live-chat-text-message-renderer #author-photo img,
|
yt-live-chat-text-message-renderer #author-photo img,
|
||||||
yt-live-chat-paid-message-renderer #author-photo,
|
yt-live-chat-paid-message-renderer #author-photo,
|
||||||
yt-live-chat-paid-message-renderer #author-photo img,
|
yt-live-chat-paid-message-renderer #author-photo img,
|
||||||
yt-live-chat-legacy-paid-message-renderer #author-photo,
|
yt-live-chat-membership-item-renderer #author-photo,
|
||||||
yt-live-chat-legacy-paid-message-renderer #author-photo img {
|
yt-live-chat-membership-item-renderer #author-photo img {
|
||||||
${config.showAvatars ? '' : 'display: none !important;'}
|
${config.showAvatars ? '' : 'display: none !important;'}
|
||||||
width: ${config.avatarSize}px !important;
|
width: ${config.avatarSize}px !important;
|
||||||
height: ${config.avatarSize}px !important;
|
height: ${config.avatarSize}px !important;
|
||||||
@ -189,6 +185,7 @@ yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="memb
|
|||||||
|
|
||||||
/* Channel names. */
|
/* Channel names. */
|
||||||
yt-live-chat-text-message-renderer #author-name {
|
yt-live-chat-text-message-renderer #author-name {
|
||||||
|
${config.showUserNames ? '' : 'display: none !important;'}
|
||||||
${config.userNameColor ? `color: ${config.userNameColor} !important;` : ''}
|
${config.userNameColor ? `color: ${config.userNameColor} !important;` : ''}
|
||||||
font-family: "${config.userNameFont}"${FALLBACK_FONTS};
|
font-family: "${config.userNameFont}"${FALLBACK_FONTS};
|
||||||
font-size: ${config.userNameFontSize}px !important;
|
font-size: ${config.userNameFontSize}px !important;
|
||||||
@ -213,8 +210,8 @@ ${!config.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #message {
|
|||||||
/* SuperChat/Fan Funding Messages. */
|
/* SuperChat/Fan Funding Messages. */
|
||||||
yt-live-chat-paid-message-renderer #author-name,
|
yt-live-chat-paid-message-renderer #author-name,
|
||||||
yt-live-chat-paid-message-renderer #author-name *,
|
yt-live-chat-paid-message-renderer #author-name *,
|
||||||
yt-live-chat-legacy-paid-message-renderer #event-text,
|
yt-live-chat-membership-item-renderer #header-content-inner-column,
|
||||||
yt-live-chat-legacy-paid-message-renderer #event-text * {
|
yt-live-chat-membership-item-renderer #header-content-inner-column * {
|
||||||
${config.firstLineColor ? `color: ${config.firstLineColor} !important;` : ''}
|
${config.firstLineColor ? `color: ${config.firstLineColor} !important;` : ''}
|
||||||
font-family: "${config.firstLineFont}"${FALLBACK_FONTS};
|
font-family: "${config.firstLineFont}"${FALLBACK_FONTS};
|
||||||
font-size: ${config.firstLineFontSize}px !important;
|
font-size: ${config.firstLineFontSize}px !important;
|
||||||
@ -223,8 +220,8 @@ yt-live-chat-legacy-paid-message-renderer #event-text * {
|
|||||||
|
|
||||||
yt-live-chat-paid-message-renderer #purchase-amount,
|
yt-live-chat-paid-message-renderer #purchase-amount,
|
||||||
yt-live-chat-paid-message-renderer #purchase-amount *,
|
yt-live-chat-paid-message-renderer #purchase-amount *,
|
||||||
yt-live-chat-legacy-paid-message-renderer #detail-text,
|
yt-live-chat-membership-item-renderer #header-subtext,
|
||||||
yt-live-chat-legacy-paid-message-renderer #detail-text * {
|
yt-live-chat-membership-item-renderer #header-subtext * {
|
||||||
${config.secondLineColor ? `color: ${config.secondLineColor} !important;` : ''}
|
${config.secondLineColor ? `color: ${config.secondLineColor} !important;` : ''}
|
||||||
font-family: "${config.secondLineFont}"${FALLBACK_FONTS};
|
font-family: "${config.secondLineFont}"${FALLBACK_FONTS};
|
||||||
font-size: ${config.secondLineFontSize}px !important;
|
font-size: ${config.secondLineFontSize}px !important;
|
||||||
@ -243,17 +240,18 @@ yt-live-chat-paid-message-renderer {
|
|||||||
margin: 4px 0 !important;
|
margin: 4px 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
yt-live-chat-legacy-paid-message-renderer #card {
|
yt-live-chat-membership-item-renderer #card,
|
||||||
|
yt-live-chat-membership-item-renderer #header {
|
||||||
${getShowNewMemberBgStyle(config)}
|
${getShowNewMemberBgStyle(config)}
|
||||||
}
|
}
|
||||||
|
|
||||||
yt-live-chat-text-message-renderer a,
|
yt-live-chat-text-message-renderer a,
|
||||||
yt-live-chat-legacy-paid-message-renderer a {
|
yt-live-chat-membership-item-renderer a {
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
yt-live-chat-text-message-renderer[is-deleted],
|
yt-live-chat-text-message-renderer[is-deleted],
|
||||||
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
|
yt-live-chat-membership-item-renderer[is-deleted] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -399,7 +397,8 @@ ${keyframes.join('\n')}
|
|||||||
}
|
}
|
||||||
|
|
||||||
yt-live-chat-text-message-renderer,
|
yt-live-chat-text-message-renderer,
|
||||||
yt-live-chat-legacy-paid-message-renderer {
|
yt-live-chat-membership-item-renderer,
|
||||||
|
yt-live-chat-paid-message-renderer {
|
||||||
animation: anim ${totalTime}ms;
|
animation: anim ${totalTime}ms;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
}`
|
}`
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user