B站字幕遮挡工具-第二语言学习(Subtitle-Overlay)

Create a floating button and resizable rectangle
Script suggéré par l'auteur
Vous pourriez également aimer 哔记-B Note (B站笔记插件).
Installer ce script
Poser une question, écrire un avis, ou signaler le script.
// ==UserScript==
// @name         B站字幕遮挡工具-第二语言学习(Subtitle-Overlay)
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Create a floating button and resizable rectangle
// @author       You
// @match        *://*.bilibili.com/*
// @license      MIT License
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  let rectangle = null;
  let isResizing = false;
  let isMoving = false;
  let isButtonMoving = false;
  let lastDownX = 0;
  let lastDownY = 0;
  let hideButtonTimeout = null;

  function getFullscreenElement() {
    return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
  }

  function appendElement(element) {
    const fullscreenElement = getFullscreenElement();
    if (fullscreenElement) {
      fullscreenElement.appendChild(element);
    } else {
      document.body.appendChild(element);
    }
  }

  function handleFullscreenChange() {
    const fullscreenElement = getFullscreenElement();
    if (button.parentElement) {
      button.parentElement.removeChild(button);
    }
    if (rectangle && rectangle.parentElement) {
      rectangle.parentElement.removeChild(rectangle);
    }
    appendElement(button);
    if (rectangle) {
      appendElement(rectangle);
    }
    // 显示圆球按钮
    showButton();
  }

  function resetHideButtonTimeout() {
    if (hideButtonTimeout) {
      clearTimeout(hideButtonTimeout);
    }
    hideButtonTimeout = setTimeout(() => {
      button.style.display = 'none';
    }, 2000);
  }

  function showButton() {
    button.style.display = 'block';
    resetHideButtonTimeout();
  }

  document.addEventListener('fullscreenchange', handleFullscreenChange);
  document.addEventListener('mozfullscreenchange', handleFullscreenChange);
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  document.addEventListener('MSFullscreenChange', handleFullscreenChange);

  // Create the floating button
  const button = document.createElement('button');
  button.textContent = 'R';
  button.style.position = 'fixed';
  button.style.zIndex = '9999';
  button.style.left = '20px';
  button.style.bottom = '100px';
  button.style.width = '30px';
  button.style.height = '30px';
  button.style.borderRadius = '50%';
  button.style.background = 'rgb(220, 53, 69)';
  button.style.color = 'white';
  button.style.cursor = 'move';

  // 点击按钮时创建矩形
  button.addEventListener('click', (e) => {
    e.stopPropagation();
    if (rectangle) {
      rectangle.parentNode.removeChild(rectangle);
      rectangle = null;
    } else {
      rectangle = document.createElement('div');
      rectangle.style.position = 'fixed';
      rectangle.style.zIndex = '9999';
      rectangle.style.left = '50px';
      rectangle.style.bottom = '50px';
      rectangle.style.width = '200px';
      rectangle.style.height = '200px';
      rectangle.style.background = 'rgba(255, 255, 255, 0.2)';
      rectangle.style.backdropFilter = 'blur(4px)'
      rectangle.style.cursor = 'move';
      rectangle.style.clipPath = 'polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%)'; // 使用 clipPath 创建折角形状
      appendElement(rectangle);

      // Create resizable handle
      const div = document.createElement('div');
      div.style.width = '40px';
      div.style.height = '40px';
      div.style.background = 'rgba(255, 255, 255, 0)';
      div.style.borderRadius = '50%';
      div.style.position = 'absolute';
      div.style.cursor = 'se-resize';
      div.style.zIndex = '10000';
      div.style.right = '-5px';
      div.style.bottom = '-5px';
      rectangle.appendChild(div);



      // 绑定鼠标按下事件
      rectangle.addEventListener('mousedown', (e) => {
        e.preventDefault(); // 将 e.preventDefault() 移动到这里
        if (e.target === rectangle) {
          isMoving = true;
        } else {
          isResizing = true;
        }

        lastDownX = e.clientX;
        lastDownY = e.clientY;
      });

      // 绑定鼠标拖拽事件
      document.addEventListener('mousemove', (e) => {
        if (isMoving) {
          rectangle.style.left = (rectangle.offsetLeft - lastDownX + e.clientX) + 'px';
          rectangle.style.top = (rectangle.offsetTop - lastDownY + e.clientY) + 'px';
          lastDownX = e.clientX;
          lastDownY = e.clientY;
        }
        if (isResizing) {
          const offsetX = e.clientX - lastDownX;
          const offsetY = e.clientY - lastDownY;

          rectangle.style.width = (rectangle.offsetWidth + offsetX) + 'px';
          rectangle.style.height = (rectangle.offsetHeight + offsetY) + 'px';

          lastDownX = e.clientX;
          lastDownY = e.clientY;
        }
      });

      // 绑定鼠标抬起事件
      document.addEventListener('mouseup', () => {
        isMoving = false;
        isResizing = false;
      });
    }
  });

  // 绑定按钮鼠标按下事件
  button.addEventListener('mousedown', (e) => {
    e.preventDefault();
    e.stopPropagation();
    isButtonMoving = true;
    lastDownX = e.clientX;
    lastDownY = e.clientY;
  });

  // 绑定按钮鼠标拖拽事件
  document.addEventListener('mousemove', (e) => {
    if (isButtonMoving) {
      button.style.left = (button.offsetLeft - lastDownX + e.clientX) + 'px';
      button.style.top = (button.offsetTop - lastDownY + e.clientY) + 'px';
      lastDownX = e.clientX;
      lastDownY = e.clientY;
    }
  });

  // 绑定按钮鼠标抬起事件
  document.addEventListener('mouseup', () => {
    isButtonMoving = false;
  });

  // 绑定鼠标移动事件，显示圆球
  document.addEventListener('mousemove', () => {
    showButton();
  });

  // 绑定鼠标点击事件，显示圆球
  document.addEventListener('mousedown', () => {
    showButton();
  });

  appendElement(button);
  resetHideButtonTimeout();

})();