Lower Your Volume with Me, websites!

LowerYourVolumeWithMe.js

// ==UserScript==
// @name         Lower Your Volume with Me
// @namespace    http://tampermonkey.net/
// @version      2025-01-31
// @description  Lower Your Volume with Me
// @author       You
// @match        *://*/*
// @exclude      https://*.youtube.com/watch*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @require      https://cdn.jsdelivr.net/gh/vanjs-org/mini-van@latest/public/mini-van-latest.nomodule.min.js
// @grant        none
// ==/UserScript==

// Opens slider with Ctrl + Shift + Right Mouse Click

(function() {
    'use strict';

    const { tags: { div, input } } = van;

    console.info("Lower Your Volume with Me enabled!");

    function storageValue(newValue = null) {
        if (newValue) {
            localStorage.setItem("__hovered-volume-slider@default", newValue);
            return Number(newValue);
        }

        return Number(localStorage.getItem("__hovered-volume-slider@default"));
    }

    /** @type {WeakRef} */
    let activeVideo = null;

    document.addEventListener("contextmenu", function (ev) {
        if (!(ev.ctrlKey && ev.shiftKey)) return;
        const { x, y } = ev;

        const videoEl = document.elementsFromPoint(x, y).find((el) => el instanceof HTMLVideoElement);
        if (!videoEl) {
            console.warning("Video element not found on click spot :(");
            return;
        }

        ev.stopPropagation();

        activeVideo = new WeakRef(videoEl);

        let sliderContainer = document.getElementById("__hovered-volume-slider");
        let slider = sliderContainer?.querySelector("input");

        if (!slider) {
            sliderContainer = div(
                {
                    id: "__hovered-volume-slider",
                    style: `
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        display: none;
                        width: 2rem;
                        background-color: hsla(0, 0%, 0%, 0.75);
                        border-radius: 0.25rem;
                        z-index: 100000;
                    `
                },
                (slider = input({
                    type: "range",
                    min: 0,
                    max: 100,
                    value: (storageValue() ?? 1) * 100,
                    style: `
                        display: block;
                        margin: 0.5rem auto;
                        width: 1rem;
                        appearance: slider-vertical;
                    `
                }))
            );

            slider.oninput = function () {
                if (!activeVideo?.deref()) return;
                activeVideo.deref().volume = storageValue(slider.value / 100);
            };
            slider.onblur = function() {
                sliderContainer.style.display = "none";

                sliderContainer.style.top = 0;
                sliderContainer.style.left = 0;
            };

            document.body.append(sliderContainer);
        }

        sliderContainer.style.left = x + document.documentElement.scrollLeft + "px";
        sliderContainer.style.top = y + document.documentElement.scrollTop + "px";

        sliderContainer.style.display = "block";

        slider.focus();
    });
})();