修复了偶尔卡片不消失的问题，修复了偶尔卡片信息不匹配的问题，修复了卡片位置的问题。其他部分BUG。

iceriny · Dec 19, 2023 · f6067ee · f6067ee
1 parent 93b9f42
commit f6067ee
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 19 deletions.
diff --git a/img/128logo.png b/img/128logo.png
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "B站视频信息",
-    "version": "0.5.2",
+    "version": "0.5.6",
     "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过`具体的视频页面`的`左侧边缘处`的`分享按钮`复制到剪切板，方便分享。",
     "default_locale": "zh_CN",
     "icons": {

diff --git a/packagerInfo.json b/packagerInfo.json
@@ -2,6 +2,10 @@
     "package_name": "BiliVideoInfo",
     "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过`具体的视频页面`的`左侧边缘处`的`分享按钮`复制到剪切板，方便分享。",
     "changelog": [
+      {
+        "description": "修复了偶尔卡片不消失的问题，修复了偶尔卡片信息不匹配的问题，修复了卡片位置的问题。其他部分BUG。",
+        "version": "0.5.6"
+      },
       {
         "description": "修改了部分逻辑，优化显示过程，现在更加流畅。",
         "version": "0.5.2"

diff --git a/scripts/content.js b/scripts/content.js
@@ -1,5 +1,11 @@
 const url = 'https://api.bilibili.com/x/web-interface/view';
 
+const isDebug = true;
+function myDebug(msg) {
+    if (isDebug) {
+        console.log(msg);
+    }
+}
 
 function getVideoTarget(target) {
     // 获取目标节点
@@ -17,10 +23,7 @@ function getVideoTarget(target) {
     return null; // 如果未找到符合条件的节点，则返回空
 }
 
-function updateTargetInfo(event) {
-    clearTimeout(hoverTimer);
-
-    let target = getVideoTarget(event.target);
+function updateTargetInfo(target) {
     if (target) {
         let videoId = target.getAttribute("bliVideoInfo-videoId");
         let targetDOMRect = target.getBoundingClientRect()
@@ -94,34 +97,68 @@ async function callAPI(targetInfo) {
 }
 let hoverTimer;
 function showVideoInfo() {
+    myDebug("开始显示视频信息");
     if (videoProfileCard) {
+        myDebug("显示卡片");
         videoProfileCard.enable();
     }
 }
-function cardHandle(event) {
-    const targetInfo = updateTargetInfo(event);
-    if (targetInfo) {
-        callAPI(targetInfo)
-            .then(data => {
+async function cardHandle(event) {
+    let target = getVideoTarget(event.target);
+    if (!target == true) {
+        myDebug("目标未找到");
+        return;
+    }
+
+    let isDisabled = false; // 标记是否已禁用
+
+    //对target注册鼠标离开事
+    target.addEventListener("mouseout", function () {
+        // 取消注册事件
+        target.removeEventListener("mouseout", arguments.callee);
+        // 调用禁用函数
+        videoProfileCard.disable();
+        isDisabled = true;
+        clearTimeout(hoverTimer);
+        hoverTimer = null;
+        myDebug("鼠标离开，取消计时器");
+    });
+
+    myDebug("找到目标，清理计时器，开始计时");
+    clearTimeout(hoverTimer);
+    let timerPromise = new Promise((resolve) => {
+        hoverTimer = setTimeout(() => {
+            resolve();
+            myDebug("计时结束");
+        }, 500);
+    });
+
+    const targetInfo = updateTargetInfo(target);
+    if (targetInfo && hoverTimer) {
+        await callAPI(targetInfo)
+            .then(async data => {
                 if (data && videoProfileCard) {
                     //console.log(data)
                     const dataObj = {
                         videoCardInfo: data,
                         targetDOMRect: targetInfo.targetDOMRect
                     }
                     videoProfileCard.update(dataObj)
+                    myDebug(`更新卡片数据: ${dataObj}`);
+                    await timerPromise;
+                    if (!isDisabled) { // 如果未禁用，则执行 showVideoInfo
+                        showVideoInfo();
+                    }
                 }
             })
             .catch(error => {
                 console.error('发生错误:', error);
             }
             )
     }
-    clearTimeout(hoverTimer);
-    hoverTimer = setTimeout(showVideoInfo, 800);
 }
 
-async function shareHandle(){
+async function shareHandle() {
     if (shareButton) {
         let currentURL = window.location.href.split('?')[0];
         let bvid = getVideoIdFromLink(currentURL);
@@ -130,7 +167,7 @@ async function shareHandle(){
             videoId: bvid
         }).then(async data => {
             if (data && shareButton) {
-                await shareButton.update(data, ShareButton.copyToClipboard);
+                await shareButton.update(data);
             }
         })
     }
@@ -156,6 +193,7 @@ window.addEventListener("load", function () {
     // 当鼠标悬停在文档上时，调用showVideoInfo函数
     document.addEventListener("mouseover", cardHandle);
 
+
     // 添加markScript.js来对网站元素进行标记处理
     // 创建一个<script>元素
     var s = document.createElement('script');

diff --git a/scripts/ui.js b/scripts/ui.js
@@ -61,7 +61,6 @@ class VideoProfileCard {
     }
 
     disable() {
-        this.enabled = false;
         if (this.el) {
             this.enabled = false;
             this.el.classList.remove('flex-display')
@@ -74,6 +73,7 @@ class VideoProfileCard {
             this.enabled = true;
             this.el.classList.remove('none-display')
             this.el.classList.add('flex-display')
+            this.updateCursor(this.data.targetDOMRect)
         }
     }
 
@@ -82,9 +82,13 @@ class VideoProfileCard {
      * @param {DOMRect} targetDOMRect - 目标DOM元素的矩形信息
      */
     updateCursor(targetDOMRect) {
+        myDebug(this.el.scrollHeight)
+        myDebug(this.el.scrollWidth)
+        myDebug(this.el)
         const newTop = targetDOMRect.bottom + this.el.scrollHeight / 2 + window.scrollY + 10;
         const newLeft = targetDOMRect.right + 200 + window.scrollX;
 
+
         this.el.style.top = `${newTop}px`;
         this.el.style.left = `${newLeft}px`;
 
@@ -93,21 +97,23 @@ class VideoProfileCard {
         const viewportWidth = window.innerWidth;
 
         if (newTop + this.el.scrollHeight > viewportHeight) {
+            myDebug(`Top    ${newTop + this.el.scrollHeight} > ${viewportHeight} |||| this.el.scrollHeight == ${this.el.scrollHeight}`)
             this.el.style.top = `${viewportHeight - this.el.scrollHeight - 20}px`;
+            myDebug(`Top    ${this.el.style.top}`)
         }
 
         if (newLeft + this.el.scrollWidth > viewportWidth) {
+            myDebug(`Left   ${newLeft + this.el.scrollWidth} > ${viewportWidth} |||| this.el.scrollWidth == ${this.el.scrollWidth}`)
             this.el.style.left = `${viewportWidth - this.el.scrollWidth - 25}px`;
+            myDebug(`Left   ${this.el.style.left}`)
         }
     }
 
 
     update(dataObj) {
-        //this.enable()
         this.data = dataObj
         if (this.el) {
             this.el.innerHTML = getVideoCard(this.data.videoCardInfo)
-            this.updateCursor(this.data.targetDOMRect)
         }
     }
 }

diff --git a/scripts/uiForShare.js b/scripts/uiForShare.js
@@ -27,17 +27,19 @@ class ShareButton {
         this.target.appendChild(this.el);
     }
 
-    async update(data, callback = null) {
+    async update(data) {
         this.data = data;
         this.formatVideoData();
         ShareButton.shareText =
             `${this.data.title}\n类型：${this.data.type}\n简介：${this.data.desc}\n标签: ${this.getTagsText()}
 \n播放量：${this.data.viewCount}  硬币数：${this.data.coinCount}\n弹幕数：${this.data.danmakuCount}  收藏数：${this.data.favCount}\n点赞数：${this.data.likeCount}  分享量：${this.data.shareCount}
 \n分享链接：${this.data.url}`;
-
+/*
         if (typeof callback === 'function') {
             await callback();
         }
+        */
+        await ShareButton.copyToClipboard();
     }
     /*
     upDataTarget = () => {