此脚本是用于b站看视频同时在视频全屏页面记录笔记，同时增加了一些便利的功能
目前为
// ==UserScript==
// @name b站笔记
// @namespace http://tampermonkey.net/
// @version 1.3.1
// @description 此脚本是用于b站看视频同时在视频全屏页面记录笔记，同时增加了一些便利的功能
// @author 繁星1678
// @match https://www.bilibili.com/video/*
// @match https://www.bilibili.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant GM_addStyle
// @license MIT
// @require https://cdn.jsdelivr.net/npm/sweetalert2@11
// ==/UserScript==
(function () {
'use strict';
let IsFull = false;
let IsJbjClick = false;
let bar;
let selection;
let range;
let tm_qd;
let IsInsert = false;
let IsMyNote = false;
let IsNotePcHightChange = false;
let isClose = true;
let isTmAddLisner = false;//是否设置了插入时间标签点击监听事件
const currentUrl = window.location.href;
let isCloseNoteList = false;
/////////////////////////////////////
// 创建iframe,访问的网页显示在这里面，并将iframe插入到页面中
function createIframeAndIsertDocument() {
let iframeS = document.querySelector('.note-list-iframe')
// 创建一个 iframe 并设置其样式
let iframe = document.createElement('iframe');
iframe.src = 'https://space.bilibili.com/v/note-list';
iframe.className = 'note-list-iframe';
iframe.style.width = '65%';
iframe.style.height = '80%';
iframe.style.position = 'fixed';
iframe.style.top = '50px';
iframe.style.left = '0px';
iframe.style.border = 'none';
iframe.style.zIndex = '99999';
iframe.style.boxShadow = '0 4px 8px';
iframe.style.borderRadius = '10px';
if (!iframeS) {
document.body.appendChild(iframe)
//////////
iframe.onload = function () {
// 移除 onload 处理函数，避免重复执行
iframe.onload = null;
// 初始化拖动功能
// 其他初始化操作
removeBiliMainHeader();
};
//////////
}
}
// 在首页移除笔记列表头部在
function removeBiliMainHeader() {
let iframe = document.querySelector('.note-list-iframe')
// 获取 iframe 内部的文档
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.querySelector('#biliMainHeader').remove()
}
// 在首页设置iframe可拖动
function iframeDrag(iframe) {
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
// let iframe = document.querySelector('.note-list-iframe')
iframe.addEventListener('load', () => {
iframe.contentDocument.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - iframe.offsetLeft;
offsetY = e.clientY - iframe.offsetTop;
});
iframe.contentDocument.addEventListener('mousemove', (e) => {
if (isDragging) {
iframe.style.left = (e.clientX - offsetX) + 'px';
iframe.style.top = (e.clientY - offsetY) + 'px';
}
});
iframe.contentDocument.addEventListener('mouseup', () => {
isDragging = false;
});
});
}
// 创建笔记列表按钮并添加监听事件
function setNoteListBtn() {
let iframe = null
let noteListsBtn = document.querySelector('.note-lists');
// 如果存在就设置监听,不存在就创造一个并设置监听
if (noteListsBtn) {
// setNoteListsBtnListener(noteListsBtn);
// alert('noteListsBtn存在:',noteListsBtn)
} else {
// alert('noteListsBtn不存在')
function createNoteListBtnAndInsertDocument() {
let avatar_wrap = document.querySelector('.header-avatar-wrap');
if (avatar_wrap) {
noteListsBtn = document.createElement('div');
noteListsBtn.style.display = 'grid';
noteListsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="55" height="20" viewBox="0 0 24 24" style="filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));"><g fill="none" stroke="#FF8C00" stroke-width="1.5"><path stroke-linecap="round" d="M18 10h-5"/><path d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z"/></g></svg><span style="color: #FF8C00; font-size: 13px; text-shadow: 0.1px 0.1px 0.3px rgba(0, 0, 0, 0.6);">我的笔记</span>`;
noteListsBtn.style.cursor = 'pointer';
noteListsBtn.className = 'note-lists';
avatar_wrap.parentNode.insertBefore(noteListsBtn, avatar_wrap);
observer.disconnect();
// setNoteListsBtnListener(noteListsBtn)
noteListsBtn.addEventListener('click', function (e) {
if (isCloseNoteList) {
let iframe = document.querySelector('.note-list-iframe');
document.body.removeChild(iframe);
// 笔记列表被关闭，换成我的笔记的图标
noteListsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="55" height="20" viewBox="0 0 24 24" style="filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));"><g fill="none" stroke="#FF8C00" stroke-width="1.5"><path stroke-linecap="round" d="M18 10h-5"/><path d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z"/></g></svg><span style="color: #FF8C00; font-size: 13px; text-shadow: 0.1px 0.1px 0.3px rgba(0, 0, 0, 0.6);">我的笔记</span>`;
} else {
createIframeAndIsertDocument()
function isloadIframe() {
iframe = document.querySelector('.note-list-iframe')
if (iframe) {
observer.disconnect();
iframeDrag(iframe)
}
}
let observer = new MutationObserver(isloadIframe)
let config = { childList: true, subtree: true }
observer.observe(document.body, config)
// 笔记列表被打开，换成关闭笔记的图标
noteListsBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="55" height="20" viewBox="0 0 24 24" style="filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));"><g fill="none" stroke="#65a30d" stroke-width="1.5"><path d="M1 15V9a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v6a6 6 0 0 1-6 6H7a6 6 0 0 1-6-6Z"/><path d="M7 9a3 3 0 1 1 0 6a3 3 0 0 1 0-6Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 15V9h3m2 6V9h3m-8 3h2.572M17 12h2.572"/></g></svg><span style="color: #FF8C00; font-size: 13px; text-shadow: 0.1px 0.1px 0.3px rgba(0, 0, 0, 0.6);">关闭笔记</span>`
}
isCloseNoteList = !isCloseNoteList;
})
}
}
let observer = new MutationObserver(createNoteListBtnAndInsertDocument)
let config = { childList: true, subtree: true }
observer.observe(document.body, config)
}
}
// if (
// (currentUrl.startsWith('https://www.bilibili.com/?spm_id_from=') && currentUrl.includes('='))
// || currentUrl === 'https://www.bilibili.com/'
// ) {
// setNoteListBtn()
// }
if (currentUrl.startsWith('https://www.bilibili.com/')) {
setNoteListBtn()
}
if (currentUrl.indexOf('https://www.bilibili.com/video/') === 0 || currentUrl.startsWith('https://www.bilibili.com/cheese/')) {
function isFirefox() {
return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
}
function moveButtonWhenDetected() {
const jbj_btn = document.querySelector('#arc_toolbar_report > div.video-toolbar-right > div.video-note.video-toolbar-right-item.toolbar-right-note > div.video-note-inner');
const qxd_btn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.bpx-player-ctrl-btn.bpx-player-ctrl-quality');
const full_btn = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.bpx-player-ctrl-btn.bpx-player-ctrl-full")
const wyqp_btn = document.querySelector("div.bpx-player-ctrl-btn.bpx-player-ctrl-web")
if (jbj_btn && qxd_btn && full_btn && wyqp_btn) {
qxd_btn.parentNode.insertBefore(jbj_btn, qxd_btn);
// 重新设置样式，确保移动后的按钮也有正确的样式
const newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
if (newJbjBtn) {
// 直接修改style属性来应用样式
newJbjBtn.style.marginRight = '25px';
newJbjBtn.style.cursor = 'pointer';
// 注意：颜色需要确保与CSS中定义的一致，这里直接应用白色
newJbjBtn.style.color = 'white';
newJbjBtn.addEventListener("click", (e) => {
setTimeout(() => {
jbjBtnOnclickEvent()
}, 0);
// 这里应该是具体的点击事件处理逻辑
// jbjBtnOnclickEvent()
});
}
observer.disconnect();
full_btn.addEventListener("click", function () {
// setTimeout(() => {
// full_btn_event()
// }, 0);
full_btn_event()
})
wyqp_btn.addEventListener("click", function () {
// setTimeout(() => {
// wyqpBtnEvent()
// }, 0);
wyqpBtnEvent()
})
setTimeout(() => {
let noteListsBtn = document.querySelector('.note-lists')
setNoteListsBtnListener(noteListsBtn)
}, 100);
}
}
// 创建MutationObserver实例
const observer = new MutationObserver(moveButtonWhenDetected);
// 配置观察选项：子节点变化
const config = { childList: true, subtree: true };
// 开始观察body（或其它合适的容器）
observer.observe(document.body, config);
// 确保DOMContentLoaded后也尝试执行一次，以防元素一开始就存在
window.addEventListener('DOMContentLoaded', moveButtonWhenDetected);
// let noteListsBtn = document.querySelector('.note-lists')
// if(noteListsBtn){
// setNoteListsBtnListener(noteListsBtn)
// }else{
// alert('未找到笔记列表按钮在视频播放页面函数中569行')
// }
// 删除时间戳与图片之间的空格br元素
function deleteBr() {
////////////////////////////////////////////
// 获取所有匹配 .ql-image-preview 类的元素
let images = document.querySelectorAll(".ql-image-preview");
// 初始化变量以存储最大数字和对应的元素
let maxNumber = -1;
let maxImageElement = null;
// 遍历每个元素
images.forEach(image => {
// 获取 data-id 属性的值
const dataId = image.getAttribute('data-id');
// 提取数字部分
const number = parseInt(dataId.match(/\d+/)[0], 10);
// 比较数字，更新最大数字和对应的元素
if (number > maxNumber) {
maxNumber = number;
maxImageElement = image;
}
});
let currentImage = maxImageElement.previousElementSibling;
// let currentImage = lastImage.previousElementSibling;
if (currentImage && currentImage.tagName === 'P') {
currentImage.parentNode.removeChild(currentImage)
} else {
console.log('没有找到匹配的元素');
}
}
// 插入截屏的同时也插入时间标记
function Screenshot() {
if (isTmAddLisner) return;
// 插入截屏按钮
let tp = document.querySelector("span.ql-capture-btn.ql-bar");
// 插入时间标记按钮
let tm = document.querySelector("span.ql-tag-btn.ql-bar-btn");
let note_editor = document.querySelector("div.note-editor")
if (tp && tm) {
tp.addEventListener("click", (e) => {
creatNoteImageClikEvent();
tm.click()
setTimeout(() => {
deleteBr()
}, 900)
});
let observerActive = false;
tm.addEventListener("click", () => {
if (observerActive) return;
if (IsInsert) return;
const insert = () => {
let tm_qd = document.querySelector("div.dialog-btn.tag-dialog__btn--confirm");
if (tm_qd) {
tm_qd.click();
observer.disconnect();
observerActive = false;
}
};
const observer = new MutationObserver(insert);
const config = { childList: true, subtree: true };
observer.observe(note_editor, config);
observerActive = true;
});
} else {
console.error("无法找到截屏按钮或时间标记按钮");
}
}
///////////////////////////
///////////////////////////
function full_btn_event() {
// let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
// let bfyHeight = bfy.getBoundingClientRect().height;
let note_pc = document.querySelector("div.resizable-component.note-pc")
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let bfyHeight = bfy.getBoundingClientRect().height;
// let wh = window.innerHeight;
if (note_pc && bfyHeight != 1080 && IsJbjClick) {
setNotePanel()
} else if (note_pc && bfyHeight == 1080 && IsJbjClick) {
let infoflow = document.querySelector("#__infoflow_commercial")
let biliMainHeader = document.querySelector("#biliMainHeader")
if (infoflow) {
infoflow.parentNode.insertBefore(note_pc, infoflow)
} else if (biliMainHeader) {
biliMainHeader.parentNode.insertBefore(note_pc, biliMainHeader)
} else {
console.log("没有找到infoflow和biliMainHeader节点")
}
}
}
function wyqpBtnEvent() {
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let wh = window.innerHeight;
let bfyHeight = bfy.getBoundingClientRect().height;
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (bfyHeight == wh && IsJbjClick) {
setNotePanel()
} else {
if (note_pc && IsJbjClick) {
let infoflow = document.querySelector("#__infoflow_commercial")
let biliMainHeader = document.querySelector("#biliMainHeader")
if (infoflow) {
infoflow.parentNode.insertBefore(note_pc, infoflow)
} else if (biliMainHeader) {
biliMainHeader.parentNode.insertBefore(note_pc, biliMainHeader)
} else {
console.log("没有找到infoflow和biliMainHeader节点")
}
}
}
}
////////////////////////////////////////////
function MyNoteBtnClick() {
const userNames = document.querySelectorAll('.user-name');
// 统计这些元素的数量
const count = userNames.length;
// 输出结果
console.log(`user-name 的个数是: ${count}`);
for (let i = 0; i < count; i++) {
let note_card_container = document.querySelector(`div.note-card-container > div:nth-child(${i + 1})`);
if (note_card_container) {
note_card_container.addEventListener('click', function () {
// IsMyNote = false;
// creatNoteImageClikEvent()
let MyNoteBtn = document.querySelector("div.note-operation.detail");
if (MyNoteBtn) {
MyNoteBtn.addEventListener('click', handleMyNoteBtnClick);
} else {
console.log('没有找到MyNoteBtn');
}
});
}
}
}
function OnNoteListWheel() {
let NoteList = document.querySelector("div.note-content > div")
if (NoteList) {
NoteList.addEventListener('wheel', e => {
let MyNoteBtn = document.querySelector("div.note-operation");
if (MyNoteBtn) {
MyNoteBtn.addEventListener('click', handleMyNoteBtnClick);
} else {
console.log('没有找到MyNoteBtn');
}
});
} else {
console.log('没有找到NoteList');
}
}
function handleMyNoteBtnClick() {
setTimeout(() => {
refreshBtn();
back_note_btn_event();
}, 0);
}
function close_btn_event() {
let close_btn = document.querySelector("div.close-note")
if (!close_btn) return;
close_btn.addEventListener("click", (e) => {
isClose = true
IsJbjClick = false
isTmAddLisner = false
})
}
// 查看笔记按钮事件
function ckbj_btn_event() {
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (thumb) { thumb.style.top = "0" }
range = ""
let ckbj_btn = document.querySelector('div.list-note-operation');
if (ckbj_btn) {
ckbj_btn.addEventListener('click', function () {
IsMyNote = true
let ql_editor = document.querySelector(".ql-editor")
if (ql_editor) {
ql_editor.style.overflowY = "auto"
ql_editor.style.overflowX = "hidden"
} else {
console.log("没有找到ql_editor,无法修改滚动条样式")
}
let note_editor = document.querySelector("div.note-editor")
note_editor.style.height = "96%"
creatNoteImageClikEvent()//点击笔记中图片触发事件
Screenshot()
isTmAddLisner = true
InsertBtnEvent()
// let NotePanel = document.querySelector("body > div.resizable-component.note-pc")
// if (NotePanel) {
// NotePanel.style.width = '450px'
// }
refreshScrollbar()
// refreshWidthDivBox()
// refreshOpacity()
// refreshBtn()
setTimeout(() => {
refreshBtn()
}, 0);
back_note_btn_event()
editorEvent()
setTimeout(() => {
InsertBtnEvent()
}, 0);
// refreshScrollbar()
})
}
}
// 从笔记页面后退按钮的事件
function back_note_btn_event() {
let back_note_btn = document.querySelector("div.back-note-list")
if (back_note_btn) {
back_note_btn.addEventListener("click", function () {
// IsNotePcHightChange=false
isTmAddLisner = false
scrollbarDisplay("hide")
BtnDisplay("hide")
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (note_pc.style.opacity != 1) { note_pc.style.opacity = 1 }
// 重置透明度值
let opacitySlider = document.querySelector("div.sliderContainer > input")
if (opacitySlider) { opacitySlider.value = 0 }
let label2 = document.querySelector("div.sliderContainer > label2")
if (label2) { label2.textContent = '0%' }
// if (note_pc.style.width != "405px") {
// note_pc.style.width = "405px"
// }
ckbj_btn_event()
})
} else {
console.log("没有找到back_note_btn")
}
}
// 添加宽度控制条
function jbjBtnOnclickEvent() {
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (thumb) { thumb.style.top = "0" }
range = ""
isClose = false
IsJbjClick = true
let opacitySlider = document.querySelector("div.sliderContainer > input")
if (opacitySlider) { opacitySlider.value = 0 }
let label2 = document.querySelector("div.sliderContainer > label2")
if (label2) { label2.textContent = '0%' }
let note_list = document.querySelector("div.note-list")
if (note_list) { note_list.style.height = '96%'; }
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let ql_editor = document.querySelector(".ql-editor")
if (ql_editor) {
ql_editor.style.overflowY = "auto"
ql_editor.style.overflowX = "hidden"
}
let bfyHeight = bfy.getBoundingClientRect().height;
let wh = window.innerHeight;
if (bfyHeight == wh) {
setNotePanel()
}
noteEvent()
refreshBar()
// 笔记宽度
refreshWidthDivBox()
console.log("1 if (jbj_btn_title == 记笔记)执行")
// 笔记透明度
refreshOpacity()
close_btn_event()
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
let jbj_btn_title = newJbjBtn.innerText.trim()
let note_pc = document.querySelector("div.resizable-component.note-pc");
if (note_pc) {
note_pc.style.minWidth = "300px"
note_pc.addEventListener('mouseover', (e) => {
note_pc.addEventListener('wheel', (e) => {
e.stopPropagation();
})
})
note_pc.addEventListener('mousedown', (e) => {
note_pc.addEventListener('wheel', (e) => {
e.stopPropagation();
})
})
note_pc.addEventListener('mouseup', (e) => {
note_pc.addEventListener('wheel', (e) => {
e.stopPropagation();
})
})
} else {
console.log("在代码416行没有找到note_pc")
}
if (note_pc.style.opacity != 1) { note_pc.style.opacity = 1 }
if (jbj_btn_title === "记笔记") {
IsMyNote = true
let note_editor = document.querySelector("div.note-editor")
note_editor.style.height = "96%"
creatNoteImageClikEvent()
Screenshot()
isTmAddLisner = true
editorEvent()
InsertBtnEvent()
console.log("2 if (jbj_btn_title == 记笔记)执行")
refreshScrollbar()
// refreshWidthDivBox()
// refreshOpacity()
refreshBtn()
back_note_btn_event()
} else {
OnNoteListWheel()
MyNoteBtnClick()
scrollbarDisplay("hide")
BtnDisplay("hide")
// console.log("2:jbjBtnOnclickEvent()执行-按钮隐藏和滚动条隐藏已经执行")
ckbj_btn_event()
}
let bar = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch > div.custom-bar-class")
// let bfyHeight = bfy.getBoundingClientRect().height;
if (bfyHeight >= 1080) {
bar.style.display = "block"
}
refreshBtnlistener()
// let note_editor = document.querySelector("div.note-editor")
// note_pc.style.height += 100+"px";
// note_pc = document.querySelector("div.resizable-component.note-pc")
}
// 1.笔记面板宽度控制条相关
// 判断WidthDivBoxExist是否存在如果不存在则添加宽度控制条,存在则删除后重新添加才能不出错保持监听事件有效
function refreshWidthDivBox() {
let widthDivBox = document.querySelector("div.width-control-box")
if (!widthDivBox) { setWidthDivBox() }
}
// 设置宽度控制条
function setWidthDivBox() {
let note_pc = document.querySelector("div.resizable-component.note-pc")
//使笔记始终保持在网页中固定位置,即使网页上下滚动,笔记始终都可见
GM_addStyle(`
.fixed-position {
position: fixed !important;
}
`);
note_pc.classList.add('fixed-position');
// 创建一个新的div来容纳滑块和标签，并添加类名
let widthDivBox = document.createElement('div');
widthDivBox.className = 'width-control-box';
widthDivBox.style.width = '405px';
widthDivBox.style.marginLeft = '25px';
// widthDivBox.style.height = '15px';
widthDivBox.style.height = '1.5%';
// widthDivBox.style.marginBottom = '1.4%';
// 创建并设置宽度滑块左侧标签，并添加类名
let widthLab1 = document.createElement('label');
widthLab1.className = 'width-slider-label';
widthLab1.textContent = '宽度';
widthLab1.style.fontSize = '15px';
widthLab1.style.borderRadius = "10px";
widthLab1.style.marginRight = '2.5px';
widthLab1.style.color = "rgb(19, 72, 87)";
// 创建并设置宽度滑块右侧标签，并添加类名
let widthLab2 = document.createElement('label');
widthLab2.className = 'width-slider-value';
widthLab2.textContent = '800px';
widthLab2.style.borderRadius = "10px";
widthLab2.style.color = "rgb(19, 72, 87)";
widthLab1.style.marginRight = '2.5px';
widthLab2.style.fontSize = '15px';
// widthLab2.style.right = '0';
// 创建宽度滑块，并添加类名
let widthSlider = document.createElement('input');
widthSlider.className = 'width-slider';
widthSlider.type = 'range';
widthSlider.min = '300';
widthSlider.max = '1912';
widthSlider.step = '1';
widthSlider.value = note_pc.offsetWidth.toString(); // 初始值为当前宽度
// 设置宽度滑块样式
widthSlider.style.marginRight = '2.5px';
widthSlider.style.height = "8px";
widthSlider.style.width = "300px";
widthSlider.style.outline = "none";
widthSlider.style.backgroundColor = "#003300";
// widthSlider.style.backgroundColor = "skyblue";
widthSlider.style.opacity = "1";
widthSlider.style.cursor = "pointer";
widthLab1.addEventListener('mousedown', function (e) {
e.preventDefault();
e.stopPropagation();
})
widthLab2.addEventListener('mousedown', function (e) {
e.preventDefault();
e.stopPropagation();
})
// 添加事件监听器来响应滑块的变化
// 笔记中有图片时,图片宽度也需要单独调节
const img = document.getElementsByClassName('ql-image-preview');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'style') {
const width = parseInt(note_pc.style.width.replace('px', ''), 10);
widthSlider.value = width;
widthLab2.textContent = width + 'px';
}
});
});
// 观察note_pc的style属性
observer.observe(note_pc, { attributes: true, attributeFilter: ['style'] });
widthSlider.addEventListener("input", function (e) {
e.preventDefault();
e.stopPropagation();
let value = widthSlider.value;
note_pc.style.width = value + 'px';
if (img) {
for (let i = 0; i < img.length; i++) {
// 为当前元素设置宽度
img[i].style.width = value + 'px';
}
}
widthLab2.textContent = value + 'px';
});
// 将元素添加到DOM中
widthDivBox.appendChild(widthLab1);
widthDivBox.appendChild(widthSlider);
widthDivBox.appendChild(widthLab2);
let note_content = document.querySelector("div.note-content")
if (note_content) {
note_content.parentNode.insertBefore(widthDivBox, note_content);
} else {
console.error("note_content元素不存在")
}
}
// 2.笔记内容高度控制条
// 刷新笔记面板内容高度控制条
function refreshScrollbar() {
// 类名:ZDscrollbar
if (isFirefox()) {
console.log('这是火狐浏览器');
return;
} else {
console.log('这不是火狐浏览器');
}
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (!note_pc) return;
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar && scrollbar.style.display == "none") {
scrollbarDisplay("show")
refreshScrollBarListener(scrollbar)
} else if (!scrollbar) {
setScrollbar()
}
function refreshScrollBarListener(s) {
function alteration() {
let contentHeight;
let scrollbar = s;
let isDragging = false;
let dragStartPos = 0;
// dragStartPos = 0;
let editor = document.querySelector('.ql-editor');
if (!editor) {
console.log("在633行未找到 editor 元素")
}
let track = document.querySelector("div.ZDscrollbar.custom-scrollbar > div")
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (!IsNotePcHightChange) {
thumb.style.top = '0';
}
// thumb.style.top = '0';
let scrollbarHeight;
let note_pcHeight;
track.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('scroll', () => {
// contentHeight = editor.scrollHeight;
// scrollbarHeight = scrollbar.clientHeight;
// note_pcHeight = editor.clientHeight;
let scrollTop = editor.scrollTop;
let thumbTop = (scrollTop / (contentHeight - note_pcHeight)) * (scrollbarHeight - thumb.clientHeight);
thumb.style.top = `${thumbTop}px`;
});
// let isDragging = false;
// let dragStartPos = 0;
// dragStartPos = 0;
thumb.addEventListener('mousedown', (e) => {
e.preventDefault(); // 取消默认操作，阻止链接跳转
e.stopPropagation(); // 阻止事件冒泡到其他监听器
isDragging = true;
dragStartPos = e.clientY - thumb.offsetTop;
});
thumb.addEventListener('mouseover', (e) => {
thumb.style.opacity = '1';
});
thumb.addEventListener('mouseout', (e) => {
thumb.style.opacity = '0.3';
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
let newTop = Math.max(0, Math.min(scrollbarHeight - thumb.clientHeight, e.clientY - dragStartPos));
thumb.style.top = `${newTop}px`;
let scrollFraction = newTop / (scrollbarHeight - thumb.clientHeight);
editor.scrollTop = scrollFraction * (contentHeight - note_pcHeight);
});
}
const ro = new ResizeObserver(entries => {
IsNotePcHightChange = true
entries.forEach(entry => {
alteration();
// console.log(`note_pc高度发生变化 ${entry.contentRect.height}`);
});
});
ro.observe(note_pc);
}
}
function scrollbarDisplay(displayState) {
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar === null) {
console.error(" Scrollbar element not found.");
return;
}
if (displayState === "hide") {
scrollbar.style.display = "none";
} else if (displayState === "show") {
scrollbar.style.display = "block";
} else {
console.warn("Invalid display state. Expected 'hide' or 'show'.");
}
}
// 设置笔记内容高度控制条
function setScrollbar() {
let note_pc = document.querySelector("div.resizable-component.note-pc")
if (note_pc === null) {
console.error("note_pc element not found.");
return;
}
const scrollbar = document.createElement('div');
scrollbar.className = 'ZDscrollbar';
scrollbar.classList.add('custom-scrollbar');
scrollbar.style.position = 'absolute';
// scrollbar.style.top = note_pc.style.top;
scrollbar.style.top = '0';
scrollbar.style.width = '12px';
scrollbar.style.height = '100%';
scrollbar.style.right = '-13px';
const track = document.createElement('div');
track.className = 'track';
track.style.width = '100%';
track.style.height = '100%';
track.style.backgroundColor = "#f0f0f0";
track.style.borderRadius = '3px';
const thumb = document.createElement('div');
thumb.className = 'thumb';
thumb.style.position = 'relative';
thumb.style.width = '100%';
thumb.style.backgroundColor = "#888";
thumb.style.borderRadius = '5px';
thumb.style.opacity = '0.3';
thumb.style.height = '49px';
// 鼠标移到thumb后光标变成小手:
thumb.style.cursor = 'pointer';
track.appendChild(thumb);
scrollbar.appendChild(track);
// bjk_box.parentNode.appendChild(scrollbar);
note_pc.appendChild(scrollbar);
alteration()
function alteration() {
let editor = document.querySelector('.ql-editor');
let contentHeight;
let scrollbarHeight;
let note_pcHeight;
if (!IsNotePcHightChange) {
thumb.style.top = '0';
}
// thumb.style.top = '0';
track.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('mouseover', () => {
contentHeight = editor.scrollHeight;
note_pcHeight = editor.clientHeight;
scrollbarHeight = scrollbar.clientHeight;
});
editor.addEventListener('scroll', () => {
let scrollTop = editor.scrollTop;
let thumbTop = (scrollTop / (contentHeight - note_pcHeight)) * (scrollbarHeight - thumb.clientHeight);
thumb.style.top = `${thumbTop}px`;
});
let isDragging = false;
let dragStartPos = 0;
isDragging = false;
dragStartPos = 0;
thumb.addEventListener('mousedown', (e) => {
e.preventDefault(); // 取消默认操作，阻止链接跳转
e.stopPropagation(); // 阻止事件冒泡到其他监听器
isDragging = true;
dragStartPos = e.clientY - thumb.offsetTop;
});
thumb.addEventListener('mouseover', (e) => {
thumb.style.opacity = '1';
});
thumb.addEventListener('mouseout', (e) => {
thumb.style.opacity = '0.3';
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
let newTop = Math.max(0, Math.min(scrollbarHeight - thumb.clientHeight, e.clientY - dragStartPos));
thumb.style.top = `${newTop}px`;
let scrollFraction = newTop / (scrollbarHeight - thumb.clientHeight);
editor.scrollTop = scrollFraction * (contentHeight - note_pcHeight);
});
}
const ro = new ResizeObserver(entries => {
IsNotePcHightChange = true
entries.forEach(entry => {
alteration();
// console.log(`note_pc高度发生变化 ${entry.contentRect.height}`);
});
});
ro.observe(note_pc);
}
// 3.透明度控制条
// 刷新笔记面板内容高度控制条
function refreshOpacity() {
let OpacityBox = document.querySelector("div.sliderContainer")
if (OpacityBox) {
return
} else {
setOpacity()
}
}
function setOpacity() {
let ql_snow = document.querySelector("div.editor-innter.ql-container.ql-snow")
let opacitySliderBox = document.createElement('div');
opacitySliderBox.className = 'sliderContainer'; // 添加类名
opacitySliderBox.style.width = '405px';
opacitySliderBox.style.marginLeft = '25px';
// opacitySliderBox.style.height = '15px';
opacitySliderBox.style.height = '3%';
opacitySliderBox.style.marginTop = '10px';
// opacitySliderBox.style.marginBottom = '1%';
opacitySliderBox.style.marginBottom = '10px';
// opacitySliderBox.style.backgroundColor = '#000000';
let lab1 = document.createElement('label1');
lab1.className = 'sliderLabel1'; // 添加类名
lab1.textContent = '透明';
lab1.style.fontSize = '15px';
lab1.style.borderRadius = "10px";
lab1.style.marginRight = '2.5px';
// lab1.style.color = "#000000";
lab1.style.color = "#020205";
// lab1.style.background = '#663366';
// lab1.style.fontWeight = "bold";
// lab1.style.color = "##FFFF00";
let lab2 = document.createElement('label2');
lab2.className = 'sliderLabel2'; // 添加类名
lab2.textContent = '0%';
lab2.style.borderRadius = "10px";
// lab2.style.color = "#000000";
lab2.style.color = "#020205";
// lab2.style.background = '#663366';
lab2.style.right = '50px'; // 可能需要调整，因为right属性通常与position属性一起使用
lab2.style.fontSize = '15px';
lab2.style.fontWeight = "bold";
let opacitySlider = document.createElement('input');
opacitySlider.className = 'opacitySlider'; // 添加类名
opacitySlider.type = 'range';
opacitySlider.min = '0';
// opacitySlider.max = '1';
opacitySlider.max = '0.95';
opacitySlider.step = '0.01';
// opacitySlider.value = '1';
opacitySlider.value = '0';
// 滑块样式
opacitySlider.style.marginRight = '2.5px';
opacitySlider.style.height = "8px";
opacitySlider.style.width = "300px";
opacitySlider.style.outline = "none";
opacitySlider.style.backgroundColor = "#000000";
opacitySlider.style.color = "#000000";
opacitySlider.style.opacity = "1";
opacitySlider.style.cursor = "pointer";
// 将元素添加到dom中
opacitySliderBox.appendChild(lab1);
opacitySliderBox.appendChild(opacitySlider);
opacitySliderBox.appendChild(lab2);
let note_pc = document.querySelector("div.resizable-component.note-pc")
opacitySlider.addEventListener("input", function (e) {
// 若不阻止默认操作opacitySlider.value就无法拖动到最大值
e.preventDefault();
e.stopPropagation();
let value = opacitySlider.value;
note_pc.style.opacity = 1 - value;
// let text_value = Math.round(value * 100);
let text_value = Math.round(value * 100);
lab2.textContent = text_value + '%';
});
// 鼠标移入透明度调节滑块时，弹窗提示鼠标所x在位置透明度数值
opacitySlider.addEventListener('mousemove', function (event) {
// 获取滑块的宽度和鼠标的位置
let rect = opacitySlider.getBoundingClientRect();
let offsetX = event.clientX - rect.left;
let sliderWidth = rect.width;
// 计算滑块的值
let value = (offsetX / sliderWidth) * (opacitySlider.max - opacitySlider.min) + opacitySlider.min;
value = Math.round(value * 100); // 保留两位小数
opacitySlider.title = '透明度调整为: ' + value + "%";
});
let width_control_box = document.querySelector("div.width-control-box")
width_control_box.insertAdjacentElement('afterend', opacitySliderBox);
// ql_snow.parentNode.insertBefore(opacitySliderBox, ql_snow);
}
// 4.到顶部/到底部按钮
function refreshBtn() {
let BtnBox = document.querySelector("div.note-header.drag-el > div.scrollButtonWrapper")
if (BtnBox) {
BtnDisplay('show')
refreshBtnlistener()
return;
}
else {
setBtn()
}
}
function BtnDisplay(displayState) {
let BtnBox = document.querySelector("div.scrollButtonWrapper")
if (!BtnBox) { return; }
if (displayState == "hide") {
BtnBox.style.display = "none";
} else if (displayState == "show") {
BtnBox.style.display = "block";
}
}
function setBtn() {
let btnContainer = document.createElement('div');
btnContainer.className = 'scrollButtonWrapper'; // 添加类名
btnContainer.style.left = "150px";
btnContainer.style.position = "absolute";
btnContainer.style.backgroundColor = "transparent"; // 设置背景为透明
// 创建到顶部按钮
let toTopBtn = document.createElement("button");
toTopBtn.className = 'scrollToTopBtn'; // 添加类名
toTopBtn.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNNSA1VjRoMTR2MXptNi41IDE1VjkuNjA4bC0zLjEgMy4xTDcuNjkyIDEyTDEyIDcuNjkyTDE2LjMwOCAxMmwtLjcwOC43MDhsLTMuMS0zLjFWMjB6Ii8+PC9zdmc+')"; // 使用 Base64 编码的图片
toTopBtn.style.backgroundSize = "cover"; // 使背景图片覆盖整个按钮
toTopBtn.style.width = "22px"; // 设置按钮宽度
toTopBtn.style.height = "25px"; // 设置按钮高度
toTopBtn.style.border = "none"; // 移除按钮边框
toTopBtn.style.cursor = "pointer"; // 设置鼠标悬停样式
toTopBtn.title = '到顶部';
toTopBtn.style.marginRight = "5px"
toTopBtn.style.backgroundColor = "transparent";
// 创建到底部按钮
let toBottomBtn = document.createElement("button");
toBottomBtn.className = 'scrollToBottomBtn'; // 添加类名
toBottomBtn.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNNSAyMHYtMWgxNHYxem03LTMuNjkyTDcuNjkyIDEybC43MDgtLjcwOGwzLjEgMy4xVjRoMXYxMC4zOTJsMy4xLTMuMWwuNzA4LjcwOHoiLz48L3N2Zz4=')"; // 使用 Base64 编码的图片
toBottomBtn.style.backgroundSize = "cover"; // 使背景图片覆盖整个按钮
toBottomBtn.style.width = "22px"; // 设置按钮宽度
toBottomBtn.style.height = "25px"; // 设置按钮高度
toBottomBtn.style.border = "none"; // 移除按钮边框
toBottomBtn.style.cursor = "pointer"; // 设置鼠标悬停样式
toBottomBtn.title = '到底部';
toBottomBtn.style.marginRight = "5px"
toBottomBtn.style.backgroundColor = "transparent";
// 创建隐藏按钮
let hideBtn = document.createElement("button");
hideBtn.className = 'hide'; // 添加类名
hideBtn.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJtOS44MDggMTQuODhsLTQuNzQgNC43NDdxLS4xNDcuMTQ2LS4zNDUuMTU2dC0uMzYzLS4xNTZ0LS4xNjYtLjM1N3QuMTY2LS4zNTZsNC43NC00Ljc0MUg2LjU1OHEtLjIxMyAwLS4zNTYtLjE0NHEtLjE0NC0uMTQ0LS4xNDQtLjM1N3QuMTQ0LS4zNTZ0LjM1Ni0uMTQzSDEwcS4zNDMgMCAuNTc2LjIzMnQuMjMyLjU3NnYzLjQ0MnEwIC4yMTMtLjE0NC4zNTZ0LS4zNTcuMTQ0dC0uMzU2LS4xNDR0LS4xNDMtLjM1NnpNMTQuOSA5Ljc5aDIuNTQycS4yMTMgMCAuMzU3LjE0NHEuMTQzLjE0My4xNDMuMzU2dC0uMTQzLjM1NnQtLjM1Ny4xNDRIMTRxLS4zNDMgMC0uNTc1LS4yMzN0LS4yMzMtLjU3NVY2LjUzOXEwLS4yMTMuMTQ0LS4zNTd0LjM1Ny0uMTQzdC4zNTYuMTQzdC4xNDMuMzU3VjkuMDhsNC43NC00Ljc0NnEuMTQ3LS4xNDYuMzQ1LS4xNTZ0LjM2NC4xNTZxLjE2NS4xNjUuMTY1LjM1NnEwIC4xOTItLjE2Ni4zNTd6Ii8+PC9zdmc+')"; // 使用 Base64 编码的图片
hideBtn.style.backgroundSize = "cover"; // 使背景图片覆盖整个按钮
hideBtn.style.width = "22px"; // 设置按钮宽度
hideBtn.style.height = "25px"; // 设置按钮高度
hideBtn.style.border = "none"; // 移除按钮边框
hideBtn.style.cursor = "pointer"; // 设置鼠标悬停样式
hideBtn.title = '隐藏-隐藏后鼠标移到视频右边框可显示笔记';
hideBtn.style.backgroundColor = "transparent";
////////////////////////////////////////////////
// // 共享的样式设置
// const sharedStyles = {
// marginLeft: "4.2px",
// // marginRight: "5px",
// width: "37px",
// height: "26px",
// // backgroundColor: "#6CA0DC",//蓝
// backgroundColor: "#996699",//深紫色
// color: "white",
// // color: "#333333",
// // color: "#FFA500",//橙色
// // color: "#000000", //黑色
// // color: "#FFFF00", //黄色
// // color: "#F5F5DC", //米黄色
// borderRadius: "4px",
// cursor: "pointer",
// border: "none",
// boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
// // left: "6px"
// };
// // 应用共享样式
// Object.assign(toTopBtn.style, sharedStyles);
// Object.assign(toBottomBtn.style, sharedStyles);
// Object.assign(hideBtn.style, sharedStyles);
// 将按钮添加到容器中
btnContainer.appendChild(toTopBtn);
btnContainer.appendChild(toBottomBtn);
btnContainer.appendChild(hideBtn);
let note_message = document.querySelector("div.status-bar.note-message")
// let close_note = document.querySelector("div.close-note")
// 将容器添加到gkbj_btn的父节点中
if (note_message) {
// alert('找到了公开笔记按钮')
note_message.parentNode.insertBefore(btnContainer, note_message);
setTimeout(() => {
setBtnEvent();
}, 0);
// setBtnEvent();
} else {
alert('没找到公开笔记按钮')
}
// 设置事件监听器
function setBtnEvent() {
let editor = document.querySelector("div.ql-editor")
toBottomBtn.addEventListener("click", (e) => {
editor.scrollTo(0, editor.scrollHeight);
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (thumb) {
thumb.style.top = scrollbar.clientHeight - thumb.clientHeight + "px"
// refreshScrollBarListener(scrollbar)
}
e.stopPropagation();
});
toTopBtn.addEventListener("click", (e) => {
editor.scrollTo(0, 0);
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
let thumb = document.querySelector("div.ZDscrollbar.custom-scrollbar > div > div")
if (thumb) {
thumb.style.top = "0px"
// refreshScrollBarListener(scrollbar)
}
e.stopPropagation();
});
hideBtn.addEventListener('click', (e) => {
// let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let NotePanel = document.querySelector("div.resizable-component.note-pc")
NotePanel.style.display = "none";
});
editor.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
}
};
function refreshBtnlistener() {
let editor = document.querySelector("div.ql-editor")
let toBottomBtn = document.querySelector("button.scrollToBottomBtn")
let toTopBtn = document.querySelector("button.scrollToTopBtn")
toBottomBtn.addEventListener("click", (e) => {
editor.scrollTo(0, editor.scrollHeight);
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar) {
// refreshScrollBarListener(scrollbar)
}
editor.stopPropagation();
});
toTopBtn.addEventListener("click", (e) => {
editor.scrollTo(0, 0);
let scrollbar = document.querySelector("div.ZDscrollbar.custom-scrollbar")
if (scrollbar) {
// refreshScrollBarListener(scrollbar)
}
e.stopPropagation();
});
editor.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
});
hideBtn.addEventListener('click', (e) => {
let NotePanel = document.querySelector("div.resizable-component.note-pc")
NotePanel.style.display = "none";
});
}
// 5.移动笔记面板：
// 此函数的作用是点击jbj_btn时设置，当视频全屏状态点击记笔记按钮时将笔记面板放到视频播放页里面
function setNotePanel() {
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
let NotePanel = document.querySelector("div.resizable-component.note-pc");
// 类名resizable-component note-pc
// NotePanel.style.minWidth = '455px'
// NotePanel.style.width = "800px"
NotePanel.style.height = "600px"
// NotePanel.style.position = "fixed !important";//这行代码使笔记保持在固定位置,即使网页向下滚动笔记都在原来位置且可见
// NotePanel.style.zIndex = "99999"
NotePanel.style.background = "rgba(0, 0, 100, 0.1)";
let bfyRect = bfy.getBoundingClientRect();
let NotePanelRect = NotePanel.getBoundingClientRect();
let bfyCenterX = bfyRect.left + bfyRect.width / 2;
let bfyCenterY = bfyRect.top + bfyRect.height / 2;
let NotePanelWidth = NotePanelRect.width;
let NotePanelHeight = NotePanelRect.height;
let NotePanelLeft = bfyCenterX - NotePanelWidth / 2;
let NotePanelTop = bfyCenterY - NotePanelHeight / 2;
NotePanel.style.left = NotePanelLeft + 'px';
NotePanel.style.top = NotePanelTop + 'px';
bfy.appendChild(NotePanel)
NotePanel.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
})
NotePanel.addEventListener('dblclick', function (event) {
event.preventDefault();
event.stopPropagation();
});
// 鼠标移到NotePanel里面设置监听事件阻止滚轮事件冒泡,防止鼠标滚轮影响视频的音量
NotePanel.addEventListener('mouseenter', () => { NotePanel.addEventListener('wheel', (e) => { e.stopPropagation(); }) })
};
// 6.弧形按钮；
function refreshBar() {
let bar = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch > div.custom-bar-class")
if (bar && bar.style.display == "none") {
// return;
bar.style.display = "block";
refreshBarListener()
} else { setbar() }
}
function refreshBarListener() {
let note_pc = document.querySelector("div.resizable-component.note-pc")
bar.addEventListener('mouseover', (e) => {
// bar.title = "鼠标移开可显示笔记"
setTimeout(() => {
let NotePanel = document.querySelector("div.resizable-component.note-pc")
// NotePanel.style.left = NotePanel_x
if (NotePanel.style.display == "none") {
NotePanel.style.display = "block"
}
}, 0)
})
bar.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (isClose) {
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
newJbjBtn.click();
}
});
}
function setbar() {
let bfy = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch');
// if (bfy.clientHeight < 1076) { return }
let bar0 = document.querySelector("#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-video-perch > div.custom-bar-class")
if (bar0) return;
let bar = document.createElement('div');
// 添加类名到bar元素
bar.classList.add('custom-bar-class'); // 你可以将'custom-bar-class'替换为你想要的任何类名
bar.style.cursor = 'pointer';
bar.style.borderRadius = "100% 0 0 100%";
bar.style.width = '60px';
bar.style.height = '80%';
bar.style.background = "rgba(33, 55, 61, 0.07)";
// bar.style.background = "#1C1C1C";
// bar.style.opacity = "0";
bar.style.position = 'absolute';
bar.style.right = '0';
bar.style.top = '0';
// bar.style.opacity = "0.05"
bfy.appendChild(bar);
let isBarClicked = false;
bar.addEventListener('mouseover', (e) => {
setTimeout(() => {
let NotePanel = document.querySelector("div.resizable-component.note-pc")
////////////////////////////
if (NotePanel.style.top == "0px") {
NotePanel.style.height = "600px"
NotePanel.style.width = "405px"
NotePanel.style.left = "590px"
NotePanel.style.top = "240px"
}
///////////////////////////////
if (NotePanel.style.display == "none" && IsJbjClick) {
NotePanel.style.display = "block"
}
}, 0)
})
bar.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
if (isClose) {
let newJbjBtn = document.querySelector('#bilibili-player > div > div > div.bpx-player-primary-area > div.bpx-player-video-area > div.bpx-player-control-wrap > div.bpx-player-control-entity > div.bpx-player-control-bottom > div.bpx-player-control-bottom-right > div.video-note-inner');
newJbjBtn.click();
}
});
}
// 7.插入标题按钮
function pasteText(text) {
let textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
range.setEndAfter(textNode);
selection.removeAllRanges();
selection.addRange(range);
}
// 复制文本到剪贴板
async function copyToClipboard() {
let title;
let multi_page = document.querySelector("#multi_page")
if (!multi_page) {
title = document.querySelector("#viewbox_report > div.video-info-title > div > h1")?.getAttribute('title').trim();
} else {
let path = 'li.on>a, li.watched.on>a'; // 修改选择器语法以正确应用"或"逻辑
// // 获取 span 元素中的文本内容
let pageNum = document.querySelector(path)?.getAttribute('href');
let newPageNumber;
let match = pageNum.match(/p=(\d+)/);
if (match) {
// match[1] 存储的是正则表达式中第一个括号内匹配的内容，即数字部分
let pageNumber = match[1];
// 将数字转换为 "P" 加上 数字，并在后面加上空格
newPageNumber = 'P' + pageNumber + ' ';
}
title = document.querySelector(path)?.getAttribute('title');
title = newPageNumber + " " + title
}
if (title) {
try {
await navigator.clipboard.writeText(title);
// console.log('文本已复制到剪贴板', title);
return title;
} catch (err) {
console.error('无法复制文本: ', err);
}
} else {
console.warn('未找到匹配的标题元素');
}
}
function editorEvent() {
const editor = document.querySelector('.ql-editor[contenteditable="true"]');
// console.log("editor", editor);
editor.addEventListener('keydown', function (event) {
if (event.key === 'Enter' || event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
// 处理回车键按下事件
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
// console.log("enter的range", range);
}
});
editor.addEventListener("click", function () {
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
// console.log("点击的range", range);
})
editor.addEventListener('keydown', function (event) {
if (event.ctrlKey && event.key === 'End')
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
})
editor.addEventListener('keydown', function (event) {
if (event.ctrlKey && event.key === 'Home')
selection = editor.ownerDocument.defaultView.getSelection(); // 更安全地获取selection，考虑editor所在的文档上下文
range = selection.getRangeAt(0);
})
}
function InsertBtnEvent() {
let insertBox = document.querySelector("#web-toolbar > div > div")
if (insertBox) {
insertBox.style.display = 'inline-block';
return;
}
let bcBtn = document.querySelector("span.ql-save-btn");
if (!bcBtn) return;
let bcBtnBox = document.querySelector("#web-toolbar > div")
GM_addStyle(`
.styled-button {
background-color: #007bff;
color: #393e46;
// padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
}
`);
let insertBtn = document.createElement('button');
// let insertBox = document.createElement('div');
insertBox = document.createElement('div');
insertBox.className = 'insert-box';
insertBtn.className = 'styled-button';
// insertBtn.id = 'insert-btn';
insertBtn.style.top = '0'
insertBtn.innerText = 'P';
// insertBtn.style.color = '#393e46'; // 设置字体颜色为黑色
insertBtn.style.fontWeight = 'bold'; // 设置字体加粗
insertBtn.style.fontSize = "20px"
insertBox.style.display = 'inline-block';
insertBox.style.position = 'relative';
// insertBtn.classList.add('custom-button-insert'); // 假设类名为 'custom-button'
insertBtn.title = "插入视频标题"
insertBox.appendChild(insertBtn);
// bcBtnBox.insertBefore(insertBox, bcBtn)
bcBtnBox.appendChild(insertBox)
// bcBtn.parentNode.insertBefore(insertBox, bcBtn)
insertBtn.addEventListener('click', async function () {
function swalEvent() {
GM_addStyle(`
.swal2-popup {
font-size: 20px !important; // 改变字体大小
width: 120px !important; // 改变宽度
hight: 100px !important; // 改变高度
background-color: #f0f0f0 !important;
display: flex;
}
.swal2-styled.swal2-confirm {
border: 0;
border-radius: 5px;
background: #11999e;
background-color: #3e4149 !important; // 确认按钮颜色
color: #444f5a;
font-size: 20px;
}
`)
}
if (!range) {
let bfy = document.querySelector('div.bpx-player-video-perch');
let bfyHeight = bfy.getBoundingClientRect().height;
let wh = window.innerHeight;
if (bfyHeight == wh) {
return
}
Swal.fire({
// title: '提示',
// title: '',
text: '请选择区域',
// icon: 'info',
})
swalEvent()
return;
}
try {
let text = await copyToClipboard(); // 使用await等待Promise解析
setTimeout(() => {
pasteText(text); // 确保pasteText接收实际的文本内容
}, 0);
// pasteText(text); // 确保pasteText接收实际的文本内容
} catch (err) {
console.error('从剪贴板读取文本时出错:', err);
}
})
}
// 笔记面板鼠标监听事件
function noteEvent() {
let note_pc = document.querySelector("div.resizable-component.note-pc");
if (note_pc) {
note_pc.addEventListener("contextmenu", function (event) {
// 阻止右击冒泡
event.stopPropagation();
// 检查是否选中了文本或图片
let selection = window.getSelection().toString().trim();
let selectedImages = note_pc.querySelectorAll(".ql-image-preview.active"); // 假设图片有 selected 类表示被选中
if (selection === "" && selectedImages.length === 0) {
event.preventDefault();
// 如果没有选中文本或图片，隐藏 note_pc
note_pc.style.display = "none";
}
});
}
}
// 点进笔记列表后获取笔记列表中的所有图片元素,为每个图片元素添加点击事件
function creatNoteImageClikEvent() {
setTimeout(() => {
let imgElements
let zoomedImage = document.querySelector('.zoomed-image');
let bpx = document.querySelector('.bpx-player-container');
// bfx 非全屏 data-screen="normal" 全屏data-screen="full" 网页全屏data-screen="web"
let data_screen = bpx.getAttribute('data-screen')
function imageClickListener() {
// 获取所有图片元素
imgElements = document.querySelectorAll('.ql-image-preview .img-preview');
for (let i = 0; i < imgElements.length; i++) {
const image = imgElements[i];
image.style.cursor = 'pointer';
image.title = "弹出"
image.addEventListener('mousedown', handleImageClick);
}
let isDragging = false;
let offsetX, offsetY;
function handleImageClick(event) {
const image = event.currentTarget;
zoomedImage.src = image.src; // 动态设置 zoomedImage 的 src
const rect = image.getBoundingClientRect();
const originalWidth = image.offsetWidth;
const originalHeight = image.offsetHeight;
const offsetX = 120;
const offsetY = 300;
const x = rect.left + window.scrollX + (originalWidth / 2) + offsetX;
const y = rect.top + window.scrollY + (originalHeight / 2) - offsetY;
// 设置放大图片的位置
zoomedImage.style.left = `${x - (originalWidth * 0.5)}px`; // 根据原始图片的宽度调整位置
zoomedImage.style.top = `${y - (originalHeight * 0.5)}px`; // 根据原始图片的高度调整位置
zoomedImage.style.display = 'block';
zoomedImage.style.opacity = '1';
// 添加鼠标悬停和离开事件监听器
zoomedImage.addEventListener('mouseover', handleZoomedImageMouseOver);
zoomedImage.addEventListener('dblclick', handleZoomedImageDblclick);
// 添加拖动事件监听器
zoomedImage.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
let data_screen = bpx.getAttribute('data-screen')
if (data_screen == 'full' || data_screen == 'web') {
document.body.removeChild(zoomedImage);
bpx.appendChild(zoomedImage);
} else {
bfx.removeChild(zoomedImage);
document.body.appendChild(zoomedImage);
}
}
function handleZoomedImageMouseOver() {
zoomedImage.style.transform = 'scale(0.7)'; // 初始放大比例
// if(IsMyNote){
// zoomedImage.style.transform = 'scale(0.6)'; // 初始放大比例
// }else{
// zoomedImage.style.transform = 'scale(0.8)'; // 初始放大比例
// }
zoomedImage.title = '双击关闭';
}
function handleZoomedImageDblclick() {
zoomedImage.style.opacity = '0';
setTimeout(() => {
zoomedImage.style.display = 'none';
zoomedImage.removeEventListener('mouseover', handleZoomedImageMouseOver);
zoomedImage.removeEventListener('mouseout', handleZoomedImageDblclick);
}, 300); // 与 transition 时间一致
}
function startDrag(event) {
isDragging = true;
offsetX = event.clientX - zoomedImage.offsetLeft;
offsetY = event.clientY - zoomedImage.offsetTop;
}
function drag(event) {
if (isDragging) {
zoomedImage.style.left = `${event.clientX - offsetX}px`;
zoomedImage.style.top = `${event.clientY - offsetY}px`;
}
}
function endDrag() {
isDragging = false;
}
}
if (!zoomedImage) {
// let bfy = document.getElementsByClassName("bpx-player-video-area")[0]
// 创建一个新的图片元素，用于显示放大后的图片
zoomedImage = document.createElement('img');
zoomedImage.className = 'zoomed-image';
zoomedImage.style.position = 'absolute';
zoomedImage.style.display = 'none';
zoomedImage.style.zIndex = 1000;
zoomedImage.style.cursor = 'pointer';
zoomedImage.style.maxWidth = 'none'; // 确保图片不受容器限制
zoomedImage.style.maxHeight = 'none'; // 确保图片不受容器限制
// if(IsMyNote){
// zoomedImage.style.transform = 'scale(0.6)'; // 初始放大比例
// }else{
// zoomedImage.style.transform = 'scale(0.8)'; // 初始放大比例
// }
zoomedImage.style.transform = 'scale(0.7)'; // 初始放大比例
zoomedImage.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
// alert("首次加载图片放大插件:" + data_screen)
if (data_screen == 'full' || data_screen == 'web') {
bpx.appendChild(zoomedImage);
imageClickListener()
} else {
document.body.appendChild(zoomedImage);
imageClickListener()
}
// imageClickListener()
} else {
// alert("非首次加载图片放大插件:" + data_screen)
if (data_screen == 'full' || data_screen == 'web') {
bpx.appendChild(zoomedImage);
}
imageClickListener()
}
}, 1500);
}
}
// Your code here...
})();