~hristoast/mousikofidi

e52ee17627cef0e3c08ea7dddf0e7063368dc275 — Hristos N. Triantafillou 8 months ago 6df98b1 0.11
Bringing repeat and shuffle to the video player (#42)

I was able to generalize several functions to operate on both audio
and video contexts.  I also took the liberty of reorganizing the order
of functions and etc in a way that was more readable as I was working
on this.
3 files changed, 158 insertions(+), 131 deletions(-)

M static/js/fidi.js
M static/js/fidi.min.js
M templates/video_player.html
M static/js/fidi.js => static/js/fidi.js +152 -127
@@ 36,11 36,14 @@ if (videoPlaylist) {
}
var prevBtn = document.getElementById("prev");
var nextBtn = document.getElementById("next");
var vidPrevBtn = document.getElementById("vid-prev");
var vidNextBtn = document.getElementById("vid-next");
var repeatBtn = document.getElementById("repeat");
var randomOrderHolder = document.getElementById("randorder");
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");

function playAudio(targetArrow) {
    /*


@@ 63,7 66,7 @@ function playAudio(targetArrow) {
    pageTitle.textContent = playingTextTitle;

    if (shuffle === "on") {
        setRandomOrder();
        setRandomOrder("audio");
    }
}



@@ 71,51 74,117 @@ function playAudioClickListener() {
    playAudio(this);
}

function playVideo(targetArrow) {
    /*
      Play the selected track.
    */
    var browse = targetArrow.getAttribute("data-browse");
    var dataNowPlaying = targetArrow.getAttribute("data-videonowplaying");
    var serve = browse.replace("browse", "serve");
    var shuffle = videoShuffleBtn.getAttribute("data-stat");
    var thisTrackNum = targetArrow.getAttribute("data-num");

    video.setAttribute("data-nowplaying", dataNowPlaying);
    video.src = serve;
    video.play();
    videoNowPlayingNumDiv.setAttribute("data-nowplaying-num", thisTrackNum);

    if (shuffle === "on") {
        setRandomOrder("video");
    }
}

function playVideoClickListener() {
    playVideo(this);
}

function randInt(max) {
    // Thank you MDN
    return Math.floor(Math.random() * Math.floor(max));
}

function endedAudioListener() {
    /*
      When the playing track has ended, continue to
      the next unless it's the last in the playlist.
    */
    var currentTrack = nowPlayingNumDiv.getAttribute("data-nowplaying-num");
    var repeat = repeatBtn.getAttribute("data-stat");
    var shuffle = shuffleBtn.getAttribute("data-stat");
    var trackCount = playArrows.length - 1;
function setRandomOrder(trackType) {
    if (trackType === "audio") {
        var arrows = playArrows;
        var oldRandString = randomOrderHolder.getAttribute("data-randorder");
        var orderHolder = randomOrderHolder;
        var t = tracks;

    } else if (trackType === "video") {
        var arrows = videoArrows;
        var oldRandString = videoRandomOrderHolder.getAttribute("data-randorder");
        var orderHolder = videoRandomOrderHolder;
        var t = videoTracks;
    }

    var newRandArray = randomizeTrackOrder(arrows, t.length, trackType);
    var newRandString = randomStringFromArray(newRandArray);

    if (oldRandString === "none") {
        orderHolder.setAttribute("data-randorder", newRandString);

    } else if (oldRandString === newRandString) {
        while (oldRandString === newRandString) {
            var newArray = randomizeTrackOrder(arrows, t.length, trackType);
            newRandString = randomStringFromArray(newArray);
        }

    } else {
        orderHolder.setAttribute("data-randorder", newRandString);
    }
}

function endedTrackListener(_, trackType) {
    if (trackType === "audio") {
        var arrows = playArrows;
        var currentTrack = nowPlayingNumDiv.getAttribute("data-nowplaying-num");
        var orderHolder = randomOrderHolder;
        var playFn = playAudio;
        var repeat = repeatBtn.getAttribute("data-stat");
        var shuffle = shuffleBtn.getAttribute("data-stat");

    } else if (trackType === "video") {
        var arrows = videoArrows;
        var currentTrack = videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");
        var orderHolder = videoRandomOrderHolder;
        var playFn = playVideo;
        var repeat = videoRepeatBtn.getAttribute("data-stat");
        var shuffle = videoShuffleBtn.getAttribute("data-stat");
    }

    var trackCount = arrows.length - 1;

    if (repeat === "one") {
        playAudio(playArrows[currentTrack]);
        playFn(arrows[currentTrack]);

    } else {
        if (shuffle === "on") {
            var randOrderString = randomOrderHolder.getAttribute("data-randorder");
            var randOrderString = orderHolder.getAttribute("data-randorder");
            var randOrderArray = randOrderString.split(",");

            if (randOrderArray != "") {
                var nextTrack = randOrderArray.shift();
                playAudio(playArrows[nextTrack]);
                playFn(arrows[nextTrack]);
                var newOrderString = randomStringFromArray(randOrderArray);
                randomOrderHolder.setAttribute("data-randorder", newOrderString);
                orderHolder.setAttribute("data-randorder", newOrderString);

            } else if (repeat === "all") {
                var newStartTrack = randInt(trackCount);
                playAudio(playArrows[newStartTrack]);
                setRandomOrder();
                playFn(arrows[newStartTrack]);
                setRandomOrder(trackType);

            } else {
                // console.log("Shuffled playback has ended.");
            }

        } else if (shuffle === "off") {

            if (currentTrack < trackCount) {
                currentTrack++;
                playAudio(playArrows[currentTrack]);
                playFn(arrows[currentTrack]);

            } else if (repeat === "all") {
                playAudio(playArrows[0]);
                playFn(arrows[0]);

            } else if (repeat === "off") {
                // console.log("Playback has ended.");


@@ 124,115 193,78 @@ function endedAudioListener() {
    }
}

function playVideo(targetArrow) {
    /*
      Play the selected track.
    */
    var browse = targetArrow.getAttribute("data-browse");
    var dataNowPlaying = targetArrow.getAttribute("data-videonowplaying");
    var serve = browse.replace("browse", "serve");
    var thisTrackNum = targetArrow.getAttribute("data-num");

    video.setAttribute("data-nowplaying", dataNowPlaying);
    video.src = serve;
    video.play();
    videoNowPlayingNumDiv.setAttribute("data-videonowplaying-num", thisTrackNum);
    // TODO: update the page title and etc for video
    // playingTitleSpan.textContent = title;
    // pageTitle.textContent = playingTextTitle;
}

function playVideoClickListener() {
    playVideo(this);
function endedAudioListener() {
    endedTrackListener(this, "audio")
}

function endedVideoListener() {
    /*
      When the playing track has ended, continue to
      the next unless it's the last in the playlist.
    */
    var currentTrack = videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");
    var trackCount = videoArrows.length - 1;

    if (currentTrack < trackCount) {
        currentTrack++;
        playVideo(videoArrows[currentTrack]);
    } else {
        // console.log("Playback has ended.");
    }
    endedTrackListener(this, "video")
}

function skipTrack(target, mediaType) {
    var cmd = target.getAttribute("data-cmd");

    if (mediaType === "audio") {
        var arrows = playArrows;
        var currentTrack = nowPlayingNumDiv.getAttribute("data-nowplaying-num");
        var orderHolder = randomOrderHolder;
        var playFn = playAudio;
        var shuffle = shuffleBtn.getAttribute("data-stat");
        var trackTotal = tracks.length - 1;
        if (shuffle === "on") {
            var randOrderString = randomOrderHolder.getAttribute("data-randorder");
            var randOrderArray = randOrderString.split(",");
        var t = tracks;

            if (randOrderArray.length > 0) {
                var nextTrack = randOrderArray.shift();
                var nt = playArrows[nextTrack]
    } else if (mediaType === "video") {
        var arrows = videoArrows;
        var currentTrack = videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");
        var orderHolder = videoRandomOrderHolder;
        var playFn = playVideo;
        var shuffle = videoShuffleBtn.getAttribute("data-stat");
        var t = videoTracks;

                if (typeof(nt) === "undefined") {
                    var newStartTrack = randInt(tracks.length);
                    playAudio(playArrows[newStartTrack]);
                    setRandomOrder();
    }

                } else {
                    playAudio(nt);
                    var newOrderString = randomStringFromArray(randOrderArray);
                    randomOrderHolder.setAttribute("data-randorder", newOrderString);
                }
    var trackTotal = t.length - 1;

            } else if (repeat === "all") {
                var newStartTrack = randInt(tracks.length);
                playAudio(playArrows[newStartTrack]);
                setRandomOrder();
            }
    if (shuffle === "on") {
        var randOrderString = orderHolder.getAttribute("data-randorder");
        var randOrderArray = randOrderString.split(",");

        } else if (shuffle === "off") {
        if (randOrderArray.length > 0) {
            var nextTrack = randOrderArray.shift();
            var nt = arrows[nextTrack]

            if (typeof(nt) === "undefined") {
                var newStartTrack = randInt(t.length);
                playFn(arrows[newStartTrack]);
                setRandomOrder(mediaType);

            if (cmd === "fwd") {
                if (currentTrack < trackTotal) {
                    currentTrack++;
                    playAudio(playArrows[currentTrack]);
                } else {
                    playAudio(playArrows[0]);
                }

            } else if (cmd === "prev") {
                if (currentTrack > 0) {
                    currentTrack--;
                    playAudio(playArrows[currentTrack]);
                } else {
                    playAudio(playArrows[trackTotal]);
                }
            } else {
                playFn(nt);
                var newOrderString = randomStringFromArray(randOrderArray);
                orderHolder.setAttribute("data-randorder", newOrderString);
            }

        } else if (repeat === "all") {
            var newStartTrack = randInt(t.length);
            playFn(arrows[newStartTrack]);
            setRandomOrder(mediaType);
        }

    } else if (mediaType === "video") {
        var currentTrack = videoNowPlayingNumDiv.getAttribute("data-videonowplaying-num");
        var trackTotal = videoTracks.length - 1;
    } else if (shuffle === "off") {

        if (cmd === "fwd") {
            if (currentTrack < trackTotal) {
                currentTrack++;
                playVideo(videoArrows[currentTrack]);
                console.log(currentTrack);
                playFn(arrows[currentTrack]);
            } else {
                playVideo(videoArrows[0]);
                playFn(arrows[0]);
            }

        } else if (cmd === "prev") {
            if (currentTrack > 0) {
                currentTrack--;
                playVideo(videoArrows[currentTrack]);
                playFn(arrows[currentTrack]);
            } else {
                playVideo(videoArrows[trackTotal]);
                playFn(arrows[trackTotal]);
            }
        }
    }


@@ 264,8 296,14 @@ function toggleRepeatListener() {
    toggleRepeat(this);
}

function randomizeTrackOrder(arrows, totalCount) {
    var nowPlayingTrackNum = nowPlayingNumDiv.getAttribute("data-nowplaying-num");
function randomizeTrackOrder(arrows, totalCount, trackType) {

    if (trackType === "audio") {
        var nowPlayingTrackNum = nowPlayingNumDiv.getAttribute("data-nowplaying-num");
    } else if (trackType === "video") {
        var nowPlayingTrackNum = videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");
    }
    
    var randCount = 0;
    var trackList = [];



@@ 294,29 332,10 @@ function randomStringFromArray(array) {
    return randString;
}

function setRandomOrder() {
    var oldRandString = randomOrderHolder.getAttribute("data-randorder");
    var newRandArray = randomizeTrackOrder(playArrows, tracks.length);
    var newRandString = randomStringFromArray(newRandArray);

    if (oldRandString === "none") {
        randomOrderHolder.setAttribute("data-randorder", newRandString);

    } else if (oldRandString === newRandString) {
        while (oldRandString === newRandString) {
            var newArray = randomizeTrackOrder(playArrows, tracks.length);
            newRandString = randomStringFromArray(newArray);
        }

    } else {
        randomOrderHolder.setAttribute("data-randorder", newRandString);
    }
}

function toggleShuffle(target) {
function toggleShuffle(target, trackType) {
    var shuffle = target.getAttribute("data-stat");
    if (shuffle === "off") {
        setRandomOrder();
        setRandomOrder(trackType);
        target.setAttribute("data-stat", "on");
        target.textContent = "Shuffle On";
    } else if (shuffle === "on") {


@@ 325,8 344,12 @@ function toggleShuffle(target) {
    }
}

function toggleShuffleListener() {
    toggleShuffle(this);
function toggleShuffleAudioListener() {
    toggleShuffle(this, "audio");
}

function toggleShuffleVideoListener() {
    toggleShuffle(this, "video");
}

function paused(_, event) {


@@ 401,7 424,7 @@ function setUp() {
        prevBtn.addEventListener("click", skipAudioListener);
        nextBtn.addEventListener("click", skipAudioListener);
        repeatBtn.addEventListener("click", toggleRepeatListener);
        shuffleBtn.addEventListener("click", toggleShuffleListener);
        shuffleBtn.addEventListener("click", toggleShuffleAudioListener);
    }

    if (videoTracks) {


@@ 418,8 441,10 @@ function setUp() {
        video.addEventListener('ended', endedVideoListener);

        // Set listeners on player control buttons
        vidPrevBtn.addEventListener("click", skipVideoListener);
        vidNextBtn.addEventListener("click", skipVideoListener);
        videoPrevBtn.addEventListener("click", skipVideoListener);
        videoNextBtn.addEventListener("click", skipVideoListener);
        videoRepeatBtn.addEventListener("click", toggleRepeatListener);
        videoShuffleBtn.addEventListener("click", toggleShuffleVideoListener);
    }
}


M static/js/fidi.min.js => static/js/fidi.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 vidPrevBtn=document.getElementById("vid-prev");var vidNextBtn=document.getElementById("vid-next");var repeatBtn=document.getElementById("repeat");var randomOrderHolder=document.getElementById("randorder");var shuffleBtn=document.getElementById("shuffle");function playAudio(a){var f=a.getAttribute("data-browse");var e=a.getAttribute("data-nowplaying");var j=f.replace("browse","serve");var d=pageTitle.getAttribute("data-sitename");var i=a.getAttribute("data-num");var g=a.getAttribute("data-title");var h="Now Playing: "+g+" | "+d;var b=shuffleBtn.getAttribute("data-stat");audio.setAttribute("data-nowplaying",e);audio.src=j;audio.play();nowPlayingNumDiv.setAttribute("data-nowplaying-num",i);playingTitleSpan.textContent=g;pageTitle.textContent=h;if(b==="on"){setRandomOrder()}}function playAudioClickListener(){playAudio(this)}function randInt(a){return Math.floor(Math.random()*Math.floor(a))}function endedAudioListener(){var f=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var d=repeatBtn.getAttribute("data-stat");var i=shuffleBtn.getAttribute("data-stat");var h=playArrows.length-1;if(d==="one"){playAudio(playArrows[f])}else{if(i==="on"){var j=randomOrderHolder.getAttribute("data-randorder");var g=j.split(",");if(g!=""){var a=g.shift();playAudio(playArrows[a]);var b=randomStringFromArray(g);randomOrderHolder.setAttribute("data-randorder",b)}else{if(d==="all"){var e=randInt(h);playAudio(playArrows[e]);setRandomOrder()}else{}}}else{if(i==="off"){if(f<h){f++;playAudio(playArrows[f])}else{if(d==="all"){playAudio(playArrows[0])}else{if(d==="off"){}}}}}}}function playVideo(d){var b=d.getAttribute("data-browse");var e=d.getAttribute("data-videonowplaying");var f=b.replace("browse","serve");var a=d.getAttribute("data-num");video.setAttribute("data-nowplaying",e);video.src=f;video.play();videoNowPlayingNumDiv.setAttribute("data-videonowplaying-num",a)}function playVideoClickListener(){playVideo(this)}function endedVideoListener(){var b=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num");var a=videoArrows.length-1;if(b<a){b++;playVideo(videoArrows[b])}else{}}function skipTrack(h,m){var f=h.getAttribute("data-cmd");if(m==="audio"){var e=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var i=shuffleBtn.getAttribute("data-stat");var j=tracks.length-1;if(i==="on"){var k=randomOrderHolder.getAttribute("data-randorder");var g=k.split(",");if(g.length>0){var b=g.shift();var l=playArrows[b];if(typeof(l)==="undefined"){var d=randInt(tracks.length);playAudio(playArrows[d]);setRandomOrder()}else{playAudio(l);var a=randomStringFromArray(g);randomOrderHolder.setAttribute("data-randorder",a)}}else{if(repeat==="all"){var d=randInt(tracks.length);playAudio(playArrows[d]);setRandomOrder()}}}else{if(i==="off"){if(f==="fwd"){if(e<j){e++;playAudio(playArrows[e])}else{playAudio(playArrows[0])}}else{if(f==="prev"){if(e>0){e--;playAudio(playArrows[e])}else{playAudio(playArrows[j])}}}}}}else{if(m==="video"){var e=videoNowPlayingNumDiv.getAttribute("data-videonowplaying-num");var j=videoTracks.length-1;if(f==="fwd"){if(e<j){e++;playVideo(videoArrows[e]);console.log(e)}else{playVideo(videoArrows[0])}}else{if(f==="prev"){if(e>0){e--;playVideo(videoArrows[e])}else{playVideo(videoArrows[j])}}}}}}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(e,d){var b=nowPlayingNumDiv.getAttribute("data-nowplaying-num");var a=0;var g=[];while(g.length<d-1){var f=randInt(d);while(f==b){f=randInt(d)}if(g.indexOf(f)===-1){g.push(f)}}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 setRandomOrder(){var d=randomOrderHolder.getAttribute("data-randorder");var e=randomizeTrackOrder(playArrows,tracks.length);var b=randomStringFromArray(e);if(d==="none"){randomOrderHolder.setAttribute("data-randorder",b)}else{if(d===b){while(d===b){var a=randomizeTrackOrder(playArrows,tracks.length);b=randomStringFromArray(a)}}else{randomOrderHolder.setAttribute("data-randorder",b)}}}function toggleShuffle(b){var a=b.getAttribute("data-stat");if(a==="off"){setRandomOrder();b.setAttribute("data-stat","on");b.textContent="Shuffle On"}else{if(a==="on"){b.setAttribute("data-stat","off");b.textContent="Shuffle Off"}}}function toggleShuffleListener(){toggleShuffle(this)}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 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",toggleShuffleListener)}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);vidPrevBtn.addEventListener("click",skipVideoListener);vidNextBtn.addEventListener("click",skipVideoListener)}}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 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");function playAudio(a){var f=a.getAttribute("data-browse");var e=a.getAttribute("data-nowplaying");var j=f.replace("browse","serve");var d=pageTitle.getAttribute("data-sitename");var i=a.getAttribute("data-num");var g=a.getAttribute("data-title");var h="Now Playing: "+g+" | "+d;var b=shuffleBtn.getAttribute("data-stat");audio.setAttribute("data-nowplaying",e);audio.src=j;audio.play();nowPlayingNumDiv.setAttribute("data-nowplaying-num",i);playingTitleSpan.textContent=g;pageTitle.textContent=h;if(b==="on"){setRandomOrder("audio")}}function playAudioClickListener(){playAudio(this)}function playVideo(e){var d=e.getAttribute("data-browse");var f=e.getAttribute("data-videonowplaying");var g=d.replace("browse","serve");var b=videoShuffleBtn.getAttribute("data-stat");var a=e.getAttribute("data-num");video.setAttribute("data-nowplaying",f);video.src=g;video.play();videoNowPlayingNumDiv.setAttribute("data-nowplaying-num",a);if(b==="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(b,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(b,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(e,d,g){if(g==="audio"){var b=nowPlayingNumDiv.getAttribute("data-nowplaying-num")}else{if(g==="video"){var b=videoNowPlayingNumDiv.getAttribute("data-nowplaying-num")}}var a=0;var h=[];while(h.length<d-1){var f=randInt(d);while(f==b){f=randInt(d)}if(h.indexOf(f)===-1){h.push(f)}}return h}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 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)}}window.onload=setUp();
\ No newline at end of file

M templates/video_player.html => templates/video_player.html +5 -3
@@ 1,4 1,5 @@
<div data-videonowplaying-num="0" id="video-now-playing-num"></div>
<div data-nowplaying-num="0" id="video-now-playing-num"></div>
<div data-randorder="none" id="vid-randorder"></div>
<div id="videoplayer" class="center">
  <video id="video"{% if autoplay %} autoplay{% endif %}{% if preload_video %} preload="auto"{% endif %} controls>
    <source>


@@ 6,5 7,6 @@
  </video>
  <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 Of</div>  #}
  <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>