wplayer

Check-in [e09cccc9df]
Login

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

Overview
Comment:Add back a style sheet. Add some actual handling for album art which shows up in the media directories.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | master | trunk
Files: files | file ages | folders
SHA3-256:e09cccc9df8ee8aea2be1cc5fd71a71932f5e0877c206d9e09c2c838cc213515
User & Date: vandyswa@gmail.com 2018-04-27 03:50:44
Context
2018-04-28
00:37
Side-by-side sucked on mobile. Try picture below queue, and click to make it go away. check-in: c3a1651815 user: vandyswa@gmail.com tags: master, trunk
2018-04-27
03:50
Add back a style sheet. Add some actual handling for album art which shows up in the media directories. check-in: e09cccc9df user: vandyswa@gmail.com tags: master, trunk
2018-03-13
02:11
Visual confirmation when you choose a file check-in: d25d5e6c6b user: ajv-899-334-8894@vsta.org tags: master, trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to html/top.html.

1
2
3
4
5
6
7
8
9
10

11
12
13
14
15
16
17
..
23
24
25
26
27
28
29

30
31
32
33
34
35
36
<html>
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/css/main.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" cols="80" readonly id="pqueue"></textarea>

 <hr>
 <span id="nowplaying"></span><br>
 <table>
  <tr>
   <td>
    <audio controls autoplay id="player" style="text-align: center;"></audio>
   </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>
  </tr>
 </table>
 <hr>
 <button onclick="return go_up();">
  <img src="/imgs/player_eject.png" alt="Go Up" />
 </button>

<
|







>







 







>







1

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
..
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>

<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" cols="80" readonly id="pqueue"></textarea>
 <img style="display: none;" id="playart">
 <hr>
 <span id="nowplaying"></span><br>
 <table>
  <tr>
   <td>
    <audio controls autoplay id="player" style="text-align: center;"></audio>
   </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" />
 </button>

Changes to js/player.js.

83
84
85
86
87
88
89



90
91
92
93
94
95
96
...
206
207
208
209
210
211
212





213
214
215
216
217
218










219
220
221
222
223
224
225
226
227





228
229
230
231
232
233
234
235
236
237
...
246
247
248
249
250
251
252









253
254
255
256
257
258
259
    var d, f, res;

    // Connection progress
    if ((req.readyState != 4) || (req.status != 200)) {
        return;
    }




    // Decode JSON
    pcontents = JSON.parse(req.responseText);

    //
    // Paint file browsing window
    //
    res = ''
................................................................................
// Update player position
function seek(delta) {
    var newTime = player.currentTime+delta;
    if (newTime >= 0) {
	player.currentTime = newTime;
    }
}






// End of current track, try to advance
function playNext() {
    lovebtn.style.background = "";
    if (playlist.length > 0) {
	var s = playlist.shift();










	player.src = s;

	// For good measure
	player.play();

	nowplaying.textContent = do_trim(unescape(s));
	paintQueue();
	playing = true;
    } else {





	nowplaying.textContent = '';
	playing = false;
    }
}

// Add file to playlist (or play if playlist empty)
function go_file(fidx) {
    // Working on a previous click
    if (pcontents == null) {
	return false;
................................................................................
    // Assemble full filename
    let fname = "/media" + path + "/" + pcontents.files[fidx]
    if (opts.noflac) {
        if (fname.endsWith(".flac")) {
            fname += "?asogg";
        }
    }









    if (!playing) {
	player.src = fname;
	nowplaying.textContent = do_trim(unescape(fname));
	player.play();
	playing = true;
    } else {
	playlist.push(fname);







>
>
>







 







>
>
>
>
>




|

>
>
>
>
>
>
>
>
>
>








<
>
>
>
>
>
|
|
<







 







>
>
>
>
>
>
>
>
>







83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
...
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244

245
246
247
248
249
250
251

252
253
254
255
256
257
258
...
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
    var d, f, res;

    // Connection progress
    if ((req.readyState != 4) || (req.status != 200)) {
        return;
    }

    // Stop showing art
    playart.style.display = "none";

    // Decode JSON
    pcontents = JSON.parse(req.responseText);

    //
    // Paint file browsing window
    //
    res = ''
................................................................................
// Update player position
function seek(delta) {
    var newTime = player.currentTime+delta;
    if (newTime >= 0) {
	player.currentTime = newTime;
    }
}

// Does this path look art-ish?
function isart(fn) {
    return (fn.endsWith(".jpg") || fn.endsWith(".png"));
}

// End of current track, try to advance
function playNext() {
    lovebtn.style.background = "";
    while (playlist.length > 0) {
	var s = playlist.shift();

	// Art; don't try to feed it to an <audio>
	var su = unescape(s);
	if (isart(su)) {
	    playart.src = s;
	    playart.style.display = "inline";
	    continue;
	}

	// Play it
	player.src = s;

	// For good measure
	player.play();

	nowplaying.textContent = do_trim(unescape(s));
	paintQueue();
	playing = true;


	return;
    }

    // Nothing to play
    nowplaying.textContent = '';
    playing = false;

}

// Add file to playlist (or play if playlist empty)
function go_file(fidx) {
    // Working on a previous click
    if (pcontents == null) {
	return false;
................................................................................
    // Assemble full filename
    let fname = "/media" + path + "/" + pcontents.files[fidx]
    if (opts.noflac) {
        if (fname.endsWith(".flac")) {
            fname += "?asogg";
        }
    }

    // Clicked on art, just show it
    if (isart(fname)) {
	playart.src = fname;
	playart.style.display = "inline";
	return;
    }

    // Play or queue a track
    if (!playing) {
	player.src = fname;
	nowplaying.textContent = do_trim(unescape(fname));
	player.play();
	playing = true;
    } else {
	playlist.push(fname);