--- a/light9/ascoltami/Light9AscoltamiUi.ts	Thu Jun 02 23:24:09 2022 -0700
+++ b/light9/ascoltami/Light9AscoltamiUi.ts	Thu Jun 02 23:35:17 2022 -0700
@@ -7,6 +7,7 @@
 export { RdfdbSyncedGraph } from "../web/RdfdbSyncedGraph";
 export { Light9TimelineAudio } from "../web/light9-timeline-audio";
 import { classMap } from "lit/directives/class-map.js";
+import { TimingUpdate } from "./main";
 
 debug.enable("*");
 const log = debug("asco");
@@ -25,9 +26,11 @@
 export class Light9AscoltamiUi extends LitElement {
   graph!: SyncedGraph;
   times!: { intro: number; post: number };
-  currentDuration: number = 0;
   @property() nextText: string = "";
   @property() isPlaying: boolean = false;
+  @property() song: NamedNode | null = null;
+  @property() t: number = 0;
+  @property() currentDuration: number = 0;
   render() {
     return html`<rdfdb-synced-graph></rdfdb-synced-graph>
 
@@ -123,17 +126,11 @@
     }
     byId("updateReq").innerText = "" + updateFreq;
 
-    (window as any).finishOldStyleSetup(
-      this.times,
-      updateFreq,
-      this.currentDurationChanged.bind(this),
-      (t: string) => {
-        this.nextText = t;
-      },
-      (is: boolean) => {
-        this.isPlaying = is;
-      }
-    );
+    (window as any).finishOldStyleSetup(this.times, updateFreq, (data: TimingUpdate) => {
+      this.nextText = data.next;
+      this.isPlaying = data.playing;
+      this.currentDuration = data.duration;
+    });
   }
 
   constructor() {

--- a/light9/ascoltami/main.ts	Thu Jun 02 23:24:09 2022 -0700
+++ b/light9/ascoltami/main.ts	Thu Jun 02 23:35:17 2022 -0700
@@ -2,18 +2,23 @@
   return document.getElementById(id)!;
 }
 
-(window as any).finishOldStyleSetup = async (
-  times: { intro: number; post: number },
-  updateFreq: number,
-  currentDurationChanged: (d: number) => void,
-  setNextText: (t: string) => void,
-  setIsPlaying: (is: boolean) => void
-) => {
+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 } };
+}
+
+(window as any).finishOldStyleSetup = async (times: { intro: number; post: number }, updateFreq: number, timingUpdate: (data: TimingUpdate) => void) => {
   let currentHighlightedSong = "";
   // let lastPlaying = false;
 
   async function updateCurrent() {
-    const data = await (await fetch("api/time")).json();
+    const data: TimingUpdate = await (await fetch("api/time")).json();
     byId("currentSong").innerText = data.song;
     if (data.song != currentHighlightedSong) {
       showCurrentSong(data.song);
@@ -22,10 +27,8 @@
     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);
-    currentDurationChanged(data.duration);
     //   document.querySelector("#timeSlider").slider({ value: data.t, max: data.duration });
-    setIsPlaying(data.playing);
-    setNextText(data.next);
+    timingUpdate(data);
   }
 
   function showCurrentSong(uri: string) {