Function loadTrackIntoStudio

static/js/catalog.js:513–570

(trackId)

}

async function loadTrackIntoStudio(trackId) {
  let track = tracks[trackId];
  if (!track) return;
  if (track.status === "unavailable") {
    showError("This track's audio is no longer available. Re-upload to restore it.");
    return;
  }
  const hadStoredAudio = Boolean(track.audioStems?.length);
  const token = ++_loadTrackToken;

  // Start peaks fetch immediately — runs in parallel with job-data fetch so it
  // resolves before wireUpAudio calls Multitrack.create. This prevents peaks.json
  // from competing with stem WAV fetches for Safari's 6-connection-per-origin limit.
  const peaksPromise = fetch(`/api/jobs/${trackId}/stems/peaks.json`)
    .then((r) => (r.ok ? r.json() : {}))
    .catch(() => ({}));

  // Always fetch fresh state so server-side changes (sections, analysis, stems)
  // are reflected — cached localStorage data can be stale.
  try {
    const res = await fetch(`/api/jobs/${trackId}`);
    if (token !== _loadTrackToken) return;
    if (res.ok) {
      const state = await res.json();
      track = stateMetadataToTrack(state, track);
      tracks[trackId] = track;
      saveState();
    } else if (res.status === 404) {
      track = { ...track, status: "unavailable" };
      tracks[trackId] = track;
      saveState();
      updateTrackStatus(trackId, "unavailable");
      showError("This track's audio is no longer available. Re-upload to restore it.");
      return;
    }
  } catch (e) { console.warn("[catalog] server sync failed, using stored track:", e); }

  if (token !== _loadTrackToken) return;
  // A reprocessing track may still carry the previous extraction's stems
  // (hadStoredAudio), but it isn't ready — loading it would replace the live
  // job-progress overlay with stale audio. Leave the progress UI in place.
  if (PROCESSING_STATUSES.has(track.status)) return;
  if (!track.audioStems?.length) return;
  if (track.status !== "done" && !hadStoredAudio) return;
  applyStoredStemSelection(track);
  setCurrentTrack(trackId);

  const urlInput = document.getElementById("url");
  if (urlInput && track.sourceUrl) {
    urlInput.value = track.sourceUrl.startsWith("local:")
      ? track.sourceUrl.slice(6)
      : track.sourceUrl;
  }

  applyTrackInfoToPanel(track);
  wireUpAudio(trackId, track.audioStems, track.duration || 0, track.thumb, track.mixUrl ?? null, track.title || "", peaksPromise, track.hasVideo ?? false);
  initSections(trackId, track.sections, track.duration || 0);
}