<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Search - Under Development</title>
        <link rel="stylesheet" href="/static/css/songs.css">
        <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    </head>
    <body>
        <!-- Tracks used in this music/audio player application are free to use. I downloaded them from Soundcloud and NCS websites. I am not the owner of these tracks. -->

        <div id="app-cover">
            <div id="bg-artwork"></div>
            <div id="bg-layer"></div>
            <div id="player">
                <div id="player-track">
                    <div id="album-name"></div>
                    <div id="track-name"></div>
                    <div id="track-time">
                        <div id="current-time"></div>
                        <div id="track-length"></div>
                    </div>
                    <div id="s-area">
                        <div id="ins-time"></div>
                        <div id="s-hover"></div>
                        <div id="seek-bar"></div>
                    </div>
                </div>
                <div id="player-content">
                    <div id="album-art">
                        <img src="/static/images/uta.jpeg" class="active" id="_1" />
                        <img src="/static/images/uta2.jpeg" id="_2" />
                        <div id="buffer-box">Buffering ...</div>
                    </div>
                    <div id="player-controls">
                        <div class="control">
                            <div class="button" id="play-previous">
                                <i class="fas fa-backward"></i>
                            </div>
                        </div>
                        <div class="control">
                            <div class="button" id="play-pause-button">
                                <i class="fas fa-play"></i>
                            </div>
                        </div>
                        <div class="control">
                            <div class="button" id="play-next">
                                <i class="fas fa-forward"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="/static/js/jquery-3.7.1.min.js" nonce="{{nonce}}"></script>
    <script nonce="{{nonce}}">
        var data_songs = {{data}}
        var songs = data_songs.map(song => ({ title: song.title, url: song.url }));

        $(function () {
            var owner = "{{username}}";
            
            var playerTrack = $("#player-track"),
                bgArtwork = $("#bg-artwork"),
                bgArtworkUrl,
                albumName = $("#album-name"),
                trackName = $("#track-name"),
                albumArt = $("#album-art"),
                sArea = $("#s-area"),
                seekBar = $("#seek-bar"),
                trackTime = $("#track-time"),
                insTime = $("#ins-time"),
                sHover = $("#s-hover"),
                playPauseButton = $("#play-pause-button"),
                i = playPauseButton.find("i"),
                tProgress = $("#current-time"),
                tTime = $("#track-length"),
                seekT,
                seekLoc,
                seekBarPos,
                cM,
                ctMinutes,
                ctSeconds,
                curMinutes,
                curSeconds,
                durMinutes,
                durSeconds,
                playProgress,
                bTime,
                nTime = 0,
                buffInterval = null,
                tFlag = false,
                // trackNames = ["Skylike - Dawn", "Alex Skrindo - Me & You", "Kaaze - Electro Boy", "Jordan Schor - Home", "Martin Garrix - Proxy"],
                trackNames = songs.map(s => s.title)
                albumArtworks = ["_1", "_2"],
                trackUrl = songs.map(s => s.url)
                // trackUrl = [
                //     "https://www.youtube.com/watch?v=xoWxv2yZXLQ&list=PLWL923jZIGrtOTDYPnk7wYo931GIS2-CD",
                //     "https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/1.mp3",
                // ],
                playPreviousTrackButton = $("#play-previous"),
                playNextTrackButton = $("#play-next"),
                currIndex = -1;

            function playPause() {
                setTimeout(function () {
                    if (audio.paused) {
                        playerTrack.addClass("active");
                        albumArt.addClass("active");
                        checkBuffering();
                        i.attr("class", "fas fa-pause");
                        audio.play();
                    } else {
                        playerTrack.removeClass("active");
                        albumArt.removeClass("active");
                        clearInterval(buffInterval);
                        albumArt.removeClass("buffering");
                        i.attr("class", "fas fa-play");
                        audio.pause();
                    }
                }, 300);
            }

            function showHover(event) {
                seekBarPos = sArea.offset();
                seekT = event.clientX - seekBarPos.left;
                seekLoc = audio.duration * (seekT / sArea.outerWidth());

                sHover.width(seekT);

                cM = seekLoc / 60;

                ctMinutes = Math.floor(cM);
                ctSeconds = Math.floor(seekLoc - ctMinutes * 60);

                if (ctMinutes < 0 || ctSeconds < 0) return;

                if (ctMinutes < 0 || ctSeconds < 0) return;

                if (ctMinutes < 10) ctMinutes = "0" + ctMinutes;
                if (ctSeconds < 10) ctSeconds = "0" + ctSeconds;

                if (isNaN(ctMinutes) || isNaN(ctSeconds)) insTime.text("--:--");
                else insTime.text(ctMinutes + ":" + ctSeconds);

                insTime.css({ left: seekT, "margin-left": "-21px" }).fadeIn(0);
            }

            function hideHover() {
                sHover.width(0);
                insTime.text("00:00").css({ left: "0px", "margin-left": "0px" }).fadeOut(0);
            }

            function playFromClickedPos() {
                audio.currentTime = seekLoc;
                seekBar.width(seekT);
                hideHover();
            }

            function updateCurrTime() {
                nTime = new Date();
                nTime = nTime.getTime();

                if (!tFlag) {
                    tFlag = true;
                    trackTime.addClass("active");
                }

                curMinutes = Math.floor(audio.currentTime / 60);
                curSeconds = Math.floor(audio.currentTime - curMinutes * 60);

                durMinutes = Math.floor(audio.duration / 60);
                durSeconds = Math.floor(audio.duration - durMinutes * 60);

                playProgress = (audio.currentTime / audio.duration) * 100;

                if (curMinutes < 10) curMinutes = "0" + curMinutes;
                if (curSeconds < 10) curSeconds = "0" + curSeconds;

                if (durMinutes < 10) durMinutes = "0" + durMinutes;
                if (durSeconds < 10) durSeconds = "0" + durSeconds;

                if (isNaN(curMinutes) || isNaN(curSeconds)) tProgress.text("00:00");
                else tProgress.text(curMinutes + ":" + curSeconds);

                if (isNaN(durMinutes) || isNaN(durSeconds)) tTime.text("00:00");
                else tTime.text(durMinutes + ":" + durSeconds);

                if (isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds)) trackTime.removeClass("active");
                else trackTime.addClass("active");

                seekBar.width(playProgress + "%");

                if (playProgress == 100) {
                    i.attr("class", "fa fa-play");
                    seekBar.width(0);
                    tProgress.text("00:00");
                    albumArt.removeClass("buffering").removeClass("active");
                    clearInterval(buffInterval);
                }
            }

            function checkBuffering() {
                clearInterval(buffInterval);
                buffInterval = setInterval(function () {
                    if (nTime == 0 || bTime - nTime > 1000) albumArt.addClass("buffering");
                    else albumArt.removeClass("buffering");

                    bTime = new Date();
                    bTime = bTime.getTime();
                }, 100);
            }

            function selectTrack(flag) {
                if (flag == 0 || flag == 1) ++currIndex;
                else --currIndex;

                if (currIndex > -1 && currIndex < albumArtworks.length) {
                    if (flag == 0) i.attr("class", "fa fa-play");
                    else {
                        albumArt.removeClass("buffering");
                        i.attr("class", "fa fa-pause");
                    }

                    seekBar.width(0);
                    trackTime.removeClass("active");
                    tProgress.text("00:00");
                    tTime.text("00:00");

                    currAlbum = "Ado";
                    currTrackName = trackNames[currIndex];
                    currArtwork = albumArtworks[currIndex];

                    audio.src = trackUrl[currIndex];

                    nTime = 0;
                    bTime = new Date();
                    bTime = bTime.getTime();

                    if (flag != 0) {
                        audio.play();
                        playerTrack.addClass("active");
                        albumArt.addClass("active");

                        clearInterval(buffInterval);
                        checkBuffering();
                    }

                    albumName.text(currAlbum);
                    trackName.text(currTrackName);
                    albumArt.find("img.active").removeClass("active");
                    $("#" + currArtwork).addClass("active");

                    bgArtworkUrl = $("#" + currArtwork).attr("src");

                    bgArtwork.css({ "background-image": "url(" + bgArtworkUrl + ")" });
                } else {
                    if (flag == 0 || flag == 1) --currIndex;
                    else ++currIndex;
                }
            }

            function initPlayer() {
                audio = new Audio();

                selectTrack(0);

                audio.loop = false;

                playPauseButton.on("click", playPause);

                sArea.mousemove(function (event) {
                    showHover(event);
                });

                sArea.mouseout(hideHover);

                sArea.on("click", playFromClickedPos);

                $(audio).on("timeupdate", updateCurrTime);

                playPreviousTrackButton.on("click", function () {
                    selectTrack(-1);
                });
                playNextTrackButton.on("click", function () {
                    selectTrack(1);
                });
            }

            initPlayer();
        });
    </script>
</html>
