Youtube Upnext Videos Navigator

// *** JAVASCRIPT ***
var i = 0;
var len = 0;

$(document).keydown(function (e) {
    // Video queue
    var videos = $('a.yt-simple-endpoint.ytd-compact-video-renderer');
    // Add index to before of videos title
    if (videos.length != len) {
        $('.vid-index').remove();
        len = videos.length;
        for (var j = 0; j < len; j++) {
            videos.eq(j).before('<span class="vid-index"></span>');
            $('.vid-index').eq(j).html(j);
        }
    }

    // Declaration of focused element
    var focused = $(':focus');
    var focusedHtml = focused.prevObject[0].activeElement.outerHTML;
    var focusedClass = focused.attr("class");
    var focusedTag = focused.prop("tagName");

    var isTextfield = false;
    // If focused tag is defined, distinct is not a textfield
    if (focusedTag) {
        focusedTag = focusedTag.toLowerCase();
        if (
            focusedTag.indexOf("input") >= 0 ||
            focusedClass.indexOf("input") >= 0 ||
            focusedHtml.indexOf("input") >= 0 && focusedTag != "div"
        ) isTextfield = true;
    }


    // Up key
    if (e.which == 38 && !isTextfield) {
        e.preventDefault();
        if (i > 0) i--;
        videos.eq(i).focus();
    }
    // Down key
    if (e.which == 40 && !isTextfield) {
        e.preventDefault();
        if (i < len - 1) i++;
        videos.eq(i).focus();
    }

    // Media-play/pause key
    if (e.which == 179)
        $('.ytp-play-button').click();
});




/*** CSS STYLE ***/
a.yt-simple-endpoint.ytd-compact-video-renderer:focus:before {
    content: 'Press [Enter] to play ►';
}

a.yt-simple-endpoint.ytd-compact-video-renderer:focus {
    color: red;
    /*border: 1px solid red;*/
    /*background: rbga(120,120,120,0.5);*/
}

.vid-index {
    margin-right: 5px;
}