☰

Greasy Fork is available in English.

[INSTAGRAM] WORKING PROGRESS BAR

Adds a progress bar to all videos (Reels included) on Instagram and lets you skip thru the video

// ==UserScript==
// @name         [INSTAGRAM] WORKING PROGRESS BAR
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a progress bar to all videos (Reels included) on Instagram and lets you skip thru the video
// @author       Emree.el on instagram
// @match        *://*.instagram.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to create a progress bar for video
    function createProgressBar(video) {
        // Check if progress bar already exists
        if (video.parentElement.querySelector('.custom-progress-bar')) return;

        // Create progress bar container
        const progressBar = document.createElement('div');
        progressBar.style.position = 'absolute';
        progressBar.style.bottom = '5px';
        progressBar.style.left = '0';
        progressBar.style.width = '100%';
        progressBar.style.height = '5px';
        progressBar.style.background = 'rgba(0, 0, 0, 0.5)';
        progressBar.style.cursor = 'pointer';
        progressBar.style.zIndex = '9999';
        progressBar.classList.add('custom-progress-bar');

        // Create progress indicator
        const progressIndicator = document.createElement('div');
        progressIndicator.style.height = '100%';
        progressIndicator.style.width = '0%';
        progressIndicator.style.background = '#ff0000';
        progressBar.appendChild(progressIndicator);

        // Add progress bar to the video container
        video.parentElement.style.position = 'relative';
        video.parentElement.appendChild(progressBar);

        // Update progress bar on video time update
        video.addEventListener('timeupdate', () => {
            const progress = (video.currentTime / video.duration) * 100;
            progressIndicator.style.width = `${progress}%`;
        });

        // Allow seeking by clicking on the progress bar
        progressBar.addEventListener('click', (e) => {
            const rect = progressBar.getBoundingClientRect();
            const clickPosition = (e.clientX - rect.left) / rect.width;
            video.currentTime = video.duration * clickPosition;
        });
    }

    // Observe DOM changes to add progress bars dynamically
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                mutation.addedNodes.forEach((node) => {
                    if (node.tagName === 'VIDEO' && node.src) {
                        createProgressBar(node);
                    } else if (node.querySelectorAll) {
                        const videos = node.querySelectorAll('video');
                        videos.forEach(createProgressBar);
                    }
                });
            }
        });
    });

    // Start observing the body for changes
    observer.observe(document.body, { childList: true, subtree: true });

    // Add progress bars to already loaded videos
    document.querySelectorAll('video').forEach(createProgressBar);
})();