|
2050
|
1 async function onLoad() {
|
|
|
2 const config = await (await fetch('config')).json();
|
|
|
3 const times = config.times;
|
|
|
4 document.title = document.title.replace('{{host}}', config.host);
|
|
|
5 const h1 =document.querySelector('h1')!
|
|
|
6 h1.innerText = h1?.innerText.replace('{{host}}', config.host)
|
|
|
7 /*
|
|
|
8 $("#nav").text(navigator.userAgent);
|
|
|
9 var updateFreq = (navigator.userAgent.indexOf("Linux") != -1) ? 10 : 2;
|
|
|
10 if (navigator.userAgent.match(/Windows NT/)) {
|
|
|
11 // helper laptop
|
|
|
12 updateFreq = 10;
|
|
|
13 }
|
|
|
14 $("#updateReq").text(updateFreq);
|
|
|
15
|
|
|
16 var times = {% raw times %};
|
|
|
17
|
|
|
18 var currentDuration = 0;
|
|
|
19 var currentHighlightedSong = "";
|
|
|
20 var lastPlaying;
|
|
|
21 function updateCurrent(doneCallback) {
|
|
|
22 $.getJSON("time", {}, function (data, status) {
|
|
|
23 $("#currentSong").text(data.song);
|
|
|
24 if (data.song != currentHighlightedSong) {
|
|
|
25 showCurrentSong(data.song);
|
|
|
26 }
|
|
|
27 $("#currentTime").text(data.t.toFixed(1));
|
|
|
28 $("#leftTime").text((data.duration - data.t).toFixed(1));
|
|
|
29 $("#leftAutoStopTime").text(
|
|
|
30 Math.max(0, data.duration - times.post - data.t).toFixed(1));
|
|
|
31 $("#states").text(JSON.stringify(data.state));
|
|
|
32 currentDuration = data.duration;
|
|
|
33 $("#timeSlider").slider({value: data.t,
|
|
|
34 max: data.duration});
|
|
|
35 if (data.playing != lastPlaying) {
|
|
|
36 $(".playMode").removeClass("active");
|
|
|
37 $(data.playing ? "#cmd-play" : "#cmd-stop").addClass("active");
|
|
|
38 lastPlaying = data.playing;
|
|
|
39 }
|
|
|
40 $("#next").text(data.next);
|
|
|
41 doneCallback();
|
|
|
42 });
|
|
|
43 }
|
|
|
44 function showCurrentSong(uri) {
|
|
|
45 $(".songs div").each(function (i, row) {
|
|
|
46 row = $(row);
|
|
|
47 if (row.find("button").data("uri") == uri) {
|
|
|
48 row.addClass("currentSong");
|
|
|
49 } else {
|
|
|
50 row.removeClass("currentSong");
|
|
|
51 }
|
|
|
52 });
|
|
|
53 currentHighlightedSong = uri;
|
|
|
54 }
|
|
|
55 $.getJSON("songs", {}, function (data, status) {
|
|
|
56 $.each(data.songs, function (i, song) {
|
|
|
57 var button = $("<button>");
|
|
|
58 // link is just for dragging, not clicking
|
|
|
59 var link = $("<a>");
|
|
|
60 link.append($("<span>").addClass("num").text(song.label.slice(0,2)));
|
|
|
61 link.append($("<span>").addClass("song-name").text(song.label.slice(2).trim()));
|
|
|
62 link.attr("href", song.uri);
|
|
|
63 link.click(function () { button.click(); return false; });
|
|
|
64 button.append(link);
|
|
|
65 button.data(song);
|
|
|
66 button.click(function () {
|
|
|
67 $.post("song", button.data("uri"),
|
|
|
68 function (data, textStatus, xhr) {
|
|
|
69 showCurrentSong(song.uri);
|
|
|
70 });
|
|
|
71 });
|
|
|
72 $(".songs").append($("<div>").append(button));
|
|
|
73 });
|
|
|
74 });
|
|
|
75
|
|
|
76 var tojs = JSON.stringify;
|
|
|
77
|
|
|
78 $(document).keypress(function (ev) {
|
|
|
79
|
|
|
80 if (ev.which == 115) { $("#cmd-stop").click(); return false; }
|
|
|
81 if (ev.which == 112) { $("#cmd-play").click(); return false; }
|
|
|
82 if (ev.which == 105) { $("#cmd-intro").click(); return false; }
|
|
|
83 if (ev.which == 116) { $("#cmd-post").click(); return false; }
|
|
|
84
|
|
|
85 if (ev.key == 'g') {
|
|
|
86 $("#cmd-go").click();
|
|
|
87 return false;
|
|
|
88 }
|
|
|
89 return true;
|
|
|
90 });
|
|
|
91
|
|
|
92 $("#cmd-stop").click(function () { $.post("time", tojs({pause: true})); });
|
|
|
93 $("#cmd-play").click(function () { $.post("time", tojs({resume: true})); });
|
|
|
94 $("#cmd-intro").click(function () {
|
|
|
95 $.post("time", tojs({t: times.intro, resume: true}))
|
|
|
96 });
|
|
|
97 $("#cmd-post").click(function () {
|
|
|
98 $.post("time", tojs({t: currentDuration - times.post, resume: true}))
|
|
|
99 });
|
|
|
100 $("#cmd-go").click(function () {
|
|
|
101 $.post("go");
|
|
|
102 });
|
|
|
103 $("#cmd-out0").click(function () { $.post("output", tojs({sink: "0"})); })
|
|
|
104 $("#cmd-out1").click(function () { $.post("output", tojs({sink: "1"})); })
|
|
|
105
|
|
|
106 var pendingSlide = false;
|
|
|
107 $("#timeSlider").slider({
|
|
|
108 step: .01,
|
|
|
109 slide: function (event, ui) {
|
|
|
110 if (pendingSlide) {
|
|
|
111 return;
|
|
|
112 }
|
|
|
113 pendingSlide = true;
|
|
|
114 $.post("time", '{"t" : '+ui.value+'}',
|
|
|
115 function (data, status, xhr) {
|
|
|
116 pendingSlide = false;
|
|
|
117 });
|
|
|
118 },
|
|
|
119 });
|
|
|
120
|
|
|
121 var raf = window.requestAnimationFrame ||
|
|
|
122 window.mozRequestAnimationFrame ||
|
|
|
123 window.webkitRequestAnimationFrame;
|
|
|
124
|
|
|
125 var recentUpdates = [];
|
|
|
126 function onUpdate() {
|
|
|
127 recentUpdates.push(+new Date());
|
|
|
128 recentUpdates = recentUpdates.slice(Math.max(recentUpdates.length - 5, 0));
|
|
|
129 refreshUpdateFreqs();
|
|
|
130 }
|
|
|
131
|
|
|
132 function refreshUpdateFreqs() {
|
|
|
133 if (recentUpdates.length > 1) {
|
|
|
134 if (+new Date() - recentUpdates[recentUpdates.length - 1] > 1000) {
|
|
|
135 $("#updateActual").text("(stalled)");
|
|
|
136 $(".dimStalled").addClass("stalled");
|
|
|
137 return;
|
|
|
138 }
|
|
|
139
|
|
|
140 var avgMs = (recentUpdates[recentUpdates.length - 1] - recentUpdates[0]) / (recentUpdates.length - 1);
|
|
|
141 $("#updateActual").text(Math.round(1000 / avgMs));
|
|
|
142 }
|
|
|
143 }
|
|
|
144 setInterval(refreshUpdateFreqs, 2000);
|
|
|
145
|
|
|
146 function updateLoop() {
|
|
|
147 var whenDone = function () {
|
|
|
148 setTimeout(function () {
|
|
|
149 raf(updateLoop);
|
|
|
150 }, 1000 / updateFreq);
|
|
|
151 };
|
|
|
152 onUpdate();
|
|
|
153 updateCurrent(whenDone);
|
|
|
154 }
|
|
|
155 updateLoop();
|
|
|
156 */
|
|
|
157 }
|
|
|
158 onLoad() |
