☰

instakeeplay

Prevents Instagram videos from pausing when switching tabs and adds a custom seek bar to all videos.

// ==UserScript==
// @name         instakeeplay
// @description  Prevents Instagram videos from pausing when switching tabs and adds a custom seek bar to all videos.
// @version      1.03

// @author       Halil Nevzat
// @match        *://*.instagram.com/*
// @run-at       document-start
// @license      MIT

// @namespace    https://instagram.com/
// @icon         https://www.instagram.com/favicon.ico

// @grant        none
// ==/UserScript==

/*
    Author: Halil Nevzat
    Github: https://github.com/halilnevzat
    Greasyfork: https://greasyfork.org/en/users/1442441-halilnevzat
    Website: halilnevzat.com
*/

// === Part 1: Prevent videos from pausing when switching tabs ===
// Override the document.hidden property
Object.defineProperty(document, 'hidden', {
    get: function() {
        return false; // Always return false to indicate the tab is visible
    }
});

// Override the document.visibilityState property
Object.defineProperty(document, 'visibilityState', {
    get: function() {
        return 'visible'; // Always return 'visible' to indicate the tab is visible
    }
});

// Trigger a fake visibilitychange event to ensure Instagram updates its state
const event = new Event('visibilitychange');
document.dispatchEvent(event);

console.log('Instagram tab visibility detection overridden. Videos should no longer pause when switching tabs.');

// === Part 2: Add a custom seek bar to Instagram videos ===
function addSeekBarToVideos() {
    // Select all video elements on the page
    const videos = document.querySelectorAll('video');

    videos.forEach(video => {
        // Check if the video already has a seek bar
        if (video.parentElement && video.parentElement.querySelector('.custom-seek-bar')) return;

        // Ensure parentElement exists before proceeding
        if (!video.parentElement) return;

        // Create a container for the seek bar
        const seekBarContainer = document.createElement('div');
        seekBarContainer.style.position = 'absolute';
        seekBarContainer.style.bottom = '10px';
        seekBarContainer.style.left = '10px';
        seekBarContainer.style.right = '10px';
        seekBarContainer.style.height = '5px';
        seekBarContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        seekBarContainer.style.borderRadius = '5px';
        seekBarContainer.style.cursor = 'pointer';
        seekBarContainer.classList.add('custom-seek-bar');

        // Create the progress bar
        const progressBar = document.createElement('div');
        progressBar.style.height = '100%';
        progressBar.style.backgroundColor = '#0095f6';
        progressBar.style.borderRadius = '5px';
        progressBar.style.width = '0%';

        // Append the progress bar to the container
        seekBarContainer.appendChild(progressBar);

        // Append the seek bar container to the video's parent element
        video.parentElement.style.position = 'relative';
        video.parentElement.appendChild(seekBarContainer);

        // Update the progress bar as the video plays
        video.addEventListener('timeupdate', () => {
            const progress = (video.currentTime / video.duration) * 100;
            progressBar.style.width = `${progress}%`;
        });

        // Allow clicking on the seek bar to jump to a specific time
        seekBarContainer.addEventListener('click', (e) => {
            const rect = seekBarContainer.getBoundingClientRect();
            const clickPosition = (e.clientX - rect.left) / rect.width;
            video.currentTime = clickPosition * video.duration;
        });
    });
}

// Wait for the page to load before running the function initially
window.addEventListener('load', () => {
    setTimeout(() => {
        addSeekBarToVideos();
        console.log('Custom seek bar added to Instagram videos after delay.');
    }, 2000); // 2-second delay, adjust as needed
});

// Observe the DOM for new videos (e.g., when scrolling)
const observer = new MutationObserver(addSeekBarToVideos);
observer.observe(document.body, { childList: true, subtree: true });