fix: 修复上个版本响应式导致的倍速，音量失效的BUG

ocsjs · Apr 13, 2022 · 5182d02 · 5182d02
1 parent 4c64c00
commit 5182d02
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 92 deletions.
diff --git a/packages/core/src/App.vue b/packages/core/src/App.vue
@@ -43,10 +43,9 @@ import { computed } from "@vue/reactivity";
 import { h, ref, watch } from "vue";
 import { addFunctionEventListener, getCurrentPanels, togglePanel } from "./core/utils";
 import { store } from "./script";
+import { definedScripts } from "./main.ts";
 
-const scripts = store.scripts;
-
-const panels = ref(getCurrentPanels(scripts));
+const panels = ref(getCurrentPanels(definedScripts));
 
 /**
  * 对面板进行处理
@@ -70,8 +69,14 @@ const activeKey = ref(currentPanels.value[0]?.name);
 history.pushState = addFunctionEventListener(history, "pushState");
 history.replaceState = addFunctionEventListener(history, "replaceState");
 
-window.addEventListener("pushState", () => (panels.value = getCurrentPanels(scripts)));
-window.addEventListener("replaceState", () => (panels.value = getCurrentPanels(scripts)));
+window.addEventListener(
+    "pushState",
+    () => (panels.value = getCurrentPanels(definedScripts))
+);
+window.addEventListener(
+    "replaceState",
+    () => (panels.value = getCurrentPanels(definedScripts))
+);
 
 /** 当面板发生改变时重绘 */
 watch(currentPanels, () => {

diff --git a/packages/core/src/assets/css/common.css b/packages/core/src/assets/css/common.css
@@ -231,3 +231,13 @@ ocs-panel .search-result-modal {
   position: absolute;
   box-shadow: 0px 0px 4px #c7c7c7;
 }
+ocs-panel .search-results-title {
+  padding: 2px 0px;
+}
+html * {
+  -webkit-user-select: text !important;
+  -khtml-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+  user-select: text !important;
+}
diff --git a/packages/core/src/components/SearchResults.tsx b/packages/core/src/components/SearchResults.tsx
@@ -35,7 +35,7 @@ export const SearchResults = defineComponent({
                 {hasResult.value ? (
                     <div>
                         {currentResult.value ? (
-                            <div class="search-result-modal">
+                            <div class="search-result-modal" onClick={(e) => e.stopPropagation()}>
                                 <div>
                                     <span
                                         style={{ float: "right", cursor: "pointer" }}
@@ -107,6 +107,7 @@ export const SearchResults = defineComponent({
 
                                 return (
                                     <div
+                                        class="search-results-title"
                                         onMouseenter={() => (currentResult.value = res)}
                                         style={{ color: res.result?.finish ? "" : "red" }}
                                     >

diff --git a/packages/core/src/components/Tooltip.tsx b/packages/core/src/components/Tooltip.tsx
@@ -12,10 +12,7 @@ export const Tooltip = defineComponent({
     render() {
         return (
             <div onMouseenter={() => (this.show = true)} onMouseleave={() => (this.show = false)} style="width: 100%">
-                <span
-                    style={{ display: this.show ? "block" : "none", transform: "translate(100%,-100%)" }}
-                    class={"tooltip " + this.type || "dark"}
-                >
+                <span style={{ display: this.show ? "block" : "none" }} class={"tooltip " + (this.type || "dark")}>
                     {this.$slots.title ? (
                         this.$slots.title()
                     ) : (

diff --git a/packages/core/src/components/cx/ExamSettingPanel.tsx b/packages/core/src/components/cx/ExamSettingPanel.tsx
@@ -3,11 +3,11 @@ import { createWorkerSetting } from "..";
 import { store } from "../../script";
 import { Tooltip } from "../Tooltip";
 
-const settings = store.setting.cx.exam;
-
 export const ExamSettingPanel = defineComponent({
-    render() {
-        return (
+    setup() {
+        const settings = store.setting.cx.exam;
+
+        return () => (
             <div class="ocs-setting-panel">
                 <div class="ocs-setting-items">
                     {createWorkerSetting(

diff --git a/packages/core/src/components/cx/StudySettingPanel.tsx b/packages/core/src/components/cx/StudySettingPanel.tsx
@@ -3,11 +3,12 @@ import { createWorkerSetting } from "..";
 import { store } from "../../script";
 import { switchPlayLine } from "../../script/cx/study";
 import { Tooltip } from "../Tooltip";
-const settings = store.setting.cx.video;
 
 export const StudySettingPanel = defineComponent({
-    render() {
-        return (
+    setup() {
+        const settings = store.setting.cx.video;
+
+        return () => (
             <div class="ocs-setting-panel">
                 <div class="ocs-setting-items">
                     <label>视频倍速 </label>
@@ -22,6 +23,8 @@ export const StudySettingPanel = defineComponent({
                                 step="1"
                                 onChange={(e: any) => {
                                     settings.playbackRate = e.target.valueAsNumber;
+                                    console.log("store.currentMedia", store.currentMedia);
+
                                     if (store.currentMedia) {
                                         store.currentMedia.playbackRate = e.target.valueAsNumber;
                                     }
@@ -68,6 +71,8 @@ export const StudySettingPanel = defineComponent({
                             value={settings.volume}
                             onInput={(e: any) => {
                                 settings.volume = e.target.valueAsNumber;
+                                console.log("store.currentMedia", store.currentMedia);
+
                                 if (store.currentMedia) store.currentMedia.volume = e.target.valueAsNumber;
                             }}
                         />

diff --git a/packages/core/src/components/cx/WorkSettingPanel.tsx b/packages/core/src/components/cx/WorkSettingPanel.tsx
@@ -3,11 +3,11 @@ import { createWorkerSetting } from "..";
 import { store } from "../../script";
 import { Tooltip } from "../Tooltip";
 
-const settings = store.setting.cx.work;
-
 export const WorkSettingPanel = defineComponent({
-    render() {
-        return (
+    setup() {
+        const settings = store.setting.cx.work;
+
+        return () => (
             <div class="ocs-setting-panel">
                 <div class="ocs-setting-items">
                     {createWorkerSetting(

diff --git a/packages/core/src/components/index.tsx b/packages/core/src/components/index.tsx
@@ -7,6 +7,7 @@ import { SearchResults } from "./SearchResults";
 import { logger } from "../logger";
 import { Tooltip } from "./Tooltip";
 import { StringUtils } from "../core/utils";
+import { debounce } from "lodash";
 
 /**
  * 创建提示面板
@@ -109,7 +110,7 @@ export function createWorkerSetting(
                                 ? ""
                                 : JSON.stringify(store.setting.answererWrappers)
                         }
-                        onInput={(e: any) => {
+                        onInput={debounce(function (e: any) {
                             try {
                                 const value = JSON.parse(e.target.value);
 
@@ -119,10 +120,9 @@ export function createWorkerSetting(
                                     store.setting.answererWrappers = [];
                                 }
                             } catch (e) {
-                                logger("error", "题库格式错误");
                                 store.setting.answererWrappers = [];
                             }
-                        }}
+                        }, 100)}
                     ></input>
                 </Tooltip>
 
@@ -154,7 +154,7 @@ export function createWorkerSetting(
                                                                     {Reflect.ownKeys(aw.data || {}).map((key) => (
                                                                         <li>
                                                                             {key.toString()} =
-                                                                            {hideToken(aw.data?.[key.toString()] || "")}
+                                                                            {hideToken(aw.data[key.toString()])}
                                                                         </li>
                                                                     ))}
                                                                 </ul>
@@ -195,7 +195,9 @@ export function createWorkerSetting(
 function hideToken(token: string) {
     return /[0-9a-f]{8}[0-9a-f]{4}[0-9a-f]{4}[0-9a-f]{4}[0-9a-f]{12}/.test(token) ||
         /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/.test(token)
-        ? StringUtils.of(token).hide(4, token.length - 4)
+        ? StringUtils.of(token)
+              .hide(4, token.length - 4)
+              .toString()
         : token;
 }
 

diff --git a/packages/core/src/components/zhs/StudySettingPanel.tsx b/packages/core/src/components/zhs/StudySettingPanel.tsx
@@ -3,17 +3,14 @@ import { store } from "../../script";
 import { autoClose } from "../../script/zhs/study";
 import { Tooltip } from "../Tooltip";
 
-const settings = store.setting.zhs.video;
-
 export const StudySettingPanel = defineComponent({
     setup() {
+        const settings = store.setting.zhs.video;
         const closeDate = new Date();
         closeDate.setMinutes(closeDate.getMinutes() + settings.watchTime * 60);
         settings.closeDate = closeDate;
-    },
-    render() {
-        // 根据上方 vnode 变量 ， 生成 jsx 的渲染函数
-        return (
+
+        return () => (
             <div class="ocs-setting-panel">
                 <div class="ocs-setting-items">
                     {settings.creditStudy === false

diff --git a/packages/core/src/components/zhs/WorkSettingPanel.tsx b/packages/core/src/components/zhs/WorkSettingPanel.tsx
@@ -3,12 +3,12 @@ import { createWorkerSetting } from "..";
 import { store } from "../../script";
 import { Tooltip } from "../Tooltip";
 
-const settings = store.setting.zhs.work;
-
 // 根据上方 vnode 变量 ， 生成 jsx 的渲染函数
 export const WorkSettingPanel = defineComponent({
-    render() {
-        return (
+    setup() {
+        const settings = store.setting.zhs.work;
+
+        return () => (
             <div class="ocs-setting-panel">
                 <div class="ocs-setting-items">
                     {createWorkerSetting(

diff --git a/packages/core/src/script/common/index.ts b/packages/core/src/script/common/index.ts
@@ -42,13 +42,15 @@ export const CommonScript = defineScript({
             name: "开启页面右键复制粘贴功能",
             url: supports.map((arr) => arr[0]),
             onload() {
-                setTimeout(() => {
-                    console.log("开启页面右键复制粘贴功能");
+                console.log("开启页面右键复制粘贴功能");
+                try {
                     const d = document;
                     const b = document.body;
                     d.onselectstart = d.oncopy = d.onpaste = d.onkeydown = d.oncontextmenu = () => true;
                     b.onselectstart = b.oncopy = b.onpaste = b.onkeydown = b.oncontextmenu = () => true;
-                }, 3000);
+                } catch (err) {
+                    console.error("页面右键复制粘贴功能开启失败", err);
+                }
             },
         },
         {

diff --git a/packages/core/src/script/index.ts b/packages/core/src/script/index.ts
@@ -14,66 +14,54 @@ export interface OCSStore {
     currentMedia: HTMLMediaElement | null;
     /** 超星 videojs 元素 */
     videojs: HTMLElement | null;
-    scripts: DefineScript[];
     /** 搜索结果存储 */
     workResults: WorkResult<any>[];
 }
 
-export function createStore(): OCSStore {
-    /** 本地存储数据 */
-    const _localStorage: OCSLocalStorage = reactive(
-        defaultsDeep(typeof global === "undefined" ? JSON.parse(localStorage.getItem("OCS") || "{}") : {}, {
-            logs: [],
-            workResults: [],
-            /** 是否缩小隐藏面板 */
-            hide: false,
-            /** 面板位置 */
-            position: {
-                x: 0,
-                y: 0,
-            },
-        } as OCSLocalStorage)
-    );
+/** 本地存储数据 */
+const _localStorage: OCSLocalStorage = reactive(
+    defaultsDeep(typeof global === "undefined" ? JSON.parse(localStorage.getItem("OCS") || "{}") : {}, {
+        logs: [],
+        workResults: [],
+        /** 是否缩小隐藏面板 */
+        hide: false,
+        /** 面板位置 */
+        position: {
+            x: 0,
+            y: 0,
+        },
+    } as OCSLocalStorage)
+);
+
+/** 全局设置 */
+const setting: typeof defaultOCSSetting = defaultsDeep(_localStorage.setting, defaultOCSSetting);
 
-    /** 全局设置 */
-    const setting: typeof defaultOCSSetting = defaultsDeep(_localStorage.setting, defaultOCSSetting);
+// @ts-ignore
+_localStorage.setting = setting;
 
+const _store = reactive<OCSStore>({
+    localStorage: _localStorage,
     // @ts-ignore
-    _localStorage.setting = setting;
+    VERSION: process.env._VERSION_,
+    setting: setting,
+    currentMedia: null,
+    videojs: null,
+    workResults: [],
+});
 
-    /** 监听，并保存到本地 */
-    if (typeof global === "undefined") {
-        watch(_localStorage, () => {
-            localStorage.OCS = JSON.stringify(_localStorage);
-        });
-    }
+// @ts-ignore
+export let store: OCSStore = _store;
 
-    const _store = reactive<OCSStore>({
-        localStorage: _localStorage,
-        // @ts-ignore
-        VERSION: process.env._VERSION_,
-        setting: setting,
-        currentMedia: null,
-        videojs: null,
-        scripts: [],
-        workResults: [],
+if (typeof global === "undefined") {
+    /** 监听，并保存到本地 */
+    watch(_localStorage, () => {
+        localStorage.OCS = JSON.stringify(_localStorage);
     });
-
-    // @ts-ignore
-    let store: OCSStore;
-
-    if (typeof global === "undefined") {
-        try {
+    /** 初始化 store */
+    document.addEventListener("readystatechange", () => {
+        if (document.readyState === "complete") {
             // @ts-ignore
-            store = top?.OCS?.store || _store;
-            return store;
-        } catch (e) {
-            store = _store;
-            return store;
+            store = unsafeWindow?.top?.OCS.store || _store;
         }
-    }
-
-    return {} as OCSStore;
+    });
 }
-
-export const store = createStore();
diff --git a/packages/core/src/start.ts b/packages/core/src/start.ts
@@ -45,9 +45,7 @@ export function start(options?: StartOptions) {
         }
     }
 
-    store.scripts = options?.scripts || definedScripts;
-
-    executeScripts(store.scripts);
+    executeScripts(options?.scripts || definedScripts);
 }
 
 /**