instagram Default Volume

Set your Instagram videos default volumes
换行
// ==UserScript==
// @name         instagram Default Volume
// @namespace    instagramDefaultVolume
// @version      1.6.0
// @description  Set your Instagram videos default volumes
// @author       Runterya
// @homepage     https://github.com/Runteryaa
// @match        *://*.instagram.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @grant        none
// @license      MIT
// @compatible   chrome
// @compatible   edge
// @compatible   firefox
// @compatible   opera
// @compatible   safari
// ==/UserScript==

console.log("instagramDefaultVolume");

window.addEventListener('load', () => {
    if (!localStorage.getItem('defaultVolume')) {
        localStorage.setItem('defaultVolume', 0.2);
    }

    const findVolumeDiv = () => {
        const video = document.querySelector('video');
        if (!video) return;

        const targetElement =
            video.parentElement?.parentElement?.parentElement?.parentElement;
        if (!targetElement) return;

        const volumeDiv = document.createElement('div');
        volumeDiv.id = 'volumeDiv';
        volumeDiv.style.display = 'flex';
        volumeDiv.style.padding = '10px';
        volumeDiv.style.borderRadius = '8px';
        volumeDiv.style.cursor = 'pointer';
        volumeDiv.style.maxHeight = '3vh';

        volumeDiv.addEventListener('mouseenter', () => {
            volumeDiv.style.backgroundColor = '#1A1A1A';
            volumeText.style.color = 'white';
        });

        volumeDiv.addEventListener('mouseleave', () => {
            volumeDiv.style.backgroundColor = '';
            volumeText.style.color = '';
        });

        const volumeBtn = document.createElement('button');
        volumeBtn.style.display = 'flex';
        volumeBtn.style.cursor = 'pointer';

        const volumeTextContainer = document.createElement('div');
        volumeTextContainer.style.overflow = 'hidden';

        const volumeText = document.createElement('span');
        volumeText.textContent = 'Volume';
        volumeText.style.paddingLeft = '10px';

        const volumeSelectorInput = document.createElement('input');
        volumeSelectorInput.type = 'range';
        volumeSelectorInput.min = 0;
        volumeSelectorInput.max = 99.9;
        volumeSelectorInput.value = localStorage.getItem('defaultVolume') * 100;
        volumeSelectorInput.style.display = 'none';
        volumeSelectorInput.style.cursor = 'ew-resize';

        const volumeSelectorText = document.createElement('span');
        volumeSelectorText.textContent = volumeSelectorInput.value;

        volumeSelectorInput.addEventListener('input', () => {
            const v = Number(volumeSelectorInput.value);
            volumeSelectorText.textContent = v < 10 ? '0' + v : v;
            localStorage.setItem('defaultVolume', v / 100);
            updateVolume();
        });

        volumeDiv.appendChild(volumeBtn);
        volumeDiv.appendChild(volumeTextContainer);
        volumeTextContainer.appendChild(volumeText);

        volumeBtn.appendChild(volumeSelectorText);
        volumeBtn.appendChild(volumeSelectorInput);

        let showText = true;
        volumeDiv.addEventListener('click', (e) => {
            e.stopPropagation();
            showText = !showText;
            volumeSelectorInput.style.display = showText ? 'none' : 'block';
            volumeText.style.display = showText ? 'block' : 'none';
        });

        targetElement.appendChild(volumeDiv);
    };

    setInterval(() => {
        if (!document.getElementById('volumeDiv')) {
            findVolumeDiv();
        }
    }, 1000);

    function updateVolume() {
        const defaultVolume = parseFloat(localStorage.getItem('defaultVolume'));
        const videos = document.getElementsByTagName('video');
        for (let i = 0; i < videos.length; i++) {
            videos[i].volume = defaultVolume;
        }
    }

    let retry = 0;
    function wait() {
        if (retry++ > 100) {
            console.log("Failed to find video after 100 attempts");
            return;
        }
        if (document.getElementsByTagName('video').length === 0) {
            setTimeout(wait, 100);
        } else {
            updateVolume();
        }
    }
    wait();

    new MutationObserver(() => {
        updateVolume();
    }).observe(document.body, { childList: true, subtree: true });
});