Function extractScreen

static/mobile/app.js:544–563

()

}

function extractScreen() {
  const fileName = state.extractFile?.name;
  return `<div class="screen scrl">
    <div class="pad">
      <div class="h1">Extract stems</div>
      <div class="sub">Paste a link or upload audio to split into stems.</div>
      <div class="paste">${ICON.link}<input id="ext-url" class="ext-input" type="url" inputmode="url" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Paste YouTube or audio URL" value="${esc(state.extractUrl || "")}"></div>
      <button class="upload" data-action="pick-file">${ICON.upload}${fileName ? esc(fileName) : "Upload audio file"}</button>
      <input id="ext-file" type="file" accept="audio/*,video/mp4,.mp3,.wav,.flac,.m4a,.ogg" style="display:none">
      <div class="eyebrow">STEMS TO EXTRACT</div>
      <div class="chips">${EXTRACT_STEMS.map((s) => {
        const on = !!state.selected[s.id];
        const onStyle = on ? `border-color:${s.color};background:${s.color}1c;` : "";
        return `<button class="chip-btn ${on ? "on" : ""}" style="${onStyle}" data-action="chip" data-id="${s.id}"><div class="dot" style="background:${s.color}"></div><span class="nm">${s.name}</span>${on ? ICON.check : ""}</button>`;
      }).join("")}</div>
      <button class="cta" style="margin-top:22px" data-action="split">${ICON.scissors}Split stems</button>
      ${extractProgressCard()}
    </div>
  </div>`;
}

// Submit an extraction (URL or file) and follow it to completion.
async function startExtraction() {