Mixcloud integration plugin broken

[ColinDuquesnoy]

Mixcloud integration plugin is broken: [js] Uncaught ReferenceError: $ is not defined

[ColinDuquesnoy]

It is not broken anymore, without changes. Not sure what happened.

[ColinDuquesnoy]

For reference (if it ever breaks again), here is a (maybe) more robust plugin implementation (but that version does not support seeking anymore):

//-----------------------------------------------------------------------------
//
// This file is part of MellowPlayer.
//
// MellowPlayer is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// MellowPlayer is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with MellowPlayer.  If not, see <http://www.gnu.org/licenses/>.
//
//-----------------------------------------------------------------------------
function getHashCode(s) {
    return s.split("").reduce(function(a, b) {
        a = ((a << 5) - a) + b.charCodeAt(0);
        return a & a
    }, 0);
}

function getButtons() {
    return {
        'play': document.querySelector('div.player-control > span.playing'),
        'pause': document.querySelector('div.player-control > span.pause'),
        'loading': document.querySelector('div.player-control > span.loading')
    };
}

function isElementVisible(element) {
    try {
        return element.offsetWidth > 0 && element.offsetHeight > 0;
    }
    catch (e) {
        return false;
    }
}

function getCloudcastQueue() {
    var queue = [].slice.call(document.querySelector("div.up-next-area").children);
    // first item is not a cloudcast
    queue.shift();

    return queue;
}

function getCurrentCloudcastIndex() {
    var cloudcastQueue = getCloudcastQueue();

    for (var index = 0; index < cloudcastQueue.length; index++) {
        if (cloudcastQueue[index].className.endsWith("now-playing"))
            return index;
    }

    return -1;
}

function getNextCloudcast() {
    var cloudcastQueue = getCloudcastQueue();
    var currentIndex = getCurrentCloudcastIndex();
    var nextIndex =  currentIndex + 1;

    if (nextIndex < cloudcastQueue.length)
        return cloudcastQueue[nextIndex];
    return null;
}

function getPrecedingCloudcast() {
    var cloudcastQueue = getCloudcastQueue();
    var precedingIndex = getCurrentCloudcastIndex() - 1;

    if (precedingIndex >= 0)
        return cloudcastQueue[precedingIndex];
    return null;
}

function toMilliseconds(string) {
    try {
        var dtimes = string.split(":");

        if (dtimes.length === 3) {
            var dhours = dtimes[0];
            var dminutes = dtimes[1];
            var dseconds = dtimes[2];
            var duration = parseInt(dseconds, 10) + (parseInt(dminutes, 10) * 60) + (parseInt(dhours, 10) * 60 * 60);
        }
        else {
            var dminutes = dtimes[0];
            var dseconds = dtimes[1];
            var duration = parseInt(dseconds, 10) + (parseInt(dminutes, 10) * 60);
        }

    } catch (e) {
        var duration = 0;
    }

    return duration
}

function getPlaybackStatus() {
    var buffering = isElementVisible(getButtons().loading);
    var paused = isElementVisible(getButtons().play);
    var playing = isElementVisible(getButtons().pause);
    var playbackStatus = mellowplayer.PlaybackStatus.STOPPED;
    if (buffering) {
        playbackStatus = mellowplayer.PlaybackStatus.BUFFERING;
    }
    else if (playing) {
        playbackStatus = mellowplayer.PlaybackStatus.PLAYING;
    }
    else if (paused) {
        playbackStatus = mellowplayer.PlaybackStatus.PAUSED;
    }
    return playbackStatus;
}

function getCurrentCloudcastTitle() {
    try {
        return document.querySelector("a.player-cloudcast-title").innerText
    }
    catch(e) {
        return ""
    }
}

function getArtistName() {
    try {
        return document.querySelector("a.player-cloudcast-author-link").innerText;
    }
    catch (e) {
        return "";
    }
}

function getPosition() {
    try {
        return toMilliseconds(document.querySelector("div.player-time").innerText);
    }
    catch(e) {
        return 0;
    }
}

function getDuration() {
    var remaining = 0;
    try {
        var remainString = document.querySelector("div.end-time").innerText.replace("-", "");
        remaining = toMilliseconds(remainString);
    }
    catch(e) {
    }

    return getPosition() + remaining;
}

function getAlbumArt() {
    try {
        return document.querySelector("div.player-cloudcast-image").children[0].src;
    }
    catch (e) {
        return "";
    }
}

function isFavorite() {
    var favoriteToolTip = document.querySelector("span.player-icons.favorite").children[0];
    var tooltipValue = favoriteToolTip.attributes["data-tooltip"].value;
    return tooltipValue !== "Favorite";
}

function update() {
    return {
        "playbackStatus": getPlaybackStatus(),
        "canSeek": true,
        "canGoNext": getNextCloudcast() !== null,
        "canGoPrevious": getPrecedingCloudcast() !== null,
        "canAddToFavorites": true,
        "volume": 1,
        "duration": getDuration(),
        "position": getPosition(),
        "songId": getHashCode(getCurrentCloudcastTitle()),
        "songTitle": getCurrentCloudcastTitle(),
        "artistName": getArtistName(),
        "albumTitle": '',
        "artUrl": getAlbumArt(),
        "isFavorite": isFavorite()
    }
}

function play() {
    getButtons().play.click();
}

function pause() {
    getButtons().pause.click();
}

function goNext() {
    getNextCloudcast().children[0].click();
}

function goPrevious() {
    getPrecedingCloudcast().children[0].click();
}

function setVolume(volume) {

}

function addToFavorites() {
    document.querySelector("span.player-icons.favorite").click();
}

function removeFromFavorites() {
    document.querySelector("span.player-icons.favorite").click();
}

function click(x, y) {
    // var mouseDownEvent = new MouseEvent('mousedown', {
    //     'view': window,
    //     'bubbles': true,
    //     'cancelable': true,
    //     'screenX': x,
    //     'screenY': y
    // });
    //
    // var mouseUpEvent = new MouseEvent('mouseup', {
    //     'view': window,
    //     'bubbles': true,
    //     'cancelable': true,
    //     'screenX': x,
    //     'screenY': y
    // });
    //
    // var el = document.elementFromPoint(x, y);
    // console.warn(el.className);
    //
    // el.dispatchEvent(mouseDownEvent);
    // el.dispatchEvent(mouseUpEvent);
}

function seekToPosition(position) {
    // var seekArea = document.querySelector("div.player-scrubber-buffered");
    // var seekAreaRect = seekArea.getBoundingClientRect();
    //
    // console.warn(seekAreaRect.top + seekAreaRect.height / 2);
    // console.warn(seekAreaRect.left + seekAreaRect.width / 2);
    //
    // click(seekAreaRect.left + seekAreaRect.width / 2, seekAreaRect.top + seekAreaRect.height / 2)
}

[ColinDuquesnoy]

This is happening again. It looks like they are trying to move their frontend from AngularJS to ReactJs and randomly trying out their new frontend with some users.