nikosk93 / Ace Links for r/SoccerStreams

// ==UserScript==
// @name          Ace Links for r/SoccerStreams
// @namespace     http://www.nikosk93.io
// @description   A basic script that highlights the acestream links on r/SoccerStreams
// @include       /^.*\:\/\/.*\.reddit\.com\/r\/soccerstreams\/comments\/.*$/
// ==/UserScript==

const $comments = document.querySelectorAll('div.commentarea div[data-type="comment"]');
const aceRegex = /(?:acestream\:\/\/)?([a-z0-9]{40})/gi;

const getAceID = u => {
    let prefix = 'acestream://';

    if (u.substr(0, prefix.length) == prefix)
        return u.substr(prefix.length);
    return u;
}

const getAceURL = id => 'acestream://' + id;

const aceStyles = {
    'color': '#fff',
    'display': 'inline-block',
    'backgroundColor': '#386D7A',
    'borderRadius': '4px',
    'padding': '4px 6px',
    'border': '1px solid #fff'
}

const labelStyles = {
    'color': '#444',
    'display': 'inline-block',
    'backgroundColor': '#fff',
    'borderRadius': '2px',
    'marginRight': '4px',
    'padding': '0 3px',
    'fontSize': '11px',
    'fontWeight': 'bold'
}

const setStyles = ($el, styles) => {
    for (let key in styles)
        $el.style[key] = styles[key];
}

const makeAceLink = (u, id) => {
    let $el = document.createElement('a');
    $el.href = u;
    $el.className = 'ace-url';
    $el.setAttribute('target', '_blank');
    setStyles($el, aceStyles);

    $label = document.createElement('span');
    $id = document.createElement('span');

    $label.innerHTML = 'ace';
    setStyles($label, labelStyles);
    $id.innerHTML = id;

    $el.appendChild($label);
    $el.appendChild($id);

    return $el;
}

for (let $comment of $comments) {
    let $commentBody = $comment.querySelector('div.usertext-body');
    let content = $commentBody.innerHTML;
    let matches = null;

    if (matches = content.match(aceRegex)) {
        for (let aceMatch of matches) {
            let aceID = getAceID(aceMatch);
            let aceURL = getAceURL(aceID);
            let $link = makeAceLink(aceURL, aceID);

            console.log('[url] ' + aceURL + ' [id] ' + aceID);
            $commentBody.innerHTML = $commentBody.innerHTML.replace(aceMatch, $link.outerHTML);
        }
    }
}