// ==UserScript==
// @name B站视频播放器右上角显示系统时间丨调整视频比例
// @namespace http://tampermonkey.net/
// @version 1.0.2
// @description 播放器右上角显示系统时间,调整视频比例
// @author echo
// @match *://*.bilibili.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bilibili.com
// @grant GM_setValue
// @grant GM_getValue
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @license CC-BY-NC-SA-4.0
// ==/UserScript==
(function () {
'use strict';
if (window.top != window.self) return;
window.onload = function () {
$(function () {
log("欢迎使用本插件: B站视频播放器右上角显示系统时间丨调整视频比例");
//显示系统时间
const fontSize = 21;//*支持修改,时间字体大小,默认21
const maxCheckNum = 30;//重试次数
let retryTime = 200;//重试间隔
const exponential = 1.1;//间隔延长指数
const colorIn = "var(--bpx-primary-color,#00a1d6) ";
const colorOut = "var(--bpx-dmsend-switch-icon,#757575) ";
const antimetooltip = `@keyframes timetooltip{
from{
opacity:0;
transform:translate(0,6px);
}to{
opacity:1;
transform:translate(0,0);
}
}
.antimetooltip{
animation:timetooltip 0.3s forwards;
animation-delay: 0.3s;
}`;
const ansizetooltip = `@keyframes sizetooltip{
from{
opacity:0;
transform:rotate(-90deg) translate(-6px,0);
}to{
opacity:1;
transform:rotate(-90deg) translate(0,0);
}
}
.ansizetooltip{
animation:sizetooltip 0.3s forwards;
animation-delay: 0.3s;
}`;
let left = '0px';
let top = '0px';
let time = $(`<div class="sys-time toolbar-left-item-wrap" style="z-index:1;position: absolute;color: #ffffffee;right: 5px;top: 0.6px;font-size: ${fontSize}px;text-shadow: 0.3px 0.3px 3px #00000088;font-family:Calibri;">00:00</div>`);
let timetooltip = $(`<div class="bpx-player-tooltip-item" data-name="time_switch" style="left: 0px; top: 0px; visibility: hidden; opacity: 0; transform: translate(0px, 0px);"><div class="bpx-player-tooltip-title">隐藏时间</div></div>`);
let switcher = $(`<div class="time-switcher bpx-player-dm-setting" style="display:flex;align-items:center;justify-content: center;user-select: none;cursor: pointer;">
<span class="bpx-common-svg-icon" style="width:85%;height:85%;">
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" style="transition: none;">
<path style="transition: fill .15s ease-in-out;" d="m770.048,1003.52l-512,0c-128,0 -231.424,-103.424 -231.424,-230.4l0,-512c0,-126.976 103.424,-230.4 230.4,-230.4l512,0c126.976,0 230.4,103.424 230.4,230.4l0,512c1.024,126.976 -102.4,230.4 -229.376,230.4zm-513.024,-880.64c-75.776,0 -138.24,62.464 -138.24,138.24l0,512c0,76.8 62.464,138.24 138.24,138.24l512,0c75.776,0 138.24,-62.464 138.24,-138.24l0,-512c1.024,-76.8 -61.44,-138.24 -137.216,-138.24l-513.024,0z"/>
<path class="time-sign" style="transition: fill .15s ease-in-out;" fill="${colorIn}" d="m513.024,517.12m-66.56,0a66.56,66.56 0 1 0 133.12,0a66.56,66.56 0 1 0 -133.12,0z"/>
<path class="time-sign" style="transition: fill .15s ease-in-out;" fill="${colorIn}" d="m707.584,647.168l-119.808,-119.808c-5.12,33.792 -31.744,60.416 -66.56,64.512l120.832,120.832c18.432,18.432 47.104,18.432 65.536,0c17.408,-18.432 17.408,-47.104 0,-65.536zm-194.56,-205.824c17.408,0 32.768,7.168 46.08,17.408l0,-241.664c0,-25.6 -20.48,-46.08 -46.08,-46.08s-46.08,20.48 -46.08,46.08l0,240.64c13.312,-9.216 28.672,-16.384 46.08,-16.384z"/>
</svg></span></div>`).hover(function () {
delayHide.once();
$(this).find(".time-sign").css({ "fill": colorIn });
left = $(this).offset().left + $(this).outerWidth() / 2 - timetooltip.outerWidth() / 2 + 'px';
top = $(this)[0].getBoundingClientRect().top - timetooltip.outerHeight() - parseInt(timetooltip.css('padding-bottom')) + 'px';
timetooltip.css({ "left": left, "top": top, "visibility": "visible" });
timetooltip.addClass('antimetooltip');
}, timetooltipHide);
function timetooltipHide() {
timetooltip.css({ "visibility": "hidden", "opacity": 0 });
timetooltip.removeClass('antimetooltip');
if (time.is(':hidden')) $(this).find(".time-sign").css({ "fill": colorOut });
else $(this).find(".time-sign").css({ "fill": colorIn })
}
//调整视频比例
let range, regulator;
//菜单延迟消失计时器
let delayHide = {};
delayHide.ms = 200;//延迟时间
delayHide.run = function () {
this.tag = setTimeout(function () {
if (!regulator.is(':hover') && !range.is(':hover')) {
range.css({ "visibility": "hidden", "opacity": 0 });
range.removeClass('ansizetooltip');
regulator.css("fill", '');
}
}, this.ms);
};
delayHide.clear = function () {
clearTimeout(this.tag);
};
delayHide.once = function () {
delayHide.clear();
range.css({ "visibility": "hidden", "opacity": 0 });
range.removeClass('ansizetooltip');
regulator.css("fill", '');
}
range = $(`<div class="bpx-player-tooltip-item" data-name="size_regulate" style="
left: 0px; top: 0px; visibility: hidden; opacity: 0; transform: translate(0px, 0px);
box-sizing: border-box;
display: flex;
align-items: center;
height: 42px;
width: 120px;
padding: 0 6px;
transform: rotate(-90deg);
background: hsla(0,0%,8%,.9);
pointer-events: auto;
justify-content: flex-start;
"><input style="box-sizing: border-box;opacity: 1;width: 80%;flex-shrink: 0;" type="range" min="0.5" max="1.5" value="1.0" step="0.1" id="sizein" oninput="sizeout.value=parseInt(sizein.value*100)+'%'"><span style="
position: absolute;
box-sizing: border-box;
word-break: keep-all;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
width: 42px;
transform: translate(0,-50%) rotate(90deg);
top: 50%;
right: -5%;
"><output id="sizeout" style="user-select:none;">100%</output></span></div>`).hover(function () {
delayHide.clear();
regulator.css({ "fill": colorIn });
}, function () {
delayHide.run();
});
regulator = $(`<div class="size-regulator bpx-player-dm-setting" style="display:flex;align-items:center;justify-content: center;user-select: none;cursor: pointer;">
<span class="bpx-common-svg-icon" style="width:90%;height:90%;">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M933.79188053 859.89239467l-124.452864-124.39825067c54.2277632-69.58066347 86.87670613-156.76320427 86.87670614-251.59161173 0-226.3482368-184.19111253-410.47381333-410.56119467-410.47381334-226.3973888 0-410.56119467 184.12557653-410.56119467 410.47381334 0 226.32093013 184.16380587 410.46289067 410.56119467 410.46289066 94.72464213 0 181.82089387-32.53971627 251.3403904-86.64733013l124.48017067 124.452864c20.0933376 20.0769536 52.56751787 20.1752576 72.52978346 0.23483733 19.96117333-19.9786496 19.84648533-52.40367787-0.212992-72.51339946zM153.2919808 483.89707093c0-183.22445653 149.09549227-332.28608853 332.3625472-332.28608853s332.35708587 149.06272427 332.35708587 332.28608853S668.9226752 816.18425173 485.654528 816.18425173 153.2919808 667.12152747 153.2919808 483.89707093z m470.70358187-39.08785493h-99.24225707v-99.24225707c0-20.75415893-17.5210496-37.58598827-39.0987776-37.58598826-21.6006656 0-39.0987776 16.81107627-39.0987776 37.58598826v99.24225707H347.29710933c-20.7650816 0-37.59691093 17.51012693-37.59691093 39.10970027 0 21.59520427 16.81107627 39.08785493 37.59691093 39.08785493h99.25864107v99.22041173c0 20.75962027 17.49920427 37.60237227 39.0987776 37.60237227 21.57882027 0 39.0987776-16.82199893 39.0987776-37.60237227v-99.22041173h99.24225707c20.75962027 0 37.61329493-17.49920427 37.61329493-39.08785493 0.00109227-21.6006656-16.85367467-39.10970027-37.61329493-39.10970027z m0 0"></path></svg></span></div>`).hover(function () {
delayHide.clear();
left = $(this).offset().left + $(this).outerWidth() / 2 - range.outerWidth() / 2 + 'px';
top = $(this)[0].getBoundingClientRect().top - range.outerWidth() + range.outerHeight() - parseInt(range.css('padding-left')) + 'px';
range.css({ "left": left, "top": top, "visibility": "visible" });
range.addClass('ansizetooltip');
}, function () {
delayHide.run();
});
//注入网页
let player = $('.bpx-player-video-wrap');//播放器
let video = $('.bpx-player-video-wrap video');//视频
let bar = $('.bpx-player-dm-setting');//弹幕设置图标
let promise = new Promise((resolve, reject) => {
let checkNum = 0;
let checkPlayer = () => {
if (player.length * bar.length * video.length == 0 && checkNum <= maxCheckNum) {
if (player.length == 0)
player = $('.bpx-player-video-wrap');
else if (video.length == 0) video = $('bpx-player-video-wrap video');
if (bar.length == 0) bar = $('.bpx-player-dm-setting');
checkNum++;
setTimeout(checkPlayer, retryTime *= exponential);
} else {
if (player.length == 0) {
reject("未找到播放器");
} else if (video.length == 0) {
reject("未找到视频")
} else if (bar.length == 0) {
reject("未找到弹幕栏")
} else {
log("获取到播放器 " + player.length);
log("获取到视频 " + video.length);
log("获取到弹幕栏 " + bar.length);
resolve();
}
}
};
checkPlayer();
});
promise.then(result => {
//初始化
$('head').append(`<style>${antimetooltip}${ansizetooltip}</style>`);
time.text(getTime());
player.prepend(time);
//设置时间开关
bar.after(switcher);
switcher.click(() => {
time.toggle(0, 'swing', function () {
if (time.is(':hidden')) { timetooltip.children().text("显示时间"); GM_setValue('sys-time', 0); }
else { timetooltip.children().text("隐藏时间"); GM_setValue('sys-time', 1); }
});
});
//设置时钟
setTimeout(() => {
time.text(getTime());
setInterval(() => {
time.text(getTime());
}, 1000 * 60);
}, (60 - new Date().getSeconds()) * 1000);
//时间开关提醒
$('.bpx-player-tooltip-area').append(timetooltip);
//设置视频尺寸调节按钮
switcher.after(regulator);
//调节滑块
$('.bpx-player-tooltip-area').append(range);
//调节尺寸
video.parent().css({ "display": "flex", "justify-content": "center", "align-items": "center" });
$("#sizein").on("input", function () {
let size = $("#sizeout").text();
video.css({ "width": size, "height": size });
GM_setValue('video-size', size);
});
//载入配置
GM_getValue('sys-time', 1) == 1 ? (log("载入配置 sys-time: 1"), time.show(), timetooltip.children().text("隐藏时间"), switcher.find(".time-sign").css({ "fill": colorIn })) : (log("载入配置 sys-time: " + GM_getValue('sys-time')), time.hide(), timetooltip.children().text("显示时间"), switcher.find(".time-sign").css({ "fill": colorOut }));
let tmpSize = GM_getValue('video-size', '100%');
log("载入配置 video-size: " + tmpSize);
$("#sizein").val((parseFloat(tmpSize) / 100.0).toFixed(1));
$("#sizeout").val(tmpSize);
video.css({ "width": tmpSize, "height": tmpSize });
}).catch(error => {
log(error, 'error');
});
//滚动立即消失
$(document).on('scroll', function () {
console.log("scroll");
timetooltipHide();
delayHide.once();
});
});
};
//获取时间
function getTime() {
let date = new Date();
let h = ('0' + date.getHours()).slice(-2);
let m = ('0' + date.getMinutes()).slice(-2);
let time = h + ':' + m;
return time;
}
function log(message, type) {
const tag = "%cB站播放器右上角时间%c ";
const style = "background: #6FB01D; color: white; padding: 3px 3px 2px 3px; border-radius: 3px;font-size:11px;font-weight:bold;"
if (type == 'error') console.error(tag + message, style, 'font-size:11px;');
else console.log('' + tag + message, style, 'font-size:11px;');
}
})();
