GreasyFork Media Preview

Automatically show media previews (video, audio, images, gifs) on GreasyFork links. It supports: .mp3, .wav, .flac, .aac, .ogg, .m4a, .wma, .alac, .aiff, .amr, .mp4, .webm, .ogv, .avi, .mov, .mkv, .flv, .wmv, .m4v, .3gp, .jpg, .jpeg, .png, .bmp, .svg, .gif, .apng, .webp

// ==UserScript==
// @name         GreasyFork Media Preview
// @author       NWP
// @description  Automatically show media previews (video, audio, images, gifs) on GreasyFork links. It supports: .mp3, .wav, .flac, .aac, .ogg, .m4a, .wma, .alac, .aiff, .amr, .mp4, .webm, .ogv, .avi, .mov, .mkv, .flv, .wmv, .m4v, .3gp, .jpg, .jpeg, .png, .bmp, .svg, .gif, .apng, .webp
// @namespace    https://greasyfork.org/users/877912
// @version      0.1
// @license      MIT
// @match        *://greasyfork.org/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const audioFormats = ['.mp3', '.wav', '.flac', '.aac', '.ogg', '.m4a', '.wma', '.alac', '.aiff', '.amr'];
    const videoFormats = ['.mp4', '.webm', '.ogv', '.avi', '.mov', '.mkv', '.flv', '.wmv', '.m4v', '.3gp'];
    const imageFormats = ['.jpg', '.jpeg', '.png', '.bmp', '.svg'];
    const gifFormats = ['.gif', '.apng', '.webp'];

    function createMediaElement(url) {
        let media;
        if (audioFormats.some(format => url.endsWith(format))) {
            media = document.createElement('audio');
            media.src = url;
            media.controls = true;
            media.autoplay = false;
            media.loop = true;
            media.muted = false;
            media.classList.add('added-by-script');
        } else if (videoFormats.some(format => url.endsWith(format))) {
            media = document.createElement('video');
            media.src = url;
            media.style.width = '20rem';
            media.style.height = '15rem';
            media.controls = true;
            media.autoplay = false;
            media.loop = true;
            media.muted = false;
            media.classList.add('added-by-script');
        } else if (gifFormats.some(format => url.endsWith(format))) {
            media = document.createElement('div');
            media.style.display = 'flex';
            media.style.flexDirection = 'column';
            media.style.alignItems = 'flex-start';
            media.style.width = '20rem';
            media.style.height = 'auto';
            media.style.marginBottom = '0.625rem';

            const img = document.createElement('img');
            img.src = url;
            img.style.width = '20rem';
            img.style.height = '15rem';
            img.classList.add('added-by-script');
            img.dataset.pausedSrc = url;
            img.dataset.playing = 'false';
            img.style.display = 'none';

            const canvas = document.createElement('canvas');
            canvas.style.width = '20rem';
            canvas.style.height = '15rem';
            media.appendChild(canvas);

            const ctx = canvas.getContext('2d');
            const gif = new Image();
            gif.src = url;
            gif.onload = function() {
                ctx.drawImage(gif, 0, 0, canvas.width, canvas.height);
            };

            const playButton = document.createElement('button');
            playButton.innerText = 'Play';
            playButton.style.display = 'block';
            playButton.style.marginTop = '0.625rem';
            playButton.style.alignSelf = 'flex-start';

            playButton.onclick = function(event) {
                event.preventDefault();
                if (img.dataset.playing === 'true') {
                    img.style.display = 'none';
                    canvas.style.display = 'block';
                    img.dataset.playing = 'false';
                    playButton.innerText = 'Play';
                } else {
                    img.style.display = 'block';
                    canvas.style.display = 'none';
                    img.dataset.playing = 'true';
                    playButton.innerText = 'Stop';
                }
            };

            media.appendChild(img);
            media.appendChild(playButton);
            media.classList.add('added-by-script');
        } else if (imageFormats.some(format => url.endsWith(format))) {
            media = document.createElement('img');
            media.src = url;
            media.style.width = '20rem';
            media.style.height = '15rem';
            media.classList.add('added-by-script');
        }
        return media;
    }

    function showMediaPreviews(container) {
        const mediaLinks = container.querySelectorAll(
            audioFormats.map(format => `a[href$="${format}"]`)
            .concat(videoFormats.map(format => `a[href$="${format}"]`))
            .concat(imageFormats.map(format => `a[href$="${format}"]`))
            .concat(gifFormats.map(format => `a[href$="${format}"]`))
            .join(', ')
        );
        mediaLinks.forEach(link => {
            if (!link.dataset.processed) {
                const media = createMediaElement(link.href);
                if (media) {
                    const paragraph = document.createElement('p');
                    paragraph.appendChild(media);
                    link.parentNode.insertBefore(paragraph, link.nextSibling);
                    link.dataset.processed = 'true';
                }
            }
        });
    }

    function initializeMediaPreviews() {
        const additionalInfo = document.querySelector('#additional-info');
        if (additionalInfo) {
            showMediaPreviews(additionalInfo);
        }

        const previewResults = document.querySelectorAll('.preview-results.user-content[style*="display: block"]');
        previewResults.forEach(container => {
            showMediaPreviews(container);
        });
    }

    window.onload = function() {
        initializeMediaPreviews();
    };

    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'style' && mutation.target.style.display === 'block') {
                showMediaPreviews(mutation.target);
            }
        });
    });

    document.querySelectorAll('.preview-results.user-content').forEach(container => {
        observer.observe(container, { attributes: true, attributeFilter: ['style'] });
    });

})();