This commit is contained in:
Zhi Wang 2022-01-18 14:52:04 -05:00
parent 67ba39a8f9
commit ebf8a30e4d
2 changed files with 65 additions and 53 deletions

View File

@ -80,20 +80,21 @@ function base64ToUint8array(base64) {
return array; return array;
} }
async function play_ctrl(term, session, start, total_dur, paused, shifted, prog) { // replay session
// term: xterm, path: session file to replay,
// start: start position to replay in percentile, range 0-100
// paused: callback whether to stop play
// prog: callback to update the progress bar
// shift: callback whether we should change position
// end: callback when playback is finished
async function replay_session(term, records, total_dur, start, paused, prog, end) {
var cur = 0 var cur = 0
var new_pos = -1
start = parseInt(total_dur * start / 100) start = parseInt(total_dur * start / 100)
term.reset() term.reset()
for (const item of session) { for (const item of records) {
new_pos = shifted()
if (new_pos != -1) {
return new_pos
}
// we will blast through the beginning of the session // we will blast through the beginning of the session
if (cur >= start) { if (cur >= start) {
// we are cheating a little bit here, we do not want to wait for too long // we are cheating a little bit here, we do not want to wait for too long
@ -112,49 +113,49 @@ async function play_ctrl(term, session, start, total_dur, paused, shifted, prog)
} }
} }
return -1 end()
} }
// replay session
// term: xterm, path: session file to replay,
// start: start position to replay in percentile, range 0-100
// paused: callback whether to stop play
// prog: callback to update the progress bar
// shift: callback whether we should change position
// end: callback when playback is finished
async function replay_session(term, path, start, paused, shifted, prog, end) {
var session
var total_dur = 0
var cur = 0
var new_pos = 0
var ret = 0
// read file from server function forwardScreen(term, records, end) {
await fetch(path) var cur = 0
.then(res => res.json()) end = parseInt(total_dur * end / 100)
.then(out => { term.reset()
session = out
}) for (const item of records) {
// we will blast through the beginning of the session
if (cur >= end) {
return
}
term.write(base64ToUint8array(item.Data))
cur += item.Duration
}
}
async function fetchAndParse(path, update) {
var records
var total_dur = 0
// read file from server, we need to await twice.
var res = await fetch(path)
if (!res.ok) {
return
}
records = await res.json()
//calculate the total duration //calculate the total duration
for (const item of session) { for (const item of records) {
item.Duration = parseInt(item.Duration / 1000000) item.Duration = parseInt(item.Duration / 1000000)
total_dur += item.Duration total_dur += item.Duration
} }
console.log("Total duration:", total_dur, "start replay on position", start) console.log("total_dur", total_dur)
update(records, total_dur)
while (true) {
ret = await play_ctrl(term, session, start, total_dur, paused, shifted, prog)
if (ret == -1) {
break
} }
start = ret
}
term.reset()
end()
}
function Init() { function Init() {
let term = createReplayTerminal(); let term = createReplayTerminal();

View File

@ -40,8 +40,7 @@
<button type="button" class="btn btn-primary btn-sm" style="margin-right: 3px;" onclick="playbtn()"> <button type="button" class="btn btn-primary btn-sm" style="margin-right: 3px;" onclick="playbtn()">
<img src="/assets/img/play.svg" id="play-btn" height="18px"> <img src="/assets/img/play.svg" id="play-btn" height="18px">
</button> </button>
<input type="range" class="form-range" min="0" max="100" id="replay-control" <input type="range" class="form-range" min="0" max="100" id="replay-control" onchange="seek(this.value)">
onchange="clicked = this.value">
</div> </div>
</div> </div>
@ -52,23 +51,26 @@
rc.value = 0 rc.value = 0
var icon = document.getElementById("play-btn") var icon = document.getElementById("play-btn")
var path = "/records/{{.fname}}"
var pause = false var pause = false
var clicked = -1
var records
var total_dur
// return values are not reliable with async functions
fetchAndParse("/records/{{.fname}}",
function (v1, v2) {
records = v1
total_dur = v2
})
function playbtn() { function playbtn() {
if (icon.src.includes("play")) { if (icon.src.includes("play")) {
icon.src = "/assets/img/pause.svg" icon.src = "/assets/img/pause.svg"
pause = false pause = false
replay_session(term, path, rc.value, replay_session(term, records, total_dur, rc.value,
function () { function () {
return pause return pause
}, },
function(){
var tmp = clicked
clicked = -1
return tmp
},
function (percent) { function (percent) {
rc.value = percent rc.value = percent
}, },
@ -81,6 +83,15 @@
pause = true pause = true
} }
} }
function seek(end) {
// pause the play if it is currently playing
if (!icon.src.includes("play")) {
playbtn()
}
forwardScreen(term, records, end)
}
</script> </script>
</body> </body>