Sindbad~EG File Manager

<!-- Mixcloud Tracks -->
<div class="row gy-4" id="mixcloud-container" style="opacity: 0; transition: opacity 1s;"></div>

<style>
  #mixcloud-container {
    opacity: 0;
    transition: opacity 1s;
  }
</style>

<!-- Loading animation -->
<div id="loading" class="text-center mt-4" style="display: none;">
  <div class="spinner-border text-light" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

<!-- Load More button -->
<div class="text-center mt-4">
  <button id="loadMore" class="btn btn-outline-light btn-sm rounded-pill px-4 mt-3 browse-btn" style="display: none;">Load More</button>
</div>

<!-- Mixcloud PlayerWidget API -->
<script src="https://widget.mixcloud.com/media/js/widgetApi.js"></script>

<script>
  const container = document.getElementById("mixcloud-container");
  const loadMoreBtn = document.getElementById("loadMore");
  const loadingIndicator = document.getElementById("loading");
  const sortSelect = document.querySelector("select[aria-label='Sort by']");
  let nextPage = "https://api.mixcloud.com/JamOnRadio/cloudcasts/";
  let queue = [];
  let activePlayer = null;

  async function fetchMoreMixes() {
    if (!nextPage) return;
    loadingIndicator.style.display = "block"; // Show loading

    try {
      const response = await fetch(nextPage);
      const data = await response.json();

      data.data.sort((a, b) => new Date(b.created_time) - new Date(a.created_time));
      queue.push(...data.data);
      nextPage = data.paging.next || null;
    } catch (error) {
      console.error("Failed to fetch Mixcloud data:", error);
    } finally {
      loadingIndicator.style.display = "none"; // Hide loading
    }
  }

  function renderNextBatch(count = 6) {
    container.style.opacity = "0"; // Hide container before adding new tracks

    while (count > 0 && queue.length > 0) {
      const item = queue.shift();
      const mixcloudPath = encodeURIComponent(item.url.replace("https://www.mixcloud.com", ""));
      const col = document.createElement("div");
      col.className = "col-md-6";
      const iframeId = `mixcloud-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

      col.innerHTML = `
        <iframe 
          id="${iframeId}"
          width="100%" height="60"
          src="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&feed=${mixcloudPath}"
          frameborder="0"
          allow="autoplay; encrypted-media">
        </iframe>
      `;
      container.appendChild(col);

      const iframe = col.querySelector("iframe");
      iframe.addEventListener("load", () => {
        const widget = Mixcloud.PlayerWidget(iframe);
        widget.ready.then(() => {
          widget.events.play.on(() => {
            if (activePlayer && activePlayer !== widget) {
              activePlayer.pause();
            }
            activePlayer = widget;
          });
        });
      });

      count--;
    }

    // Fade-in container with 5-second delay
    setTimeout(() => {
      container.style.opacity = "1";

      // Show Load More button after fade-in if there are more tracks
      if (nextPage || queue.length > 0) {
        loadMoreBtn.style.display = "inline-block";
      }
    }, 5000);
  }

  async function initialLoad() {
    loadMoreBtn.style.display = "none"; // Hide initially
    await fetchMoreMixes();
    renderNextBatch(6);
  }

  loadMoreBtn.addEventListener("click", async () => {
    loadMoreBtn.style.display = "none"; // Hide button while loading
    container.style.opacity = "0"; // Reset opacity for fade-in
    if (queue.length < 6 && nextPage) {
      await fetchMoreMixes();
    }
    renderNextBatch(6);
  });

  sortSelect.addEventListener('change', () => {
    const sortBy = sortSelect.value;
    if (sortBy === 'date') {
      queue.sort((a, b) => new Date(b.created_time) - new Date(a.created_time));
    } else if (sortBy === 'name') {
      queue.sort((a, b) => a.name.localeCompare(b.name));
    } else if (sortBy === 'popularity') {
      queue.sort((a, b) => b.play_count - a.play_count);
    }

    container.innerHTML = '';
    container.style.opacity = "0"; // Reset opacity
    loadMoreBtn.style.display = "none"; // Hide button during re-render
    renderNextBatch(6);
  });

  initialLoad();
</script>