--- a/light9/ascoltami/Light9AscoltamiUi.ts	Sun Jun 05 01:41:48 2022 +0000
+++ b/light9/ascoltami/Light9AscoltamiUi.ts	Sun Jun 05 01:42:39 2022 +0000
@@ -9,10 +9,11 @@
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../web/SyncedGraph";
 import { TimingUpdate } from "./main";
+import { ResourceDisplay } from '../web/ResourceDisplay';
 export { Light9TimelineAudio } from "../web/light9-timeline-audio";
 export { Light9CursorCanvas } from "../web/Light9CursorCanvas";
 export { RdfdbSyncedGraph } from "../web/RdfdbSyncedGraph";
-
+export { ResourceDisplay } from "../web/ResourceDisplay";
 const $V = Sylvester.Vector.create;
 
 debug.enable("*");
@@ -36,6 +37,7 @@
   @property() isPlaying: boolean = false;
   @property() show: NamedNode | null = null;
   @property() song: NamedNode | null = null;
+  @property() requestedSong: NamedNode | null = null;
   @property() currentDuration: number = 0;
   @property() zoom: Zoom;
   @property() overviewZoom: Zoom;
@@ -65,40 +67,47 @@
   render() {
     return html`<rdfdb-synced-graph></rdfdb-synced-graph>
 
-      <link rel="stylesheet" href="./style.css" />
-
-      <h1>ascoltami <a href="metrics">[metrics]</a></h1>
+<link rel="stylesheet" href="./style.css" />
 
-      <div class="timeRow">
-        <div id="timeSlider"></div>
-        <light9-timeline-audio id="overview" .show=${this.show} .song=${this.song} .zoom=${this.overviewZoom}></light9-timeline-audio>
-        <light9-timeline-audio id="zoomed" .show=${this.show} .song=${this.song} .zoom=${this.zoom}></light9-timeline-audio>
-        <light9-cursor-canvas id="cursor" .viewState=${this.viewState}></light9-cursor-canvas>
-      </div>
+<!-- <h1>ascoltami <a href="metrics">[metrics]</a></h1> -->
+<!-- <div>
+  songlist:
+  ${this.songList.map((song) => html`
+  <div>song: <resource-display .uri=${song}></resource-display>
+  </div>
+  `)}
+</div> -->
+<div class="timeRow">
+  <div id="timeSlider"></div>
+  <light9-timeline-audio id="overview" .show=${this.show} .song=${this.song} .zoom=${this.overviewZoom}>
+  </light9-timeline-audio>
+  <light9-timeline-audio id="zoomed" .show=${this.show} .song=${this.song} .zoom=${this.zoom}></light9-timeline-audio>
+  <light9-cursor-canvas id="cursor" .viewState=${this.viewState}></light9-cursor-canvas>
+</div>
 
-      <div class="commands">
-        <button id="cmd-stop" @click=${this.onCmdStop} class="playMode ${classMap({ active: !this.isPlaying })}">
-          <strong>Stop</strong>
-          <div class="key">s</div>
-        </button>
-        <button id="cmd-play" @click=${this.onCmdPlay} class="playMode ${classMap({ active: this.isPlaying })}">
-          <strong>Play</strong>
-          <div class="key">p</div>
-        </button>
-        <button id="cmd-intro" @click=${this.onCmdIntro}>
-          <strong>Skip intro</strong>
-          <div class="key">i</div>
-        </button>
-        <button id="cmd-post" @click=${this.onCmdPost}>
-          <strong>Skip to Post</strong>
-          <div class="key">t</div>
-        </button>
-        <button id="cmd-go" @click=${this.onCmdGo}>
-          <strong>Go</strong>
-          <div class="key">g</div>
-          <div id="next">${this.nextText}</div>
-        </button>
-      </div> `;
+<div class="commands">
+  <button id="cmd-stop" @click=${this.onCmdStop} class="playMode ${classMap({ active: !this.isPlaying })}">
+    <strong>Stop</strong>
+    <div class="key">s</div>
+  </button>
+  <button id="cmd-play" @click=${this.onCmdPlay} class="playMode ${classMap({ active: this.isPlaying })}">
+    <strong>Play</strong>
+    <div class="key">p</div>
+  </button>
+  <button id="cmd-intro" @click=${this.onCmdIntro}>
+    <strong>Skip intro</strong>
+    <div class="key">i</div>
+  </button>
+  <button id="cmd-post" @click=${this.onCmdPost}>
+    <strong>Skip to Post</strong>
+    <div class="key">t</div>
+  </button>
+  <button id="cmd-go" @click=${this.onCmdGo}>
+    <strong>Go</strong>
+    <div class="key">g</div>
+    <div id="next">${this.nextText}</div>
+  </button>
+</div>`;
   }
 
   onCmdStop(ev?: MouseEvent): void {
@@ -150,9 +159,12 @@
     this.show = new NamedNode(config.show);
     this.times = config.times;
     document.title = document.title.replace("{{host}}", config.host);
-    const h1 = document.querySelector("h1")!;
-    h1.innerText = h1.innerText.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/)) {
@@ -185,7 +197,7 @@
       };
     });
   }
-
+  @property() songList: NamedNode[] = []
   constructor() {
     super();
     this.bindKeys();
@@ -194,6 +206,21 @@
     getTopGraph().then((g) => {
       this.graph = g;
       this.musicSetup(); // async
+      this.graph.runHandler(this.graphChanged.bind(this), 'loadsongs');
     });
   }
+  graphChanged() {
+    this.songList = []
+    try {
+      const playList = this.graph.uriValue(//
+        this.graph.Uri('http://light9.bigasterisk.com/show/dance2022'),
+        this.graph.Uri(':playList'));
+      log(playList)
+      this.songList = this.graph.items(playList) as NamedNode[];
+    } catch (e) {
+      log('no playlist yet')
+    }
+    log(this.songList.length);
+
+  }
 }