userscripts/Always_Load_HD_Reddit_Images.user.js at main · sinazadeh/userscripts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
// ==UserScript==
// @name         Always Load HD Reddit Images
// @namespace    https://github.com/sinazadeh/userscripts
// @version      1.1.2
// @description  Automatically replaces blurry Reddit image previews with their full-resolution originals as you scroll. Includes a menu command to toggle the feature on or off.
// @author       TheSina
// @match        https://*.reddit.com/*
// @grant        GM_registerMenuCommand
// @grant        GM_getValue
// @grant        GM_setValue
// @license      MIT
// @downloadURL  https://raw.githubusercontent.com/sinazadeh/userscripts/refs/heads/main/Always_Load_HD_Reddit_Images.user.js
// @updateURL    https://raw.githubusercontent.com/sinazadeh/userscripts/refs/heads/main/Always_Load_HD_Reddit_Images.meta.js
// ==/UserScript==
/* jshint esversion: 8 */
(async function () {
    'use strict';

    let enabled = await GM_getValue('hdEnabled', true);

    const updateMenu = () => {
        GM_registerMenuCommand(
            (enabled ? 'Disable' : 'Enable') + ' HD Images',
            async () => {
                enabled = !enabled;
                await GM_setValue('hdEnabled', enabled);
                location.reload();
            },
        );
    };
    updateMenu();

    const toHD = url => url.replace('preview.redd.it', 'i.redd.it');

    function upgradeImg(img) {
        if (!enabled) return;

        const src = img.getAttribute('src') || '';
        const current = img.currentSrc || '';

        // Skip link preview thumbnails
        if (
            src.includes('external-preview') ||
            current.includes('external-preview')
        )
            return;

        // Process only if the src is a standard preview
        if (!src.includes('preview.redd.it')) return;

        const srcset = img.getAttribute('srcset');
        if (srcset) {
            const candidates = srcset
                .split(',')
                .map(s => s.trim().split(' ')[0]);
            img.src = toHD(candidates[candidates.length - 1]);
        } else {
            img.src = toHD(src);
        }

        img.srcset = '';
    }

    function upgradeBg(el) {
        if (!enabled) return;

        const bg = getComputedStyle(el).backgroundImage;

        if (bg.includes('external-preview')) return;

        const m = bg.match(
            /url\(["']?(https?:\/\/preview\.redd\.it\/[^"')]+)["']?\)/,
        );
        if (m) {
            el.style.backgroundImage = `url("${toHD(m[1])}")`;
        }
    }

    const io = new IntersectionObserver(
        entries => {
            for (const {target, isIntersecting} of entries) {
                if (!isIntersecting) continue;

                if (target.tagName === 'IMG') upgradeImg(target);
                else upgradeBg(target);

                io.unobserve(target);
            }
        },
        {rootMargin: '200px'},
    );

    function observeNewElements(root) {
        const walker = document.createTreeWalker(
            root,
            NodeFilter.SHOW_ELEMENT,
            null,
            false,
        );
        const elementsToObserve = [];
        let node = walker.currentNode;

        do {
            if (node.tagName === 'IMG' && !node.dataset.hdObserved) {
                node.dataset.hdObserved = '1';
                elementsToObserve.push(node);
            } else if (!node.dataset.hdBgObserved) {
                const style = node.getAttribute('style');
                if (
                    style &&
                    style.includes('background') &&
                    style.includes('preview.redd.it')
                ) {
                    node.dataset.hdBgObserved = '1';
                    elementsToObserve.push(node);
                }
            }
        } while ((node = walker.nextNode()));

        elementsToObserve.forEach(el => io.observe(el));
    }

    let mutationTimeout;
    const handleMutations = records => {
        clearTimeout(mutationTimeout);
        mutationTimeout = setTimeout(() => {
            const addedElements = [];

            for (const rec of records) {
                for (const node of rec.addedNodes) {
                    if (node instanceof HTMLElement) {
                        addedElements.push(node);
                    }
                }
            }

            addedElements.forEach(observeNewElements);
        }, 50);
    };

    const mo = new MutationObserver(handleMutations);
    mo.observe(document.body, {childList: true, subtree: true});

    if (document.readyState === 'loading') {
        window.addEventListener('DOMContentLoaded', () =>
            observeNewElements(document.body),
        );
    } else {
        observeNewElements(document.body);
    }
})();