☰

Greasy Fork is available in English.

instagram Default Volume

Set your Instagram videos default volumes

// ==UserScript==
// @name         instagram Default Volume
// @namespace    instagramDefaultVolume
// @version      1.5.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 targetElement = document.querySelector('.x1iyjqo2.xh8yej3');
        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.id = 'volumeBtn';
        volumeBtn.style.display = 'flex';
        volumeBtn.style.textAlign = 'left';
        volumeBtn.style.cursor = 'pointer'

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

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

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

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

        // Set volume text content
        volumeSelectorInput.addEventListener('input', () => {
            let volumeValue = volumeSelectorInput.value;
            if (volumeValue < 10) {
                volumeValue = '0' + volumeValue;
            }
            volumeSelectorText.textContent = volumeValue;
            localStorage.setItem('defaultVolume', volumeValue / 100);
        });


        volumeDiv.appendChild(volumeBtn);
        volumeDiv.appendChild(volumeTextContainer); // Append container
        volumeTextContainer.appendChild(volumeText); // Append volumeText to container

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

        // Toggle behavior for volumeDiv
        // Define a boolean variable to control the visibility of volumeText
        let showVolumeText = true;

        // Toggle behavior for volumeDiv
        volumeDiv.addEventListener('click', (event) => {
            event.stopPropagation();
            showVolumeText = !showVolumeText; // Toggle the value of showVolumeText
            volumeSelectorInput.style.display = showVolumeText ? 'none' : 'block';
            volumeText.style.display = showVolumeText ? 'block' : 'none';
        });

        // targetElement.appendChild(document.createElement('br'));
        targetElement.appendChild(volumeDiv);
    };

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

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

    setVolumeForVideos();

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

    // Close volumeDiv if clicked outside of it

});