Skip to content

Commit

Permalink
v3 改变CSS
Browse files Browse the repository at this point in the history 
完全照搬B站的音量图标和CSS，显示更加美观
  • Loading branch information
@Mehver
Mehver committed Oct 21, 2022
1 parent cfa695c commit 73c57a0
Show file tree
Hide file tree
Showing 9 changed files with 104 additions and 28 deletions.
8 changes: 3 additions & 5 deletions #README/README-zh.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div align="center">
<img src="https://github.com/SynRGB/AcFun-ScrollVolume/raw/main/%23README/icon/256.png" width="20%"/>
<h1>AcFun-ScrollVolume <code>v2.5</code></h1>
<h1>AcFun-ScrollVolume <code>v3.0</code></h1>
<p>
<a href='https://github.com/SynRGB/AcFun-ScrollVolume'><img src="https://img.shields.io/badge/-GitHub-3A3A3A?style=flat&amp;logo=GitHub&amp;logoColor=white" referrerpolicy="no-referrer" alt="GitHub"></a>
<a href='https://greasyfork.org/zh-CN/scripts/453260-acfun-scrollvolume'><img src="https://img.shields.io/badge/-GreasyFork-670000?style=flat&amp;logo=tampermonkey&amp;logoColor=white" referrerpolicy="no-referrer" alt="GreasyFork"></a>
Expand All @@ -13,8 +13,6 @@

滚动滚轮调节AcFun的音量。

### `v2` 更新说明
### `v3` 更新说明

- 优化了实现方法, `v1` 的步长是10, 而 `v2` 做到了 1, 更加的精确
- `v1` 是高中 noob 阶段的时候乱写的, 现在改了些小毛病
- 把 Chrome 插件版本砍掉了, 实在是没必要多此一举
- 完全照搬B站的音量图标和CSS，显示更加美观
8 changes: 3 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div align="center">
<img src="https://github.com/SynRGB/AcFun-ScrollVolume/raw/main/%23README/icon/256.png" width="20%"/>
<h1>AcFun-ScrollVolume <code>v2.5</code></h1>
<h1>AcFun-ScrollVolume <code>v3.0</code></h1>
<p>
<a href='https://github.com/SynRGB/AcFun-ScrollVolume'><img src="https://img.shields.io/badge/-GitHub-3A3A3A?style=flat&amp;logo=GitHub&amp;logoColor=white" referrerpolicy="no-referrer" alt="GitHub"></a>
<a href='https://greasyfork.org/en/scripts/453260-acfun-scrollvolume'><img src="https://img.shields.io/badge/-GreasyFork-670000?style=flat&amp;logo=tampermonkey&amp;logoColor=white" referrerpolicy="no-referrer" alt="GreasyFork"></a>
Expand All @@ -13,8 +13,6 @@

Change AcFun's volume by scroll.

### What's new in `v2`
### What's new in `v3`

- Optimized the implementation method, `v1`'s step size is 10, now `v2`‘s step size is 1, more accurate
- `v1` was written by me during the noob period, and now the code structure has been improved
- Remove the Chrome plugin version, which is unnecessary
- Copy Bilibili's volume icon and CSS, more natural
1 change: 1 addition & 0 deletions icon/bilibili#bpx-svg-sprite-volume-off.base64.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTUgMTFhMy45OTggMy45OTggMCAwMC0yLTMuNDY1djIuNjM2bDEuODY1IDEuODY1QTQuMDIgNC4wMiAwIDAwMTUgMTF6Ii8+CiAgICA8cGF0aCBkPSJNMTMuNTgzIDUuNTgzQTUuOTk4IDUuOTk4IDAgMDExNyAxMWE2IDYgMCAwMS0uNTg1IDIuNTg3bDEuNDc3IDEuNDc3YTguMDAxIDguMDAxIDAgMDAtMy40NDYtMTEuMjg2IDEgMSAwIDAwLS44NjMgMS44MDV6TTE4Ljc3OCAxOC43NzhsLTIuMTIxLTIuMTIxLTEuNDE0LTEuNDE0LTEuNDE1LTEuNDE1TDEzIDEzbC0yLTItMy44ODktMy44ODktMy44ODktMy44ODlhLjk5OS45OTkgMCAxMC0xLjQxNCAxLjQxNEw1LjE3MiA4SDVhMiAyIDAgMDAtMiAydjJhMiAyIDAgMDAyIDJoMWw0LjE4OCAzLjM1YS41LjUgMCAwMC44MTItLjM5di0zLjEzMWwyLjU4NyAyLjU4Ny0uMDEuMDA1YTEgMSAwIDAwLjg2IDEuODA2Yy4yMTUtLjEwMi40MjQtLjIxNC42MjctLjMzM2wyLjMgMi4zYTEuMDAxIDEuMDAxIDAgMDAxLjQxNC0xLjQxNnpNMTEgNS4wNGEuNS41IDAgMDAtLjgxMy0uMzlMOC42ODIgNS44NTQgMTEgOC4xNzJWNS4wNHoiLz4KPC9zdmc+
Binary file added icon/bilibili#bpx-svg-sprite-volume-off.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions icon/bilibili#bpx-svg-sprite-volume-off.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions icon/bilibili#bpx-svg-sprite-volume.base64.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTAuMTg4IDQuNjVMNiA4SDVhMiAyIDAgMDAtMiAydjJhMiAyIDAgMDAyIDJoMWw0LjE4OCAzLjM1YS41LjUgMCAwMC44MTItLjM5VjUuMDRhLjQ5OC40OTggMCAwMC0uODEyLS4zOXpNMTQuNDQ2IDMuNzc4YTEgMSAwIDAwLS44NjIgMS44MDQgNi4wMDIgNi4wMDIgMCAwMS0uMDA3IDEwLjgzOCAxIDEgMCAwMC44NiAxLjgwNkE4LjAwMSA4LjAwMSAwIDAwMTkgMTFhOC4wMDEgOC4wMDEgMCAwMC00LjU1NC03LjIyMnoiLz4KICAgIDxwYXRoIGQ9Ik0xNSAxMWEzLjk5OCAzLjk5OCAwIDAwLTItMy40NjV2Ni45M0EzLjk5OCAzLjk5OCAwIDAwMTUgMTF6Ii8+Cjwvc3ZnPg==
Binary file added icon/bilibili#bpx-svg-sprite-volume.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions icon/bilibili#bpx-svg-sprite-volume.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
106 changes: 88 additions & 18 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
// @name:zh-CN AcFun-滚轮调音量
// @name:jpn AcFun-スクロールボリューム
// @namespace https://github.com/TitanRGB
// @version 2.5
// @version 3.0
// @description Change AcFun's volume by scroll.
// @description:zh-CN 滚动滚轮调节AcFun的音量。
// @description:jpn AcFunの音量をスクロールで変更します。
Expand Down Expand Up @@ -31,6 +31,15 @@
// @copyright Copyright © 2022-PRESENT, TitanRGB (https://github.com/TitanRGB)
// ==/UserScript==

// ./icon/bilibili#bpx-svg-sprite-volume
let icon_volume = `
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTAuMTg4IDQuNjVMNiA4SDVhMiAyIDAgMDAtMiAydjJhMiAyIDAgMDAyIDJoMWw0LjE4OCAzLjM1YS41LjUgMCAwMC44MTItLjM5VjUuMDRhLjQ5OC40OTggMCAwMC0uODEyLS4zOXpNMTQuNDQ2IDMuNzc4YTEgMSAwIDAwLS44NjIgMS44MDQgNi4wMDIgNi4wMDIgMCAwMS0uMDA3IDEwLjgzOCAxIDEgMCAwMC44NiAxLjgwNkE4LjAwMSA4LjAwMSAwIDAwMTkgMTFhOC4wMDEgOC4wMDEgMCAwMC00LjU1NC03LjIyMnoiLz4KICAgIDxwYXRoIGQ9Ik0xNSAxMWEzLjk5OCAzLjk5OCAwIDAwLTItMy40NjV2Ni45M0EzLjk5OCAzLjk5OCAwIDAwMTUgMTF6Ii8+Cjwvc3ZnPg==
`;
// ./icon/bilibili#bpx-svg-sprite-volume-off
let icon_volume_off = `
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTUgMTFhMy45OTggMy45OTggMCAwMC0yLTMuNDY1djIuNjM2bDEuODY1IDEuODY1QTQuMDIgNC4wMiAwIDAwMTUgMTF6Ii8+CiAgICA8cGF0aCBkPSJNMTMuNTgzIDUuNTgzQTUuOTk4IDUuOTk4IDAgMDExNyAxMWE2IDYgMCAwMS0uNTg1IDIuNTg3bDEuNDc3IDEuNDc3YTguMDAxIDguMDAxIDAgMDAtMy40NDYtMTEuMjg2IDEgMSAwIDAwLS44NjMgMS44MDV6TTE4Ljc3OCAxOC43NzhsLTIuMTIxLTIuMTIxLTEuNDE0LTEuNDE0LTEuNDE1LTEuNDE1TDEzIDEzbC0yLTItMy44ODktMy44ODktMy44ODktMy44ODlhLjk5OS45OTkgMCAxMC0xLjQxNCAxLjQxNEw1LjE3MiA4SDVhMiAyIDAgMDAtMiAydjJhMiAyIDAgMDAyIDJoMWw0LjE4OCAzLjM1YS41LjUgMCAwMC44MTItLjM5di0zLjEzMWwyLjU4NyAyLjU4Ny0uMDEuMDA1YTEgMSAwIDAwLjg2IDEuODA2Yy4yMTUtLjEwMi40MjQtLjIxNC42MjctLjMzM2wyLjMgMi4zYTEuMDAxIDEuMDAxIDAgMDAxLjQxNC0xLjQxNnpNMTEgNS4wNGEuNS41IDAgMDAtLjgxMy0uMzlMOC42ODIgNS44NTQgMTEgOC4xNzJWNS4wNHoiLz4KPC9zdmc+
`;

// 一次滚轮滚动会触发两次按键, 用此变量做修正
let count_amend_singleScrollTriggeredTwoTimes = 0;
// 当滚动滚轮, 模拟按下↑↓
Expand Down Expand Up @@ -66,26 +75,87 @@ let scroll = function (e) {
}
// 音量显示
try {
document.querySelector('#volumeText').remove();
} catch (e) {}
let screen = document.querySelector('[data-bind-attr="screen"]');
document.querySelector('#volumeDiv').remove();
} catch (e) {
}
let volume = unsafeWindow.player.volume;
let volumeText = document.createElement('div');
volumeText.setAttribute('id', 'volumeText');
volumeText.setAttribute('style', `
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
text-shadow: 0 0 10px #000;
`);
volumeText.innerHTML = volume.toString().substring(0, 2).replace('.', '') + "%";
screen.appendChild(volumeText);
//////////////////////////////////////////////////////////////
let volumeIcon = document.createElement('span');
let volumeIconInnerSpan = document.createElement('span');
let volumeIconImg = document.createElement('img');
if (volume === 0) {
volumeIconImg.setAttribute('src', icon_volume_off);
} else {
volumeIconImg.setAttribute('src', icon_volume);
}
volumeIconImg.setAttribute('style', `
width: 100%;
height: 100%;
-webkit-transition: fill .15s ease-in-out;
transition: fill .15s ease-in-out;
`);
volumeIconInnerSpan.setAttribute('style', `
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
`);
volumeIcon.setAttribute('style', `
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 34px;
height: 34px;
`);
volumeIcon.appendChild(volumeIconImg);
//////////////////////////////////////////////////////////////
let volumeSpan = document.createElement('span');
volumeSpan.innerHTML = volume.toString().substring(0, 2).replace('.', '') + '%';
volumeSpan.setAttribute('style', `
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 2px;
line-height: 34px;
text-align: center;
`);
//////////////////////////////////////////////////////////////
let volumeDiv = document.createElement('div');
volumeDiv.setAttribute('style', `
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: 50%;
left: 50%;
min-width: 84px;
height: 32px;
padding: 8px;
color: #000;
font-size: 20px;
border-radius: 4px;
background: hsla(0,0%,100%,.8);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 77;
`);
volumeDiv.appendChild(volumeIcon);
volumeDiv.appendChild(volumeSpan);
//////////////////////////////////////////////////////////////
let screen = document.querySelector('[data-bind-attr="screen"]');
screen.appendChild(volumeDiv);
setTimeout(() => {
screen.removeChild(volumeText);
screen.removeChild(volumeDiv);
}, 500);
//////////////////////////////////////////////////////////////
} else {
// 一次滚轮滚动会触发两次按键, 用此变量做修正
count_amend_singleScrollTriggeredTwoTimes = 0;
Expand Down

0 comments on commit 73c57a0

Please sign in to comment.