feat: 自定义轮播弹幕 (#9)

* feat: 添加自动回复配置页 * feat: 持久化自定义自动弹幕 * style: 自动回复设置窗口可拖拽 * feat: 用特殊标记替换成指定文本
orangelckc · Mar 23, 2023 · 76c38ab · 76c38ab
1 parent 29558f8
commit 76c38ab
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 9 deletions.
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -14,7 +14,11 @@ export const MANAGE = {
   follow: 'manage.follow',
   gift: 'manage.gift',
   welcome: 'manage.welcome',
-  gptToken: 'manage.gptToken'
+  gptToken: 'manage.gptToken',
+  likeText: 'manage.likeText',
+  followText: 'manage.followText',
+  giftText: 'manage.giftText',
+  welcomeText: 'manage.welcomeText'
 };
 
 export const MESSAGE_TYPE = {

diff --git a/src/views/Robot/auto-danmaku-setting-dialog/index.vue b/src/views/Robot/auto-danmaku-setting-dialog/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <q-btn label="设置自动弹幕" @click="dialog = true" />
+  <q-dialog
+      v-model="dialog"
+      persistent
+      :maximized="maximizedToggle"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card>
+        <q-bar data-tauri-drag-region class="hover:cursor-move">
+          <q-space />
+          <!-- TODO 处理下图标 -->
+          <q-btn dense flat @click="maximizedToggle = false" :disable="!maximizedToggle">
+            缩小
+          </q-btn>
+          <q-btn dense flat @click="maximizedToggle = true" :disable="maximizedToggle">
+            全屏
+          </q-btn>
+          <q-btn dense flat v-close-popup>
+            收起
+          </q-btn>
+        </q-bar>
+
+        <q-card-section>
+          <div class="text-h6">设置自动发送的弹幕</div>
+        </q-card-section>
+
+        <q-card-section>
+          <div>
+            输入框中的特殊标记会自动替换成指定的文本
+          </div>
+          <ul>
+            <li>{up} 会被替换成主播名称</li>
+            <li>{user} 会被替换成用户昵称</li>
+            <li>{gift} 会被替换成礼物名称 </li>
+          </ul>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <div>
+            <q-checkbox v-model="manage.like" label="点赞" />
+            <q-input outlined v-model="manage.likeText" label="有人点赞时发送" />
+          </div>
+          <div>
+            <q-checkbox v-model="manage.follow" label="关注" />
+            <q-input outlined v-model="manage.followText" label="有人关注时发送" />
+          </div>
+          <div>
+            <q-checkbox v-model="manage.gift" label="礼物" />
+            <q-input outlined v-model="manage.giftText" label="有人送礼物时发送" />
+          </div>
+          <div>
+            <q-checkbox v-model="manage.welcome" label="欢迎词" />
+            <q-input outlined v-model="manage.welcomeText" label="有人进直播间时发送" />
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { manage } from '../message/robot';
+// 是否打开设置页面
+const dialog = ref(false);
+// 是否最大化设置页面
+const maximizedToggle = ref(true);
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/src/views/Robot/message/robot.ts b/src/views/Robot/message/robot.ts
@@ -34,9 +34,13 @@ export const manage = reactive({
   robotName: await (getStore(MANAGE.robotName)) || '闹闹',
   hostName: await (getStore(MANAGE.hostName)) || '条条',
   like: await (getStore(MANAGE.like)) || false,
+  likeText: await (getStore(MANAGE.likeText)) || '感谢{user}的点赞',
   follow: await (getStore(MANAGE.follow)) || false,
+  followText: await (getStore(MANAGE.followText)) || '感谢{user}关注{up}',
   gift: await (getStore(MANAGE.gift)) || false,
+  giftText: await (getStore(MANAGE.giftText)) || '感谢{user}投喂的{gift}',
   welcome: await (getStore(MANAGE.welcome)) || false,
+  welcomeText: await (getStore(MANAGE.welcomeText)) || '欢迎{user}来到{up}直播间',
   gptToken: await getStore(MANAGE.gptToken) || ''
 });
 
@@ -146,14 +150,16 @@ const init_listener = async () => {
 
         // 关注事件
         if (!manage.follow) return;
-        sendMessage(`感谢${formatUname(item.uname)}关注${manage.hostName}~`);
+        const message = manage.followText.replaceAll('{user}', formatUname(item.uname)).replaceAll('{up}', manage.hostName);
+        messages.push(...autoSlice(message));
       } else if (item.msg_type === "entry") {
         if (!active.value) return;
 
         // 大佬欢迎词
         if (bossList.findIndex(boss => boss.uid === "" + item.uid) !== -1) {
           if (!manage.welcome) return;
-          messages.push(...autoSlice(`欢迎${formatUname(item.uname)}来到${manage.hostName}的直播间～`));
+          const message = manage.welcomeText.replaceAll('{user}', formatUname(item.uname)).replaceAll('{up}', manage.hostName);
+          messages.push(...autoSlice(message));
         }
 
         enter_num.value += 1;
@@ -220,7 +226,8 @@ const init_listener = async () => {
       if (item.barrageType === "like") {
         // 点赞事件
         if (!manage.like) return;
-        messages.push(...autoSlice(`感谢${formatUname(uname)}的点赞~`));
+        const message = manage.likeText.replaceAll('{user}', formatUname(item.uname)).replaceAll('{up}', manage.hostName);
+        messages.push(...autoSlice(message));
       } else {
         !isEmoji && create_danmu_sql({ ...item, roomid: manage.roomid });
       }
@@ -237,7 +244,11 @@ const init_listener = async () => {
       create_gift_sql({ ...item, roomid: manage.roomid });
       if (!manage.gift) return;
       const { uname, giftName, giftId } = item.barrage;
-      giftId !== 1 && messages.push(...autoSlice(`感谢${formatUname(uname)}赠送的${giftName || "礼物"}~`));
+      const message = manage.giftText.replaceAll('{user}', formatUname(uname))
+      .replaceAll('{up}', manage.hostName)
+      .replaceAll('{gift}', giftName || "礼物")
+
+      giftId !== 1 && messages.push(...autoSlice(message));
     });
   });
 

diff --git a/src/views/Robot/room.vue b/src/views/Robot/room.vue
@@ -7,6 +7,7 @@ import { newRecorder, testFfmpge, recordPath } from '@/utils/cmd'
 import { type Child, type Command } from "@tauri-apps/api/shell";
 import Danmaku from './message/index.vue'
 import Video from "./video.vue";
+import AutoDanmakuSettingDialog from './auto-danmaku-setting-dialog/index.vue';
 import { message } from "@tauri-apps/api/dialog";
 import { open } from "@tauri-apps/api/shell";
 
@@ -126,10 +127,7 @@ const stopRecord = async () => {
         </div>
         <div>
           <div class="flex">
-            <q-checkbox v-model="manage.like" label="点赞" />
-            <q-checkbox v-model="manage.follow" label="关注" />
-            <q-checkbox v-model="manage.gift" label="礼物" />
-            <q-checkbox v-model="manage.welcome" label="欢迎词" />
+            <AutoDanmakuSettingDialog />
             <q-toggle v-model="active" size="md" :disable="!connected">
               <div class="i-carbon-machine-learning text-2xl font-bold" :class="active ? 'text-green' : 'text-gray'" />
               <q-tooltip v-if="connected">