wplayer

Check-in [b7acfe7efc]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:We have the metadata now, so have an "info" button to pop up all the available data.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | master | trunk
Files: files | file ages | folders
SHA3-256:b7acfe7efcd826e133fc389c8aa43bf19222ea71bf9ac7f3554d9f109f34670a
User & Date: vandys 2018-06-13 22:32:35
Context
2019-02-25
03:14
When a prefix matches (usually, a directory), don't overflow search result with all the contents of that directory. check-in: 4ce7a18e62 user: vandys tags: master, trunk
2018-06-13
22:32
We have the metadata now, so have an "info" button to pop up all the available data. check-in: b7acfe7efc user: vandys tags: master, trunk
2018-06-12
23:32
Defend against non-ASCII check-in: 4031c3b991 user: vandys tags: master, trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to css/player.css.

11
12
13
14
15
16
17

















 width: 95%;
}
button {
 min-width: 40px;
 min-height: 25px;
 background: #939393;
}
























>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 width: 95%;
}
button {
 min-width: 40px;
 min-height: 25px;
 background: #939393;
}
#trackdope {
 display: none;
 background: white;
 z-index: 999;
 position: absolute;
 top: 10vh;
 left: 10vw;
 max-height: 80vh;
 width: 80vw;
 flex-wrap: wrap;
 overflow: auto;
}
#trackdope > span {
 flex: 1;
 padding: 5px;
 border: 1px solid black;
}

Changes to html/top.html.

2
3
4
5
6
7
8

9
10
11
12
13
14
15
..
23
24
25
26
27
28
29

30
31
32
33
34
35
36
<link rel="stylesheet" type="text/css" href="/css/player.css" />
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Web Player</title>
</head>
<body>

 <textarea rows="8" readonly id="pqueue"></textarea><br>
 <img onclick="unplayart();" style="display: none;" id="playart">
 <hr>
 <span id="nowplaying"></span><br>
 <table>
  <tr>
   <td>
................................................................................
    <button onclick="return seek(-10);">-10s</button>
    <button onclick="return seek(10);">+10s</button>
    <button onclick="return seek(60);">+1m</button>
    <button onclick="return seek(600);">+10m</button>
    <button onclick="return playNext();">>next</button>
    <button onclick="return shuffle();">shufl</button>
    <button onclick="return loveit();" id="lovebtn">love</button>

   </td>
   </td>
  </tr>
 </table>
 <hr>
 <button onclick="return go_up();">
  <img src="/imgs/player_eject.png" alt="Go Up" />







>







 







>







2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
..
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<link rel="stylesheet" type="text/css" href="/css/player.css" />
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Web Player</title>
</head>
<body>
 <div id="trackdope" onclick="return noInfo();"></div>
 <textarea rows="8" readonly id="pqueue"></textarea><br>
 <img onclick="unplayart();" style="display: none;" id="playart">
 <hr>
 <span id="nowplaying"></span><br>
 <table>
  <tr>
   <td>
................................................................................
    <button onclick="return seek(-10);">-10s</button>
    <button onclick="return seek(10);">+10s</button>
    <button onclick="return seek(60);">+1m</button>
    <button onclick="return seek(600);">+10m</button>
    <button onclick="return playNext();">>next</button>
    <button onclick="return shuffle();">shufl</button>
    <button onclick="return loveit();" id="lovebtn">love</button>
    <button onclick="return showInfo();">info</button>
   </td>
   </td>
  </tr>
 </table>
 <hr>
 <button onclick="return go_up();">
  <img src="/imgs/player_eject.png" alt="Go Up" />

Changes to js/player.js.

62
63
64
65
66
67
68




































































69
70
71
72
73
74
75
...
219
220
221
222
223
224
225

226
227
228
229
230
231

232
233
234
235
236
237
238
239
240
241
// Note current scroll position WRT current path
function markpos() {
    if (searchval.value == '') {
	var scroller = document.scrollingElement;
	pscroll[path] = scroller.scrollTop;
    }
}




































































// Restore to scroll position
function gopos() {
    if (searchval.value != '') {
	return;
    }
    if (path in pscroll) {
	var d = document.scrollingElement;
................................................................................
    return (fn.endsWith(".jpg") || fn.endsWith(".png"));
}

// Ask the server to extract the metadata for this track
// If we get it, update the window title so things like lock screen
//  hold something helpful.
function paint_metadata(s) {

    let req = new XMLHttpRequest();
    req.open("GET", s + "?metadata");
    req.onreadystatechange = function() {
	if (req.readyState == 4) {
	    if (req.status == 200) {
		let meta = JSON.parse(this.responseText);

		window.document.title =
		    (meta.artist || "") + " - " +
		    (meta.title || "");
	    } else {
		// No metadata available this time
		window.document.title = "WWW Player";
	    }
	}
    }
    req.send();







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>





|
>

|
|







62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
...
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
// Note current scroll position WRT current path
function markpos() {
    if (searchval.value == '') {
	var scroller = document.scrollingElement;
	pscroll[path] = scroller.scrollTop;
    }
}


//
// The following code deals with the "info" button and
//  its display of all the track metadata
//

// JSON metadata has come back from server
var meta_valid = false;
// If meta_data, this is the dict of values
var meta_data = null;
// The metadata above has been written into "trackdope"
//  and can thus be displayed.
var dope_valid = false;

// Build track metadata into "trackdope"
function build_dope() {
    // key->value dict
    for (let k in meta_data) {
	let v = meta_data[k];
	if (v == null) {
	    continue;
	}
	let val = k.toString() + ": " + meta_data[k].toString();
	let txt = document.createTextNode(val);
	let sp = document.createElement("span");
	sp.appendChild(txt);
	trackdope.appendChild(sp);
    }
}

// Show the track metadata info
function showInfo() {
    // Make it toggle (you can also just click on the window itself)
    if (trackdope.style.display == "flex") {
	return noInfo();
    }

    if (!meta_valid) {
	// No data to display
	return;
    }

    if (!dope_valid) {
	// Old info
	while (trackdope.firstChild) {
	    trackdope.removeChild(trackdope.firstChild);
	}

	// Current info
	build_dope();

	dope_valid = true;
    }

    // Display
    trackdope.style.display = "flex";

    return false;
}

// Un-show track metadata
function noInfo() {
    trackdope.style.display = "none";
    return false;
}


// Restore to scroll position
function gopos() {
    if (searchval.value != '') {
	return;
    }
    if (path in pscroll) {
	var d = document.scrollingElement;
................................................................................
    return (fn.endsWith(".jpg") || fn.endsWith(".png"));
}

// Ask the server to extract the metadata for this track
// If we get it, update the window title so things like lock screen
//  hold something helpful.
function paint_metadata(s) {
    dope_valid = meta_valid = false;
    let req = new XMLHttpRequest();
    req.open("GET", s + "?metadata");
    req.onreadystatechange = function() {
	if (req.readyState == 4) {
	    if (req.status == 200) {
		meta_data = JSON.parse(this.responseText);
		meta_valid = true;
		window.document.title =
		    (meta_data.artist || "") + " - " +
		    (meta_data.title || "");
	    } else {
		// No metadata available this time
		window.document.title = "WWW Player";
	    }
	}
    }
    req.send();