使用快捷键控制bilibili的倍速选择
// ==UserScript==
// @name bilibili 倍速控制
// @namespace http://tampermonkey.net/
// @version 1.2
// @description 使用快捷键控制bilibili的倍速选择
// @author pipizhu
// @match http*://www.bilibili.com/video/*
// @match *://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_registerMenuCommand
// @license MIT
// ==/UserScript==
/* jshint esversion: 8 */
(function() {
"use strict";
document.body.onload = init;
})();
const speedList = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3];
const upKeyCode = "Period";
const downKeyCode = "Comma";
let customUpKey = GM_getValue("customUpKey");
let customDownKey = GM_getValue("customDownKey");
async function init() {
// addActionBtns();
console.log("init keybindings");
GM_registerMenuCommand("打开设置面板", openSettings);
try {
bindKeys();
const cachedSpeed = GM_getValue("currentSpeed");
// await delay(1000);
if (cachedSpeed) {
console.log("cached speed", cachedSpeed);
GM_registerMenuCommand("✅当前记忆倍速 X" + cachedSpeed, () => { });
setSpeed(cachedSpeed);
}
console.log("bind success!");
} catch (e) {
console.log("error", e);
}
}
function getCurrentSpeed() {
const video = getCurrentVideo();
return video.playbackRate;
}
function bindKeys() {
const keys = "0123456789";
document.addEventListener(
"keydown",
(e) => {
if (
keys.indexOf(e.key) != -1 &&
!(e.isComposing || e.ctrlKey || e.altKey)
) {
e.stopImmediatePropagation();
}
if (e.key === "2") {
setSpeed(2);
return;
}
if (e.key === "5") {
setSpeed(1.5);
return;
}
if (e.key === "7") {
setSpeed(1.75);
return;
}
if (e.key === "1" || e.key === "z") {
setSpeed(1);
return;
}
if (e.key === "3") {
setSpeed(3);
return;
}
const video = getCurrentVideo();
const currentSpeed = video.playbackRate;
const isCustom = customUpKey && customDownKey;
let currentIndex = speedList.findIndex((s) => s === currentSpeed);
if (isCustom) {
if (e.key === customUpKey) {
currentIndex = Math.min(currentIndex + 1, speedList.length - 1);
}
if (e.key === customDownKey) {
currentIndex = Math.max(currentIndex - 1, 0);
}
} else {
if (e.code === upKeyCode && e.shiftKey) {
// increase speed
currentIndex = Math.min(currentIndex + 1, speedList.length - 1);
} else if (e.code === downKeyCode && e.shiftKey) {
// decrease speed
currentIndex = Math.max(currentIndex - 1, 0);
}
}
const speed = speedList[currentIndex];
setSpeed(speed);
},
true,
);
}
function setSpeed(speed) {
const video = getCurrentVideo();
video.playbackRate = speed;
}
async function delay(time) {
return new Promise((res) => setTimeout(() => res(), time));
}
function getCurrentVideo() {
const video = document.getElementsByTagName("video")[0];
return video;
}
function addStyle(styleString) {
const style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(styleString));
document.head.append(style);
}
function preserveSpeed() {
const currentSpeed = getCurrentSpeed();
GM_setValue("currentSpeed", currentSpeed);
}
function clearSpeed() {
GM_setValue("currentSpeed", "");
}
function openSettings() {
const speed = getCurrentSpeed();
const currentKey = {
up: customUpKey || ">",
down: customDownKey || "<",
};
const html = `
<div class='bli-speed-pannel-setting' id='bli-speed-pannel-setting' style='position: fixed; bottom: 0; right: 0;top: 0;left:0; z-index: 9999;display:flex;justify-content: center;align-items: center'>
<div style='position:absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);z-index: -1'></div>
<div style='background: white;padding:20px;border-radius: 5px;'>
<h2>当前速度：${speed}</h2>
<div>
<button id='save-speed'> 记忆当前速度 </button>
<button id='clear-speed'> 取消记忆当前速度 </button>
</div>
<h2>当前快捷键</h2>
<div>加速键:${currentKey.up} 减速键:${currentKey.down}</div>
<input type='checkbox' id='custom-speed-checkbox' />
<label for="custom-speed-checkbox">自定义快捷键</label>
<div>
<button id='custom-down-key'>设置减速快捷键 </button>
<button id='custom-up-key'>设置加速快捷键 </button>
</div>
<button style='display: block; margin: 0 auto;margin-top: 20px; ' id='close-pannel-setting'>关闭面板</button>
</div>
</div>
`;
document.body.insertAdjacentHTML("beforeend", html);
addStyle(`
.bli-speed-pannel-setting button{
background: transparent;
border: 1px solid;
padding: 5px 8px;
border-radius: 25px;
cursor: pointer;
}
.bli-speed-pannel-setting button:disabled{
cursor: not-allowed;
opacity: 0.5;
}
.bli-speed-pannel-setting h2{
text-align: center;
}
`);
const closePannel = () => {
document.body.removeChild(
document.getElementById("bli-speed-pannel-setting"),
);
};
const upKey = GM_getValue("customUpKey");
const downKey = GM_getValue("customDownKey");
const isCustom = upKey && downKey;
const customCheckBox = document.getElementById("custom-speed-checkbox");
const upBtn = document.getElementById("custom-up-key");
const downBtn = document.getElementById("custom-down-key");
customCheckBox.checked = isCustom;
upBtn.disabled = !isCustom;
downBtn.disabled = !isCustom;
if (upKey) {
upBtn.innerText = "加速键:" + upKey;
}
if (downKey) {
downBtn.innerText = "减速键:" + downKey;
}
function handleUpKey(e) {
const key = e.key;
customUpKey = key;
GM_setValue("customUpKey", key);
upBtn.innerText = "加速键:" + key;
document.removeEventListener("keydown", handleUpKey);
}
function handleDownKey(e) {
const key = e.key;
customDownKey = key;
GM_setValue("customDownKey", key);
downBtn.innerText = "减速键:" + key;
document.removeEventListener("keydown", handleDownKey);
}
upBtn.addEventListener("click", () => {
upBtn.innerText = "请输入加速键";
document.removeEventListener("keydown", handleDownKey);
document.addEventListener("keydown", handleUpKey);
});
downBtn.addEventListener("click", () => {
downBtn.innerText = "请输入减速键";
document.removeEventListener("keydown", handleUpKey);
document.addEventListener("keydown", handleDownKey);
});
customCheckBox.addEventListener("change", (e) => {
const checked = e.target.checked;
upBtn.disabled = !checked;
downBtn.disabled = !checked;
if (!checked) {
GM_setValue("customUpKey", "");
GM_setValue("customDownKey", "");
}
});
document.getElementById("save-speed").addEventListener("click", () => {
preserveSpeed();
closePannel();
});
document.getElementById("clear-speed").addEventListener("click", () => {
clearSpeed();
closePannel();
});
document
.getElementById("close-pannel-setting")
.addEventListener("click", () => {
closePannel();
});
}