light9 Changeset - 1dbbf0db3036

Changeset - 1dbbf0db3036

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

drewp@bigasterisk.com - 3 years ago 2022-06-05 01:42:39
drewp@bigasterisk.com

WIP graph-using songlist; trying to make request-then-play safer ux for song playback

1 file changed with 32 insertions and 5 deletions:

light9/ascoltami/Light9AscoltamiUi.ts

0 comments (0 inline, 0 general)

light9/ascoltami/Light9AscoltamiUi.ts

➞

Show inline comments

@@ @@ -6,16 +6,17 @@ import { NamedNode } from "n3"; @@
 import Sylvester from "sylvester";
 import { Zoom } from "../web/light9-timeline-audio";
 import { PlainViewState } from "../web/Light9CursorCanvas";
 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("*");
 const log = debug("asco");
 function byId(id: string): HTMLElement {
@@ @@ -33,12 +34,13 @@ export class Light9AscoltamiUi extends L @@
   graph!: SyncedGraph;
   times!: { intro: number; post: number };
   @property() nextText: string = "";
   @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;
   @property() viewState: PlainViewState | null = null;
   static styles = [
     css`
@@ @@ -64,17 +66,24 @@ export class Light9AscoltamiUi extends L @@
   ];
   render() {
     return html`<rdfdb-synced-graph></rdfdb-synced-graph>
       <link rel="stylesheet" href="./style.css" />
       <h1>ascoltami <a href="metrics">[metrics]</a></h1>
 <!-- <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="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 })}">
@@ @@ -147,15 +156,18 @@ export class Light9AscoltamiUi extends L @@
   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;
+    }
@@ @@ -182,18 +194,33 @@ export class Light9AscoltamiUi extends L @@
         fullZoomX: (sec: number) => (sec / data.duration) * w,
         zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,
         mouse: { pos: () => $V([0, 0]) },
       };
     });
+  }
+  @property() songList: NamedNode[] = []
   constructor() {
     super();
     this.bindKeys();
     this.zoom = this.overviewZoom = { duration: null, t1: 0, t2: 1 };
     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);
+  }
+}

0 comments (0 inline, 0 general)