✨ Feature parity: Embed giphy links

[ksharizard]

How does this feature work on Reddit?

GIFs in reddit comments are embedded.

Describe how this could be implemented into Redlib

Have the same logic as how images are embedded in comments.

Describe alternatives you've considered

Clicking on the links in the comments to open the GIF in a new tab.

Additional context / screenshot

[RedSnt]

I had Duck.ai vibe code this userscript in the meantime. Take it or leave it.

// ==UserScript==
// @name         Embed Giphy links in Redlib comments (MP4)
// @author       GPT-5.6 Luna
// @comment      Yes, vibe coded via Duck.ai
// @namespace    local
// @version      1.1
// @description  Turn Giphy links in Redlib comments into embedded GIFs
// @include      https://redlib*.*.tld/r/*/comments/*
// @grant        none
// ==/UserScript==

(() => {
    'use strict';

    const selector = '.comment_body a[href*="giphy.com/gifs/"]';

    const style = document.createElement('style');
    style.textContent = `
        .redlib-giphy-link {
            display: block;
        }
        .redlib-giphy-embed {
            display: block;
            max-width: 600 px;
            width: 100%;
            height: auto;
            margin: 0.4em 0;
        }
    `;
    document.head.appendChild(style);

    function embedGiphyLink(link) {
        if (link.dataset.giphyEmbedded === 'true') {
            return;
        }

        let url;

        try {
            url = new URL(link.href);
        } catch {
            return;
        }

        if (!/(^|\.)giphy\.com$/i.test(url.hostname)) {
            return;
        }

        const match = url.pathname.match(/\/gifs\/([^/?#]+)/i);

        if (!match) {
            return;
        }

        // Handles both:
        // /gifs/443jI3kpgOKfAfKxqo
        // /gifs/some-description-443jI3kpgOKfAfKxqo
        const id = match[1].split('-').pop();

        if (!/^[A-Za-z0-9]+$/.test(id)) {
            return;
        }

        const video = document.createElement('video');

        video.src = `https://media.giphy.com/media/${id}/giphy.mp4`;
        video.autoplay = true;
        video.loop = true;
        video.muted = true;
        video.playsInline = true;
        video.preload = 'metadata';
        video.className = 'redlib-giphy-embed';

        video.onerror = () => {
            const image = document.createElement('img');
            image.src = `https://media.giphy.com/media/${id}/giphy.gif`;
            image.alt = link.textContent.trim() || 'Giphy image';
            image.loading = 'lazy';
            image.decoding = 'async';
            image.className = 'redlib-giphy-embed';

            video.replaceWith(image);
        };

        // Keep the original Giphy link, but replace its text with the image.
        link.textContent = '';
        link.classList.add('redlib-giphy-link');
        link.appendChild(video);
        link.dataset.giphyEmbedded = 'true';
    }

    function scan(root = document) {
        if (root.matches?.(selector)) {
            embedGiphyLink(root);
        }

        root.querySelectorAll?.(selector).forEach(embedGiphyLink);
    }

    scan();

    // Handle comments added later through dynamic page updates.
    const observer = new MutationObserver(mutations => {
        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    scan(node);
                }
            }
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

It's pretty greedy, so you might want to fiddle with the @match part.

As for userscript manager extension I recommend Violentmonkey as it's open source (albeit MIT license 🤮).

EDIT: updated it to use MP4 as default, width to 100% and fallback to GIF if MP4 fails to load.