☰

instagram Default Volume

set your Instagram videos default volumes

目前為 2024-02-12 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         instagram Default Volume
// @namespace    instagramDefaultVolume
// @version      1.3.2
// @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 findAndAppendVolumeDiv = () => {
        const targetElement = document.querySelector('.x1iyjqo2.xh8yej3');
        const volumeDiv = document.createElement('div');
        volumeDiv.id = 'volumeDiv'
        volumeDiv.style.display = 'flex'
        volumeDiv.style.padding = '10px'
        volumeDiv.style.overflow = 'hidden'
        volumeDiv.style.cursor = 'pointer'

        const volumeBtn = document.createElement('button')
        volumeBtn.id = 'volumeBtn'
        volumeBtn.style.display = 'flex'
        volumeBtn.style.textAlign = 'left'
        volumeBtn.style.cursor = 'pointer'

        const volumeText = document.createElement('span')
        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 = 100;
        volumeSelectorInput.style.display = 'none'
        volumeSelectorInput.style.cursor = 'ew-resize'

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

        volumeSelectorInput.addEventListener('input', () => {
            volumeSelectorText.textContent = volumeSelectorInput.value;
            localStorage.setItem('defaultVolume', volumeSelectorInput.value / 100);
        });

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

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

        // Toggle behavior for volumeDiv
        volumeDiv.addEventListener('click', (event) => {
            event.stopPropagation(); // Prevent click event from bubbling up to the document
            volumeSelectorInput.style.display = volumeSelectorInput.style.display === 'none' ? 'block' : 'none';
            volumeText.style.display = volumeText.style.display === 'none' ? 'block' : 'none'
        });

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

    setInterval(() => {
        if (!document.getElementById('volumeDiv')) {
            findAndAppendVolumeDiv();
        }
    }, 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
    document.addEventListener('click', () => {
        const volumeSelectorInput = document.querySelector('.x1iyjqo2.xh8yej3 input[type="range"]');
        if (volumeSelectorInput) {
            volumeSelectorInput.style.display = 'none';
        }
    });
});