☰

Instagram Video Controls

Adds native html controls to all videos (rewind, fullscreen, etc)

// ==UserScript==
// @name            Instagram Video Controls
// @description     Adds native html controls to all videos (rewind, fullscreen, etc)
// @description:ru  Добавляет дефолтные кнопки управления видео (перемотка, "на весь экран" и тд)
// @namespace       http://tampermonkey.net/
// @version         0.0.3
// @author          undfndusr
// @match           *://*.instagram.com/*
// @icon            https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @grant           GM.addStyle
// @license         MIT
// ==/UserScript==

(function() {
    const OPTIONS = {
        DISABLE_AUTO_MUTE: 0, // Disables automatic mute video (0 or 1)
    };

    const debounce = (func, wait) => {
        let timeout;
        return function (...args) {
            return new Promise(resolve => {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    timeout = null;
                    Promise.resolve(func.apply(this, [...args])).then(resolve);
                }, wait);
            });
        };
    };

    const injectStyles = () => {
        const styles = `
            video + div[data-instancekey] .html-div {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
            }

            video::-webkit-media-controls-volume-slider {
                display:none;
            }

            video::-webkit-media-controls-mute-button {
                display:none;
            }
        `;

        GM.addStyle(styles);
    };

    const setControls = () => {
        document.querySelectorAll('video:not([controls])').forEach(video => {
            video.setAttribute('controls', 'true');
            video.style.position = 'relative';
            video.style.zIndex = '1';

            if (location.pathname.startsWith('/stories/')) {
                video.style.height = 'calc(100% - 62px)';
            }
        });
    };

    const init = () => {
        setControls();
        injectStyles();

        const debouncedHandler = debounce(setControls, 500);

        const observer = new MutationObserver(debouncedHandler);

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

    init();
})();