From e2f925426a295b0f1a75a93a0359762215460bd9 Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Mon, 5 Apr 2021 20:55:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=94=9F=E6=88=90=E5=99=A8?=
=?UTF-8?q?=E9=A2=84=E8=A7=88=E5=86=85=E5=AE=B9=E8=87=AA=E5=8A=A8=E7=94=9F?=
=?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/ChatRenderer/index.vue | 9 --
frontend/src/main.js | 4 +-
frontend/src/views/Room.vue | 22 ++-
frontend/src/views/StyleGenerator/Legacy.vue | 3 -
.../src/views/StyleGenerator/LineLike.vue | 3 -
frontend/src/views/StyleGenerator/index.vue | 133 ++++--------------
6 files changed, 49 insertions(+), 125 deletions(-)
diff --git a/frontend/src/components/ChatRenderer/index.vue b/frontend/src/components/ChatRenderer/index.vue
index a374cb1..7ae6cc4 100644
--- a/frontend/src/components/ChatRenderer/index.vue
+++ b/frontend/src/components/ChatRenderer/index.vue
@@ -73,7 +73,6 @@ export default {
PaidMessage
},
props: {
- css: String,
maxNumber: {
type: Number,
default: chatConfig.DEFAULT_CONFIG.maxNumber
@@ -84,15 +83,12 @@ export default {
}
},
data() {
- let styleElement = document.createElement('style')
- document.head.appendChild(styleElement)
return {
MESSAGE_TYPE_TEXT: constants.MESSAGE_TYPE_TEXT,
MESSAGE_TYPE_GIFT: constants.MESSAGE_TYPE_GIFT,
MESSAGE_TYPE_MEMBER: constants.MESSAGE_TYPE_MEMBER,
MESSAGE_TYPE_SUPER_CHAT: constants.MESSAGE_TYPE_SUPER_CHAT,
- styleElement,
messages: [], // 显示的消息
paidMessages: [], // 固定在上方的消息
@@ -122,19 +118,14 @@ export default {
}
},
watch: {
- css(val) {
- this.styleElement.innerText = val
- },
canScrollToBottom(val) {
this.cantScrollStartTime = val ? null : new Date()
}
},
mounted() {
- this.styleElement.innerText = this.css
this.scrollToBottom()
},
beforeDestroy() {
- document.head.removeChild(this.styleElement)
if (this.emitSmoothedMessageTimerId) {
window.clearTimeout(this.emitSmoothedMessageTimerId)
this.emitSmoothedMessageTimerId = null
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 9a19e49..14e9ca8 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -76,7 +76,7 @@ const router = new VueRouter({
{path: 'help', name: 'help', component: Help}
]
},
- {path: '/room/test', name: 'test_room', component: Room, props: {roomId: null}},
+ {path: '/room/test', name: 'test_room', component: Room},
{
path: '/room/:roomId',
name: 'room',
@@ -86,7 +86,7 @@ const router = new VueRouter({
if (isNaN(roomId)) {
roomId = null
}
- return {roomId}
+ return {roomId, strConfig: route.query}
}
},
{path: '*', component: NotFound}
diff --git a/frontend/src/views/Room.vue b/frontend/src/views/Room.vue
index 6d6baf0..e700c7e 100644
--- a/frontend/src/views/Room.vue
+++ b/frontend/src/views/Room.vue
@@ -18,7 +18,14 @@ export default {
ChatRenderer
},
props: {
- roomId: Number
+ roomId: {
+ type: Number,
+ default: null
+ },
+ strConfig: {
+ type: Object,
+ default: () => ({})
+ }
},
data() {
return {
@@ -58,9 +65,9 @@ export default {
initConfig() {
let cfg = {}
// 留空的使用默认值
- for (let i in this.$route.query) {
- if (this.$route.query[i] !== '') {
- cfg[i] = this.$route.query[i]
+ for (let i in this.strConfig) {
+ if (this.strConfig[i] !== '') {
+ cfg[i] = this.strConfig[i]
}
}
cfg = mergeConfig(cfg, chatConfig.DEFAULT_CONFIG)
@@ -101,6 +108,13 @@ export default {
this.chatClient.start()
},
+ start() {
+ this.chatClient.start()
+ },
+ stop() {
+ this.chatClient.stop()
+ },
+
onAddText(data) {
if (!this.config.showDanmaku || !this.filterTextMessage(data) || this.mergeSimilarText(data.content)) {
return
diff --git a/frontend/src/views/StyleGenerator/Legacy.vue b/frontend/src/views/StyleGenerator/Legacy.vue
index 8106360..3645946 100644
--- a/frontend/src/views/StyleGenerator/Legacy.vue
+++ b/frontend/src/views/StyleGenerator/Legacy.vue
@@ -340,9 +340,6 @@
</el-form-item>
</el-col>
</el-row>
- <el-form-item>
- <el-button type="primary" @click="$emit('playAnimation')">{{$t('stylegen.playAnimation')}}</el-button>
- </el-form-item>
</el-card>
</el-form>
</div>
diff --git a/frontend/src/views/StyleGenerator/LineLike.vue b/frontend/src/views/StyleGenerator/LineLike.vue
index 467cc1c..b2aad8d 100644
--- a/frontend/src/views/StyleGenerator/LineLike.vue
+++ b/frontend/src/views/StyleGenerator/LineLike.vue
@@ -290,9 +290,6 @@
</el-form-item>
</el-col>
</el-row>
- <el-form-item>
- <el-button type="primary" @click="$emit('playAnimation')">{{$t('stylegen.playAnimation')}}</el-button>
- </el-form-item>
</el-card>
</el-form>
</div>
diff --git a/frontend/src/views/StyleGenerator/index.vue b/frontend/src/views/StyleGenerator/index.vue
index 1095055..e0c2971 100644
--- a/frontend/src/views/StyleGenerator/index.vue
+++ b/frontend/src/views/StyleGenerator/index.vue
@@ -3,10 +3,10 @@
<el-col :sm="24" :md="16">
<el-tabs v-model="activeTab">
<el-tab-pane :label="$t('stylegen.legacy')" name="legacy">
- <legacy ref="legacy" v-model="subComponentResults.legacy" @playAnimation="playAnimation"></legacy>
+ <legacy ref="legacy" v-model="subComponentResults.legacy"></legacy>
</el-tab-pane>
<el-tab-pane :label="$t('stylegen.lineLike')" name="lineLike">
- <line-like ref="lineLike" v-model="subComponentResults.lineLike" @playAnimation="playAnimation"></line-like>
+ <line-like ref="lineLike" v-model="subComponentResults.lineLike"></line-like>
</el-tab-pane>
</el-tabs>
@@ -26,12 +26,17 @@
<el-col :sm="24" :md="8">
<div :style="{position: 'relative', top: `${exampleTop}px`}">
- <p>
- <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')" :inactive-text="$t('stylegen.dark')"></el-switch>
- </p>
+ <el-form inline style="height: 40px">
+ <el-form-item :label="$t('stylegen.playAnimation')">
+ <el-switch v-model="playAnimation" @change="onPlayAnimationChange"></el-switch>
+ </el-form-item>
+ <el-form-item :label="$t('stylegen.backgrounds')" style="margin-left: 20px">
+ <el-switch v-model="exampleBgLight" :active-text="$t('stylegen.light')" :inactive-text="$t('stylegen.dark')"></el-switch>
+ </el-form-item>
+ </el-form>
<div id="example-container" :class="{light: exampleBgLight}">
<div id="fakebody">
- <chat-renderer ref="renderer" :css="exampleCss"></chat-renderer>
+ <room ref="room"></room>
</div>
</div>
</div>
@@ -44,103 +49,16 @@ import _ from 'lodash'
import Legacy from './Legacy'
import LineLike from './LineLike'
-import ChatRenderer from '@/components/ChatRenderer'
-import * as constants from '@/components/ChatRenderer/constants'
-
-let time = new Date()
-let textMessageTemplate = {
- id: 0,
- addTime: time,
- type: constants.MESSAGE_TYPE_TEXT,
- avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
- time: time,
- authorName: '',
- authorType: constants.AUTHRO_TYPE_NORMAL,
- content: '',
- privilegeType: 0,
- repeated: 1,
- translation: ''
-}
-let membershipItemTemplate = {
- id: 0,
- addTime: time,
- type: constants.MESSAGE_TYPE_MEMBER,
- avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
- time: time,
- authorName: '',
- privilegeType: 3,
- title: 'New member'
-}
-let paidMessageTemplate = {
- id: 0,
- addTime: time,
- type: constants.MESSAGE_TYPE_SUPER_CHAT,
- avatarUrl: 'https://static.hdslb.com/images/member/noface.gif',
- authorName: '',
- price: 0,
- time: time,
- content: '',
- translation: ''
-}
-let nextId = 0
-const EXAMPLE_MESSAGES = [
- {
- ...textMessageTemplate,
- id: (nextId++).toString(),
- authorName: 'mob路人',
- content: '8888888888',
- repeated: 12
- },
- {
- ...textMessageTemplate,
- id: (nextId++).toString(),
- authorName: 'member舰长',
- authorType: constants.AUTHRO_TYPE_MEMBER,
- content: '草',
- privilegeType: 3,
- repeated: 3
- },
- {
- ...textMessageTemplate,
- id: (nextId++).toString(),
- authorName: 'admin房管',
- authorType: constants.AUTHRO_TYPE_ADMIN,
- content: 'kksk'
- },
- {
- ...membershipItemTemplate,
- id: (nextId++).toString(),
- authorName: 'xfgryujk'
- },
- {
- ...paidMessageTemplate,
- id: (nextId++).toString(),
- authorName: '小陈',
- price: 66600,
- content: 'Sent 小电视飞船x100'
- },
- {
- ...textMessageTemplate,
- id: (nextId++).toString(),
- authorName: 'streamer主播',
- authorType: constants.AUTHRO_TYPE_OWNER,
- content: '老板大气，老板身体健康'
- },
- {
- ...paidMessageTemplate,
- id: (nextId++).toString(),
- authorName: '叔叔 / おじさん',
- price: 30,
- content: '言いたいことがあるんだよ！'
- }
-]
+import Room from '@/views/Room'
export default {
name: 'StyleGenerator',
components: {
- Legacy, LineLike, ChatRenderer
+ Legacy, LineLike, Room
},
data() {
+ let styleElement = document.createElement('style')
+ document.head.appendChild(styleElement)
// 数据流：
// 输入框 --\
// 子组件 -> subComponentResults -> subComponentResult -> inputResult -> 防抖延迟0.5s后 -> debounceResult -> exampleCss
@@ -156,7 +74,9 @@ export default {
// 防抖后延迟变化的结果
debounceResult: '',
+ styleElement,
exampleTop: 0,
+ playAnimation: true,
exampleBgLight: false
}
},
@@ -176,17 +96,20 @@ export default {
},
inputResult: _.debounce(function(val) {
this.debounceResult = val
- }, 500)
+ }, 500),
+ exampleCss(val) {
+ this.styleElement.innerText = val
+ }
},
mounted() {
this.debounceResult = this.inputResult = this.subComponentResult
- this.$refs.renderer.addMessages(EXAMPLE_MESSAGES)
-
this.$parent.$el.addEventListener('scroll', this.onParentScroll)
},
beforeDestroy() {
this.$parent.$el.removeEventListener('scroll', this.onParentScroll)
+
+ document.head.removeChild(this.styleElement)
},
methods: {
onParentScroll(event) {
@@ -196,10 +119,12 @@ export default {
this.exampleTop = event.target.scrollTop
}
},
- async playAnimation() {
- this.$refs.renderer.clearMessages()
- await this.$nextTick()
- this.$refs.renderer.addMessages(EXAMPLE_MESSAGES)
+ onPlayAnimationChange(value) {
+ if (value) {
+ this.$refs.room.start()
+ } else {
+ this.$refs.room.stop()
+ }
},
copyResult() {
this.$refs.result.select()