[TBF] Youtube Player on top of the Chat 0.2.1

// ==================================================
// #    [terrabattleforum.com - Silver Mitsuki]     #
// ==================================================
//
// Some easy code that adds a youtube player on top of the TBF chat
// doesn't add anything when using the pupup chat (/chat/popup)

// Changelog
// [19 Feb 2017]    First version, let's see how it goes
// [3 March 2017]   Improved regex, better customization, fixed known
//                  'a' tag issue on FF; still have some work to do.
// [10 March 2017]  A very quick update that addresses a little problem

// Known issue (at release)
// None, but I didn't have time to add a couple of more features.

// FAQ
// Q: How does this script work?
// A: I often update the MOTD on top of the chat with announcements
// and such. This script simply looks at the links posted there and
// appends a small player on top of the chat for every video found
// written with a specific format (=> not every video adds a player).

// Q: Where do I find newer and older versions?
// A: Somewhere here: http://terrabattleforum.com/members/4454/

// Q: How do I install it?
// A: Download an extension that allows the user to load a custom JS
// code, like "Custom JavaScript for websites" ( https://goo.gl/Umvo1Q )
// for Chrome and "JS Injector" ( https://goo.gl/6ojztF ) for Firefox.
// Once installed, you'll see a button on the top right part of the
// window, near the Options menu. Click on it, paste this code,
// and click on Save (if there is no button, look for the list of all
// the installed extensions);
// If a URL is required, write http://terrabattleforum.com/
// The script can be paused through the same menu, by disabling
// the extension or by toggling the value below.

// config
// feel free to change the following values; use "true" and "false"
// (without quotes) to enable / disable each option.

// toggle to disable this script
var s_enableScript = true;

// The player will be placed accordingly to the 's_playerType' value.
//
//      0   =   Above Chat, small
//      1   =   Above Chat, big
//      2   =   Below Chat, small
//      3   =   Below Chat, big
//      4   =   On Right of the chat, very small
//      5   =   [in development] Background of the chat. Don't ask me why.
//
var s_playerType = 2;

// height, in pixels, of the small (0 and 2) player. Default is 300
var s_smallPlayerHeight = 300;

// other options
var s_allowFullscreen   = true;     // fullscreen button selectable
var s_autoPlay          = true;     // toggle autoplay

//var s_allowAudio      = true;     // [in development] toggle mute/audio

// ###################################################################
// ###################################################################

// Avoid to touch anything from this point on,
// unless you know what you're doing

// man, this is hard, what could it be?
var s_DEBUG = false;

// for development purposes, prints a video without checking che MOTD
var s_useSimulatedURL   = false;
var s_countSimulatedURL = 1;

// sizing constants
var PLAYER_SIZE_SHRINK  = 0;
var PLAYER_SIZE_ADAPT   = 1;

// positioning constants
var PLAYER_POS_ABOVE_SMALL  = 0;
var PLAYER_POS_ABOVE_BIG    = 1;
var PLAYER_POS_BELOW_SMALL  = 2;
var PLAYER_POS_BELOW_BIG    = 3;
var PLAYER_POS_SIDE_MINI    = 4;
var PLAYER_POS_BG_CHAT      = 5; // toDo

// pattern for recognizing shortened video(s)
// (again, I don't need every possible pattern, just a small set)
var s_match = (s_DEBUG)
    ?   "^(?:.*\?v=)(.[^\/:]+)$"
    :   "^(?:https?:\/\/)?(?:youtu.be\/)(.[^\/:]+)$";

// other stuff
// main chat container
var s_main = document.getElementById('taigachat_full');
var s_player = null;

// #################################################################
// and here we go
// =================================================================
// Might not work anymore after some changes to the forum's template,
// (I refer to few ids), but is more efficient than checking for all
// of the existing tags, looking for those I need. no jQuery.
// #################################################################

// Someone (*coff* Firefox) requires to have a fully loaded content
// at its disposal in order to retrieve the links
var callback = function() {

   // Script disabled
    if (!s_enableScript)
        return false;

   // Chat Yes, Forum No
    var tagList = document.getElementById('taigachat_motd');
    if (tagList === null)
        return false;

    // !popup only
    if (s_hasClass(s_main, "taigachat_popup"))
        return false;

    // development purposes
    if (s_useSimulatedURL){
        for (var c = 0; c < s_countSimulatedURL; c++)
            s_appendEmbed("rV22wrQl16I");
        return true;
    }

    // checks links for youtube videos
    // note: Firefox has some problems with
    tagList = tagList.getElementsByTagName("a");
    var regex = new RegExp(s_match);
    var url, match;

    // retrieves youtube URLs from MOTD
    // (I use other hostnames for regular videos, like goo.gl)
    for (var i = 0, tagList_count=tagList.length; i < tagList_count; i++)
        if ((tagList[i] !== "undefined")
            && (tagList[i].hasAttribute("href"))){
            url = tagList[i].getAttribute("href");

            match = url.match(regex);
            // testing purposes
            if (s_DEBUG){
                console.log(url);
                console.log(match);
            }

            if (match && match[1] !== "undefined")
                s_appendEmbed(match[1]);
            else if(s_DEBUG)
                console.log("^nope");

        }

    return true;
};

// calls the main function
if (
    document.readyState === "complete" ||
    (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  callback();
} else {
  document.addEventListener("DOMContentLoaded", callback);
}

// return true if 'el' has the 'className' CSS class
// jQuery .hasClass() can be used instead (TBF uses 1.11)
function s_hasClass(el, className) {

    className = " " + className + " ";
    var replace = (" " + el.className + " ").replace(/[\n\t]/g, " ").indexOf(className);
    return (replace > -1);
}

// append a node after another one
function s_insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

// generates the youtube video player to append
function s_appendEmbed(videoId){

    // container
    var elem = document.createElement('div');
    elem.id = "ytCont-"+videoId;

    //elem.id="s_embed_player_"+loop;
    var elemAttr = "position: relative; width: 100%; margin-bottom:10px;";
    elemAttr += (s_getPlayerSize() === PLAYER_SIZE_SHRINK
                && s_smallPlayerHeight > 0)
                ? " height: "+s_smallPlayerHeight+"px;"
                : " height: 0; padding-bottom: 56.25%;";

    elem.setAttribute("style", elemAttr);

    // element
    var elem2 = document.createElement('iframe');
    elem2.id = "ytPlayer-"+videoId;

    // CSS Style
    elemAttr = "position: absolute; top: 0; left: 0;";
    elemAttr += " width: 100%; height: 100%;";
    if (s_getPlayerSize() === PLAYER_SIZE_SHRINK
        && s_smallPlayerHeight > 0)
        elemAttr += " max-height: "+s_smallPlayerHeight+"px;";

    elem2.setAttribute("style", elemAttr);

    // SRC
    elemAttr = "http://www.youtube.com/embed/"+videoId;
    if (s_autoPlay)
    elemAttr += "?autoplay=1";

    elem2.setAttribute("src", elemAttr);

    // General
    elem2.setAttribute("type", "text/html");
    elem2.setAttribute("allowTransparency", "true");
    elem2.setAttribute("frameborder", "0");

    // fullscreen
    if (s_allowFullscreen){
        elem2.setAttribute("allowfullscreen", "1");
        // legacy
        elem2.setAttribute("webkitallowfullscreen", "1");
        elem2.setAttribute("mozallowfullscreen", "1");
    }

    elem.appendChild(elem2);

    // and here we go
    s_appendPlayer(elem);

    // toDo
    //if (!s_allowAudio){

        //var script = document.createElement('script');
        //script.src = "https://www.youtube.com/iframe_api";

        //var s_mainCont = document.getElementById("content");
        //s_mainCont.insertBefore(script, s_mainCont.firstChild);

        //elem2.setAttribute("muted", "muted");
    //}

    return true;
}

// actually appends elem to the webpage
function s_appendPlayer(elem){

    // container 2, the revenge
    switch(s_playerType){

        case PLAYER_POS_BELOW_SMALL:
        case PLAYER_POS_BELOW_BIG:

            if (s_player === null)
                s_player = s_main;

            s_player.appendChild(elem);
            break;

        //case PLAYER_POS_BG_CHAT:

        //    if (s_player === null)
        //        s_player = document.getElementById("taigachat_box");

        //    s_player.appendChild(elem);

        //    break;

        case PLAYER_POS_SIDE_MINI:

            if (s_player === null){

                var newElem = document.createElement('div');
                newElem.setAttribute("class", "section");

                var newElem2 = document.createElement('div');
                newElem2.id = "widget-99";
                newElem2.setAttribute("class", "secondaryContent");

                var newElem3 = document.createElement('h3');
                newElem3.innerHTML = "Upcoming Streams";

                // #section-99.secondaryContent h3
                newElem2.appendChild(newElem3);

                // .section #section-99.secondaryContent
                newElem.appendChild(newElem2);

                // #{{mainCont}} + .section #section-99.secondaryContent
                var mainCont = document.getElementById("widget-5");
                if (mainCont === null)
                    mainCont = document.getElementById("taigachat_online_users_holder");

                s_insertAfter(newElem, mainCont);

                s_player = newElem2;
            }

            s_player.appendChild(elem);
            break;

        default:
        //case PLAYER_POS_ABOVE_SMALL:
        //case PLAYER_POS_ABOVE_BIG:

            if (s_player === null)
            s_player = (s_hasClass(s_main.children[0], "primaryContent"))
                    ? s_main.children[0]
                    : s_main.children[0].children[0];

            s_player.insertBefore(elem, s_player.firstChild);
            break;
    }

    return s_main;
}

// returns the size of the video player
function s_getPlayerSize(){

    switch(s_playerType){

        case PLAYER_POS_ABOVE_SMALL:
        case PLAYER_POS_BELOW_SMALL:
            return PLAYER_SIZE_SHRINK;
            break;
    }

    return PLAYER_SIZE_ADAPT;
}