wplayer

Check-in [f14fa0930f]
Login

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

Overview
Comment:Next track. Fiddle with "media ready" kind of events. - Had to keep an extra "play" because older Firefox didn't appear to deliver the events when starting.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | master | trunk
Files: files | file ages | folders
SHA3-256:f14fa0930f447d2b170d1ec8a2dc8806329b60f22671f6f7a01bf7f2b84c49c1
User & Date: ajv-899-334-8894@vsta.org 2016-01-30 23:08:12
Context
2016-01-31
01:08
Move some stuff to static HTML out of JS check-in: e0f7a0e0cf user: ajv-899-334-8894@vsta.org tags: master, trunk
2016-01-30
23:08
Next track. Fiddle with "media ready" kind of events. - Had to keep an extra "play" because older Firefox didn't appear to deliver the events when starting. check-in: f14fa0930f user: ajv-899-334-8894@vsta.org tags: master, trunk
15:01
Shuffle player/skip buttons check-in: d4791e8912 user: ajv-899-334-8894@vsta.org tags: master, trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to html/top.html.

20
21
22
23
24
25
26

27
28
29
30
31
32
33
34
   <td>
    <button onclick="return seek(-600);">-10m</button>
    <button onclick="return seek(-60);">-1m</button>
    <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>

   </td>
  </tr>
 </table>
 <hr>
 <span id="browser"></span>
 <script src="/js/player.js"></script>
</body>
</html>







>








20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
   <td>
    <button onclick="return seek(-600);">-10m</button>
    <button onclick="return seek(-60);">-1m</button>
    <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>
   </td>
  </tr>
 </table>
 <hr>
 <span id="browser"></span>
 <script src="/js/player.js"></script>
</body>
</html>

Changes to js/player.js.

24
25
26
27
28
29
30


31
32
33
34
35
36
37
..
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
...
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
144
145
146
147
148
149




150
151
152
153
154
155




156
157
var pcontents = null;

// Do we have something on the turntable right now?
var playing = false;

// Answer back on dir contents
function gotDir(req) {


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

    // Decode JSON
    pcontents = JSON.parse(req.responseText);
................................................................................
    var res = '<button onclick="return go_up();">\n'
    res += ' <img src="/imgs/player_eject.png" alt="Go Up" />\n'
    res += '</button>' + path + "<br>\n"

    // Directories (if any)
    if (pcontents.dirs.length > 0) {
	res += '<b>Directories</b>:<br>';
	var d, didx = 0;
	while (didx < pcontents.dirs.length) {
	    d = pcontents.dirs[didx];
	    res += '<button onclick="return go_dir(' + didx.toString() + ');">'
	    res += ' <img src="/imgs/player_play.png" alt="enter" />\n'
	    res += '</button>' + d + '<br>\n'
	    didx += 1;
	}
    }

    // Files (if any)
    if (pcontents.files.length > 0) {
	res += '<b>Files</b>:<br>';
	var f, fidx = 0;
	while (fidx < pcontents.files.length) {
	    f = pcontents.files[fidx];
	    res += '<button onclick="return go_file(' + fidx.toString() + ');">'
	    res += ' <img src="/imgs/player_play.png" alt="play" />\n'
	    res += '</button>' + f + '<br>\n'
	    fidx += 1;
	}
    }

    // Replace the HTML
    browser.innerHTML = res;
}

// Update playlist queue pane
function paintQueue() {
    var fidx = 0
    var res = '';
    while (fidx < playlist.length) {
	res += playlist[fidx] + '\n';
	fidx += 1;
    }
    pqueue.textContent = res;
}

// For current path, get contents from web server
function curdir() {
    // Flag this op is pending
................................................................................
    if (newTime >= 0) {
	player.currentTime = newTime;
    }
}

// End of current track, try to advance
function playNext() {




    if (playlist.length > 0) {
	nowplaying.textContent = player.src = playlist.shift();
	paintQueue();
	player.play();
    } else {
	player.removeEventListener("ended", playNext);
	playing = false;
	nowplaying.textContent = '';
    }
}






// Add file to playlist (or play if playlist empty)
function go_file(fidx) {





    // Assemble full filename
    var fname = "/media" + path + "/" + pcontents.files[fidx]
    if (!playing) {
	nowplaying.textContent = player.src = fname;
	player.addEventListener("ended", playNext);
	player.play();
	playing = true;
    } else {
	playlist.push(fname);
	paintQueue();
    }
    return false;
}

// Go up a level
function go_up() {
    if (pdepth == 0) {
	return;
    }
    var idx = path.lastIndexOf("/");
    path = path.slice(0, idx);
    pdepth -= 1;
    curdir();
    return false;
}

// Push to dir
function go_dir(didx) {




    path = path + "/" + pcontents.dirs[didx];
    pdepth += 1;
    curdir();
    return false;
}





// Initial browser window update
curdir();







>
>







 







<
|




<






<
|




<









<

|

<







 







>
>
>
>



|

|

<


>
>
>
>
>



>
>
>
>
>




<











|
|










>
>
>
>






>
>
>
>


24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
..
42
43
44
45
46
47
48

49
50
51
52
53

54
55
56
57
58
59

60
61
62
63
64

65
66
67
68
69
70
71
72
73

74
75
76

77
78
79
80
81
82
83
..
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
var pcontents = null;

// Do we have something on the turntable right now?
var playing = false;

// Answer back on dir contents
function gotDir(req) {
    var d, f;

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

    // Decode JSON
    pcontents = JSON.parse(req.responseText);
................................................................................
    var res = '<button onclick="return go_up();">\n'
    res += ' <img src="/imgs/player_eject.png" alt="Go Up" />\n'
    res += '</button>' + path + "<br>\n"

    // Directories (if any)
    if (pcontents.dirs.length > 0) {
	res += '<b>Directories</b>:<br>';

	for (var didx = 0; didx < pcontents.dirs.length; didx++) {
	    d = pcontents.dirs[didx];
	    res += '<button onclick="return go_dir(' + didx.toString() + ');">'
	    res += ' <img src="/imgs/player_play.png" alt="enter" />\n'
	    res += '</button>' + d + '<br>\n'

	}
    }

    // Files (if any)
    if (pcontents.files.length > 0) {
	res += '<b>Files</b>:<br>';

	for (var fidx = 0; fidx < pcontents.files.length; fidx++) {
	    f = pcontents.files[fidx];
	    res += '<button onclick="return go_file(' + fidx.toString() + ');">'
	    res += ' <img src="/imgs/player_play.png" alt="play" />\n'
	    res += '</button>' + f + '<br>\n'

	}
    }

    // Replace the HTML
    browser.innerHTML = res;
}

// Update playlist queue pane
function paintQueue() {

    var res = '';
    for (var fidx = 0; fidx < playlist.length; fidx++) {
	res += playlist[fidx] + '\n';

    }
    pqueue.textContent = res;
}

// For current path, get contents from web server
function curdir() {
    // Flag this op is pending
................................................................................
    if (newTime >= 0) {
	player.currentTime = newTime;
    }
}

// End of current track, try to advance
function playNext() {
    if (playing && !player.ended) {
	// Playing and user hit "next track"
	player.pause();
    }
    if (playlist.length > 0) {
	nowplaying.textContent = player.src = playlist.shift();
	paintQueue();
	playing = true;
    } else {
	nowplaying.textContent = '';
	playing = false;

    }
}

// Callback; media is ready, start the audio
function playNow() {
    player.play();
}

// 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
    var fname = "/media" + path + "/" + pcontents.files[fidx]
    if (!playing) {
	nowplaying.textContent = player.src = fname;

	player.play();
	playing = true;
    } else {
	playlist.push(fname);
	paintQueue();
    }
    return false;
}

// Go up a level
function go_up() {
    if ((pcontents == null) || (pdepth == 0)) {
	return false;
    }
    var idx = path.lastIndexOf("/");
    path = path.slice(0, idx);
    pdepth -= 1;
    curdir();
    return false;
}

// Push to dir
function go_dir(didx) {
    // Working on a previous click
    if (pcontents == null) {
	return false;
    }
    path = path + "/" + pcontents.dirs[didx];
    pdepth += 1;
    curdir();
    return false;
}

// Set up the player
player.addEventListener("ended", playNext);
player.addEventListener("loadeddata", playNow);

// Initial browser window update
curdir();