Mercurial > code > home > repos > light9

annotate web/ascoltami/Light9SongListing.ts @ 2450:a4052905ca7d default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
notes about how rdfdb syncs, or should sync
author drewp@bigasterisk.com
date Mon, 03 Jun 2024 23:01:54 -0700
parents 06da5db2fafe
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2439
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
1 import debug from "debug";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
2 import { css, html, LitElement } from "lit";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
3 import { customElement, property, state } from "lit/decorators.js";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
4 import { NamedNode } from "n3";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
5 import { getTopGraph } from "../RdfdbSyncedGraph";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
6 import { show } from "../show_specific";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
7 import { SyncedGraph } from "../SyncedGraph";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
8 export { Light9TimelineAudio } from "../light9-timeline-audio";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
9 export { Light9CursorCanvas } from "../Light9CursorCanvas";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
10 export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
11 export { ResourceDisplay } from "../ResourceDisplay";
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
12 const log = debug("songs");
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
13
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
14 async function postJson(url: string, jsBody: Object) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
15 return fetch(url, {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
16 method: "POST",
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
17 headers: { "Content-Type": "applcation/json" },
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
18 body: JSON.stringify(jsBody),
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
19 });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
20 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
21
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
22 class SongRow {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
23 constructor(public uri: NamedNode, public label: string) {}
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
24 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
25
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
26 @customElement("light9-song-listing")
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
27 export class Light9SongListing extends LitElement {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
28 static styles = [
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
29 css`
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
30 td {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
31 font-size: 18pt;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
32 white-space: nowrap;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
33 padding: 0 10px;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
34 background: #9b9b9b;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
35 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
36 tr.current td {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
37 background: #dbf5e4;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
38 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
39 tr td:first-child {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
40 box-shadow: initial;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
41 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
42 tr.current td:first-child {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
43 box-shadow: inset 0px 2px 10px 0px black;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
44 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
45 button {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
46 min-height: 30pt;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
47 min-width: 65pt;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
48 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
49 `,
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
50 ];
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
51 graph!: SyncedGraph;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
52 @state() playingSong: NamedNode | null = null;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
53 @property() selectedSong: NamedNode | null = null;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
54 @state() songs: SongRow[] = [];
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
55 @state() isPlaying = false;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
56 constructor() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
57 super();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
58 getTopGraph().then((g) => {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
59 this.graph = g;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
60 this.graph.runHandler(this.getSongs.bind(this), "getsongs");
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
61 this.graph.runHandler(this.playState.bind(this), "playstate");
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
62 });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
63 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
64 getSongs() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
65 this.songs = [];
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
66 const U = this.graph.U();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
67 try {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
68 const playlist: NamedNode = this.graph.uriValue(show, U(":playList"));
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
69
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
70 (this.graph.items(playlist) as NamedNode[]).forEach((song: NamedNode) => {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
71 this.songs.push(new SongRow(song, this.graph.labelOrTail(song)));
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
72 });
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
73 } catch (e) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
74 // likely it's startup- no graph yet
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
75 log(e);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
76 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
77 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
78 playState() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
79 const U = this.graph.U();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
80 try {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
81 this.isPlaying = this.graph.booleanValue(U(":ascoltami"), U(":playing"));
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
82 this.playingSong = this.graph.uriValue(U(":ascoltami"), U(":song"));
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
83 } catch (e) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
84 log(e);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
85 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
86 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
87 render() {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
88 return html`
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
89 <table>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
90 ${this.songs.map((song) => {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
91 const playing = this.playingSong && song.uri.equals(this.playingSong);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
92 const selected = this.selectedSong && song.uri.equals(this.selectedSong);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
93 // could use <resource-display .uri=${song} noclick></resource-display>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
94 return html`
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
95 <tr class="song ${playing ? "current" : ""}" data-uri=${song.uri.value} @click=${this.clickSongRow}>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
96 <td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
97 <a href=${song.uri.value}>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
98 <span class="num">${song.label.slice(0, 2)}</span>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
99 <span class="song-name">${song.label.slice(2).trim()}</span>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
100 </a>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
101 </td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
102 <td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
103 <button ?disabled=${this.isPlaying || (this.selectedSong != null && !selected)}>${selected ? "Deselect" : "Select"}</button>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
104 </td>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
105 </tr>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
106 `;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
107 })}
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
108 </table>
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
109 `;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
110 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
111 clickSongRow(ev: MouseEvent) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
112 ev.preventDefault();
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
113 const row = (ev.target as HTMLElement).closest(".song") as HTMLElement;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
114 const song = new NamedNode(row.dataset.uri!);
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
115 if (this.selectedSong && song.equals(this.selectedSong)) {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
116 this.selectedSong = null;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
117 } else {
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
118 this.selectedSong = song;
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
119 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
120 this.dispatchEvent(new CustomEvent("selectsong", { detail: { song: this.selectedSong } }));
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
121 }
06da5db2fafe rewrite ascoltami to use the graph for more playback data
drewp@bigasterisk.com
parents:
diff changeset
122 }