Changeset - 1dbbf0db3036
[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 63 insertions and 36 deletions:
0 comments (0 inline, 0 general)
light9/ascoltami/Light9AscoltamiUi.ts
Show inline comments
 
@@ -9,10 +9,11 @@ import { PlainViewState } from "../web/L
 
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 @@ export class Light9AscoltamiUi extends L
 
  @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 @@ 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>
 
<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 @@ export class Light9AscoltamiUi extends L
 
    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 @@ export class Light9AscoltamiUi extends L
 
      };
 
    });
 
  }
 

	
 
  @property() songList: NamedNode[] = []
 
  constructor() {
 
    super();
 
    this.bindKeys();
 
@@ -194,6 +206,21 @@ export class Light9AscoltamiUi extends L
 
    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)