IMDb Face Cake - Get a better look at actor images!

Make people's faces larger when you hover over their names on IMDb movie and show pages

// ==UserScript==
// @name        IMDb Face Cake - Get a better look at actor images!
// @namespace   driver8.net
// @license     GNU AGPLv3
// @description Make people's faces larger when you hover over their names on IMDb movie and show pages
// @match       *://*.imdb.com/title/tt*/reference*
// @match       *://*.imdb.com/title/tt*/
// @match       *://*.imdb.com/title/tt*/?*
// @match       *://*.imdb.com/name/nm*
// @match       *://*.imdb.com/title/tt*/fullcredits*
// @match       *://*.imdb.com/title/tt*/combined*
// @version     0.5.0.4
// @grant       GM_addStyle
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// ==/UserScript==

console.log('hi imdb facecake');

var MULT = 12;
var IMG_WIDTH = 23 * MULT;
var BORDER = 2;
var OFFSET = 0;
var IMDB_WIDTH = 900;
var IMDB_HEIGHT = 900;
var DO_THUMBS = true;
var AND_BUTTS = false;

//AND_BUTTS && $('.TitleBlock__TitleMetaDataContainer-sc-1nlhx7j-2, #tn15title > h1 > span:first').before($('<h1> and Butts </h1>').css({'display': 'inline'}));
AND_BUTTS && $('.TitleHeader__TitleText-sc-1wu6n3d-0').text($('.TitleHeader__TitleText-sc-1wu6n3d-0').text() + ' and Butts');
var rowDivs = [];
var thumbDivs = [];
var curPopup;

var $rows = $('table.cast, table.cast_list').find('tr.odd, tr.even');
var $thumbs = $('.ipc-image, .loadlate, .wtw-option, #name-poster, .media_strip_thumb img, .mediastrip img, .mediastrip_big img, #primary-poster, .photo img, .poster img');
$thumbs = $thumbs.not($rows.find('img'));
//console.log('rows, thumbs', $rows, $thumbs);

function setUpRows() {
    $rows.each(function(idx, $el) {
        //console.log(idx, $el, $(this));
        makePopup(idx, $(this));
    });
}

function makePopup(idx, $el) {
    var $hsImg = $el.find('td.hs img, td.primary_photo img');
		if (! $hsImg.length > 0) { return; }
    var thumbSrc = $hsImg.attr('loadlate') || $hsImg.attr('src');
    var $link = $el.find('a');
    var link = $link && $link.attr('href');
    //console.log($el, 'link', link, $link);
    if ($hsImg.hasClass('loadlate') && thumbSrc.match(/\/imdb\/images\/nopicture\//)) {
        thumbSrc = $hsImg.attr('loadlate');
    }
    //console.log('thumbSrc', thumbSrc, 'link', link);
    thumbSrc = thumbSrc.replace(/(https?:\/\/(?:ia\.media-imdb\.com|.+?\.ssl-images-amazon\.com|.+?\.media-amazon\.com))\/images\/([a-zA-Z0-9@]\/[a-zA-Z0-9@]+)\._V[0-9].+\.jpg/,
        '$1/images/$2._UX' + IMG_WIDTH + '_.jpg');
    var $hovaImg = $('<img>').attr('src', thumbSrc);
    var $hovaLink = $('<a>').attr('href', link).append($hovaImg);
    var $hovaDiv = $('<div>').attr('id', 'hova' + idx).addClass('hovaImg').append($hovaLink);

    $hovaDiv.hide();
    $('body').append($hovaDiv);
    rowDivs[idx] = { 'div': $hovaDiv, 'base': $el };

    $hovaImg.on('load', function() {
        adjustPos(rowDivs[idx], false);
    });
}

function setUpThumbs() {
    $thumbs.each(function(idx) {
        var $el = $(this);
        var thumbSrc = $el.attr('loadlate') || $el.attr('src');
        var $link = $el.closest('a').add($el.parent().parent().find('a'));
        var link = $link && $link.attr('href');
        //console.log($el, 'link', link, $link);
        if ($el.hasClass('loadlate') && thumbSrc.match(/\/imdb\/images\/nopicture\//)) {
            thumbSrc = $el.attr('loadlate');
        }
        thumbSrc = thumbSrc.replace(/(https?:\/\/(?:ia\.media-imdb\.com|.+?\.ssl-images-amazon\.com|.+?\.media-amazon\.com))\/images\/([a-zA-Z0-9@]\/[a-zA-Z0-9@]+)\._V[0-9].+(\.jpg|FMwebp\.webp)/,
            '$1/images/$2._V1_SX' + IMDB_WIDTH + '_SY' + IMDB_HEIGHT + '_.jpg');
        //thumbSrc = thumbSrc.replace(/(http:\/\/(?:ia\.media-imdb\.com|.+?\.ssl-images-amazon\.com|.+?\.media-amazon\.com))\/images\/([a-zA-Z0-9@]\/[a-zA-Z0-9@]+)\._V[0-9].+\.jpg/,
        //    '$1/images/$2._V1_UY' + IMDB_HEIGHT + '_UX' + IMDB_WIDTH + '_.jpg');
        var $hovaImg = $('<img>').attr('src', thumbSrc);
        var $hovaLink = $('<a>').attr('href', link).append($hovaImg);
        var $hovaDiv = $('<div>').attr('id', 'hovat' + idx).addClass('hovaThumb').append($hovaLink);

        $hovaDiv.hide();
        $('body').append($hovaDiv);
        thumbDivs[idx] = { 'div': $hovaDiv, 'base': $el };

        $hovaImg.on('load', function() {
            adjustPos(thumbDivs[idx], true);
        });
    });
}

function adjustPos(obj, big) {
    var win = $(window);
    var pos = obj.base.offset();

    // make sure pop-up is not larger than window
    if (big) {
        var both = obj.div.find('*');
        both.css('max-width', (win.width() - BORDER * 2) + 'px');
        both.css('max-height', (win.height() - BORDER * 2) + 'px');
    }

    // center pop-up
    if (big) {
        pos = { 'top': pos.top + obj.base.outerHeight() + OFFSET, 'left': pos.left + ((obj.base.outerWidth() - obj.div.outerWidth()) / 2) };
    } else {
        pos = {'top': pos.top + ((obj.base.outerHeight() - obj.div.outerHeight()) / 2), 'left': pos.left - obj.div.outerWidth() - OFFSET};
    }

    // check for pop-up extending outside window
    pos.top = Math.min(pos.top + obj.div.outerHeight(), win.scrollTop() + win.height()) - obj.div.outerHeight() - BORDER * 2; // bottom
    pos.left = Math.min(pos.left + obj.div.outerWidth(), win.scrollLeft() + win.width()) - obj.div.outerWidth() - BORDER * 2; // right
    pos.top = Math.max(pos.top, win.scrollTop()); // top
    pos.left = Math.max(pos.left, win.scrollLeft()); // left
    obj.div.offset(pos);
}

function setupHide(obj) {
    var $base = obj.base,
        pos = $base.offset();
    let right = pos.left + $base.outerWidth();
    let bottom = pos.top + $base.outerHeight();
    $('body').on('mousemove mouseover', null, function that(event) {
        var x = event.pageX,
            y = event.pageY;
        if (x < pos.left - 1 || x > right + 1 || y < pos.top - 1 || y > bottom + 1) {
            //console.log('removing hover style', event, 'x', x, pos.left, right, 'y', y, pos.top, bottom);
            $('body').off('mousemove mouseover', null, that);
            $base.removeClass('trHova');
            obj.div.hide();
        }
    });
}

$rows.each(function(idx) {
    var $el = $(this);
    $el.on('mouseenter', function() {
        //console.log('hover event', $el, rowDivs);
        $el.addClass('trHova');
        if (!rowDivs[idx]) {
            console.log("Setting up Rows");
            setUpRows();
        }
        curPopup && curPopup.div.hide()
        curPopup = rowDivs[idx];
        rowDivs[idx].div.show();
        adjustPos(rowDivs[idx], false);
        setupHide(rowDivs[idx]);
    });
});

DO_THUMBS && $thumbs.each(function(idx) {
    var $el = $(this);
    console.log($el, $el.parent());
    var $par = $el.parent();
    if ($el.hasClass('ipc-image')) {
        $par = $par.parent();
    }
    // var $par = $el.closest('.ipc-photo');
    // if ($par.length < 1) {
    //     $par = $el.parent();
    // }
    console.log('par', $par);
    //$el.parent().parent().on('mouseenter', function() {
    $par.on('mouseenter', function() {
        console.log('enter', $el, $el.parent());
        if (!thumbDivs[idx]) {
            setUpThumbs();
        }
        curPopup && curPopup.div.hide()
        curPopup = rowDivs[idx];
        thumbDivs[idx].div.show();
        adjustPos(thumbDivs[idx], true);
        setupHide(thumbDivs[idx]);
    });
});

var userStyles =
    ".hovaImg, .hovaThumb { " +
    "position: absolute;" +
    "padding: 0px;" +
    "border-style: solid;" +
    "border-width: " + BORDER + "px;" +
    "border-color: #AAAAFF;" +
    "z-index: 999999999;" +
    "} " +
    ".hovaImg img {" +
    "width: " + IMG_WIDTH + "px;" +
    "display: block;" +
    "} " +
    ".hovaThumb img {" +
    "   display: block;" +
    //"   width: 100%;" +
    //"   height: 100%;" +
    "} " +
    "tr.trHova {" +
    "background-color: #AAAAFF !important;" +
    "} " +
    "div#tn15content div.info div.info-content.block {" +
    //"width: 90% !important;" +
    "} " +
    "";

GM_addStyle(userStyles);
// let s = document.createElement('style');
// s.type = 'text/css';
// s.innerHTML = userStyles;
// document.body.appendChild(s);