// ==UserScript==
// @name         Instagram Download Buttons
// @namespace    https://mathewsachin.github.io/
// @version      1.0
// @description  Adds ⬇ download buttons for reels and stories on Instagram; restores right-click on photos
// @author       Mathew Sachin
// @match        https://www.instagram.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @connect      cdninstagram.com
// @connect      instagram.com
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    /* Class added to every button we create — used to filter our own     */
    /* DOM insertions out of the MutationObserver, preventing a feedback  */
    /* loop that would hang scrolling.                                     */
    const BTN_CLASS = 'ig-dl-btn';

    const BTN_STYLE = [
        'background:rgba(0,0,0,0.6)',
        'border:none',
        'border-radius:6px',
        'color:white',
        'cursor:pointer',
        'font-size:18px',
        'line-height:1',
        'padding:6px 8px',
        'position:absolute',
        'z-index:9999',
    ].join(';');

    /* ── Direct download via GM_xmlhttpRequest ───────────────────────── */
    /* Fetches the CDN URL from the extension context (bypasses CORS),    */
    /* creates a same-origin blob URL, and triggers <a download> so the   */
    /* file saves directly instead of opening in a new tab.               */
    function downloadBlob(url, filename) {
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: 'GET',
                url,
                responseType: 'blob',
                onload: r => {
                    const blobUrl = URL.createObjectURL(r.response);
                    const a = document.createElement('a');
                    a.href = blobUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
                    resolve();
                },
                onerror: reject,
            });
        });
    }

    /* ── Shared React Fiber scraper ─────────────────────────────────── */
    /* Iterative DFS: yields every 200 object visits so the browser can  */
    /* process scroll / paint events between bursts of work. WeakSet     */
    /* guards against React's circular fiber references.                 */
    async function scrapeReactFiber(startEl) {
        const videoUrls = [], imageUrls = [];
        const visited = new WeakSet();

        let el = startEl;
        while (el) {
            const fk = Object.keys(el).find(k => k.startsWith('__reactFiber$') || k.startsWith('__reactProps$'));
            if (fk) {
                const stack = [{ obj: el[fk], depth: 0 }];
                let steps = 0;
                while (stack.length > 0) {
                    // Yield every 200 object visits to keep the thread responsive
                    if (++steps % 200 === 0) await new Promise(r => setTimeout(r, 0));
                    const { obj, depth } = stack.pop();
                    if (depth > 15 || !obj || typeof obj !== 'object' || obj instanceof HTMLElement) continue;
                    if (visited.has(obj)) continue;
                    visited.add(obj);
                    for (const key in obj) {
                        const val = obj[key];
                        if (typeof val === 'string' && val.startsWith('https://') && !val.includes('<?xml')) {
                            if (val.includes('.mp4'))
                                videoUrls.push({ url: val, area: (obj.width || 0) * (obj.height || 0) });
                            else if (val.includes('.jpg') || val.includes('.webp'))
                                imageUrls.push({ url: val, area: (obj.width || 0) * (obj.height || 0) });
                        } else if (val && typeof val === 'object') {
                            stack.push({ obj: val, depth: depth + 1 });
                        }
                    }
                }
                // Found URLs at this ancestor — no need to walk further up the tree
                if (videoUrls.length > 0 || imageUrls.length > 0) break;
            }
            el = el.parentElement;
            await new Promise(r => setTimeout(r, 0)); // yield between ancestors
        }

        const best = arr => arr.length ? arr.sort((a, b) => b.area - a.area)[0].url : null;
        return videoUrls.length > 0 ? best(videoUrls) : best(imageUrls);
    }

    /* ── MediaRecorder fallback for reels when CDN URL is not in Fiber ─ */
    function recordReel(videoEl) {
        return new Promise((resolve, reject) => {
            videoEl.muted = true;
            videoEl.pause();
            videoEl.currentTime = 0;

            setTimeout(() => {
                let stream;
                try { stream = videoEl.captureStream(); }
                catch (e) { return reject(new Error('captureStream not supported')); }

                const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9,opus')
                    ? 'video/webm;codecs=vp9,opus'
                    : 'video/webm';
                const chunks = [];
                const rec = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 5_000_000 });
                rec.ondataavailable = e => e.data.size > 0 && chunks.push(e.data);
                rec.onstop = () => resolve(URL.createObjectURL(new Blob(chunks, { type: mimeType })));
                videoEl.play();
                rec.start();
                videoEl.addEventListener('ended', () => rec.stop(), { once: true });
            }, 400);
        });
    }

    /* ── Button factory ──────────────────────────────────────────────── */
    function makeBtn(emoji, title, onClick) {
        const btn = document.createElement('button');
        btn.textContent = emoji;
        btn.title = title;
        btn.className = BTN_CLASS; // marks button so MutationObserver ignores it
        btn.style.cssText = BTN_STYLE;
        btn.addEventListener('click', e => { e.stopPropagation(); e.preventDefault(); onClick(btn); });
        return btn;
    }

    /* ── Guess file extension from a CDN URL ────────────────────────── */
    function extFromUrl(url) {
        const m = url.match(/\.(mp4|jpg|jpeg|webp|png)(\?|$)/i);
        return m ? m[1] : 'jpg';
    }

    /* ── CSS shield removal — restores right-click on all images ─────── */
    /* GM_addStyle injects via extension context (CSP-exempt). Setting    */
    /* position:relative + z-index:999 lifts <img> elements above the     */
    /* invisible overlay <div>s Instagram stacks on top to intercept      */
    /* mouse events, so right-click lands directly on the image.          */
    let _shieldsInstalled = false;
    function installKillShieldsCSS() {
        if (_shieldsInstalled) return;
        _shieldsInstalled = true;
        GM_addStyle('img { pointer-events: auto !important; user-select: auto !important; position: relative !important; z-index: 999 !important; }');
    }

    /* ══ REEL HANDLER — Reel player ══════════════════════════════════════ */
    function addReelButton(videoEl) {
        if (videoEl.dataset.igDl) return;
        videoEl.dataset.igDl = '1';

        const wrapper = videoEl.parentElement;
        if (!wrapper) return;
        const pos = getComputedStyle(wrapper).position;
        if (!['relative', 'absolute', 'fixed', 'sticky'].includes(pos))
            wrapper.style.setProperty('position', 'relative', 'important');

        const btn = makeBtn('⬇', 'Download reel', async () => {
            btn.disabled = true;
            btn.textContent = '⏳';
            try {
                const url = await scrapeReactFiber(videoEl);
                if (url) {
                    // Fiber gave us the CDN URL — download it directly
                    await downloadBlob(url, `reel.${extFromUrl(url)}`);
                } else {
                    // MediaRecorder path: play through and record frames
                    const blobUrl = await recordReel(videoEl);
                    const a = document.createElement('a');
                    a.href = blobUrl;
                    a.download = 'reel.webm';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
                }
                btn.textContent = '✅';
            } catch (err) {
                btn.textContent = '❌';
                console.error('[IG-DL] Reel download failed:', err);
            }
            setTimeout(() => { btn.textContent = '⬇'; btn.disabled = false; }, 3000);
        });
        btn.style.top = '8px';
        btn.style.right = '8px';
        wrapper.appendChild(btn);
    }

    /* ══ STORY HANDLER — /stories/ URL ══════════════════════════════════ */
    function addStoryButton(mediaEl) {
        if (mediaEl.dataset.igDl) return;
        mediaEl.dataset.igDl = '1';

        const wrapper = mediaEl.parentElement;
        if (!wrapper) return;
        const pos = getComputedStyle(wrapper).position;
        if (!['relative', 'absolute', 'fixed', 'sticky'].includes(pos))
            wrapper.style.setProperty('position', 'relative', 'important');

        const btn = makeBtn('⬇', 'Download story', async () => {
            btn.disabled = true;
            btn.textContent = '⏳';
            try {
                const url = await scrapeReactFiber(mediaEl);
                if (url) {
                    await downloadBlob(url, `story.${extFromUrl(url)}`);
                    btn.textContent = '✅';
                } else {
                    btn.textContent = '❌';
                    console.warn('[IG-DL] Story CDN URL not found in React Fiber');
                }
            } catch (err) {
                btn.textContent = '❌';
                console.error('[IG-DL] Story download failed:', err);
            }
            setTimeout(() => { btn.textContent = '⬇'; btn.disabled = false; }, 2000);
        });
        // Place above the story progress bar (~40 px tall) at the bottom of the story
        btn.style.bottom = '48px';
        btn.style.right = '12px';
        wrapper.appendChild(btn);
    }

    /* ══ PAGE SCANNER — Detect context and add the right buttons ════════ */
    function scan() {
        installKillShieldsCSS(); // inject once; no-op on subsequent calls

        if (location.href.includes('/stories/')) {
            // Stories are pre-loaded horizontally; pick the one nearest the viewport centre
            const allMedia = Array.from(document.querySelectorAll('video, img'));
            const cx = window.innerWidth / 2;
            let best = null, minDist = Infinity;
            allMedia
                .sort((a, b) => (a.tagName === 'VIDEO' ? -1 : 1))
                .forEach(el => {
                    const r = el.getBoundingClientRect();
                    if (r.width > 0 && r.left >= 0 && r.right <= window.innerWidth) {
                        const dist = Math.abs(cx - (r.left + r.width / 2));
                        if (dist < minDist) { minDist = dist; best = el; }
                    }
                });
            if (best) addStoryButton(best);
            return;
        }

        // Reel videos (tall, in-viewport)
        document.querySelectorAll('video').forEach(v => {
            if (v.getBoundingClientRect().height > 100) addReelButton(v);
        });
    }

    /* ══ SPA NAVIGATION WATCHER ══════════════════════════════════════════ */
    /* Instagram is a React SPA: URLs change via pushState without a full   */
    /* page reload. We debounce DOM mutations + intercept history methods    */
    /* to re-run scan() after each navigation.                               */

    let scanTimer;

    /* Use requestIdleCallback when available so scan() runs during idle   */
    /* time and doesn't compete with scroll animation frames.              */
    const scheduleIdle = typeof requestIdleCallback === 'function'
        ? cb => requestIdleCallback(cb, { timeout: 1000 })
        : cb => setTimeout(cb, 600);

    const scheduleScan = () => {
        clearTimeout(scanTimer);
        scanTimer = scheduleIdle(scan);
    };

    /* Only react to mutations caused by Instagram's own code — not by    */
    /* our own button insertions (which carry BTN_CLASS). Without this     */
    /* filter, each appendChild(btn) would re-trigger the observer and     */
    /* reset the debounce timer, causing continuous work during scrolling. */
    new MutationObserver(mutations => {
        if (mutations.some(m =>
            Array.from(m.addedNodes).some(n => n.nodeType === 1 && !n.classList.contains(BTN_CLASS))
        )) scheduleScan();
    }).observe(document.body, { childList: true, subtree: true });

    const _push = history.pushState.bind(history);
    history.pushState = (...a) => { _push(...a); scheduleScan(); };
    const _replace = history.replaceState.bind(history);
    history.replaceState = (...a) => { _replace(...a); scheduleScan(); };
    window.addEventListener('popstate', scheduleScan);

    scan(); // initial run
})();

// @match        https://www.instagram.com/*
// @grant        GM_xmlhttpRequest
// @connect      cdninstagram.com
// @connect      instagram.com
// @run-at       document-idle

function downloadBlob(url, filename) {
    return new Promise((resolve, reject) => {
        GM_xmlhttpRequest({
            method: 'GET',
            url,
            responseType: 'blob',
            onload: r => {
                const blobUrl = URL.createObjectURL(r.response);
                const a = document.createElement('a');
                a.href = blobUrl;
                a.download = filename;
                // ...
            },
        });
    });
}

let _shieldsInstalled = false;
function installKillShieldsCSS() {
    if (_shieldsInstalled) return;
    _shieldsInstalled = true;
    GM_addStyle('img { pointer-events: auto !important; user-select: auto !important; position: relative !important; z-index: 999 !important; }');
}

async function scrapeReactFiber(startEl) {
    const visited = new WeakSet();
    // ...
    const stack = [{ obj: el[fk], depth: 0 }];
    let steps = 0;
    while (stack.length > 0) {
        if (++steps % 200 === 0) await new Promise(r => setTimeout(r, 0));
        const { obj, depth } = stack.pop();
        if (visited.has(obj)) continue;
        visited.add(obj);
        // ...push children onto stack...
    }
}

btn.disabled = true;
btn.textContent = '⏳';
// ... async work ...
setTimeout(() => { btn.textContent = '⬇'; btn.disabled = false; }, 2000);

const blobUrl = await recordReel(videoEl);

const dist = Math.abs(cx - (r.left + r.width / 2));
if (r.left >= 0 && r.right <= window.innerWidth)

new MutationObserver(mutations => {
    if (mutations.some(m =>
        Array.from(m.addedNodes).some(n => n.nodeType === 1 && !n.classList.contains(BTN_CLASS))
    )) scheduleScan();
}).observe(document.body, { childList: true, subtree: true });

history.pushState = (...a) => { _push(...a); scheduleScan(); };
history.replaceState = (...a) => { _replace(...a); scheduleScan(); };
window.addEventListener('popstate', scheduleScan);

if (videoEl.dataset.igDl) return;
videoEl.dataset.igDl = '1';

GM_addStyle('img { pointer-events: auto !important; user-select: auto !important; position: relative !important; z-index: 999 !important; }');