☰

Greasy Fork is available in English.

Sakugabooru Browse Fix

Replace specific img tag with video tag supporting MP4 and WEBM formats

// ==UserScript==
// @name         Sakugabooru Browse Fix
// @namespace    http://tampermonkey.net/
// @version      0.6969
// @description  Replace specific img tag with video tag supporting MP4 and WEBM formats
// @match        *://www.sakugabooru.com/post/browse*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to replace the img with video
    function replaceImageWithVideo() {
        console.log("tampermonkey script working");

        // Select the img element using a class name (or any other selector as needed)
        const imgElement = document.querySelector('img.main-image');
        const vidElement = document.querySelector('.vjs-tech');

        // Initialize vidSrc variable
        let vidSrc = null;
        let vidType = null;

        // Check if the element exists
        if (imgElement && !vidElement) {
            // Extract the src attribute value
            const imgSrc = imgElement.getAttribute('src');

            // Check if the src ends with .mp4 or .webm
            if (imgSrc && (imgSrc.endsWith('.mp4') || imgSrc.endsWith('.webm'))) {
                imgElement.style.display = 'none';
                vidSrc = imgSrc; // Store the URL in vidSrc
                vidType = imgSrc.endsWith('.mp4') ? 'video/mp4' : 'video/webm'; // Determine the video type
                console.log('Video Source:', vidSrc);

                // Create the new video element
                const video = document.createElement('video');
                video.className = 'vjs-tech';
                video.loop = true;
                video.setAttribute('data-setup', JSON.stringify({
                    autoplay: true,
                    controls: true,
                    playbackRates: [0.2, 0.4, 0.6, 0.8, 1],
                    plugins: {
                        framebyframe: {
                            fps: 24.0,
                            steps: [
                                { text: '< 1f', step: -1 },
                                { text: '1f >', step: 1 }
                            ]
                        }
                    }
                }));
                video.id = 'vjs_video_3_html5_api';
                video.tabIndex = -1;
                video.autoplay = true;
                video.controls = false;

                video.style.width = '100%';
                video.style.height = '100%';

                // Create and append the source element
                const source = document.createElement('source');
                source.src = vidSrc;
                source.type = vidType;
                video.appendChild(source);

                // Create and append the fallback content
                const p = document.createElement('p');
                p.className = 'vjs-no-js';
                p.innerHTML = 'To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" class="vjs-hidden" hidden="hidden">supports HTML5 video</a>';
                video.appendChild(p);

                // Replace the img element with the video element
                imgElement.parentNode.parentNode.appendChild(video, imgElement);
            } else {
                console.log('The src is an image');
            }
        } else {
            console.log('Image element not found or video element already present');
            // Select the image and video elements
            const imgElement = document.querySelector('img.main-image');
            const vidElement = document.querySelector('.vjs-tech');

            // Get the src attributes
            const imgSrc = imgElement ? imgElement.getAttribute('src') : null;
            const vidSourceElement = vidElement ? vidElement.querySelector('source') : null;
            const vidSrc = vidSourceElement ? vidSourceElement.getAttribute('src') : null;

            // Check if the image src is different from the video source src
            if (imgSrc && vidSrc && imgSrc !== vidSrc) {
                if (!imgSrc.endsWith('.mp4') && !imgSrc.endsWith('.webm')){
                    vidElement.outerHTML = '';
                }
                else {
                    imgElement.style.display = 'none';
                    // Update the video source src with the image src
                    const newVidType = imgSrc.endsWith('.mp4') ? 'video/mp4' : 'video/webm';
                    vidSourceElement.setAttribute('src', imgSrc);
                    vidSourceElement.setAttribute('type', newVidType);
                    // Optionally, you may need to load the new video source
                    vidElement.load();
                }
            }
        }
    }

    // Run the function on page load
    replaceImageWithVideo();

    // Optionally, observe changes to the DOM and replace elements dynamically
    const observer = new MutationObserver(replaceImageWithVideo);
    observer.observe(document.body, { childList: true, subtree: true });
})();