修复了鼠标移开视频视频卡片无法消失的bug; 将视频卡片的弹出更加丝滑;修复了部分其他BUG;尝试修复分享按钮有时没有出现的BUG,现在将…

…按钮放置屏幕左侧边缘的淡粉色半圆,鼠标悬浮将显示按钮.
iceriny · Nov 25, 2023 · acb5d1c · acb5d1c
1 parent 464313b
commit acb5d1c
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 95 deletions.
diff --git a/css/BVCard.css b/css/BVCard.css
@@ -8,7 +8,9 @@
     box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.221);
     pointer-events: none;
     transform: translate(-50%, -50%);
-    transition: 0.3s ease;
+
+    transition: all 0.3s ease;
+    animation: fadeIn 0.5s ease-in-out 1; /* 使用动画 */
 }
 
 #biliVideoCard #video-card {
@@ -99,4 +101,23 @@
     padding: 3px;
     box-sizing: border-box;
     text-align: center;
+}
+
+.none-display {
+    display: none;
+}
+.flex-display {
+    display: flex;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 1;
+    }
 }
diff --git a/css/BiliSimpleShare.css b/css/BiliSimpleShare.css
@@ -1,22 +1,35 @@
 #biliSimple-share-button {
+    position: absolute;
+    width: 1.5vw;
+    height: 1.5vw;
+    left: -1.5vw;
+    top: 18vh;
+
     font-size: 13px;
+    font-weight: bold;
     margin: 0px 0px 0px 8px;
     padding: 3px;
-    color: #fb7299;
-    background-color: #fafafa;
-    border-radius: 5px;
+    color: #ffd9e4;
+    background-color: #ffd9e4;
+    border-radius: 50%;
 
-    border-style: none;
+    border: none;
 
     transition: all 0.3s ease-in-out;
 }
 
 #biliSimple-share-button:hover {
+    transform: translateX(30%);
+    width: 3vw;
+    height: 3vw;
+
+    border-radius: 30%;
     background-color: #fb7299;
     color: white;
 }
 
 
+
 #biliSimple-share-pop {
     font-size: 20px;
 
@@ -48,7 +61,7 @@
     20% {
         opacity: 1;
     }
-    50% {
+    60% {
         opacity: 1;
     }
     100% {

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

diff --git a/packagerInfo.json b/packagerInfo.json
@@ -1,7 +1,11 @@
 {
     "package_name": "BiliVideoInfo",
-    "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过具体的视频页面的视频标题处的分享按钮复制到剪切板，方便分享。",
+    "description": "可以预览B站视频信息, 播放量、点赞、投币、收藏、转发、等。\n\n还可以将视频信息和链接通过具体的视频页面的左侧边缘处的分享按钮复制到剪切板，方便分享。",
     "changelog": [
+      {
+        "description": "修复了鼠标移开视频视频卡片无法消失的bug; 将视频卡片的弹出更加丝滑; 修复了部分其他BUG;尝试修复分享按钮有时没有出现的BUG,现在将按钮放置屏幕左侧边缘的淡粉色半圆,鼠标悬浮将显示按钮.",
+        "version": "0.4.0"
+      },
       {
         "description": "合并[简单分享]插件的功能，现在可以在具体的视频页面的视频标题处看到一个分享按钮,该按钮可以将视频信息和链接复制到剪切板方便分享。",
         "version": "0.3.0"

diff --git a/scripts/content.js b/scripts/content.js
@@ -38,61 +38,64 @@ async function handleInfoWithWbi(targetInfo, toWhat = "") {
         bvid: (toWhat == 'share') ? targetInfo : targetInfo.videoId
         // 或者 aid: 1234567
     };
+    try {
+        // 从 Chrome Storage 中获取数据
+        chrome.storage.sync.get(['wbi_keys'], async result => {
+            const wbiKeys = result.wbi_keys;
+            //console.log(wbiKeys); // 确认获取到数据
 
-    // 从 Chrome Storage 中获取数据
-    chrome.storage.sync.get(['wbi_keys'], async result => {
-        const wbiKeys = result.wbi_keys;
-        //console.log(wbiKeys); // 确认获取到数据
-
-        // 为参数进行 Wbi 签名
-        const signedParams = encWbi(params, wbiKeys.img_key, wbiKeys.sub_key);
+            // 为参数进行 Wbi 签名
+            const signedParams = encWbi(params, wbiKeys.img_key, wbiKeys.sub_key);
 
-        // 构建请求 URL
-        const requestURL = `https://api.bilibili.com/x/web-interface/view/detail?${signedParams}`;
+            // 构建请求 URL
+            const requestURL = `https://api.bilibili.com/x/web-interface/view/detail?${signedParams}`;
 
 
-        // 发送请求
-        const response = await fetch(requestURL, {
-            method: 'GET',
-            credentials: 'include', // 认证方式：Cookie(SESSDATA)
-        });
+            // 发送请求
+            const response = await fetch(requestURL, {
+                method: 'GET',
+                credentials: 'include', // 认证方式：Cookie(SESSDATA)
+            });
 
-        if (!response.ok) {
-            throw new Error(`请求失败：${response.status}`);
-        }
+            if (!response.ok) {
+                throw new Error(`请求失败：${response.status}`);
+            }
 
-        const videoInfo = await response.json();
-        // 视频信息处理:
-        const videoCardInfo = {
-            url: `www.bilibili.com/video/${params.bvid}`,//链接
-            title: videoInfo.data.View.title,//标题
-            desc: videoInfo.data.View.desc,//简介
-            tags: videoInfo.data.Tags.map(item =>
-                item.tag_name),//标签
-            viewCount: videoInfo.data.View.stat.view,//播放量
-            danmakuCount: videoInfo.data.View.stat.danmaku,//弹幕数
-            likeCount: videoInfo.data.View.stat.like,//点赞量
-            coinCount: videoInfo.data.View.stat.coin,//硬币数
-            favCount: videoInfo.data.View.stat.favorite,//收藏量
-            shareCount: videoInfo.data.View.stat.share,//分享量
-            type: VIDEO_TYPE_MAP[`${videoInfo.data.View.tid}`]//视频类型
-        }
-        if (toWhat == '') {
-            const dataObj = {
-                videoCardInfo: videoCardInfo,
-                targetDOMRect: targetInfo.targetDOMRect
+            const videoInfo = await response.json();
+            // 视频信息处理:
+            const videoCardInfo = {
+                url: `www.bilibili.com/video/${params.bvid}`,//链接
+                title: videoInfo.data.View.title,//标题
+                desc: videoInfo.data.View.desc,//简介
+                tags: videoInfo.data.Tags.map(item =>
+                    item.tag_name),//标签
+                viewCount: videoInfo.data.View.stat.view,//播放量
+                danmakuCount: videoInfo.data.View.stat.danmaku,//弹幕数
+                likeCount: videoInfo.data.View.stat.like,//点赞量
+                coinCount: videoInfo.data.View.stat.coin,//硬币数
+                favCount: videoInfo.data.View.stat.favorite,//收藏量
+                shareCount: videoInfo.data.View.stat.share,//分享量
+                type: VIDEO_TYPE_MAP[`${videoInfo.data.View.tid}`]//视频类型
             }
-            //videoProfileCard.
-            if (videoProfileCard) {
-                console.log(videoProfileCard)
-                videoProfileCard.upDate(dataObj)
+            if (toWhat == '') {
+                //videoProfileCard.
+                if (videoProfileCard) {
+                    const dataObj = {
+                        videoCardInfo: videoCardInfo,
+                        targetDOMRect: targetInfo.targetDOMRect
+                    }
+                    console.log(videoProfileCard)
+                    videoProfileCard.upDate(dataObj)
+                }
             }
-        }
-        //分享按钮更新
-        if (shareButton && toWhat == 'share') {
-            shareButton.Update(videoCardInfo);
-        }
-    });
+            //分享按钮更新
+            if (shareButton && toWhat == 'share') {
+                shareButton.Update(videoCardInfo);
+            }
+        });
+    } catch (error) {
+        console.log('发生错误:', error);
+    }
 }
 
 
@@ -101,12 +104,12 @@ function getVideoUrl() {
     return currentURL.split('?')[0];
 }
 
-function callShareButton() {
+async function callShareButton() {
     if (shareButton) {
         let currentURL = getVideoUrl();
         let bvid = getVideoIdFromLink(currentURL);
 
-        handleInfoWithWbi(bvid, "share");
+        await handleInfoWithWbi(bvid, "share");
     }
 }
 /**
@@ -156,9 +159,9 @@ function showVideoInfo(event) {
             }
 
             //对target注册鼠标离开事
-            target.addEventListener("mouseleave", function () {
+            target.addEventListener("mouseout", function () {
                 // 取消注册事件
-                target.removeEventListener("mouseleave", arguments.callee);
+                target.removeEventListener("mouseout", arguments.callee);
                 // 调用禁用函数
                 videoProfileCard.disable();
             });
@@ -172,7 +175,7 @@ function showVideoInfo(event) {
 // 加载网站脚本来为用户链接添加标签
 window.addEventListener("load", function () {
     //向ShareButton发送消息
-    setTimeout(callShareButton, 4000)
+    //setTimeout(callShareButton, 4000)
     // 当鼠标悬停在文档上时，调用showVideoInfo函数
     document.addEventListener("mouseover", showVideoInfo);
 

diff --git a/scripts/ui.js b/scripts/ui.js
@@ -51,9 +51,10 @@ class VideoProfileCard {
 
         this.el = document.createElement("div");
         this.el.style.position = "absolute";
-        this.el.style.display = "none";
         this.el.style.zIndex = 1013
 
+        this.el.classList.add('none-display')
+
         document.body.appendChild(this.el);
 
         this.disable();
@@ -62,14 +63,17 @@ class VideoProfileCard {
     disable() {
         this.enabled = false;
         if (this.el) {
-            this.el.style.display = "none";
+            this.enabled = false;
+            this.el.classList.remove('flex-display')
+            this.el.classList.add('none-display')
         }
     }
 
     enable() {
         if (!this.enabled) {
             this.enabled = true;
-            this.el.style.display = "flex";
+            this.el.classList.remove('none-display')
+            this.el.classList.add('flex-display')
         }
     }