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 63 insertions and 36 deletions:
light9/ascoltami/Light9AscoltamiUi.ts
63
36
0 comments (0 inline, 0 general)
light9/ascoltami/Light9AscoltamiUi.ts
➞
Show inline comments
 
import debug from "debug";
 
import { css, html, LitElement } from "lit";
 
import { customElement, property } from "lit/decorators.js";
 
import { classMap } from "lit/directives/class-map.js";
 
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 {

			




	
	
	
		
 
  return document.getElementById(id)!;

			




	
	
	
		
 
}

			




	
	
	
		
 
async function postJson(url: string, jsBody: Object) {

			




	
	
	
		
 
  return fetch(url, {

			




	
	
	
		
 
    method: "POST",

			




	
	
	
		
 
    headers: { "Content-Type": "applcation/json" },

			




	
	
	
		
 
    body: JSON.stringify(jsBody),

			




	
	
	
		
 
  });

			




	
	
	
		
 
}

			




	
	
	
		
 
@customElement("light9-ascoltami-ui")

			




	
	
	
		
 
export class Light9AscoltamiUi extends LitElement {

			




	
	
	
		
 
  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`

			




	
	
	
		
 
      .timeRow {

			




	
	
	
		
 
        margin: 14px;

			




	
	
	
		
 
        position: relative;

			




	
	
	
		
 
      }

			




	
	
	
		
 
      #overview {

			




	
	
	
		
 
        height: 60px;

			




	
	
		
 
@@ -56,58 +58,65 @@ export class Light9AscoltamiUi extends L

			




	
	
	
		
 
      #cursor {

			




	
	
	
		
 
        position: absolute;

			




	
	
	
		
 
        left: 0;

			




	
	
	
		
 
        top: 0;

			




	
	
	
		
 
        width: 100%;

			




	
	
	
		
 
        height: 100%;

			




	
	
	
		
 
      }

			




	
	
	
		
 
    `,

			




	
	
	
		
 
  ];

			




	
	
	
		
 
  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 {

			




	
	
	
		
 
    postJson("api/time", { pause: true });

			




	
	
	
		
 
  }

			




	
	
	
		
 
  onCmdPlay(ev?: MouseEvent): void {

			




	
	
	
		
 
    postJson("api/time", { resume: true });

			




	
	
	
		
 
  }

			




	
	
	
		
 
  onCmdIntro(ev?: MouseEvent): void {

			




	
	
	
		
 
    postJson("api/time", { t: this.times.intro, resume: true });

			




	
	
	
		
 
  }

			




	
	
	
		
 
  onCmdPost(ev?: MouseEvent): void {

			




	
	
		
 
@@ -141,27 +150,30 @@ export class Light9AscoltamiUi extends L

			




	
	
	
		
 
        return false;

			




	
	
	
		
 
      }

			




	
	
	
		
 
      return true;

			




	
	
	
		
 
    });

			




	
	
	
		
 
  }

			




	
	
	
		
 

			




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

			




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

			




	
	
	
		
 
      // helper laptop

			




	
	
	
		
 
      updateFreq = 10;

			




	
	
	
		
 
    }

			




	
	
	
		
 
    byId("updateReq").innerText = "" + updateFreq;

			




	
	
	
		
 

			




	
	
	
		
 
    (window as any).finishOldStyleSetup(this.times, updateFreq, (data: TimingUpdate) => {

			




	
	
	
		
 
      this.nextText = data.next;

			




	
	
	
		
 
      this.isPlaying = data.playing;

			




	
	
	
		
 
      this.currentDuration = data.duration;

			




	
	
		
 
@@ -176,24 +188,39 @@ export class Light9AscoltamiUi extends L

			




	
	
	
		
 
        zoomSpec: { t1: () => t1, t2: () => t2 },

			




	
	
	
		
 
        cursor: { t: () => data.t },

			




	
	
	
		
 
        audioY: () => 0,

			




	
	
	
		
 
        audioH: () => 60,

			




	
	
	
		
 
        zoomedTimeY: () => 60,

			




	
	
	
		
 
        zoomedTimeH: () => 40,

			




	
	
	
		
 
        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)
    





    


  

  







  


    




    








    
        Server instance: kallithea-749ff669b6-v9g5f-75
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support