☰

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

(function() {
    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 (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,
        });
    }

    init();
})();