Function stemsBody

static/mobile/app.js:389–419

()

}

function stemsBody() {
  const c = state.current;
  if (!c) return `<div class="lib-note">Pick a track from your Library to start mixing.</div>`;
  if (c.loading) return `<div class="lib-note">Loading stems…</div>`;
  if (c.error) return `<div class="lib-note">${esc(c.error)}</div>`;
  const ll = lanes();
  if (!ll.length) return `<div class="lib-note">No stems available.</div>`;
  return `<div class="stems-grid">${ll.map((l, idx) => {
    const vol = state.vols[l.name] ?? 1;
    const muted = !!state.muted[l.name];
    const soloed = !!state.solo[l.name];
    const eff = !laneActive(l.name);
    const pct = Math.round(vol * 100) + "%";
    const mOn = muted ? `background:${l.color};color:#15100a;border-color:${l.color};` : "";
    const sOn = soloed ? "background:#f5b417;color:#1a1206;border-color:#f5b417;" : "";
    return `<div class="stem">
      <div class="stem-top">
        <div class="stem-dot" style="background:${l.color};box-shadow:0 0 8px ${l.color}88;opacity:${eff ? 0.4 : 1}"></div>
        <div class="stem-name" style="color:${eff ? "#6a6a72" : l.color}">${esc(l.label)}</div>
        <button class="ms-btn" style="${mOn}" data-action="mute" data-id="${l.name}">M</button>
        <button class="ms-btn" style="${sOn}" data-action="solo" data-id="${l.name}">S</button>
      </div>
      <div class="stem-wave">${stemWave(idx, l.color, vol, eff)}</div>
      <div class="fader" data-fader data-id="${l.name}">
        <div class="fader-track"></div>
        <div class="fader-fill" style="width:${pct};background:${eff ? "#46464e" : l.color}"></div>
        <div class="fader-knob" style="left:${pct};background:${eff ? "#8a8a90" : "#fff"}"></div>
      </div>
    </div>`;
  }).join("")}</div>`;
}

function analysisBody() {
  const a = state.current?.detail?.analysis;