return false;

      }

      return true;

    });

  }

  async musicSetup() {

    // shoveled over from the vanillajs version

    const config = await (await fetch("api/config")).json();

    this.show = new NamedNode(config.show);

    this.times = config.times;

    document.title = document.title.replace("{{host}}", config.host);

    try {

      const h1 = document.querySelector("h1")!;

      h1.innerText = h1.innerText.replace("{{host}}", config.host);

    } catch (e) {}

    byId("nav").innerText = navigator.userAgent;

    var updateFreq = navigator.userAgent.indexOf("Linux") != -1 ? 10 : 2;

    if (navigator.userAgent.match(/Windows NT/)) {

      // helper laptop

      updateFreq = 10;

    }

    byId("updateReq").innerText = "" + updateFreq;

  }

  onOldStyleUpdate(data: TimingUpdate) {

    this.nextText = data.next;

    this.isPlaying = data.playing;

    this.currentDuration = data.duration;

    this.song = new NamedNode(data.song);

    this.overviewZoom = { duration: data.duration, t1: 0, t2: data.duration };

    const t1 = data.t - 2,

      t2 = data.t + 20;

    this.zoom = { duration: data.duration, t1, t2 };

    const timeRow = this.shadowRoot!.querySelector(".timeRow") as HTMLDivElement;

    const w = timeRow.offsetWidth;

    this.viewState = {

      zoomSpec: { t1: () => t1, t2: () => t2 },

      cursor: { t: () => data.t },

      audioY: () => 0,

      audioH: () => 60,

      zoomedTimeY: () => 60,

      zoomedTimeH: () => 40,

      fullZoomX: (sec: number) => (sec / data.duration) * w,

      zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,

      mouse: { pos: () => $V([0, 0]) },

    };

function byId(id: string): HTMLElement {

  return document.getElementById(id)!;

}

export interface TimingUpdate {

  // GET /ascoltami/time response

  duration: number;

  next: string; // e.g. 'play'

  playing: boolean;

  song: string;

  started: number; // unix sec

  t: number; // seconds into song

  state: { current: { name: string }; pending: { name: string } };

}

  let currentHighlightedSong = "";

  // let lastPlaying = false;

  const events = new EventSource("api/time/stream");

  events.addEventListener("message", (m)=>{

    const update = JSON.parse(m.data) as TimingUpdate

    updateCurrent(update)

    markUpdateTiming();

  })

  async function updateCurrent(data:TimingUpdate) {

    byId("currentSong").innerText = data.song;

    if (data.song != currentHighlightedSong) {

      showCurrentSong(data.song);

    }

    byId("currentTime").innerText = data.t.toFixed(1);

    byId("leftTime").innerText = (data.duration - data.t).toFixed(1);

    byId("leftAutoStopTime").innerText = Math.max(0, data.duration - times.post - data.t).toFixed(1);

    byId("states").innerText = JSON.stringify(data.state);

    //   document.querySelector("#timeSlider").slider({ value: data.t, max: data.duration });

    timingUpdate(data);

  }

  let recentUpdates: Array<number> = [];