<!DOCTYPE html>
<html>
<head>
    <title>NOISYREJECTS MUSIC DUMP</title>
        <meta name="title" content="NOISYREJECTS">
    <meta name="description" content="Music dump">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://sola.nekoweb.org/index.html">
    <meta property="og:title" content="NOISYREJECTS">
    <meta property="og:description" content="Music dump">
    <meta property="og:image" content="/img/logosymbol.png">

    <meta property="twitter:card" content="/img/logosymbol.png">
    <meta property="twitter:url" content="https://sola.nekoweb.org/index.html">
<meta property="twitter:title" content="NOISYREJECTS">
<meta property="twitter:description" content="Music dump">
<meta property="twitter:image" content="/img/logosymbol.png">

    <!-- Include Amplitude JS -->
    <script type="text/javascript" src="/amplitude.js"></script>

    <!-- Include Style Sheet -->
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- Blue Playlist Container -->
    <div id="blue-playlist-container">

        <!-- Amplitude Player -->
        <div id="amplitude-player">

            <!-- Left Side Player -->
            <div id="amplitude-left">
                <img data-amplitude-song-info="cover_art_url"/>
                <div id="player-left-bottom">
                    <div id="time-container">
                        <span class="current-time">
                            <span class="amplitude-current-minutes"></span>:<span class="amplitude-current-seconds"></span>
                        </span>
                        <div id="progress-container">
                            <input type="range" class="amplitude-song-slider"/>
                            <progress id="song-played-progress" class="amplitude-song-played-progress"></progress>
                            <progress id="song-buffered-progress" class="amplitude-buffered-progress" value="0"></progress>
                        </div>
                        <span class="duration">
                            <span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
                        </span>
                    </div>

                    <div id="control-container">
                        <div id="repeat-container">
                            <div class="amplitude-repeat" id="repeat"></div>
                            <div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle"></div>
                        </div>

                        <div id="central-control-container">
                            <div id="central-controls">
                                <div class="amplitude-prev" id="previous"></div>
                                <div class="amplitude-play-pause" id="play-pause"></div>
                                <div class="amplitude-next" id="next"></div>
                            </div>
                        </div>

                        <div id="volume-container">
                            <div class="volume-controls">
                                <div class="amplitude-mute amplitude-not-muted"></div>
                                <input type="range" class="amplitude-volume-slider"/>
                                <div class="ms-range-fix"></div>
                            </div>
                            <div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle-right"></div>
                        </div>
                    </div>

                    <div id="meta-container">
                        <span data-amplitude-song-info="name" class="song-name"></span>

                        <div class="song-artist-album">
                            <span data-amplitude-song-info="artist"></span>
                            <span data-amplitude-song-info="album"></span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Left Side Player -->

            <!-- Right Side Player -->
            <div id="amplitude-right">
                <!-- This container will be populated dynamically -->
            </div>
            <!-- End Right Side Player -->

        </div>
        <!-- End Amplitude Player -->
    </div>

    <!-- Include UX functions JS -->
    <script type="text/javascript">
          // helper code 
      if (window.location.hostname !== "sola.nekoweb.org") window.location.href = "https://sola.nekoweb.org/error/index.html";

        var album_playlist = {
            continue_next: true,
            "songs": [], // Leave this empty initially
            "start_song": 0,
            "autoplay": true
        };
    </script>

    <!-- JavaScript for reading filenames from a text file and populating songs -->
    <script type="text/javascript">
          // helper code 
      if (window.location.hostname !== "sola.nekoweb.org") window.location.href = "https://sola.nekoweb.org/error/index.html";

        // Path to the text file containing the list of filenames
        var filenameListPath = 'songs.txt';

        // Fetch the contents of the text file
        fetch(filenameListPath)
            .then(response => response.text())
            .then(data => {
                // Split the data by newline character to get an array of filenames
                var filenames = data.split('\n');

                // Iterate through each filename
                filenames.forEach(function(filename, index) { // Add 'index' parameter here
                    // Remove any leading or trailing whitespaces
                    filename = filename.trim();

                    // Extract the filename without extension
                    var name = filename.split('.')[0];

                    // Construct the song object and push it to the album_playlist.songs array
                    album_playlist.songs.push({
                        "name": name,
                        "artist": "NOISYREJECTS",
                        "album": "NO ALBUM",
                        "url": "../songs/" + filename,
                        "cover_art_url": "../album-art/art.png"
                    });

                    // Generate HTML for the current song
                    var songHTML = `
                        <div class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="${index}"> <!-- Use 'index' as song index -->
                            <div class="song-now-playing-icon-container">
                                <div class="play-button-container"></div>
                                <img class="now-playing" src="./img/now-playing.svg" />
                            </div>
                            <div class="song-meta-data">
                                <span class="song-title">${name}</span>
                                <span class="song-artist">NOISYREJECTS</span>
                            </div>
                        </div>
                    `;

                    // Append the song HTML to the #amplitude-right container
                    document.getElementById('amplitude-right').insertAdjacentHTML('beforeend', songHTML);
                });

                // Initialize Amplitude with the populated songs array
                Amplitude.init(album_playlist);

                // Delegate click event to the #amplitude-right container
                document.getElementById('amplitude-right').addEventListener('click', function(event) {
                    var target = event.target;

                    // Check if the clicked element is a song container
                    if (target.classList.contains('amplitude-song-container')) {
                        var songIndex = target.getAttribute('data-amplitude-song-index');
                        // Play the song associated with the clicked element
                        Amplitude.playSongAtIndex(songIndex);
                    }
                });
            })
            .catch(error => console.error('Error fetching the file:', error));
    </script>
</body>
</html>
