☰

Civitai - Image & Video Hover

Mouse over videos&images to view full size

// ==UserScript==
// @name         Civitai - Image & Video Hover
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Mouse over videos&images to view full size
// @author       gfish
// @license      MIT
// @match        https://civitai.com/*
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @compatible   firefox
// @compatible   chrome
// @compatible   edge
// ==/UserScript==

(function() {
    document.body.insertAdjacentHTML('afterbegin', "<img id='img_hover_container' style='float:left; pointer-events:none; position:absolute; max-width:200px; overflow:hidden; z-index:9999;' src=''>")
    document.body.insertAdjacentHTML('afterbegin', "<video id='vid_hover_container' style='float:left; pointer-events:none; position:absolute; max-width:200px; overflow:hidden; z-index:9999; visibility:hidden;' src='' loop autoplay='true' muted='true'>")
    let vid = document.getElementById('vid_hover_container')

    let bEnter = false;
    let img_type = "jpg";
    let mainRoutine = setInterval((e) => {
        [...document.getElementsByTagName('img'), ...document.getElementsByTagName('video')].forEach((el) => {
            if (el.xhover !== true) {
                el.xhover = true;
                el.addEventListener("mouseenter", (event) => {
                    bEnter = true;
                    img_type = "jpg"
                    $("#img_hover_container").attr("src", el.currentSrc.replace("width=","original=true,width0="))
                    $("#vid_hover_container").css("visibility","visible")
                    $("#vid_hover_container").attr("src", el.currentSrc.replace("width=","original=true,width0=").replace("anim=false","anim=true").replace(".jpeg",".webm"))
                    vid.load()
                    console.log(el.currentSrc, '  |  ', vid.src)
                })
                el.addEventListener("mouseleave", (event) => {
                    bEnter = false;
                    $("#img_hover_container").attr("src", "")
                    vid.pause();
                    vid.removeAttribute('src'); // empty source
                    vid.load();
                })
            }
        });
    }, 100);

    let currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
        update_pos();
    });

    let mouse_offset_x = 16;
    let mouse_offset_x2 = 16;
    let mouse_offset_y = 16;
    let mouse_offset_y2 = 16;
    let mouse_side = false;
    function update_pos(){
        //Mouse Horizontal
        if(currentMousePos.x > ($(window).width()/2))
        {
            mouse_side = true;
            mouse_offset_x = -$("#img_hover_container").width() - 16;
            mouse_offset_x2 = -$("#vid_hover_container").width() - 16;
            $("#img_hover_container").css("max-width", currentMousePos.x - 16)
            $("#vid_hover_container").css("max-width", currentMousePos.x - 16)
        }
        else
        {
            mouse_side = false;
            mouse_offset_x = 16;
            mouse_offset_x2 = 16;
            $("#img_hover_container").css("max-width", $(window).width()-currentMousePos.x)
            $("#vid_hover_container").css("max-width", $(window).width()-currentMousePos.x)
        }

        //Mouse Vertical
        if(currentMousePos.y > ($(window).height() - $("#img_hover_container").height()))
        {
            mouse_offset_y = ($(window).height() - $("#img_hover_container").height()) + $(document).scrollTop();
        }
        else
        {
            mouse_offset_y = currentMousePos.y + 16;
        }
        if(currentMousePos.y > ($(window).height() - $("#vid_hover_container").height()))
        {
            mouse_offset_y2 = ($(window).height() - $("#vid_hover_container").height()) + $(document).scrollTop();
        }
        else
        {
            mouse_offset_y2 = currentMousePos.y + 16;
        }

        $("#img_hover_container").offset({
            top: mouse_offset_y,
            left: currentMousePos.x + mouse_offset_x
        });
        $("#vid_hover_container").offset({
            top: mouse_offset_y2,
            left: currentMousePos.x + mouse_offset_x2
        });

        if (bEnter) {
            if (vid.src !== "" && vid.currentTime > 0) {
                $("#vid_hover_container").css('visibility','visible');
                $("#img_hover_container").css("visibility","hidden");
            }
            else {
                $("#vid_hover_container").css("visibility","hidden");
                $("#img_hover_container").css("visibility","visible");
            }
        }
        else {
            $("#vid_hover_container").css('visibility','hidden');
            $("#img_hover_container").css("visibility","hidden");
        }
    }

    //Update image position periodically
    var intervalID = setInterval(function(){update_pos();}, 100);

    //image type handler
    $("#img_hover_container").on('error', function(er)
    {
        if(img_type == "jpg")
        {
            $("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace(".jpg",".png"))
            img_type = "png";
        }
        else if(img_type == "png")
        {
            $("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace(".png",".jpeg"))
            img_type = "jpeg";
        }
        else if(img_type == "jpeg")
        {
            $("#img_hover_container").attr("src", $("#img_hover_container").attr("src").replace(".jpeg",".gif"))
            img_type = "gif";
        }
    })
    $("#vid_hover_container").on('error', function(er)
    {
        if (vid.src.includes('original=true,'))
        {
            $("#vid_hover_container").attr("src", vid.src.replace("original=true,","").replace("skip=,","skip0="))
            vid.load()
        }
    })

    $("#img_hover_container").css("max-height", $(window).height())
    $("#vid_hover_container").css("max-height", $(window).height())
    window?.navigation.addEventListener("navigate", (event) => {
        console.log('nav')
        bEnter = false;
        $("#img_hover_container").attr("src", "")
        vid.pause();
        vid.removeAttribute('src'); // empty source
        vid.load();
    })
})();