~hristoast/mousikofidi

24a01da006c1c47b59396f1a5ef75463bf809fa1 — Hristos N. Triantafillou 8 months ago 3e4e66a 0.14
Fix player button order, time link text, play regression (#57, #58)
M static/css/fidi.css => static/css/fidi.css +13 -0
@@ 237,6 237,10 @@ td.title-mobile {
    font-weight: initial;
}

.mobile-show {
    display: none;
}

.red {
    color: red;
}


@@ 244,6 248,11 @@ td.title-mobile {
/* THANKS: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488 */

@media (min-width: 481px) and (max-width: 767px),(min-width: 320px) and (max-width: 480px) {
    button#mobile-next, button#mobile-prev, button#mobile-repeat, button#mobile-shuffle,
    button#mobile-vid-next, button#mobile-vid-prev, button#mobile-vid-repeat, button#mobile-vid-shuffle {
        width: 45%;
    }

    td.title-regular {
        display: none;
    }


@@ 256,6 265,10 @@ td.title-mobile {
        font-size: 1.5em;
    }

    .mobile-show {
        display: block;
    }

    .mobile-hide {
        display: none;
    }

M static/css/fidi.min.css => static/css/fidi.min.css +1 -1
@@ 1,1 1,1 @@
audio{margin-top:25px;width:100%}div#player{background-color:#333;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:4px 4px 2px 2px rgba(0,0,0,0.2);padding-bottom:10px;position:-webkit-sticky;position:sticky;bottom:0;z-index:4}div#player audio{width:95%}p#now-playing{color:#fff;margin:0 auto;margin-bottom:-10px;padding-top:12px}div#videoplayer{margin:0 auto;width:100%}video{margin-top:25px;width:100% !important;height:auto !important}footer{font-size:.5em;margin-top:25px}div#player button{display:inline-block}form#playlistctl input{display:inline-block}form#theme-picker label select{margin:0 auto}nav{height:50px;margin-bottom:0;padding-bottom:0;position:-webkit-sticky;position:sticky;top:0;z-index:34}nav ul{margin-bottom:0;margin-top:0;list-style-type:none;overflow:hidden;background-color:#333;padding-left:0;display:inline-block;width:100%}nav ul li{float:left}nav ul li#logo{float:right}nav ul li#logo a#logo{padding:0}nav ul li#logo a#logo{-webkit-transition:none;transition:none;float:right;color:darkgray}nav ul li#logo a#logo:hover{background-color:#333}nav ul li a{display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none}nav ul li a:hover{-webkit-transition:background-color .5s ease;transition:background-color .5s ease;background-color:#111}nav ul li a img{margin-top:9px;margin-right:9px;height:32px;width:32px}a:hover{text-decoration:none}div#content{min-height:315px;margin-top:20px}div#top-link{z-index:16;float:right;position:-webkit-sticky;position:sticky;bottom:30px;margin-right:10px}div#top-link a{z-index:16;width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:25px solid grey}input#bulk-add{margin:0 auto;margin-bottom:25px}select#to-load{margin:0 auto;margin-bottom:10px}div.anchor{bottom:100px;position:relative}div.play-arrow{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid green;float:left;margin-left:14px;margin-top:5px}input.plus{color:#41adff;font-size:1.9em;margin:0 0 0 10px;padding:0;background:none !important;width:20px}input.plus-btn{color:#41adff;font-size:1.9em;margin:0 auto}input.X{margin:0 0 0 20px;padding:0;font-size:1.4em;background:none !important}td.title-mobile{display:none}.center{text-align:center}.bold{font-weight:bold}.green{color:green}.hidden{display:none}.initialsize{font-size:initial;font-weight:initial}.red{color:red}@media(min-width:481px) and (max-width:767px),(min-width:320px) and (max-width:480px){td.title-regular{display:none}td.title-mobile{display:block}.mobile-big{font-size:1.5em}.mobile-hide{display:none}.mobile{padding:0}}
\ No newline at end of file
audio{margin-top:25px;width:100%}div#player{background-color:#333;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:4px 4px 2px 2px rgba(0,0,0,0.2);padding-bottom:10px;position:-webkit-sticky;position:sticky;bottom:0;z-index:4}div#player audio{width:95%}p#now-playing{color:#fff;margin:0 auto;margin-bottom:-10px;padding-top:12px}div#videoplayer{margin:0 auto;width:100%}video{margin-top:25px;width:100% !important;height:auto !important}footer{font-size:.5em;margin-top:25px}div#player button{display:inline-block}form#playlistctl input{display:inline-block}form#theme-picker label select{margin:0 auto}nav{height:50px;margin-bottom:0;padding-bottom:0;position:-webkit-sticky;position:sticky;top:0;z-index:34}nav ul{margin-bottom:0;margin-top:0;list-style-type:none;overflow:hidden;background-color:#333;padding-left:0;display:inline-block;width:100%}nav ul li{float:left}nav ul li#logo{float:right}nav ul li#logo a#logo{padding:0}nav ul li#logo a#logo{-webkit-transition:none;transition:none;float:right;color:darkgray}nav ul li#logo a#logo:hover{background-color:#333}nav ul li a{display:block;color:white;text-align:center;padding:14px 16px;text-decoration:none}nav ul li a:hover{-webkit-transition:background-color .5s ease;transition:background-color .5s ease;background-color:#111}nav ul li a img{margin-top:9px;margin-right:9px;height:32px;width:32px}a:hover{text-decoration:none}div#content{min-height:315px;margin-top:20px}div#top-link{z-index:16;float:right;position:-webkit-sticky;position:sticky;bottom:30px;margin-right:10px}div#top-link a{z-index:16;width:0;height:0;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:25px solid grey}input#bulk-add{margin:0 auto;margin-bottom:25px}select#to-load{margin:0 auto;margin-bottom:10px}div.anchor{bottom:100px;position:relative}div.play-arrow{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid green;float:left;margin-left:14px;margin-top:5px}input.plus{color:#41adff;font-size:1.9em;margin:0 0 0 10px;padding:0;background:none !important;width:20px}input.plus-btn{color:#41adff;font-size:1.9em;margin:0 auto}input.X{margin:0 0 0 20px;padding:0;font-size:1.4em;background:none !important}td.title-mobile{display:none}.center{text-align:center}.bold{font-weight:bold}.green{color:green}.hidden{display:none}.initialsize{font-size:initial;font-weight:initial}.mobile-show{display:none}.red{color:red}@media(min-width:481px) and (max-width:767px),(min-width:320px) and (max-width:480px){button#mobile-next,button#mobile-prev,button#mobile-repeat,button#mobile-shuffle,button#mobile-vid-next,button#mobile-vid-prev,button#mobile-vid-repeat,button#mobile-vid-shuffle{width:45%}td.title-regular{display:none}td.title-mobile{display:block}.mobile-big{font-size:1.5em}.mobile-show{display:block}.mobile-hide{display:none}.mobile{padding:0}}
\ No newline at end of file

M static/js/player.js => static/js/player.js +18 -2
@@ 38,11 38,19 @@ var prevBtn = document.getElementById("prev");
var nextBtn = document.getElementById("next");
var repeatBtn = document.getElementById("repeat");
var shuffleBtn = document.getElementById("shuffle");
var prevBtnMobile = document.getElementById("mobile-prev");
var nextBtnMobile = document.getElementById("mobile-next");
var repeatBtnMobile = document.getElementById("mobile-repeat");
var shuffleBtnMobile = document.getElementById("mobile-shuffle");
var randomOrderHolder = document.getElementById("randorder");
var videoPrevBtn = document.getElementById("vid-prev");
var videoNextBtn = document.getElementById("vid-next");
var videoRepeatBtn = document.getElementById("vid-repeat");
var videoShuffleBtn = document.getElementById("vid-shuffle");
var videoPrevBtnMobile = document.getElementById("mobile-vid-prev");
var videoNextBtnMobile = document.getElementById("mobile-vid-next");
var videoRepeatBtnMobile = document.getElementById("mobile-vid-repeat");
var videoShuffleBtnMobile = document.getElementById("mobile-vid-shuffle");
var videoRandomOrderHolder = document.getElementById("vid-randorder");
var params = new URLSearchParams(window.location.search);
var single = document.getElementById("single");


@@ 516,7 524,7 @@ function setUp() {

    if (tracks) {
        // Add click listeners to all play buttons
        for (c = 0; c < tracks.length; c++) {
        for (c = 0; c < playArrows.length; c++) {
            var arrow = playArrows.item(c);
            arrow.addEventListener("click", playAudioClickListener);
            arrow.setAttribute("data-num", c);


@@ 539,11 547,15 @@ function setUp() {
        nextBtn.addEventListener("click", skipAudioListener);
        repeatBtn.addEventListener("click", toggleRepeatListener);
        shuffleBtn.addEventListener("click", toggleShuffleAudioListener);
        prevBtnMobile.addEventListener("click", skipAudioListener);
        nextBtnMobile.addEventListener("click", skipAudioListener);
        repeatBtnMobile.addEventListener("click", toggleRepeatListener);
        shuffleBtnMobile.addEventListener("click", toggleShuffleAudioListener);
    }

    if (videoTracks) {
        // Now, do videos if there are any: add click listeners to all play buttons
        for (c = 0; c < videoTracks.length; c++) {
        for (c = 0; c < videoArrows.length; c++) {
            var varrow = videoArrows.item(c);
            varrow.addEventListener("click", playVideoClickListener);
            varrow.setAttribute("data-num", c);


@@ 559,6 571,10 @@ function setUp() {
        videoNextBtn.addEventListener("click", skipVideoListener);
        videoRepeatBtn.addEventListener("click", toggleRepeatListener);
        videoShuffleBtn.addEventListener("click", toggleShuffleVideoListener);
        videoPrevBtnMobile.addEventListener("click", skipVideoListener);
        videoNextBtnMobile.addEventListener("click", skipVideoListener);
        videoRepeatBtnMobile.addEventListener("click", toggleRepeatListener);
        videoShuffleBtnMobile.addEventListener("click", toggleShuffleVideoListener);
    }

    if (singleLinkButton)

M static/js/player.min.js => static/js/player.min.js +1 -1
@@ 1,1 1,1 @@
var audio=document.getElementById("audio");var audioNowPlayingTextP=document.getElementById("now-playing");var nowPlayingNumDiv=document.getElementById("now-playing-num");var videoNowPlayingNumDiv=document.getElementById("video-now-playing-num");var pageTitle=document.getElementById("title");var playArrows=document.getElementsByClassName("play-arrow");var playingTitleSpan=document.getElementById("playing-title");var playlist=document.getElementById("playlist");if(playlist){var tracks=playlist.getElementsByClassName("title")}var video=document.getElementById("video");var videoArrows=document.getElementsByClassName("video-arrow");var videoPlaylist=document.getElementById("video-playlist");if(videoPlaylist){var videoTracks=videoPlaylist.getElementsByClassName("video-title")}else{if(playlist){var videoTracks=playlist.getElementsByClassName("video-title")}}var prevBtn=document.getElementById("prev");var nextBtn=document.getElementById("next");var repeatBtn=document.getElementById("repeat");var shuffleBtn=document.getElementById("shuffle");var randomOrderHolder=document.getElementById("randorder");var videoPrevBtn=document.getElementById("vid-prev");var videoNextBtn=document.getElementById("vid-next");var videoRepeatBtn=document.getElementById("vid-repeat");var videoShuffleBtn=document.getElementById("vid-shuffle");var videoRandomOrderHolder=document.getElementById("vid-randorder");var params=new URLSearchParams(window.location.search);var single=document.getElementById("single");var singleLinkButton=document.getElementById("time-link");var audioLinkButton=document.getElementById("audio-time-link");var videoLinkButton=document.getElementById("video-time-link");function playAudio(a,b){var f=a.getAttribute("data-browse");var j=f.replace("browse","serve");var e=pageTitle.getAttribute("data-sitename");var i=a.getAttribute("data-num");var g=a.getAttribute("data-title");var h="Now Playing: "+g+" | "+e;var d=shuffleBtn.getAttribute("data-stat");if(audio.src.endsWith(j)!==true){audio.src=j}if(typeof b==="undefined"){audio.play()}nowPlayingNumDiv.setAttribute("data-nowplaying-num",i);playingTitleSpan.textContent=g;pageTitle.textContent=h;if(d==="on"){setRandomOrder("audio")}}function playAudioClickListener(){playAudio(this)}function playVideo(f,a){var e=f.getAttribute("data-browse");var g=e.replace("browse","serve");var d=videoShuffleBtn.getAttribute("data-stat");var b=f.getAttribute("data-num");if(typeof a==="undefined"){video.src=g;video.play()}videoNowPlayingNumDiv.setAttribute("data-nowplaying-num",b);if(d==="on"){setRandomOrder("video")}}function playVideoClickListener(){playVideo(this)}function randInt(a){return Math.floor(Math.random()*Math.floor(a))}function setRandomOrder(f){if(f==="audio"){var b=playArrows;var g=randomOrderHolder.getAttribute("data-randorder");var h=randomOrderHolder;var e=tracks}else{if(f==="video"){var b=videoArrows;var g=videoRandomOrderHolder.getAttribute("data-randorder");var h=videoRandomOrderHolder;var e=videoTracks}}var i=randomizeTrackOrder(e.length,f);var d=randomStringFromArray(i);if(g==="none"){h.setAttribute("data-randorder",d)}else{if(g===d){while(g===d){var a=randomizeTrackOrder(e.length,f);d=randomStringFromArray(a)}}else{h.setAttribute("data-randorder",d)}}}function endedTrackListener(n,i){if(i==="audio"){var o=playArrows;var f=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var j=randomOrderHolder;var m=playAudio;var d=repeatBtn.getAttribute("data-stat");var k=shuffleBtn.getAttribute("data-stat")}else{if(i==="video"){var o=videoArrows;var f=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");var j=videoRandomOrderHolder;var m=playVideo;var d=videoRepeatBtn.getAttribute("data-stat");var k=videoShuffleBtn.getAttribute("data-stat")}}var h=o.length-1;if(d==="one"){m(o[f])}else{if(k==="on"){var l=j.getAttribute("data-randorder");var g=l.split(",");if(g!=""){var b=g.shift();m(o[b]);var a=randomStringFromArray(g);j.setAttribute("data-randorder",a)}else{if(d==="all"){var e=randInt(h);m(o[e]);setRandomOrder(i)}else{}}}else{if(k==="off"){if(f<h){f++;m(o[f])}else{if(d==="all"){m(o[0])}else{if(d==="off"){}}}}}}}function endedAudioListener(){endedTrackListener(this,"audio")}function endedVideoListener(){endedTrackListener(this,"video")}function skipTrack(j,q){var f=j.getAttribute("data-cmd");if(q==="audio"){var o=playArrows;var e=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var i=randomOrderHolder;var n=playAudio;var k=shuffleBtn.getAttribute("data-stat");var p=tracks}else{if(q==="video"){var o=videoArrows;var e=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");var i=videoRandomOrderHolder;var n=playVideo;var k=videoShuffleBtn.getAttribute("data-stat");var p=videoTracks}}var h=p.length-1;if(k==="on"){var l=i.getAttribute("data-randorder");var g=l.split(",");if(g.length>0){var b=g.shift();var m=o[b];if(typeof(m)==="undefined"){var d=randInt(p.length);n(o[d]);setRandomOrder(q)}else{n(m);var a=randomStringFromArray(g);i.setAttribute("data-randorder",a)}}else{if(repeat==="all"){var d=randInt(p.length);n(o[d]);setRandomOrder(q)}}}else{if(k==="off"){if(f==="fwd"){if(e<h){e++;n(o[e])}else{n(o[0])}}else{if(f==="prev"){if(e>0){e--;n(o[e])}else{n(o[h])}}}}}}function skipAudioListener(){skipTrack(this,"audio")}function skipVideoListener(){skipTrack(this,"video")}function toggleRepeat(b){var a=b.getAttribute("data-stat");if(a==="off"){b.setAttribute("data-stat","one");b.textContent="Repeat One"}else{if(a==="one"){b.setAttribute("data-stat","all");b.textContent="Repeat All"}else{if(a==="all"){b.setAttribute("data-stat","off");b.textContent="No Repeat"}}}}function toggleRepeatListener(){toggleRepeat(this)}function randomizeTrackOrder(d,f){if(f==="audio"){var b=nowPlayingNumDiv.getAttribute("data-nowplaying-num")}else{if(f==="video"){var b=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num")}}var a=0;var g=[];while(g.length<d-1){var e=randInt(d);while(e==b){e=randInt(d)}if(g.indexOf(e)===-1){g.push(e)}}return g}function randomStringFromArray(b){if(b==="none"){return}var a="";for(c=0;c<b.length;c++){a+=b[c];if(c<b.length-1){a+=","}}return a}function toggleShuffle(d,b){var a=d.getAttribute("data-stat");if(a==="off"){setRandomOrder(b);d.setAttribute("data-stat","on");d.textContent="Shuffle On"}else{if(a==="on"){d.setAttribute("data-stat","off");d.textContent="Shuffle Off"}}}function toggleShuffleAudioListener(){toggleShuffle(this,"audio")}function toggleShuffleVideoListener(){toggleShuffle(this,"video")}function paused(b,e){var a=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var d=playArrows[a].getAttribute("data-title");var f=pageTitle.getAttribute("data-sitename");if(e==="playing"){pageTitle.textContent="Now Playing: "+d+" | "+f;audioNowPlayingTextP.textContent="Now Playing: ";audioNowPlayingTextP.appendChild(document.createElement("span"));audioNowPlayingTextP.childNodes[1].style.fontWeight="bold";audioNowPlayingTextP.childNodes[1].textContent=d}else{if(e==="paused"){pageTitle.textContent="Paused: "+d+" | "+f;audioNowPlayingTextP.textContent="Paused: ";audioNowPlayingTextP.appendChild(document.createElement("span"));audioNowPlayingTextP.childNodes[1].style.fontWeight="bold";audioNowPlayingTextP.childNodes[1].textContent=d}}}function playingAudioHandler(){paused(this,"playing")}function pausedAudioHandler(){paused(this,"paused")}function giveLink(f){var d;var e;var h;var g;if(f==="audio"){g=audio}else{if(f==="video"){g=video}else{if(f==="single"){g=single}}}var b=window.location.protocol+"//"+window.location.host+window.location.pathname+"?t="+Math.floor(g.currentTime);if(f==="audio"){d=playArrows;e=nowPlayingNumDiv.getAttribute("data-nowplaying-num");h="&a="}else{if(f==="video"){d=videoArrows;e=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");h="&v="}}if(d){var a=d[e].getAttribute("id");b+=h+a}if(f==="video"){b+="#videoplayer"}var i=document.createElement("textarea");i.value=b;document.body.appendChild(i);i.select();document.execCommand("copy");document.body.removeChild(i);return b}function singleLinkListener(){giveLink("single")}function audioLinkListener(){giveLink("audio")}function videoLinkListener(){giveLink("video")}function seekTrack(){var a=params.get("a");var b=params.get("v");var d=params.get("t");if((a===null)&&(b===null)){single.currentTime=d;single.autoplay=true}else{if(a){playAudio(playArrows.namedItem(a));audio.currentTime=d;audio.autoplay=true}if(b){playVideo(videoArrows.namedItem(b));video.currentTime=d;video.autoplay=true}}}function setUp(){var h=0;if(nowPlayingNumDiv){var d=nowPlayingNumDiv.getAttribute("data-nowplaying-num")}var g=pageTitle.getAttribute("data-sitename");if(playArrows.length>0){var e=playArrows[0].getAttribute("data-title");var a="Paused: "+e+" | "+g}if(tracks){for(c=0;c<tracks.length;c++){var f=playArrows.item(c);f.addEventListener("click",playAudioClickListener);f.setAttribute("data-num",c)}}if(audio){audio.src=playArrows[h].getAttribute("data-browse").replace("browse","serve");playingTitleSpan.textContent=e;title.textContent=a;audio.addEventListener("ended",endedAudioListener);audio.addEventListener("playing",playingAudioHandler);audio.addEventListener("pause",pausedAudioHandler);prevBtn.addEventListener("click",skipAudioListener);nextBtn.addEventListener("click",skipAudioListener);repeatBtn.addEventListener("click",toggleRepeatListener);shuffleBtn.addEventListener("click",toggleShuffleAudioListener)}if(videoTracks){for(c=0;c<videoTracks.length;c++){var b=videoArrows.item(c);b.addEventListener("click",playVideoClickListener);b.setAttribute("data-num",c)}}if(video){video.src=videoArrows[h].getAttribute("data-browse").replace("browse","serve");video.addEventListener("ended",endedVideoListener);videoPrevBtn.addEventListener("click",skipVideoListener);videoNextBtn.addEventListener("click",skipVideoListener);videoRepeatBtn.addEventListener("click",toggleRepeatListener);videoShuffleBtn.addEventListener("click",toggleShuffleVideoListener)}if(singleLinkButton){singleLinkButton.addEventListener("click",singleLinkListener)}if(audioLinkButton){audioLinkButton.addEventListener("click",audioLinkListener)}if(videoLinkButton){videoLinkButton.addEventListener("click",videoLinkListener)}if(params.has("t")){seekTrack()}}window.onload=setUp();
\ No newline at end of file
var audio=document.getElementById("audio");var audioNowPlayingTextP=document.getElementById("now-playing");var nowPlayingNumDiv=document.getElementById("now-playing-num");var videoNowPlayingNumDiv=document.getElementById("video-now-playing-num");var pageTitle=document.getElementById("title");var playArrows=document.getElementsByClassName("play-arrow");var playingTitleSpan=document.getElementById("playing-title");var playlist=document.getElementById("playlist");if(playlist){var tracks=playlist.getElementsByClassName("title")}var video=document.getElementById("video");var videoArrows=document.getElementsByClassName("video-arrow");var videoPlaylist=document.getElementById("video-playlist");if(videoPlaylist){var videoTracks=videoPlaylist.getElementsByClassName("video-title")}else{if(playlist){var videoTracks=playlist.getElementsByClassName("video-title")}}var prevBtn=document.getElementById("prev");var nextBtn=document.getElementById("next");var repeatBtn=document.getElementById("repeat");var shuffleBtn=document.getElementById("shuffle");var prevBtnMobile=document.getElementById("mobile-prev");var nextBtnMobile=document.getElementById("mobile-next");var repeatBtnMobile=document.getElementById("mobile-repeat");var shuffleBtnMobile=document.getElementById("mobile-shuffle");var randomOrderHolder=document.getElementById("randorder");var videoPrevBtn=document.getElementById("vid-prev");var videoNextBtn=document.getElementById("vid-next");var videoRepeatBtn=document.getElementById("vid-repeat");var videoShuffleBtn=document.getElementById("vid-shuffle");var videoPrevBtnMobile=document.getElementById("mobile-vid-prev");var videoNextBtnMobile=document.getElementById("mobile-vid-next");var videoRepeatBtnMobile=document.getElementById("mobile-vid-repeat");var videoShuffleBtnMobile=document.getElementById("mobile-vid-shuffle");var videoRandomOrderHolder=document.getElementById("vid-randorder");var params=new URLSearchParams(window.location.search);var single=document.getElementById("single");var singleLinkButton=document.getElementById("time-link");var audioLinkButton=document.getElementById("audio-time-link");var videoLinkButton=document.getElementById("video-time-link");function playAudio(a,b){var f=a.getAttribute("data-browse");var j=f.replace("browse","serve");var e=pageTitle.getAttribute("data-sitename");var i=a.getAttribute("data-num");var g=a.getAttribute("data-title");var h="Now Playing: "+g+" | "+e;var d=shuffleBtn.getAttribute("data-stat");if(audio.src.endsWith(j)!==true){audio.src=j}if(typeof b==="undefined"){audio.play()}nowPlayingNumDiv.setAttribute("data-nowplaying-num",i);playingTitleSpan.textContent=g;pageTitle.textContent=h;if(d==="on"){setRandomOrder("audio")}}function playAudioClickListener(){playAudio(this)}function playVideo(f,a){var e=f.getAttribute("data-browse");var g=e.replace("browse","serve");var d=videoShuffleBtn.getAttribute("data-stat");var b=f.getAttribute("data-num");if(typeof a==="undefined"){video.src=g;video.play()}videoNowPlayingNumDiv.setAttribute("data-nowplaying-num",b);if(d==="on"){setRandomOrder("video")}}function playVideoClickListener(){playVideo(this)}function randInt(a){return Math.floor(Math.random()*Math.floor(a))}function setRandomOrder(f){if(f==="audio"){var b=playArrows;var g=randomOrderHolder.getAttribute("data-randorder");var h=randomOrderHolder;var e=tracks}else{if(f==="video"){var b=videoArrows;var g=videoRandomOrderHolder.getAttribute("data-randorder");var h=videoRandomOrderHolder;var e=videoTracks}}var i=randomizeTrackOrder(e.length,f);var d=randomStringFromArray(i);if(g==="none"){h.setAttribute("data-randorder",d)}else{if(g===d){while(g===d){var a=randomizeTrackOrder(e.length,f);d=randomStringFromArray(a)}}else{h.setAttribute("data-randorder",d)}}}function endedTrackListener(n,i){if(i==="audio"){var o=playArrows;var f=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var j=randomOrderHolder;var m=playAudio;var d=repeatBtn.getAttribute("data-stat");var k=shuffleBtn.getAttribute("data-stat")}else{if(i==="video"){var o=videoArrows;var f=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");var j=videoRandomOrderHolder;var m=playVideo;var d=videoRepeatBtn.getAttribute("data-stat");var k=videoShuffleBtn.getAttribute("data-stat")}}var h=o.length-1;if(d==="one"){m(o[f])}else{if(k==="on"){var l=j.getAttribute("data-randorder");var g=l.split(",");if(g!=""){var b=g.shift();m(o[b]);var a=randomStringFromArray(g);j.setAttribute("data-randorder",a)}else{if(d==="all"){var e=randInt(h);m(o[e]);setRandomOrder(i)}else{}}}else{if(k==="off"){if(f<h){f++;m(o[f])}else{if(d==="all"){m(o[0])}else{if(d==="off"){}}}}}}}function endedAudioListener(){endedTrackListener(this,"audio")}function endedVideoListener(){endedTrackListener(this,"video")}function skipTrack(j,q){var f=j.getAttribute("data-cmd");if(q==="audio"){var o=playArrows;var e=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var i=randomOrderHolder;var n=playAudio;var k=shuffleBtn.getAttribute("data-stat");var p=tracks}else{if(q==="video"){var o=videoArrows;var e=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");var i=videoRandomOrderHolder;var n=playVideo;var k=videoShuffleBtn.getAttribute("data-stat");var p=videoTracks}}var h=p.length-1;if(k==="on"){var l=i.getAttribute("data-randorder");var g=l.split(",");if(g.length>0){var b=g.shift();var m=o[b];if(typeof(m)==="undefined"){var d=randInt(p.length);n(o[d]);setRandomOrder(q)}else{n(m);var a=randomStringFromArray(g);i.setAttribute("data-randorder",a)}}else{if(repeat==="all"){var d=randInt(p.length);n(o[d]);setRandomOrder(q)}}}else{if(k==="off"){if(f==="fwd"){if(e<h){e++;n(o[e])}else{n(o[0])}}else{if(f==="prev"){if(e>0){e--;n(o[e])}else{n(o[h])}}}}}}function skipAudioListener(){skipTrack(this,"audio")}function skipVideoListener(){skipTrack(this,"video")}function toggleRepeat(b){var a=b.getAttribute("data-stat");if(a==="off"){b.setAttribute("data-stat","one");b.textContent="Repeat One"}else{if(a==="one"){b.setAttribute("data-stat","all");b.textContent="Repeat All"}else{if(a==="all"){b.setAttribute("data-stat","off");b.textContent="No Repeat"}}}}function toggleRepeatListener(){toggleRepeat(this)}function randomizeTrackOrder(d,f){if(f==="audio"){var b=nowPlayingNumDiv.getAttribute("data-nowplaying-num")}else{if(f==="video"){var b=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num")}}var a=0;var g=[];while(g.length<d-1){var e=randInt(d);while(e==b){e=randInt(d)}if(g.indexOf(e)===-1){g.push(e)}}return g}function randomStringFromArray(b){if(b==="none"){return}var a="";for(c=0;c<b.length;c++){a+=b[c];if(c<b.length-1){a+=","}}return a}function toggleShuffle(d,b){var a=d.getAttribute("data-stat");if(a==="off"){setRandomOrder(b);d.setAttribute("data-stat","on");d.textContent="Shuffle On"}else{if(a==="on"){d.setAttribute("data-stat","off");d.textContent="Shuffle Off"}}}function toggleShuffleAudioListener(){toggleShuffle(this,"audio")}function toggleShuffleVideoListener(){toggleShuffle(this,"video")}function paused(b,e){var a=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var d=playArrows[a].getAttribute("data-title");var f=pageTitle.getAttribute("data-sitename");if(e==="playing"){pageTitle.textContent="Now Playing: "+d+" | "+f;audioNowPlayingTextP.textContent="Now Playing: ";audioNowPlayingTextP.appendChild(document.createElement("span"));audioNowPlayingTextP.childNodes[1].style.fontWeight="bold";audioNowPlayingTextP.childNodes[1].textContent=d}else{if(e==="paused"){pageTitle.textContent="Paused: "+d+" | "+f;audioNowPlayingTextP.textContent="Paused: ";audioNowPlayingTextP.appendChild(document.createElement("span"));audioNowPlayingTextP.childNodes[1].style.fontWeight="bold";audioNowPlayingTextP.childNodes[1].textContent=d}}}function playingAudioHandler(){paused(this,"playing")}function pausedAudioHandler(){paused(this,"paused")}function giveLink(f){var d;var e;var h;var g;if(f==="audio"){g=audio}else{if(f==="video"){g=video}else{if(f==="single"){g=single}}}var b=window.location.protocol+"//"+window.location.host+window.location.pathname+"?t="+Math.floor(g.currentTime);if(f==="audio"){d=playArrows;e=nowPlayingNumDiv.getAttribute("data-nowplaying-num");h="&a="}else{if(f==="video"){d=videoArrows;e=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");h="&v="}}if(d){var a=d[e].getAttribute("id");b+=h+a}if(f==="video"){b+="#videoplayer"}var i=document.createElement("textarea");i.value=b;document.body.appendChild(i);i.select();document.execCommand("copy");document.body.removeChild(i);return b}function singleLinkListener(){giveLink("single")}function audioLinkListener(){giveLink("audio")}function videoLinkListener(){giveLink("video")}function seekTrack(){var a=params.get("a");var b=params.get("v");var d=params.get("t");if((a===null)&&(b===null)){single.currentTime=d;single.autoplay=true}else{if(a){playAudio(playArrows.namedItem(a));audio.currentTime=d;audio.autoplay=true}if(b){playVideo(videoArrows.namedItem(b));video.currentTime=d;video.autoplay=true}}}function setUp(){var h=0;if(nowPlayingNumDiv){var d=nowPlayingNumDiv.getAttribute("data-nowplaying-num")}var g=pageTitle.getAttribute("data-sitename");if(playArrows.length>0){var e=playArrows[0].getAttribute("data-title");var a="Paused: "+e+" | "+g}if(tracks){for(c=0;c<playArrows.length;c++){var f=playArrows.item(c);f.addEventListener("click",playAudioClickListener);f.setAttribute("data-num",c)}}if(audio){audio.src=playArrows[h].getAttribute("data-browse").replace("browse","serve");playingTitleSpan.textContent=e;title.textContent=a;audio.addEventListener("ended",endedAudioListener);audio.addEventListener("playing",playingAudioHandler);audio.addEventListener("pause",pausedAudioHandler);prevBtn.addEventListener("click",skipAudioListener);nextBtn.addEventListener("click",skipAudioListener);repeatBtn.addEventListener("click",toggleRepeatListener);shuffleBtn.addEventListener("click",toggleShuffleAudioListener);prevBtnMobile.addEventListener("click",skipAudioListener);nextBtnMobile.addEventListener("click",skipAudioListener);repeatBtnMobile.addEventListener("click",toggleRepeatListener);shuffleBtnMobile.addEventListener("click",toggleShuffleAudioListener)}if(videoTracks){for(c=0;c<videoArrows.length;c++){var b=videoArrows.item(c);b.addEventListener("click",playVideoClickListener);b.setAttribute("data-num",c)}}if(video){video.src=videoArrows[h].getAttribute("data-browse").replace("browse","serve");video.addEventListener("ended",endedVideoListener);videoPrevBtn.addEventListener("click",skipVideoListener);videoNextBtn.addEventListener("click",skipVideoListener);videoRepeatBtn.addEventListener("click",toggleRepeatListener);videoShuffleBtn.addEventListener("click",toggleShuffleVideoListener);videoPrevBtnMobile.addEventListener("click",skipVideoListener);videoNextBtnMobile.addEventListener("click",skipVideoListener);videoRepeatBtnMobile.addEventListener("click",toggleRepeatListener);videoShuffleBtnMobile.addEventListener("click",toggleShuffleVideoListener)}if(singleLinkButton){singleLinkButton.addEventListener("click",singleLinkListener)}if(audioLinkButton){audioLinkButton.addEventListener("click",audioLinkListener)}if(videoLinkButton){videoLinkButton.addEventListener("click",videoLinkListener)}if(params.has("t")){seekTrack()}}window.onload=setUp();
\ No newline at end of file

M templates/audio_player.html => templates/audio_player.html +17 -5
@@ 5,11 5,23 @@
  <audio{% if autoplay %} autoplay{% endif %}{% if preload_audio %} preload="auto"{% endif %} id="audio" controls>
    Your browser does not support the <code>audio</code> element.
  </audio>
  <button data-cmd="prev" id="prev" title="Click to skip to the previous track in the list.">Previous</button>
  <button data-cmd="fwd" id="next" title="Click to skip to the next track in the list.">Next</button>
  <button data-stat="off" id="repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">No Repeat</button>
  <button data-stat="off" id="shuffle" title="Click to toggle between a shuffled track order on and off.">Shuffle Off</button>
  <div class="mobile-hide">
    <button data-cmd="prev" id="prev" title="Click to skip to the previous track in the list.">Previous</button>
    <button data-stat="off" id="repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">No Repeat</button>
    <button data-stat="off" id="shuffle" title="Click to toggle between a shuffled track order on and off.">Shuffle Off</button>
    <button data-cmd="fwd" id="next" title="Click to skip to the next track in the list.">Next</button>
  </div>
  <div class="mobile-show">
    <div>
      <button data-cmd="prev" id="mobile-prev" title="Click to skip to the previous track in the list.">Previous</button>
      <button data-cmd="fwd" id="mobile-next" title="Click to skip to the next track in the list.">Next</button>
    </div>
    <div>
      <button data-stat="off" id="mobile-repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">No Repeat</button>
      <button data-stat="off" id="mobile-shuffle" title="Click to toggle between a shuffled track order on and off.">Shuffle Off</button>
    </div>
  </div>
  {% if link_button %}
  <button id="audio-time-link" title="Click this button to have a link to this track at the current time put into your clipboard.">Get link to current time</button>
    <button id="audio-time-link" title="Click this button to have a link to this track at the current time put into your clipboard.">Current Time Link</button>
  {% endif %}
</div>

M templates/video_player.html => templates/video_player.html +19 -5
@@ 6,11 6,25 @@
    <p>Your browser doesn't support HTML5 video.</p>
  </video>
  <div id="videoplayer"></div>
  <button data-cmd="prev" id="vid-prev" title="Click to skip to the previous track in the list.">Previous</button>
  <button data-cmd="fwd" id="vid-next" title="Click to skip to the next track in the list.">Next</button>
  <button data-stat="off" id="vid-repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">No Repeat</button>  
  <button data-stat="off" id="vid-shuffle" title="Click to toggle between a shuffled track order on and off.">Shuffle Off</button>
  <div class="mobile-hide">
    <button data-cmd="prev" id="vid-prev" title="Click to skip to the previous track in the list.">Previous</button>
    <button data-stat="off" id="vid-repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">No Repeat</button>  
    <button data-stat="off" id="vid-shuffle" title="Click to toggle between a shuffled track order on and off.">Shuffle Off</button>
    <button data-cmd="fwd" id="vid-next" title="Click to skip to the next track in the list.">Next</button>
  </div>

  <div class="mobile-show">
    <div>
      <button data-cmd="prev" id="mobile-vid-prev" title="Click to skip to the previous track in the list.">Previous</button>
      <button data-cmd="fwd" id="mobile-vid-next" title="Click to skip to the next track in the list.">Next</button>
    </div>
    <div>
      <button data-stat="off" id="mobile-vid-repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">No Repeat</button>
      <button data-stat="off" id="mobile-vid-shuffle" title="Click to toggle between a shuffled track order on and off.">Shuffle Off</button>
    </div>
  </div>

  {% if link_button %}
  <button id="video-time-link" title="Click this button to have a link to this track at the current time put into your clipboard.">Get link to current time</button>
    <button id="video-time-link" title="Click this button to have a link to this track at the current time put into your clipboard.">Current Time Link</button>
  {% endif %}
</div>