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;

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) {