Function mixerScreen

static/mobile/app.js:436–484

()

}

function mixerScreen() {
  const c = state.current || { title: "No track selected", sub: "Pick one from your Library", initial: "♪", gradient: DEFAULT_GRADIENT, stemCount: 0 };
  const sourceTag = c.sub || "—";
  const stemTag = c.stemCount ? `${c.stemCount} stems` : "";
  const dur = curDuration();
  const body = state.mixerView === "stems" ? stemsBody() : analysisBody();
  const ready = engineReady && engineTrackId === state.current?.id;
  const preparing = !!state.current && !state.current.loading && !state.current.error && !ready;
  const canPlay = ready;
  const curIdx = state.current ? state.tracks.findIndex((t) => t.id === state.current.id) : -1;
  const hasPrev = curIdx > 0;
  const hasNext = curIdx >= 0 && curIdx < state.tracks.length - 1;

  return `<div class="screen scrl">
    <div class="pad">
      <div class="mx-head">
        <button class="icon-btn" data-action="tab" data-tab="library">${ICON.chevron}</button>
        <span class="now-playing">NOW PLAYING</span>
        <button class="icon-btn">${ICON.dots}</button>
      </div>
      <div class="cover-wrap">
        <div class="cover" style="${artStyle(c)}"><span>${artLabel(c)}</span></div>
        <div class="track-title">${esc(c.title)}</div>
        <div class="track-sub">${esc(c.sub)}</div>
        <div class="tags"><span class="tag">${esc(sourceTag)}</span>${stemTag ? `<span class="tag">${stemTag}</span>` : ""}</div>
      </div>
      <div class="wave">
        <div class="wave-bars" data-seek>${mainWaveform()}<div class="playhead" style="left:${state.progress * 100}%"></div></div>
        <div class="wave-times"><span class="cur">${fmt(state.progress * dur)}</span><span class="dur">${fmt(dur)}</span></div>
      </div>
      <div class="transport">
        <button class="t-step" data-action="prev" ${hasPrev ? "" : "disabled"}>${ICON.prev}</button>
        <button class="t-play" data-action="play" data-playing="${state.playing}" ${canPlay ? "" : "disabled style=opacity:.45"}>${state.playing ? ICON.pause(26, "#1a1206") : ICON.play(28, "#1a1206")}</button>
        <button class="t-step" data-action="next" ${hasNext ? "" : "disabled"}>${ICON.next}</button>
      </div>
      <div class="speed-row">
        <span class="speed-row-label">Speed</span>
        <input type="range" class="speed-slider" data-speed min="0" max="2" step="0.25" value="${state.speed}">
        <span class="speed-row-val">${state.speed % 1 === 0 ? state.speed.toFixed(1) : state.speed}x</span>
      </div>
      ${preparing ? '<div class="mx-prep">Preparing audio…</div>' : ""}
      <div class="segmented">
        <button class="${state.mixerView === "stems" ? "on" : ""}" data-action="mixview" data-view="stems">Stems</button>
        <button class="${state.mixerView === "analysis" ? "on" : ""}" data-action="mixview" data-view="analysis">Analysis</button>
      </div>
    </div>
    ${body}
  </div>`;
}

function libraryBody() {
  if (state.libState === "loading") {