TheOpenUserNut / Pandora music replay and download

// ==UserScript==
// @name         Pandora music replay and download
// @version      0.8
// @require https://code.jquery.com/jquery-3.2.1.min.js
// @author       Thesunfei
// @grant        none
// @license      MIT; https://opensource.org/licenses/MIT
// @include      http://*.pandora.com/*
// @include      https://*.pandora.com/*
// ==/UserScript==

// ==Revision History==
// 0.8 Added album name between Title and Artist for reference
// ==/Revision History==

/*jshint multistr: true */
$(function(){
    var styleele=$("<style></style>");
    styleele.html(`
#audioitems {
position:fixed;
right:100px;
top:300px;
background-color:rgba(0,0,0,.1);
z-index:1000;
width:400px;
box-sizing:border-box;
padding:20px;
cursor:move;
opacity:.5;
transition:opacity .3s;
border-radius:3px;
max-height:400px;
overflow-y:auto;
color:white;
box-shadow:1px 1px 10px rgba(255,255,255,.5);
}
#audioitems::-webkit-scrollbar {
width:5px;
}
#audioitems::-webkit-scrollbar-track {
background-color:rgba(0,0,0,.3);
}
#audioitems::-webkit-scrollbar-thumb {
background-color:rgba(255,255,255,.3);
}
#audioitems:hover {
opacity:1;
}
#audioitems audio {
width:100%;
}
.audioartist {
flex:1;
}
.audiowrap:not(:last-child) {
margin-bottom:15px;
}
.audiowrap {
display:flex;
}
.audiocloned {
flex:1;
display:none;
}
.audioinfo {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding:5px 10px;
}
.imgwrap {
width:90px;
height:90px;
position:relative;
}
.audioimg {
width:100%;
height:100%;
object-fit:contain;
}
.audiocontrol {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
display:none;
background-position:center;
background-size:50px 50px;
background-repeat:no-repeat;
background-color:rgba(0,0,0,.2);
cursor:pointer;
opacity:.6;
transition:all .2s;
}
.audiocontrol:hover {
opacity:1;
}
.audioplay {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAMhUlEQVR4Xu1di7HVNhCVKkioIKGCQAVABUAFgQoIFQAVABUEKgivgoQKAhUEKghUsJnjrN7Ifva1drX6+KMZD8x9sixpj/YvybsdFiL60Tn3i3PuZ37uOOfwWyjh93j0X5xzeEL55pz7xL/h98/ee/y2q+K3Phom9j3n3H3nHAg9JbblEAMoAIy/nHMftw6KTQKAiALBQXQ8LQuAMDze+48tO6L59mYAQERY2c+cc48m7Fwz7lLvgEN8cM699d6DS3RfugYAEUFW/+qce8KyvPsJjToIveGNc+7Kex/rFl2NoUsAEBHYeljtXU2YsjOBK0BUdFW6AgAT/kUHcr0UkQCAV977boDQBQAOQPgpoLoBQlMAsIx/zYpdqVXXc7sQDc9b6gjNAEBEYPW/dazR1wIOLIc33vtXtT4Yf6c6AJjd/75Brb40fWA2ghtU1Q+qAoCIwO6x6s+yPAMva3KDKgBgWf8Hu2lrEf87+/KxssBm45X1ZSp3uY/wO4QCUxTxg+Be/qFWx7nfj2voBsUBQETw3IHlx8GYEnP5Obhk2S1rGrjhmENwPeNfBJtKFvT/qfceimKxUhQAFVj+FbteP9QOyjAgAG48D4tR6H8F8Xmp9osBgIiw6uHCtS5Y6e9A+BosMqXzLD4ABIy3BGd4571/mtIXaR1zAPDK+LOAvMdqx2qoqiVLJ5StHCi61lwB44ZeYCraTAFQiPjvnXPQjLsNqMyBhLnCSw5mSXG0VB8K7QNLEJgBgMO1YPvQmi0KYutPtkb46cAZCBBZyGGwKKYgMAGA8cr/Cl9Bae3XghKSNtgaQnj4J8l7C3XNQJANAGPiwx0KOW8q5wwm3KQJnivoB3CD5xYTEFgA4G8Dto9V/2grWTS5lGNxCfs+lxsgDe1BTn+yAGBk6kG7h6zf5apfIg5zA+gGudZClomoBgARQZ4hayenIPiBdg5biAgiATGSnIIcRFWMRQUAVmjg29cW+OnB8ru26bWDk77HvgOIhJx4A3wEYrexGABs1kDua337IP79o8j7VDCwXoAFoQUBROhdqdmsAUCO0ncoZS+V+KGegXL4yXt/V/JdEQAy5T6If+doyp6EGKjLyiFMPK2FgKRTeCCTSjIAWE7Bx68pJ9sXzJqBOIC7OEm/kgBAy/pP4guIPxEHWp0gWRQkAYCIwFK03qtkNCrmadevZHLdJFGwCoBMrf/wdn4uQjP8BElWQQoAYO8j2UFasCdO8570O7uvT0Sw7zUeQyTNPL40QRcBkMGCTo3fEJaZlsFFEbwGAGj9mv33cEhsYnu0IZ2KNsWWARRxabkYMFoEQMbqT1I+pKM46w8+Aq0yvsgFLgFAs/qrs34iQj+RPr2plDENoDNEwSIXmAVAxupXBSQ0kxHZy8T/x+pAVGzXYeWMQNwsF1gCgEbrxIFJGn0hh/5giwEAaAfERzoZEkl3W4gIDiJpjuF77/2NNP0bAGC7/x/F7N1uwYYnAAjd7mb/vWIeV1+xpNEcADSKxiy6VkdiUGEBAKFlZNzAGbU7sUBEGBvOT5KUG465OQBg9cebJFM+0GT1o2MrAAhiodn++5TJ09RRcgFsir0df28EAKWt2dTjlwCAMF5YCbAWkqJkGqLUfkepC4x8NFMAaNhK02CPAACxfrALs1FprY3E9RQA/wpTvXB+rtVOINUCUgAgfGcXZiMRweMq2ZD6zXt/K0zCNQCUaGoe7csAwC7MRmW08JprxwDQaP/NlL+A4EwAbN5sVCqD1+76GADSjJ+myp8xADZtNirCxddOuwEA7GOG/JcUKFJQGpsWIw4Qj6HpsW2aySQiePiwM1tSbsE/EgCAxA3pRo+hAckXS9QtAIDNmY1KMTDEbQIApNu8mmv/hUTAHEbhN+jebFRYA8N2sgAAaXBBvRfNmgsU5ADTrnZtNir2bAx6QACA1P6vHvZdAk5FAHRtNirCxIM/wCsVwC7kPyuwcTjYmsEstdddtFFDR4+icAB9995rN4aaE6gyB5j2v6toIxFBKZdsLn0AAEhNiCaJH52IgLludGM2KoJDTwEAqQewGwWwoQiYA0LzaKNCEXwFAEgtgK6yfhuLgK7MRsVivtIAoGn4dzrjHQIgdLG62ajQ5z6eADBXS0cNVk1SPQFQlpg5rVcxG7UAkOYANg8Bx5ToWATMAaao2aiICXyBCBA5UuA7yFkK1u9K+2/9fUV7Rc1G6XycAFBQ0OiVImbjCQAj6lRoBvsocUKqaZbyCYAKlMv8BM5Mwj6F5JO8JN/TAACsSHIk2akESigyros9i9i7WCSRRqEEfj39AHpiSt7E5Re49cSU3c84xbA5V3KU3+kIklBRURfsHiu+Su6k1g8gjQWcruA0JFS//EILAOlZAGcw6DIAmt11pA0GneHgtBW9VquIWbf20YlXVLq3cwgHnwkhklm+WbeoWSfpmiK0PySESDXH0eZCSQdL1JXavcZ9KGrWSftKRNLk3iElDPl90l1BR08KrWLWSQCgoeOQFIqPKJIJj5oWXtWsEwJAurtrSO49N4akz3J1sy69a8Milu7uGm0Mkb6cfB69ZBCauhV0gGZmnWQ+iEi6u3u0NUzKPtC3LvSAggBobtalAkARA0DTo82hGkVwr9vDuzHrBACQmvIu6H/xARFSl/AeD4joyqwTAEDqzR0fEMGWgNQjiNeah4aNREB3Zp2A+DjTUXqy6+wRMVKHEPq49UOiujXrBADQXD1785AopT+guTWQwQG6NusEAJBq/6PNvUc8KHITZl0KABRufDQ72tt5pKNiN2PWpRCfObbmUo/lo2K5UWmOYFNlMEEEbM6sSwGA0vb/6r0fHQS+9+PiN2nWJQJAGvufVdr3emHEZs26ROJrTL9ZTm15ZczF68lSBqapMxEBmzfrUuaAL8qSXs+TdmUM6wEan8C1fzllEFZ1IgDswqxbmxfFaWChyfRLoxgEUtcwXoMCCS2zyMaHucnhNChssTrKtXGw+6U3uiye63ReHLm25Dr6uyLr9+Lqxx/Xro7VcAG0e14dawwc5XU+6MXFU93WAKDVBaqLAuP57qo5zvfTsH6MQ395NOsC0lBjmLzVq8u7muWOO0NEOMkdSTvSshqyXz3tgz1OuJdGcgJl6GjzaKF0xnqrr7wSBsOASXxnTTleBQBzAU2uwKoC0ttk99afDJMPQ0nawpcEAAaB9HaqMJ8wCSGH8P5ZEmeAlT4EezTnMiff5yABgFYhxJBPECQSnhcbruLTEn9V8Yu7kgwA7pg0fTz+1mkZJIAgU+NPZv2hKyIAZIoCvA4QIB35FAczYGC2D41f6ukLrYlPctcAAJ3TWgWnOFjgApkyP1nrn35eDADmApqNJPG3oROAExQ9MyeB43ZRhbV9XPumUfjCGFT7NVUAMNAHQqdxfs7bLqjQqBNE9AzHxmV+Xn2HgxoADAJNVsp0rPA0YpdRtQhi5mSbvM7KHla9xsMX92E2zp/aySwAMAi0AaOphXAY5dBA2VMrfSY6QNwIIxkgkFxhvgTQ6pcspK4Ui3o8V2D5FqeEfnbO3c/lnNkcgLkAlBcrEMBURAwBomE3hRW91xkmXjwXJsRHgyYAYBDAPATRLDgBmtzEla1rCOVgGmS9NIdvqWkz4psCoAAnCBMARROBjU2lfDHhX+BE8DWQCP5uSnxzAEQgACe4JxhYStUq166kdORSHd6uBcJbrfhrhQ8WQ67MN1cClyaDiCxMxLnm4YVE20h26IIr8Gp/yKsdgRzrkmXqXeqMmQ4w9xHFwUXSiQOnwQMwVPUjsEYPosOOz7XlL41b7eRJmcyiAGCRgMnBitVkFKWMIdQBZ4CYwIOgiCkgmOAQa2DteEqs9Hi8yOhBuntRa6g4AApZCCnAAAAACjz4fxx3wCbJkfhgNh5fnAEiw7wFofHk+OlT+hvXqbaFvQoAwsgqiATpRPdYPymVy6rjVQHA3AArC8EPK3+B1Vy0bgcmHoJjVSOk1QEQcQO4Q3G+TWndoDVh177f9PyCZgCIdANwA2jTRyxXvOqbmbNNARBxA4gFcARr51GvoOrm/IIuAHAgIHRD+DDnXQFgAgToB3sRDTiq5l1tBS+F/XUJgAgIiDDCkQQwSC63TBl76To4lQz6DfZINpPxa4PsGgBx5zmLBkAAIHq1HKDRw3OHq2E3kfq+GQBMwBDcsfi3teIIuT64oHtk8bvhAEsDYR997J+H27YUh8AKD+7lQHTTmMMawaz/vkkOkDIJHJeHDoFn6svHb1OdAjI7ltUhloDfvmxxdafM038tRTh6zxKBrQAAAABJRU5ErkJggg==);
}
.audiopause {
background-image:url(data:image/png;base64,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);
}
.audiocontrol.audioload {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEi0lEQVR4Xu2ajW0UMRCFZyoAKiCpAFIBpAKgAkIFJBUQKiBUAKmApAKSCggVECogVDDoi2zJsbxre+3dW3E30imC27M9z2/+V2XLRbdcf9kBsGPAliOwM4EtJ8DOCS5mAmb2QkSei8ie+xuT71ZE+NyIyLWq3i3BztkAMLPHIvJKRF6LyEsR4d81AhgXInKuqoAyi3QHwCn+XkSOJyg9pOSViJyp6mVvFLoBMJPisb4A8VFV+dtFugBgZlD8i7PvLgfLLAIbTnps1AyAmUH3s8xhoC63hi3fxTZtZt45AiSfZwXKsda7Vv/QBICZcetHA4e9dnaLI6sSBwjr8nk08mMixWELCJMBGFEexU972KnzK6ciAsuGpAmESQAMKP/XKZ4zhyo28LBjxNcR05gMQjUAZkZ4+xRp8Zt430LFHCqODYBAbpESQNivTaCqAHA38SPa/SeOq3bjnMJD35sZILwd+P5GVQ9q1q4FAOXx2F4WVd5vmgGBPAG/USTFAJgZi34IVsXmufnZ0tQRFpBWE1ZT4RJTOFBVUumsFAHg7O9XlNq+UdXqEJc9UeEDZkZRBfipMEn9MBSeH+xQCkB8+5eqSpGzUUmwMjwPDjHLglIAuH0Q91K0+BLomBlKPk3sVcSCLABmxk1/CzYoWngJ5dljICzzFSn3k9w5SgCIw85qbt8BgEP8M6AotQLnH5QSAEL606mhWFmVmBkRgY5TLFm2jgLgvH+I7omqdk91W9EcMYNbVd2fzABX539fo/MLlRrIUIscdo4BD/J+Vc2aTOttTv29mdnAbymXBztIOQDC+L9K+/dKjwAwmhr/TwCQFaZS424AfFZVTGKVMhIJugFQVWUtjZKZUZekegXdAMjG1KWVjiIBxQ89ylhGE7ecDwgXXbUTROuoOKJcP27KBKM8oLrbsglGuOSN9txoCuzPlo3rYXhZcx4QhEOaNMWToxIAwjx7NKnYxI3He8La3gCE2eCqQ6HzA0el9Of5EgbQCKEiRLLFxSZZ4GoCqelTZgFwqIYxdqO9wDGAiQI1HeEiBjgA6AH4qvBKVQ83edOpvV2TFPsv8v7FUSDwrqt2hmbGyLw6VS8yAccCBiJ+KkQjkt77Iu/x5Njm8pW92tsvNoGABXSD/KR2FRHBzwyntumLGRCAEJad2aZj7vZav3dVIKEvOwNI7TUFgHgigyksPh5zZknxw5Bm8oSqGoDAH+AUGUvhBwiNxelnh1unFc6IngKtyuvHe08CIAEC/7WIOTibJyTjg5qUr3aCibybyBC+uQEVAWKW6OCmVDhiEp5m5ZsBcEyAjhzKv7SA8tTh561UDxwvfgd7Z9SFw+vmcyabQIINZIvcih9U4pUBhk7SJEa4+E7YZT45S0uuGwDBbdFFop0eTmxxkJgHTRXeIkuKS2f9S9Uozc3DJCg/KczlWNgdgAAIFPCf1EsM9y9NuudRNBy/AxJsupjKnpzi1bVA6YKp51yZ6t8YTw1X/avy92+Tzq10eMbZGNAC2JK/3QGwJNpr3GvHgDXeypJn2jFgSbTXuNfWM+AfsODZUEAxAQMAAAAASUVORK5CYII=);
animation:rotate .5s linear infinite;
-webkit-animation:rotate .5s linear infinite;
background-color:transparent;
}
@keyframes rotate {
from {transform:rotate(0)}
to {transform:rotate(360deg)}
}
.audiodownload {
background-image:url(data:image/png;base64,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);
background-position:center;
background-repeat:no-repeat;
background-size:20px;
display:block;
width:30px;
}
.audiofns {
display:flex;
}
.audiotrack {
flex:1;
position:relative;
cursor:default;
}
.onplaying .audioplay{
display:block;
}
.onpaused .audiopause {
display:block;
}
.onloading .audioload {
display:block;
}
.audiotrack {
flex:1;
height:30px;
background-color:rgba(0,0,0,.2);
position:relative;
}
.audioposition {
height:100%;
position:absolute;
width:2px;
background-color:white;
box-shadow:0 0 3px white;
}
.audiops {
height:100%;
position:absolute;
width:1px;
background-color:white;
opacity:.5;
}
@keyframes rotate {
from {transform:rotate(0)}
to {transform:rotate(360deg)}
}
`);
    var audioitems=$("<div id='audioitems'></div>");
    var mpos={
        start:{x:0,y:0},
        offset:{x:0,y:0},
        last:{x:0,y:0},
        movable:false
    };
    audioitems.mousedown(function(){
        mpos.start.x=event.clientX;
        mpos.start.y=event.clientY;
        mpos.last.x=event.clientX;
        mpos.last.y=event.clientY;
        mpos.movable=true;
    });
    $("body").mousemove(function(){
        if (!mpos.movable) return;
        mpos.offset.x=event.clientX-mpos.last.x;
        mpos.offset.y=event.clientY-mpos.last.y;
        audioitems.css({left:"+="+mpos.offset.x,top:"+="+mpos.offset.y});
        mpos.last.x=event.clientX;
        mpos.last.y=event.clientY;
    });
    $("body").mouseup(function(){
        mpos.movable=false;
    });
    $("body").append(audioitems).append(styleele);
    window.audioURLs=[];
    Array.prototype.contains=function(v){
        var ret;
        $.each(this,function(index,item){
            if (item===v) {
                ret= [true,index];
            }
        });
        if (ret) {
            return ret;
        }else {
            return false;
        }
    };
    function getAudioURL (){
        var audios=document.querySelectorAll("body>audio");
        $.each(audios,function(index,item){
            if (!audioURLs.contains(item.src)) {
                audioURLs.push(item.src);
                //Pull the album information
                album = $("[data-qa='playing_album_name']");
                //Make sure only the current album is passed on.
                //  Only take the first in the array to avoid extras that can come in because of timing issues
                //    The additional one is from the previous song
                if(album.length > 1) {
                    album = album[0];
                }
                album = album.text();
                //Do not add album if it is advertisement
                if ($("[data-qa='mini_track_title']").text() == "Advertisement")
                {
                    album = "";
                }
                renderAudioHTML(item.src,$("[data-qa='mini_track_title']").text(),album,$("[data-qa='mini_track_artist_name']").text(),$("[data-qa='mini_track_image']")[0].src);
            }
        });
    }
    function renderAudioHTML (src,title,album,artist,image){
        var ele=$(`<div class='audiowrap onloading'>
<div class='imgwrap'>
<img class='audioimg' src='${image}'>
<div class="audiocontrol audioplay"></div>
<div class="audiocontrol audiopause"></div>
<div class="audiocontrol audioload"></div>
</div>
<div class='audioinfo'>
<div class='audiotitle'>${title}</div>
<div class='audioalbum'>${album}</div>
<div class='audioartist'>${artist}</div>
<div class="audiofns">
<div class="audiotrack">
<div class="audioposition"></div>
</div>
<a class="audiodownload" download></a>
</div>
</div>
<audio preload loop class='audiocloned'>
</audio>
</div>`);
        var totaltime=0,currenttime=0,state=0,audio=null,audiourl=null;
        $("audio",ele)[0].onloadedmetadata=function(e){
            totaltime=e.srcElement.duration;
            updateView();
        };
        $("audio",ele)[0].ontimeupdate=function(e){
            currenttime=e.target.currentTime;
            updateView();
        };
        $("audio",ele)[0].onplay=function(){
            Pandora.pauseTrack();
            $("audio",$(this).parents(".audiowrap").siblings()).each(function(index,item){item.pause();});
            state=1;
            updateView();
        };
        $("audio",ele)[0].onpause=function(e){
            state=0;
            updateView();
        };
        $(".audioplay",ele).click(function(){
            $("audio",ele)[0].play();
        });
        $(".audiopause",ele).click(function(){
            $("audio",ele)[0].pause();
        });
        $(".audiotrack",ele).click(function(e){
            $("audio",ele)[0].currentTime=e.offsetX/e.target.clientWidth*totaltime;
        });
        function getAudio () {
            var xhr=new XMLHttpRequest();
            xhr.open("get",src);
            xhr.responseType="blob";
            xhr.onreadystatechange=function(){
                if (this.status==200&&this.readyState==4) {
                    audio=this.response;
                    audiourl=URL.createObjectURL(audio);
                    $("audio",ele).prop("src",audiourl);
                    $("a",ele).prop("href",audiourl);
                }
            };
            xhr.send();
        }
        function updateView(){
            $(".audioposition",ele).css("left",currenttime/totaltime*100+"%");
            $(ele).removeClass("onplaying onpaused onloading");
            if (state===1) {
                $(ele).addClass("onpaused");
            }else if (state===0) {
                $(ele).addClass("onplaying");
            }else if (state===-1) {
                $(ele).addClass("onloading");
            }
        }
        $("#audioitems").append(ele);
        getAudio();
    }
    setInterval(getAudioURL,1000);
});