Function wireFaders

static/mobile/app.js:769–836

()

// Faders + waveform seek need live pointer drag, so they're wired imperatively
// after each render (the rest of the UI uses click delegation below).
function wireFaders() {
  app.querySelectorAll("[data-fader]").forEach((el) => {
    el.addEventListener("pointerdown", (e) => {
      e.preventDefault();
      const id = el.dataset.id;
      const fill = el.querySelector(".fader-fill");
      const knob = el.querySelector(".fader-knob");
      const rect = el.getBoundingClientRect();
      const set = (cx) => {
        let v = (cx - rect.left) / rect.width;
        v = Math.max(0, Math.min(1, v));
        state.vols[id] = v;
        const pct = Math.round(v * 100) + "%";
        fill.style.width = pct;
        knob.style.left = pct;
        if (engine && laneActive(id)) engine.setGain(id, v);
      };
      set(e.clientX);
      el.setPointerCapture(e.pointerId);
      const mv = (ev) => set(ev.clientX);
      const up = () => {
        el.removeEventListener("pointermove", mv);
        el.removeEventListener("pointerup", up);
      };
      el.addEventListener("pointermove", mv);
      el.addEventListener("pointerup", up);
    });
  });

  const speedSlider = app.querySelector("[data-speed]");
  if (speedSlider) {
    speedSlider.addEventListener("input", () => {
      const rate = parseFloat(speedSlider.value);
      state.speed = rate;
      const valEl = speedSlider.parentElement?.querySelector(".speed-row-val");
      if (valEl) valEl.textContent = `${rate % 1 === 0 ? rate.toFixed(1) : rate}x`;
      if (engine) engine.setPlaybackRate(rate);
    });
  }

  const bars = app.querySelector("[data-seek]");
  if (bars) {
    bars.addEventListener("pointerdown", (e) => {
      if (!engine || !curDuration()) return;
      e.preventDefault();
      const rect = bars.getBoundingClientRect();
      const head = bars.querySelector(".playhead");
      const seek = (cx) => {
        const frac = Math.max(0, Math.min(1, (cx - rect.left) / rect.width));
        if (head) head.style.left = frac * 100 + "%";
        const cur = app.querySelector(".wave-times .cur");
        if (cur) cur.textContent = fmt(frac * curDuration());
        state.progress = frac;
        paintWaveProgress();
        seekToFraction(frac);
      };
      seek(e.clientX);
      bars.setPointerCapture(e.pointerId);