☰

Scrollable Volume Control with Custom Collapse and Step Control

10/10/24

当前为 2024-10-19 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Scrollable Volume Control with Custom Collapse and Step Control
// @namespace   Tampermonkey Scripts
// @match       https://www.redgifs.com/watch/*
// @grant       GM_registerMenuCommand
// @version     2.8
// @author      Bunglover24
// @license     GNU GPLv3
// @icon        https://icons.duckduckgo.com/ip2/redgifs.com.ico
// @description 10/10/24
// ==/UserScript==

const isFirefox = typeof InstallTrigger !== 'undefined'; // Detect Firefox

// Default step size for volume control, saved in localStorage
let volumeStep = parseFloat(localStorage.getItem('volumeStep')) || 0.01;

// Helper to save square position to localStorage
function savePosition(x, y) {
  localStorage.setItem('volumeControlPos', JSON.stringify({ x, y }));
}

// Helper to load saved square position
function loadPosition() {
  const pos = JSON.parse(localStorage.getItem('volumeControlPos'));
  return pos ? { x: pos.x, y: pos.y } : { x: window.innerWidth / 2, y: window.innerHeight / 2 };
}

// Create the volume control square
function createVolumeControlSquare(video) {
  const controlSquare = document.createElement('div');
  const { x, y } = loadPosition();

  // Style for the square
  Object.assign(controlSquare.style, {
    position: 'fixed',
    left: `${x}px`,
    top: `${y}px`,
    width: '8.5mm', // Size adjusted for 100% text
    height: '8.5mm', // Size adjusted for 100% text
    backgroundColor: 'rgba(23, 23, 23, 0.8)', // Slight transparency for the square
    color: 'white',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '3px', // Slight corner rounding
    cursor: 'pointer',
    zIndex: 1000,
    transition: 'all 0.3s ease',
  });

  let volume = localStorage.getItem('videoVolume') || 0.01; // Default to 1%
  video.volume = volume;

  // Volume text, centered and styled
  const volumeText = document.createElement('div');
  volumeText.textContent = `${Math.round(volume * 100)}%`;
  Object.assign(volumeText.style, {
    pointerEvents: 'none', // Prevent interaction
    fontSize: '12px',
    fontFamily: 'Tahoma, sans-serif',
    color: 'rgba(255, 255, 255, 0.9)', // Slightly less transparent text
    textShadow: '1px 1px 3px rgba(0, 0, 0, 0.5)', // Subtle shadow for contrast
    zIndex: 2, // Ensure it's above other elements
  });
  controlSquare.appendChild(volumeText);

  // Volume control via scroll, adjustable steps
  controlSquare.addEventListener('wheel', (e) => {
    e.preventDefault();
    volume = Math.min(Math.max(parseFloat(volume) + (e.deltaY > 0 ? -volumeStep : volumeStep), 0), 1);
    video.volume = volume;
    localStorage.setItem('videoVolume', volume);
    volumeText.textContent = `${Math.round(volume * 100)}%`;

    if (isFirefox) {
      video.muted = false; // Firefox-specific handling
    }
  });

  // Create the drag bar, adjusted to 3 pixels tall
  const dragBar = document.createElement('div');
  Object.assign(dragBar.style, {
    position: 'absolute',
    top: '0px', // Positioned at the top
    width: '100%',
    height: '3px', // Adjusted height to 3 pixels
    backgroundColor: 'rgba(150, 200, 60, 0.9)', // Dragbar color (#96C83C)
    cursor: 'move',
    zIndex: 1, // Keep it behind the volume text
  });
  controlSquare.appendChild(dragBar);

  // Optimized drag functionality
  let isDragging = false, offsetX = 0, offsetY = 0;
  dragBar.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - controlSquare.getBoundingClientRect().left;
    offsetY = e.clientY - controlSquare.getBoundingClientRect().top;
    document.body.style.userSelect = 'none'; // Disable text selection while dragging
  });

  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      requestAnimationFrame(() => {
        const x = Math.max(0, Math.min(e.clientX - offsetX, window.innerWidth - controlSquare.offsetWidth));
        const y = Math.max(0, Math.min(e.clientY - offsetY, window.innerHeight - controlSquare.offsetHeight));
        controlSquare.style.left = `${x}px`;
        controlSquare.style.top = `${y}px`;
      });
    }
  });

  document.addEventListener('mouseup', () => {
    if (isDragging) {
      const x = controlSquare.getBoundingClientRect().left;
      const y = controlSquare.getBoundingClientRect().top;
      savePosition(x, y); // Save position on release
      isDragging = false;
      document.body.style.userSelect = ''; // Re-enable text selection
    }
  });

  // Handle collapse/expand on double-click
  let isCollapsed = false;
  controlSquare.addEventListener('dblclick', (e) => {
    if (e.target !== dragBar) {
      if (!isCollapsed) {
        controlSquare.style.width = '5mm'; // Collapsed size, 7mm larger than original
        controlSquare.style.height = '5mm'; // Collapsed size, 7mm larger than original
        controlSquare.style.backgroundColor = 'rgba(150, 200, 60, 0.9)'; // Match dragbar color (#96C83C)
        volumeText.style.display = 'none'; // Hide volume text
        dragBar.style.display = 'none'; // Hide drag bar
      } else {
        controlSquare.style.width = '8.5mm'; // Restore original size
        controlSquare.style.height = '8.5mm'; // Restore original size
        controlSquare.style.backgroundColor = 'rgba(23, 23, 23, 0.8)'; // Restore transparency
        volumeText.style.display = 'block'; // Show volume text
        dragBar.style.display = 'block'; // Show drag bar
      }
      isCollapsed = !isCollapsed;
    }
  });

  // Click to uncollapse
  controlSquare.addEventListener('click', () => {
    if (isCollapsed) {
      controlSquare.style.width = '8.5mm'; // Restore original size
      controlSquare.style.height = '8.5mm'; // Restore original size
      controlSquare.style.backgroundColor = 'rgba(23, 23, 23, 0.8)'; // Restore transparency
      volumeText.style.display = 'block'; // Show volume text
      dragBar.style.display = 'block'; // Show drag bar
      isCollapsed = false;
    }
  });

  // Add the control square to the page
  document.body.appendChild(controlSquare);
}

// Wait for video element to load using MutationObserver
let observer = new MutationObserver((mutations) => {
  for (let mutation of mutations) {
    if (mutation.addedNodes.length) {
      let element = document.querySelector('.GifPreview_isActive');
      if (element) {
        const video = document.querySelector('video');
        if (video) {
          createVolumeControlSquare(video);
          observer.disconnect(); // Stop observing once square is added
          return;
        }
      }
    }
  }
});

observer.observe(document, { childList: true, subtree: true });

// Register Tampermonkey menu commands

// Reset button to reset volume to 1%
GM_registerMenuCommand('Reset Volume to 1%', () => {
  const videos = document.querySelectorAll('video');
  videos.forEach((video) => {
    video.volume = 0.01;
    localStorage.setItem('videoVolume', 0.01);
  });
  alert('Volume has been reset to 1%.');
});

// Button to set volume step size
GM_registerMenuCommand('Set Volume Step Size', () => {
  let step = prompt(`Current step size is ${volumeStep * 100}%. Enter new step size as a percentage:`, volumeStep * 100);
  if (step !== null) {
    step = parseFloat(step) / 100;
    if (!isNaN(step) && step > 0 && step <= 1) {
      volumeStep = step;
      localStorage.setItem('volumeStep', volumeStep);
      alert(`Volume step size set to ${volumeStep * 100}%`);
    } else {
      alert('Invalid input. Please enter a number between 0.01 and 100.');
    }
  }
});