Changeset - eb5d8349c871
[Not reviewed]
default
0 2 0
drewp@bigasterisk.com - 3 years ago 2022-06-03 06:35:17
drewp@bigasterisk.com
pass timing updates in a simpler way
2 files changed with 23 insertions and 23 deletions:
0 comments (0 inline, 0 general)
light9/ascoltami/Light9AscoltamiUi.ts
Show inline comments
 
@@ -4,12 +4,13 @@ import { customElement, property } from 
 
import { NamedNode } from "n3";
 
import { getTopGraph } from "../web/RdfdbSyncedGraph";
 
import { SyncedGraph } from "../web/SyncedGraph";
 
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");
 

	
 
function byId(id: string): HTMLElement {
 
  return document.getElementById(id)!;
 
@@ -22,15 +23,17 @@ async function postJson(url: string, jsB
 
  });
 
}
 
@customElement("light9-ascoltami-ui")
 
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>
 

	
 
      <link rel="stylesheet" href="./style.css" />
 

	
 
      <h1>ascoltami <a href="metrics">[metrics]</a></h1>
 
@@ -120,23 +123,17 @@ export class Light9AscoltamiUi extends L
 
    if (navigator.userAgent.match(/Windows NT/)) {
 
      // helper laptop
 
      updateFreq = 10;
 
    }
 
    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() {
 
    super();
 
    this.bindKeys();
 
    //   byId("cmd-stop").addEventListener("click", (ev: Event) =>
light9/ascoltami/main.ts
Show inline comments
 
function byId(id: string): HTMLElement {
 
  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);
 
    }
 
    byId("currentTime").innerText = data.t.toFixed(1);
 
    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) {
 
    document.querySelectorAll(".songs div").forEach((row: Element, i: number) => {
 
      if (row.querySelector("button")!.dataset.uri == uri) {
 
        row.classList.add("currentSong");
0 comments (0 inline, 0 general)