放大进度条并显示分段标题
// ==UserScript==
// @name B站显示分段标题
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 放大进度条并显示分段标题
// @author atakhalo
// @match https://www.bilibili.com/*
// @icon https://www.bilibili.com/favicon.ico
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 动态调整字本大小
function adjustTextSize(element) {
// 创建一个 canvas 元素用于测量文本宽度
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
ctx.font = element.style.font;
// 测量文本宽度
const showRate = 1.5; // 字显示时变长了
const textWidth = ctx.measureText(element.textContent).width * showRate;
const singleWidth = 10 * showRate; // 16px 单字 10长度
const textScaleWidth = singleWidth * 2;
// 如果相差两个字以内，则缩放
const textOffset = textWidth - element.offsetWidth
if (textOffset > 0) // 文本短于容器不需要处理
{
if(textOffset <= textScaleWidth)
{
const ratio = element.offsetWidth / textWidth
element.style.transform = `scale(${ratio})`; // 缩放文本
element.style.transformOrigin = 'center center'; // 确保缩放的中心点在文本的中心
}
else // 否则改为省略后面文字
{
const textOver = textOffset / singleWidth + 1;
const str = element.textContent;
element.textContent = str.slice(0, str.length - textOver) + "..";
}
}
}
// 给片段加标题
function AddSegmentTitle(segment, title) {
// 创建一个文本节点
const textNode = document.createTextNode(title);
// 创建一个 div 用于包裹文本，使其居中
const textWrapper = document.createElement('div');
textWrapper.className = 'text-wrapper'; // 用于样式
textWrapper.appendChild(textNode);
// 设置样式使文本居中且宽度与父元素相同
textWrapper.style.width = '100%';
textWrapper.style.position = 'absolute';
textWrapper.style.top = '0'; // 或者 '50%' 并加上 transform: translateY(-50%)
textWrapper.style.left = '0';
textWrapper.style.display = 'flex';
textWrapper.style.justifyContent = 'center'; // flex-start
textWrapper.style.alignItems = 'center';
textWrapper.style.height = '100%';
textWrapper.style.fontSize = '16px';
textWrapper.style.color = 'white'; // 文本颜色
textWrapper.style.textShadow = '2px 2px 2px rgba(0,0,0,0.5)'; // 文本描边
textWrapper.style.whiteSpace = 'nowrap'
// 将文本节点添加到元素中
segment.appendChild(textWrapper);
// 等待重排后再调用调整字体大小的函数
requestAnimationFrame(() => {
adjustTextSize(textWrapper);
});
}
// 给每个片段加标题
function AddToSegment(progress) {
const segments = progress.querySelectorAll('.bpx-player-progress-schedule-segment');
const lis = document.querySelectorAll('.bpx-player-ctrl-viewpoint-menu li');
for (let i = 0; i < segments.length; i++) {
const segment = segments[i];
const liText = lis[i].textContent;
AddSegmentTitle(segment, liText);
}
}
// 给两条进度条加标题
function ProgressAddTitle() {
const progress1 = document.querySelector('.bpx-player-progress-schedule-wrap');
const progress2 = document.querySelector('.bpx-player-shadow-progress-schedule-wrap');
AddToSegment(progress1)
AddToSegment(progress2)
}
// 点击进度条会重置，定时设置一下
function BigProgressCheck() {
setInterval(function() {
const progress1 = document.querySelector('.bpx-player-progress');
if (progress1.style.height != "20px")
{
progress1.style.height = "20px";
}
const progress2 = document.querySelector('.bpx-player-shadow-progress-area');
if (progress2.style.height != "20px")
{
progress2.style.height = "20px";
}
}, 1000);
}
// 放大进度条
function SetBigProgress() {
// 定时检测到两个进度条加载后设置高度及添加文字，设置完取消定时
// 上方进度条点击时会重置，再定时设置
var checkInterval = setInterval(function() {
const progress1 = document.querySelector('.bpx-player-progress');
const progress2 = document.querySelector('.bpx-player-shadow-progress-area');
if (progress1 && progress2) {
progress1.style.height = "20px";
progress2.style.height = "20px";
clearInterval(checkInterval);
ProgressAddTitle();
BigProgressCheck();
}
}, 500);
}
// 定时检测url是否变了判断是否切换分p
var originalUrl = window.location.href;
function ListenToToggle() {
setInterval(function () {
var currentUrl = window.location.href;
if (currentUrl !== originalUrl) {
originalUrl = currentUrl;
ProgressAddTitle()
}
}, 1000);
}
// 网页有播放器才执行脚本内容
function TryExecute() {
const video = document.querySelector('.bpx-player-video-area');
if (video)
{
SetBigProgress();
ListenToToggle();
}
}
TryExecute();
})();