mouse-over video thumbnail to preview video by cycling through the storyboard

youtube_storyboard.js

// ==UserScript==
// @name           Youtube Storyboard
// @namespace      hbb_works
// @description    mouse-over video thumbnail to preview video by cycling through the storyboard
// @version        1.3.1r1605101704
// @include        http://*youtube.com*
// @include        https://*youtube.com*
// @grant          none
// ==/UserScript==


const INTERVAL = 200; // default interval in milliseconds
var div;
var loader;
var animator;
var mousePos = { x: 0, y: 0 };

function dbg() {
    //console.log.apply(console, arguments);
}

function getPos(element) {
    var ref = document.body.getBoundingClientRect();
    var rel = element.getBoundingClientRect();
    return {
        left: rel.left - ref.left,
        top: rel.top - ref.top
    };
}

function setMousePos(event) {
    mousePos = { x: event.pageX, y: event.pageY };
}

(function init() {
    dbg("init youtube storyboard");
    document.addEventListener('mouseover', onMouseOver, false);
    loader = document.createElement('img');
    div = document.createElement('div');
    div.id = 'storyboardPlayer';
    div.style.display = 'none';
    div.style.position = 'absolute';
    div.style.zIndex = 99;
    var a = document.createElement('a');
    var innerDiv = document.createElement('div');
    innerDiv.style.height = '100%';
    innerDiv.style.width = '100%';
    a.appendChild(innerDiv);
    div.appendChild(a);
    document.getElementById('page') .appendChild(div);
    div.addEventListener('mouseout', function () {
        animator.stop();
    });
    
    document.addEventListener('mousemove', function (event) {
        setMousePos(event);
    });
})();

function onMouseOver(event) {
    setMousePos(event);
    var target = event.target;
    var src = target.src;
    if (target.nodeName == 'IMG' && src && (/default\.jpg/.exec(src) || /0\.jpg/.exec(src)))
    {
        if (animator) {
            animator.stop();
        }
        animator = new Animator(target);
        animator.getStoryboardSpecs(function () {
            animator.start();
        });
    }
}

var Animator = function (target) {
    this.id = Math.floor(Math.random() * 10000);
    dbg("new " + this.id);
    this.target = target;
    this.frame = 0;
    this.sheet = 0;
    this.interval = INTERVAL;
    this.src = target.src
    // get video id
    this.v = (/vi\/(.*?)\//.exec(this.src) || []) [1];
    if (this.v) {
        this.width = target.width;
        this.height = target.height;
    }
    var p = getPos(target);
    div.style.top = p.top + 'px';
    div.style.left = p.left + 'px';
    div.style.width = this.width + 'px';
    div.style.height = this.height + 'px';
    this.x = p.left;
    this.y = p.top;
    
    // adjustments for small thumbnails in list of related videos
    if (target.parentElement.classList.contains('yt-uix-simple-thumb-wrap')) {
        var spanHeight = target.parentElement.getBoundingClientRect().height;
        div.style.top = p.top + ((target.height - spanHeight) / 2) + 'px';
        div.style.height = spanHeight + 'px';
        this.height = spanHeight;
    }
    
    var parent = target.parentElement;
    while (parent.tagName != 'A') {
        parent = parent.parentElement;
    }
    div.children[0].href = parent.href;
    
    div.style.backgroundRepeat = 'no-repeat';
    div.style.backgroundPosition = 'center';
    div.style.backgroundSize = null;
    // loading indicator
    div.style.backgroundImage ='url(\'data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==\')';
    div.style.display = null;
};
Animator.prototype.parseSpec = function (storyboard_spec) {
    dbg("parseSpec " + this.id);
    var lines = storyboard_spec.split('|');
    var q;
    if (!this.quality) {
        this.quality = - 1;
        do {
            this.quality++;
            q = lines[this.quality + 1].split('#');
        } while (parseInt(q[0], 10) < this.width && this.quality + 2 < lines.length);
    }
    var q = lines[this.quality + 1].split('#');
    var s = {
        url: lines[0].replace('$L', this.quality) .replace('$N', q[6]),
        width: parseInt(q[0], 10),
        height: parseInt(q[1], 10),
        count: parseInt(q[2], 10),
        cols: parseInt(q[3], 10),
        rows: parseInt(q[4], 10),
        sigh: q[7]
    };
    s.sheetSize = s.cols * s.rows;
    s.sheetCount = ((s.count / s.sheetSize) | 0) + 1; // bitwise OR to loose decimals
    s.countOnLastSheet = ((s.count - 1) % s.sheetSize) + 1;
    return this.spec = s;
};
Animator.prototype.loadImage = function (callback) {
    dbg("loadImage " + this.id);
    var onLoad = (function () {
        div.style.backgroundImage = 'url(' + loader.src + ')';
        loader.removeEventListener('load', onLoad);
        callback.apply(this);
    }).bind(this);
    loader.addEventListener('load', onLoad);
    loader.src = this.spec.url.replace('$M', this.sheet) + '?sigh=' + this.spec.sigh;
};
Animator.prototype.getStoryboardSpecs = function (callback, fromWatch) {
    dbg("getStoryboardSpecs (fromWatch: " + fromWatch + ") " + this.id);
    this.xhr = new XMLHttpRequest();
    this.xhr.onload = (function () {
        if (this.isMouseOver()) {
            if (fromWatch) {
                var spec = (/"storyboard_spec":\s*(".*?")/.exec(this.xhr.responseText) || []) [1];
            }
            else {
                var spec = (/&storyboard_spec=(.*?)&/.exec(this.xhr.responseText) || []) [1];
            }
            if (spec) {
                if (fromWatch) {
                    spec = eval(spec); // remove backslashes
                }
                this.parseSpec(decodeURIComponent(spec));
                callback.apply(this);
            } 
            else if (!fromWatch) {
                this.getStoryboardSpecs(callback, true);
            }
            else {
                div.style.background = null;
            }
        }
        else {
            this.stop();
        }
    }).bind(this);
    if (fromWatch) {
        this.xhr.open('GET', '/watch?v=' + this.v, true);
    }
    else {
        this.xhr.open('GET', '/get_video_info?video_id=' + this.v, true);
    }
    this.xhr.send();
};
Animator.prototype.start = function () {
    dbg("start " + this.id);
    this.frame = 0;
    this.sheet = 0;
    var lastTick;
    var next = function () {
        dbg("next " + this.id + " token " + this.token);
        if (this.isMouseOver()) {
            if (this.spec.fit == 'height') {
                var w = this.spec.width * this.height / this.spec.height;
                var offset = (this.width - w) / 2;
                div.style.backgroundPosition = -((this.frame % this.spec.cols) * w - offset) + 'px ' +
                                               -(((this.frame / this.spec.cols) | 0) * this.height) + 'px'; // bitwise OR with 0 to loose decimals
            } 
            else {
                var h = this.spec.height * this.width / this.spec.width;
                var offset = (this.height - h) / 2;
                div.style.backgroundPosition = -((this.frame % this.spec.cols) * this.width) + 'px ' +
                                               -(((this.frame / this.spec.cols) | 0) * h - offset) + 'px';
            }
            this.frame++;
            if ((this.frame == this.spec.sheetSize) || (this.sheet == this.spec.sheetCount - 1 && this.frame == this.spec.countOnLastSheet))
            {
                clearInterval(this.token);
                dbg("clear " + this.id + " token " + this.token);
                this.loadImage(function () {
                    this.frame = 0;
                    this.sheet = (this.sheet + 1) % this.spec.sheetCount;
                    this.token = setInterval(next, this.interval);
                    dbg("set " + this.id + " token " + this.token);
                });
            }
        } 
        else {
            this.stop();
        }
    }.bind(this);
    
    this.loadImage(function () {
        if (this.isMouseOver()) {
            if ((this.width / this.height) <= (this.spec.width / this.spec.height)) {
                this.spec.fit = 'height';
                div.style.backgroundSize = ((this.spec.width * this.height / this.spec.height) * this.spec.cols) + 'px ' + 
                                           (this.height * this.spec.rows) + 'px';
            } 
            else {
                this.spec.fit = 'width';
                div.style.backgroundSize = (this.width * this.spec.cols) + 'px ' + 
                                           ((this.spec.height * this.width / this.spec.width) * this.spec.rows) + 'px';
            }
            this.token = setInterval(next, this.interval);
            dbg("set " + id + " token " + this.token);
        }
        else {
            this.stop();
        }
    });
};
Animator.prototype.stop = function () {
    dbg("stop " + this.id);
    if (!this.stopped) {
        clearInterval(this.token);
        dbg("clear " + this.id + " token " + this.token);
        div.style.display = 'none';
    }
    this.stopped = true;
};
Animator.prototype.isMouseOver = function () {
    return mousePos.x >= this.x && mousePos.x <= this.x + this.width && 
           mousePos.y >= this.y && mousePos.y <= this.y + this.height;
};