diff --git a/api/chat.py b/api/chat.py
index a87ceb7..6dd152a 100644
--- a/api/chat.py
+++ b/api/chat.py
@@ -71,7 +71,7 @@ class Room(blivedm.BLiveClient):
def __parse_buy_guard(self, command):
data = command['data']
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
))
@@ -206,7 +206,8 @@ class Room(blivedm.BLiveClient):
'id': id_,
'avatarUrl': await models.avatar.get_avatar_url(message.uid),
'timestamp': message.start_time,
- 'authorName': message.username
+ 'authorName': message.username,
+ 'privilegeType': message.guard_level
})
async def _on_super_chat(self, message: blivedm.SuperChatMessage):
@@ -427,7 +428,8 @@ class ChatHandler(tornado.websocket.WebSocketHandler):
]
member_data = {
**base_data,
- 'id': uuid.uuid4().hex
+ 'id': uuid.uuid4().hex,
+ 'privilegeType': 3
}
gift_data = {
**base_data,
diff --git a/frontend/src/components/ChatRenderer/LegacyPaidMessage.vue b/frontend/src/components/ChatRenderer/LegacyPaidMessage.vue
deleted file mode 100644
index ebd7cc5..0000000
--- a/frontend/src/components/ChatRenderer/LegacyPaidMessage.vue
+++ /dev/null
@@ -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>
diff --git a/frontend/src/components/ChatRenderer/MembershipItem.vue b/frontend/src/components/ChatRenderer/MembershipItem.vue
new file mode 100644
index 0000000..3bd5525
--- /dev/null
+++ b/frontend/src/components/ChatRenderer/MembershipItem.vue
@@ -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>
diff --git a/frontend/src/components/ChatRenderer/PaidMessage.vue b/frontend/src/components/ChatRenderer/PaidMessage.vue
index 5c87d2e..4809d7d 100644
--- a/frontend/src/components/ChatRenderer/PaidMessage.vue
+++ b/frontend/src/components/ChatRenderer/PaidMessage.vue
@@ -56,7 +56,7 @@ export default {
return 'CN¥' + utils.formatCurrency(this.price)
},
timeText() {
- return utils.getTimeTextMinSec(this.time)
+ return utils.getTimeTextHourMin(this.time)
}
}
}
diff --git a/frontend/src/components/ChatRenderer/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue
index c3c3a10..6d0ebd7 100644
--- a/frontend/src/components/ChatRenderer/TextMessage.vue
+++ b/frontend/src/components/ChatRenderer/TextMessage.vue
@@ -54,7 +54,7 @@ export default {
},
computed: {
timeText() {
- return utils.getTimeTextMinSec(this.time)
+ return utils.getTimeTextHourMin(this.time)
},
authorTypeText() {
return constants.AUTHOR_TYPE_TO_TEXT[this.authorType]
diff --git a/frontend/src/components/ChatRenderer/Ticker.vue b/frontend/src/components/ChatRenderer/Ticker.vue
index 28abd49..0f8e459 100644
--- a/frontend/src/components/ChatRenderer/Ticker.vue
+++ b/frontend/src/components/ChatRenderer/Ticker.vue
@@ -26,11 +26,11 @@
</div>
</div>
<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"
- :avatarUrl="pinnedMessage.avatarUrl" :title="pinnedMessage.title" :content="pinnedMessage.content"
- :time="pinnedMessage.time"
- ></legacy-paid-message>
+ :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName" :privilegeType="pinnedMessage.privilegeType"
+ :title="pinnedMessage.title" :time="pinnedMessage.time"
+ ></membership-item>
<paid-message :key="pinnedMessage.id" v-else
class="style-scope yt-live-chat-ticker-renderer"
:price="pinnedMessage.price" :avatarUrl="pinnedMessage.avatarUrl" :authorName="pinnedMessage.authorName"
@@ -44,7 +44,7 @@
import * as config from '@/api/config'
import {formatCurrency} from '@/utils'
import ImgShadow from './ImgShadow.vue'
-import LegacyPaidMessage from './LegacyPaidMessage.vue'
+import MembershipItem from './MembershipItem.vue'
import PaidMessage from './PaidMessage.vue'
import * as constants from './constants'
@@ -52,7 +52,7 @@ export default {
name: 'Ticker',
components: {
ImgShadow,
- LegacyPaidMessage,
+ MembershipItem,
PaidMessage
},
props: {
diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue
index 0f9f91e..dce06cf 100644
--- a/frontend/src/components/ChatRenderer/index.vue
+++ b/frontend/src/components/ChatRenderer/index.vue
@@ -23,11 +23,11 @@
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
:time="message.time" :content="getGiftShowContent(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"
- :avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
- :time="message.time"
- ></legacy-paid-message>
+ :avatarUrl="message.avatarUrl" :authorName="message.authorName" :privilegeType="message.privilegeType"
+ :title="message.title" :time="message.time"
+ ></membership-item>
<paid-message :key="message.id" v-else-if="message.type === MESSAGE_TYPE_SUPER_CHAT"
class="style-scope yt-live-chat-item-list-renderer"
:price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
@@ -45,7 +45,7 @@
import * as config from '@/api/config'
import Ticker from './Ticker.vue'
import TextMessage from './TextMessage.vue'
-import LegacyPaidMessage from './LegacyPaidMessage.vue'
+import MembershipItem from './MembershipItem.vue'
import PaidMessage from './PaidMessage.vue'
import * as constants from './constants'
@@ -57,7 +57,7 @@ export default {
components: {
Ticker,
TextMessage,
- LegacyPaidMessage,
+ MembershipItem,
PaidMessage
},
props: {
@@ -628,6 +628,288 @@ html:not(.style-scope) {
--yt-pdg-paid-stickers-author-name-font-size: 13px;
--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>
<!-- yt-live-chat-app -->
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 5968f9d..7813c4c 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -52,6 +52,7 @@ export default {
avatarSize: 'Avatar size',
userNames: 'User names',
+ showUserNames: 'Show user names',
font: 'Font',
fontSize: 'Font size',
lineHeight: 'Line height (0 for default)',
diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js
index 8ce58f5..fcadfb6 100644
--- a/frontend/src/lang/ja.js
+++ b/frontend/src/lang/ja.js
@@ -52,6 +52,7 @@ export default {
avatarSize: 'アイコンのサイズ',
userNames: 'ユーザー名',
+ showUserNames: 'ユーザー名を表示する',
font: 'フォント',
fontSize: 'フォントサイズ',
lineHeight: '行の高さ（0はデフォルト）',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index f9b86ba..819d87b 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -52,6 +52,7 @@ export default {
avatarSize: '头像尺寸',
userNames: '用户名',
+ showUserNames: '显示用户名',
font: '字体',
fontSize: '字体尺寸',
lineHeight: '行高（0为默认）',
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index d5a6932..a753a4f 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -27,8 +27,8 @@ export function formatCurrency (price) {
}).format(price)
}
-export function getTimeTextMinSec (date) {
+export function getTimeTextHourMin (date) {
+ let hour = date.getHours()
let min = ('00' + date.getMinutes()).slice(-2)
- let sec = ('00' + date.getSeconds()).slice(-2)
- return `${min}:${sec}`
+ return `${hour}:${min}`
}
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index b5204db..77f35ae 100644
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@@ -188,8 +188,8 @@ export default {
avatarUrl: data.avatarUrl,
time: new Date(data.timestamp * 1000),
authorName: data.authorName,
- title: 'NEW MEMBER!',
- content: `Welcome ${data.authorName}!`
+ privilegeType: data.privilegeType,
+ title: 'New member'
}
break
case COMMAND_ADD_SUPER_CHAT:
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index 1973a60..54d029b 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -22,6 +22,9 @@
</el-form-item>
<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-autocomplete v-model="form.userNameFont" :fetch-suggestions="getFontSuggestions"></el-autocomplete>
</el-form-item>
@@ -219,15 +222,15 @@ let textMessageTemplate = {
repeated: 1,
translation: ''
}
-let legacyPaidMessageTemplate = {
+let membershipItemTemplate = {
id: 0,
addTime: time,
type: constants.MESSAGE_TYPE_MEMBER,
avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
time: time,
authorName: '',
- title: 'NEW MEMBER!',
- content: ''
+ privilegeType: 3,
+ title: 'New member'
}
let paidMessageTemplate = {
id: 0,
@@ -266,15 +269,14 @@ const EXAMPLE_MESSAGES = [
content: 'kksk'
},
{
- ...legacyPaidMessageTemplate,
+ ...membershipItemTemplate,
id: (nextId++).toString(),
- authorName: '进击的冰糖',
- content: 'Welcome 进击的冰糖!'
+ authorName: '艾米亚official'
},
{
...paidMessageTemplate,
id: (nextId++).toString(),
- authorName: '无火的残渣',
+ authorName: '愛里紗メイプル',
price: 66600,
content: 'Sent 小电视飞船x100'
},
@@ -288,7 +290,7 @@ const EXAMPLE_MESSAGES = [
{
...paidMessageTemplate,
id: (nextId++).toString(),
- authorName: '夏色祭保護協会会長',
+ authorName: 'AstralisUP',
price: 30,
content: '言いたいことがあるんだよ！'
}
diff --git a/frontend/src/views/StyleGenerator/stylegen.js b/frontend/src/views/StyleGenerator/stylegen.js
index dff4cb1..5e96ab0 100644
--- a/frontend/src/views/StyleGenerator/stylegen.js
+++ b/frontend/src/views/StyleGenerator/stylegen.js
@@ -9,6 +9,7 @@ export const DEFAULT_CONFIG = {
showAvatars: true,
avatarSize: 24,
+ showUserNames: true,
userNameFont: 'Changa One',
userNameFontSize: 20,
userNameLineHeight: 0,
@@ -109,11 +110,11 @@ yt-live-chat-renderer * {
${getShowOutlinesStyle(config)}
font-family: "${config.messageFont}"${FALLBACK_FONTS};
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-legacy-paid-message-renderer #content {
+yt-live-chat-membership-item-renderer #content {
overflow: initial !important;
}
@@ -133,12 +134,7 @@ yt-live-chat-message-input-renderer {
}
/* Reduce side padding. */
-yt-live-chat-text-message-renderer,
-yt-live-chat-legacy-paid-message-renderer {
- ${getPaddingStyle(config)}
-}
-
-yt-live-chat-paid-message-renderer #header {
+yt-live-chat-text-message-renderer {
${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-paid-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo img,
-yt-live-chat-legacy-paid-message-renderer #author-photo,
-yt-live-chat-legacy-paid-message-renderer #author-photo img {
+yt-live-chat-membership-item-renderer #author-photo,
+yt-live-chat-membership-item-renderer #author-photo img {
${config.showAvatars ? '' : 'display: none !important;'}
width: ${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. */
yt-live-chat-text-message-renderer #author-name {
+ ${config.showUserNames ? '' : 'display: none !important;'}
${config.userNameColor ? `color: ${config.userNameColor} !important;` : ''}
font-family: "${config.userNameFont}"${FALLBACK_FONTS};
font-size: ${config.userNameFontSize}px !important;
@@ -213,8 +210,8 @@ ${!config.messageOnNewLine ? '' : `yt-live-chat-text-message-renderer #message {
/* SuperChat/Fan Funding Messages. */
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-legacy-paid-message-renderer #event-text * {
+yt-live-chat-membership-item-renderer #header-content-inner-column,
+yt-live-chat-membership-item-renderer #header-content-inner-column * {
${config.firstLineColor ? `color: ${config.firstLineColor} !important;` : ''}
font-family: "${config.firstLineFont}"${FALLBACK_FONTS};
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-legacy-paid-message-renderer #detail-text,
-yt-live-chat-legacy-paid-message-renderer #detail-text * {
+yt-live-chat-membership-item-renderer #header-subtext,
+yt-live-chat-membership-item-renderer #header-subtext * {
${config.secondLineColor ? `color: ${config.secondLineColor} !important;` : ''}
font-family: "${config.secondLineFont}"${FALLBACK_FONTS};
font-size: ${config.secondLineFontSize}px !important;
@@ -243,17 +240,18 @@ yt-live-chat-paid-message-renderer {
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)}
}
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;
}
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;
}
@@ -399,7 +397,8 @@ ${keyframes.join('\n')}
}
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-fill-mode: both;
}`