From fe598369b7402dbaba04d84eb686cd4f10a651ce Mon Sep 17 00:00:00 2001 From: John Smith Date: Mon, 17 Jun 2019 12:29:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=B7=E5=BC=8F=E9=A2=84?= =?UTF-8?q?=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/config.js | 219 +----------------- frontend/src/components/.gitkeep | 0 .../ChatRenderer}/LegacyPaidMessage.vue | 0 .../ChatRenderer}/PaidMessage.vue | 0 .../ChatRenderer}/TextMessage.vue | 2 + .../ChatRenderer}/index.vue | 147 +----------- frontend/src/main.js | 2 +- frontend/src/views/Room.vue | 154 ++++++++++++ frontend/src/views/StyleGenerator/index.vue | 148 +++++++++++- frontend/src/views/StyleGenerator/stylegen.js | 19 +- 10 files changed, 321 insertions(+), 370 deletions(-) delete mode 100644 frontend/src/components/.gitkeep rename frontend/src/{views/Room => components/ChatRenderer}/LegacyPaidMessage.vue (100%) rename frontend/src/{views/Room => components/ChatRenderer}/PaidMessage.vue (100%) rename frontend/src/{views/Room => components/ChatRenderer}/TextMessage.vue (99%) rename frontend/src/{views/Room => components/ChatRenderer}/index.vue (83%) create mode 100644 frontend/src/views/Room.vue diff --git a/frontend/src/api/config.js b/frontend/src/api/config.js index 47706a6..04fc729 100644 --- a/frontend/src/api/config.js +++ b/frontend/src/api/config.js @@ -1,222 +1,7 @@ import axios from 'axios' import {mergeConfig} from '@/utils' - -const DEFAULT_CSS = `@import url("https://fonts.googleapis.com/css?family=Changa%20One"); -@import url("https://fonts.googleapis.com/css?family=Imprima"); -/* @import url("https://fonts.lug.ustc.edu.cn/css?family=Changa%20One"); */ -/* @import url("https://fonts.lug.ustc.edu.cn/css?family=Imprima"); */ - -/* Background colors*/ -body { - overflow: hidden; - background-color: rgba(0,0,0,0); -} -/* Transparent background. */ -yt-live-chat-renderer { - background-color: transparent !important; -} -yt-live-chat-text-message-renderer, -yt-live-chat-text-message-renderer[is-highlighted] { - background-color: transparent !important; -} - -yt-live-chat-text-message-renderer[author-type="owner"], -yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] { - background-color: transparent !important; -} - -yt-live-chat-text-message-renderer[author-type="moderator"], -yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] { - background-color: transparent !important; -} - -yt-live-chat-text-message-renderer[author-type="member"], -yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] { - background-color: transparent !important; -} - - -yt-live-chat-author-chip #author-name { - background-color: transparent !important; -} -/* Outlines */ -yt-live-chat-renderer * { - text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000; - font-family: "Imprima"; - font-size: 18px !important; - line-height: 18px !important; -} - -yt-live-chat-text-message-renderer #content, -yt-live-chat-legacy-paid-message-renderer #content { - overflow: initial !important; -} - -/* Hide scrollbar. */ -yt-live-chat-item-list-renderer #items{ - overflow: hidden !important; -} - -yt-live-chat-item-list-renderer #item-scroller{ - overflow: hidden !important; -} - -/* Hide header and input. */ -yt-live-chat-header-renderer, -yt-live-chat-message-input-renderer { - display: none !important; -} - -/* Reduce side padding. */ -yt-live-chat-text-message-renderer, -yt-live-chat-legacy-paid-message-renderer { - padding-left: 4px !important; - padding-right: 4px !important; -} - -yt-live-chat-paid-message-renderer #header { - padding-left: 4px !important; - padding-right: 4px !important; -} - -/* Avatars. */ -yt-live-chat-text-message-renderer #author-photo, -yt-live-chat-paid-message-renderer #author-photo, -yt-live-chat-legacy-paid-message-renderer #author-photo { - - width: 24px !important; - height: 24px !important; - border-radius: 24px !important; - margin-right: 6px !important; - background-size: cover; -} - -/* Hide badges. */ -yt-live-chat-text-message-renderer #author-badges { - display: none !important; - vertical-align: text-top !important; -} - -/* Timestamps. */ -yt-live-chat-text-message-renderer #timestamp { - - color: #999999 !important; - font-family: "Imprima"; - font-size: 16px !important; - line-height: 16px !important; -} - -/* Badges. */ -yt-live-chat-text-message-renderer #author-name[type="owner"], -yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] { - color: #ffd600 !important; -} - -yt-live-chat-text-message-renderer #author-name[type="moderator"], -yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] { - color: #5e84f1 !important; -} - -yt-live-chat-text-message-renderer #author-name[type="member"], -yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] { - color: #0f9d58 !important; -} - -/* Channel names. */ -yt-live-chat-text-message-renderer #author-name { - color: #cccccc !important; - font-family: "Changa One"; - font-size: 20px !important; - line-height: 20px !important; -} - -yt-live-chat-text-message-renderer #author-name::after { - content: ":"; - margin-left: 2px; -} - -/* Messages. */ -yt-live-chat-text-message-renderer #message, -yt-live-chat-text-message-renderer #message * { - color: #ffffff !important; - font-family: "Imprima"; - font-size: 18px !important; - line-height: 18px !important; -} - - -/* 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 * { - color: #ffffff !important; - font-family: "Changa One"; - font-size: 20px !important; - line-height: 20px !important; -} - -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 * { - color: #ffffff !important; - font-family: "Imprima"; - font-size: 18px !important; - line-height: 18px !important; -} - -yt-live-chat-paid-message-renderer #content, -yt-live-chat-paid-message-renderer #content * { - color: #ffffff !important; - font-family: "Imprima"; - font-size: 18px !important; - line-height: 18px !important; -} - -yt-live-chat-paid-message-renderer { - margin: 4px 0 !important; -} - -yt-live-chat-legacy-paid-message-renderer { - background-color: #0f9d58 !important; - margin: 4px 0 !important; -} - -yt-live-chat-text-message-renderer a, -yt-live-chat-legacy-paid-message-renderer a { - text-decoration: none !important; -} - -yt-live-chat-text-message-renderer[is-deleted], -yt-live-chat-legacy-paid-message-renderer[is-deleted] { - display: none !important; -} - -yt-live-chat-ticker-renderer { - background-color: transparent !important; - box-shadow: none !important; -} -yt-live-chat-ticker-renderer { - display: none !important; -} - - -yt-live-chat-ticker-paid-message-item-renderer, -yt-live-chat-ticker-paid-message-item-renderer *, -yt-live-chat-ticker-sponsor-item-renderer, -yt-live-chat-ticker-sponsor-item-renderer * { - color: #ffffff !important; - font-family: "Imprima"; -} - -yt-live-chat-mode-change-message-renderer, -yt-live-chat-viewer-engagement-message-renderer, -yt-live-chat-restricted-participation-renderer { - display: none !important; -} -` +import stylegen from '@/views/StyleGenerator/stylegen' export const DEFAULT_CONFIG = { minGiftPrice: 6.911, // $1 @@ -229,7 +14,7 @@ export const DEFAULT_CONFIG = { blockKeywords: '', blockUsers: '', - css: DEFAULT_CSS + css: stylegen.getStyle(stylegen.DEFAULT_CONFIG) } export function setLocalConfig (config) { diff --git a/frontend/src/components/.gitkeep b/frontend/src/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/views/Room/LegacyPaidMessage.vue b/frontend/src/components/ChatRenderer/LegacyPaidMessage.vue similarity index 100% rename from frontend/src/views/Room/LegacyPaidMessage.vue rename to frontend/src/components/ChatRenderer/LegacyPaidMessage.vue diff --git a/frontend/src/views/Room/PaidMessage.vue b/frontend/src/components/ChatRenderer/PaidMessage.vue similarity index 100% rename from frontend/src/views/Room/PaidMessage.vue rename to frontend/src/components/ChatRenderer/PaidMessage.vue diff --git a/frontend/src/views/Room/TextMessage.vue b/frontend/src/components/ChatRenderer/TextMessage.vue similarity index 99% rename from frontend/src/views/Room/TextMessage.vue rename to frontend/src/components/ChatRenderer/TextMessage.vue index 4e095a5..f89b9db 100644 --- a/frontend/src/views/Room/TextMessage.vue +++ b/frontend/src/components/ChatRenderer/TextMessage.vue @@ -71,6 +71,8 @@ yt-live-chat-text-message-renderer>#content>.el-badge { } yt-live-chat-text-message-renderer>#content>.el-badge .el-badge__content { + font-size: 12px !important; + line-height: 18px !important; text-shadow: none !important; font-family: sans-serif !important; background-color: var(--repeated-mark-color) !important; diff --git a/frontend/src/views/Room/index.vue b/frontend/src/components/ChatRenderer/index.vue similarity index 83% rename from frontend/src/views/Room/index.vue rename to frontend/src/components/ChatRenderer/index.vue index 5b5506b..b92ada8 100644 --- a/frontend/src/views/Room/index.vue +++ b/frontend/src/components/ChatRenderer/index.vue @@ -43,164 +43,41 @@ diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue index c2354d9..f976bbe 100644 --- a/frontend/src/views/StyleGenerator/index.vue +++ b/frontend/src/views/StyleGenerator/index.vue @@ -1,5 +1,5 @@ @@ -195,15 +202,98 @@ import _ from 'lodash' import stylegen from './stylegen' import fonts from './fonts' +import ChatRenderer from '@/components/ChatRenderer' + +let time = new Date() +let textMessageTemplate = { + id: 0, + type: 0, // TextMessage + avatarUrl: 'https://static.hdslb.com/images/member/noface.gif', + time: `${time.getMinutes()}:${time.getSeconds()}`, + authorName: '', + authorType: 0, + content: '', + repeated: 1 +} +let legacyPaidMessageTemplate = { + id: 0, + type: 1, // LegacyPaidMessage + avatarUrl: 'https://static.hdslb.com/images/member/noface.gif', + time: `${time.getMinutes()}:${time.getSeconds()}`, + authorName: '', + title: 'NEW MEMBER!', + content: '' +} +let paidMessageTemplate = { + id: 0, + type: 2, // PaidMessage + avatarUrl: 'https://static.hdslb.com/images/member/noface.gif', + authorName: '', + price: 0, + time: `${time.getMinutes()}:${time.getSeconds()}`, + content: '' +} +let nextId = 0 +const EXAMPLE_MESSAGES = [ + { + ...textMessageTemplate, + id: nextId++, + authorName: 'mob路人', + content: '8888888888', + repeated: 12 + }, { + ...textMessageTemplate, + id: nextId++, + authorName: 'member舰长', + authorType: 1, + content: '草', + repeated: 3 + }, { + ...textMessageTemplate, + id: nextId++, + authorName: 'admin房管', + authorType: 2, + content: 'kksk' + }, { + ...legacyPaidMessageTemplate, + id: nextId++, + authorName: 'Paryi', + content: 'Welcome Paryi' + }, { + ...paidMessageTemplate, + id: nextId++, + authorName: '石油佬', + price: 1245, + content: 'Sent 小电视飞船x1' + }, { + ...textMessageTemplate, + id: nextId++, + authorName: 'streamer主播', + authorType: 3, + content: '感谢石油佬送的小电视' + }, { + ...paidMessageTemplate, + id: nextId++, + authorName: '臭DD', + price: 28, + content: 'Sent 礼花x1' + } +] export default { name: 'StyleGenerator', + components: { + ChatRenderer + }, data() { let config = stylegen.getLocalConfig() + let result = stylegen.getStyle(config) return { FONTS: [...fonts.LOCAL_FONTS, ...fonts.NETWORK_FONTS], form: {...config}, - result: stylegen.getStyle(config) + result, + exampleCss: result.replace(/^body\b/gm, '#fakebody'), + messages: EXAMPLE_MESSAGES } }, computed: { @@ -222,6 +312,10 @@ export default { } callback(res) }, + playAnimation() { + this.messages = [] + this.$nextTick(() => this.messages = EXAMPLE_MESSAGES) + }, copyResult() { this.$refs.result.select() document.execCommand('Copy') @@ -231,10 +325,13 @@ export default { } }, watch: { - computedResult: _.debounce(function (result) { - this.result = result + computedResult: _.debounce(function (val) { + this.result = val stylegen.setLocalConfig(this.form) - }, 500) + }, 500), + result (val) { + this.exampleCss = val.replace(/^body\b/gm, '#fakebody') + } } } @@ -243,4 +340,37 @@ export default { .el-form { max-width: 800px; } + +#example-container { + position: fixed; + top: 30px; + right: 30px; + width: 400px; + height: calc(100vh - 110px); + + background-color: #444; + background-image: + -moz-linear-gradient(45deg, #333 25%, transparent 25%), + -moz-linear-gradient(-45deg, #333 25%, transparent 25%), + -moz-linear-gradient(45deg, transparent 75%, #333 75%), + -moz-linear-gradient(-45deg, transparent 75%, #333 75%); + background-image: + -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #333), color-stop(.25, transparent)), + -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #333), color-stop(.25, transparent)), + -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #333)), + -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #333)); + + -moz-background-size:32px 32px; + background-size:32px 32px; + -webkit-background-size:32px 32px; + + background-position:0 0, 16px 0, 16px -16px, 0px 16px; + + padding: 25px; +} + +#fakebody { + outline: 1px #999 dashed; + height: 100%; +} diff --git a/frontend/src/views/StyleGenerator/stylegen.js b/frontend/src/views/StyleGenerator/stylegen.js index d0a09f0..c028b3d 100644 --- a/frontend/src/views/StyleGenerator/stylegen.js +++ b/frontend/src/views/StyleGenerator/stylegen.js @@ -31,12 +31,12 @@ export const DEFAULT_CONFIG = { timeLineHeight: 0, timeColor: '#999999', - bgColor: '#000000', + bgColor: 'rgba(0, 0, 0, 0)', useBarsInsteadOfBg: false, - messageBgColor: '#cccccc', - ownerMessageBgColor: '#ffd600', - moderatorMessageBgColor: '#5e84f1', - memberMessageBgColor: '#0f9d58', + messageBgColor: 'rgba(204, 204, 204, 0)', + ownerMessageBgColor: 'rgba(255, 214, 0, 0)', + moderatorMessageBgColor: 'rgba(94, 132, 241, 0)', + memberMessageBgColor: 'rgba(15, 157, 88, 0)', firstLineFont: 'Changa One', firstLineFontSize: 20, @@ -47,7 +47,7 @@ export const DEFAULT_CONFIG = { secondLineLineHeight: 0, secondLineColor: '#ffffff', scContentFont: 'Imprima', - scContentFontSize: 28, + scContentFontSize: 18, scContentLineHeight: 0, scContentColor: '#ffffff', showNewMemberBg: true, @@ -142,8 +142,11 @@ yt-live-chat-paid-message-renderer #header { /* Avatars. */ 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-legacy-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 { ${config.showAvatars ? '' : 'display: none !important;'} width: ${config.avatarSize}px !important; height: ${config.avatarSize}px !important; @@ -159,7 +162,7 @@ yt-live-chat-text-message-renderer #author-badges { /* Timestamps. */ yt-live-chat-text-message-renderer #timestamp { - ${config.showTime ? '' : 'display: none !important;'} + display: ${config.showTime ? 'inline' : 'none'} !important; ${config.timeColor ? `color: ${config.timeColor} !important;` : ''} font-family: "${config.timeFont}", sans-serif; font-size: ${config.timeFontSize}px !important;