enhance-media-ux.js

// ==UserScript==
// @name         Enhance Media UX
// @namespace    https://github.com/codeaditya/browser-userscripts
// @downloadURL  https://cdn.jsdelivr.net/gh/codeaditya/browser-userscripts@main/enhance-media-ux.js
// @updateURL    https://cdn.jsdelivr.net/gh/codeaditya/browser-userscripts@main/enhance-media-ux.js
// @version      2025.12.24
// @description  Modify media playback speed and other controls
// @author       Aditya <code.aditya at gmail>
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addValueChangeListener
// @run-at       document-idle
// ==/UserScript==

(function () {
  "use strict";

  // --- Configuration and Constants ---
  const SETTINGS = {
    GM_SPEED_KEY: "custom-playback-rate",
    SPEED_STEP: 0.1,
    MIN_SPEED: 0.1,
    MAX_SPEED: 6.0,
    HINT_DISPLAY_DURATION_MS: 1000,
  };

  const SHORTCUTS = {
    INCREASE_SPEED: "+",
    DECREASE_SPEED: "-",
    RESET_SPEED: "*",
  };

  // --- State Management ---
  let CURRENT_PLAYBACK_RATE =
    parseFloat(GM_getValue(SETTINGS.GM_SPEED_KEY, 1.0)) || 1.0;

  // --- DOM Elements & CSS ---
  const HINT_ID = "emu-hint";
  const HINT_STYLE = `
    #${HINT_ID} {
      position: fixed;
      bottom: 20px;
      left: 20px;
      background-color: rgba(0, 0, 0, 0.85);
      color: white;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      font-family: sans-serif;
      z-index: 99999;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      pointer-events: none; /* Allows clicks to pass through */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  `;
  const MEDIA_SELECTOR = "video, audio";

  // --- Helper Functions ---

  /**
   * Simple debounce to avoid excessive MutationObserver callbacks
   */
  function debounce(func, delay) {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func(...args), delay);
    };
  }

  /**
   * Applies the current playback rate to all media elements.
   */
  function applyMediaSpeed() {
    document.querySelectorAll(MEDIA_SELECTOR).forEach((media) => {
      if (media.playbackRate !== CURRENT_PLAYBACK_RATE) {
        media.playbackRate = CURRENT_PLAYBACK_RATE;
        console.debug(`Set media playback speed to ${CURRENT_PLAYBACK_RATE}x`);
      }
    });
  }

  /**
   * Creates and displays a subtle hint message on the screen.
   * @param {string} message - The message to display.
   */
  function showSubtleHint(message) {
    let hintDiv = document.getElementById(HINT_ID);

    if (!hintDiv) {
      const styleTag = document.createElement("style");
      styleTag.textContent = HINT_STYLE;
      document.head.appendChild(styleTag);

      hintDiv = document.createElement("div");
      hintDiv.id = HINT_ID;
      document.body.appendChild(hintDiv);
    }

    hintDiv.textContent = message;
    hintDiv.style.opacity = "1";

    setTimeout(() => {
      hintDiv.style.opacity = "0";
    }, SETTINGS.HINT_DISPLAY_DURATION_MS);
  }

  /**
   * Updates the global playback rate, saves it, and applies it to media.
   * @param {number} newRate - The new playback rate to set.
   */
  function updateAndApplyPlaybackRate(newRate) {
    const oldRate = CURRENT_PLAYBACK_RATE;

    // Ensure the rate is within bounds and rounded to one decimal place
    CURRENT_PLAYBACK_RATE = Math.min(
      SETTINGS.MAX_SPEED,
      Math.max(
        SETTINGS.MIN_SPEED,
        parseFloat(newRate.toFixed(SETTINGS.SPEED_STEP.toString().length - 2)) // Dynamically round based on step precision
      )
    );

    if (CURRENT_PLAYBACK_RATE === oldRate) {
      return; // No change, no need to update DOM or storage
    }

    console.log(
      `Playback rate changed from ${oldRate.toFixed(
        1
      )}x to ${CURRENT_PLAYBACK_RATE.toFixed(1)}x`
    );
    showSubtleHint(`${CURRENT_PLAYBACK_RATE.toFixed(1)}x`);
    GM_setValue(SETTINGS.GM_SPEED_KEY, CURRENT_PLAYBACK_RATE);
    applyMediaSpeed();
  }

  /**
   * Checks if the event target is an editable element.
   * @param {KeyboardEvent} event
   * @returns {boolean}
   */
  function isEditingElement(event) {
    // Get the actual target, even if it's inside a shadow DOM
    const target = event.composedPath()[0];

    return (
      target.isContentEditable ||
      ["TEXTAREA", "SELECT", "INPUT"].includes(target.tagName) ||
      target.getAttribute("role") === "textbox"
    );
  }

  // --- Event Handlers ---

  /**
   * Handles keyboard shortcuts for playback rate control.
   * @param {KeyboardEvent} event
   */
  function handleKeyDown(event) {
    // Avoid interfering with common modifier keys
    if (event.ctrlKey || event.altKey || event.metaKey) {
      return;
    }

    // Don't interfere if typing
    if (isEditingElement(event)) {
      return;
    }

    switch (event.key) {
      case SHORTCUTS.INCREASE_SPEED:
        updateAndApplyPlaybackRate(CURRENT_PLAYBACK_RATE + SETTINGS.SPEED_STEP);
        break;
      case SHORTCUTS.DECREASE_SPEED:
        updateAndApplyPlaybackRate(CURRENT_PLAYBACK_RATE - SETTINGS.SPEED_STEP);
        break;
      case SHORTCUTS.RESET_SPEED:
        updateAndApplyPlaybackRate(1.0); // Reset to default
        break;
    }
  }

  /**
   * Syncs playback rate changes across windows/iframes/tabs
   */
  function setupStorageSync() {
    GM_addValueChangeListener(
      SETTINGS.GM_SPEED_KEY,
      (name, oldValue, newValue, remote) => {
        if (remote && newValue !== CURRENT_PLAYBACK_RATE) {
          CURRENT_PLAYBACK_RATE = parseFloat(newValue) || 1.0;
          applyMediaSpeed();
          showSubtleHint(`${CURRENT_PLAYBACK_RATE.toFixed(1)}x`);
        }
      }
    );
  }

  // --- Initialization ---

  /**
   * Initializes the userscript
   */
  function initialize() {
    applyMediaSpeed();
    setupStorageSync();

    // Observe DOM changes to catch dynamically loaded media elements
    const debouncedApply = debounce(applyMediaSpeed, 150);
    const observer = new MutationObserver(debouncedApply);

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

    // Apply speed on play event in iframes
    if (window !== window.top) {
      document.addEventListener(
        "play",
        (event) => {
          if (event.target.matches(MEDIA_SELECTOR)) {
            event.target.playbackRate = CURRENT_PLAYBACK_RATE;
          }
        },
        true
      );
    }

    document.addEventListener("keydown", handleKeyDown);

    // Clean up observer on page unload
    window.addEventListener("unload", () => {
      observer.disconnect();
    });

    console.info("Enhance Media UX initialized.");
  }

  // Run initialization after the DOM is ready
  initialize();
})();