☰

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.2
// @author          undfndusr
// @match           *://*.instagram.com/*
// @icon            https://www.google.com/s2/favicons?sz=64&domain=instagram.com
// @grant           none
// @license         MIT
// ==/UserScript==

(function() {
    const OPTIONS = {
        DISABLE_AUTO_MUTE: 1, // 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 setControls = () => {
        document.querySelectorAll('video:not([controls])').forEach(video => {
            video.setAttribute('controls', 'true');
            video.style.position = 'relative';
            video.style.zIndex = '1';

            if (OPTIONS.DISABLE_AUTO_MUTE) {
                video.muted = false;
            }


            // disables automute onPlay
            video.addEventListener('play', e => e.stopPropagation(), true);

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

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

        const debouncedHandler = debounce(setControls, 500);

        const observer = new MutationObserver(debouncedHandler);

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

        document.addEventListener('scroll', e => e.stopPropagation());
        window.addEventListener('scroll', e => e.stopPropagation());
    }

    init();
})();