function Player( values, { format = value => value, index = false, initial = 0, autoplay = true, loop = false, alternate = false, width = 50, time = false, speedFactor = 1.5, debug = false } = {} ) { const delay0 = 1000; const alternate0 = alternate; const loop0 = loop; values = Array.from(values); let idx = initial; let isPlay = false; let isAlternate = null; let delay = 100; let isLoop = null; let isForward = true; let timer = null; let t0 = null; let t1 = null; var i = 0; var speed = [1, 60, 180, 360, 720, 1440, 2880, 14400]; delay = 100; const sf = ` font: 12px var(--sans-serif); font-variant-numeric: tabular-nums; display: flex; height: 33px; align-items: center; `; const icons = { play: html`${fas`play`}`, pause: html`${fas`pause`}`, stop: html`${fas`stop`}`, speedUp: html`${fas`chevron-up`}`, speedDown: html`${fas`chevron-down`}`, toRight: html`${fas`arrow-right`}`, toLeft: html`${fas`arrow-left`}`, alternate: html`${fas`exchange-alt`}`, loop: html`${fas`redo`}`, stepRight: html`${fas`step-forward`}`, stepLeft: html`${fas`step-backward`}` }; const form = html` `; const h = html` `; icons.speedUp.value = 0; function log(txt) { if (debug) console.log(txt); } function updateIconP() { const before = form.p.firstChild; const after = isPlay ? icons.pause : icons.play; form.p.replaceChild(after, before); } function updateForm() { form.i.valueAsNumber = idx; form.value = values[idx]; form.o.value = format(form.value, form.i.valueAsNumber, values); dispatchEvent(); } function dispatchEvent() { h.value = index ? idx : values[idx]; icons.speedUp.value = i; h.dispatchEvent(new CustomEvent("input", { bubbles: true })); } function resetTime() { t0 = new Date(); } function clearTime() { h.t.value = ''; } function updateTime() { const t1 = new Date(); const dt = (t1.getTime() - t0.getTime()) / 1000; if (time) h.t.value = `${dt.toFixed(2)} s`; } function step() { const first = 0; const last = values.length - 1; let move = true; if (isForward) { if (idx + speed[i] < last) { idx += speed[i]; } else if (isLoop) { if (isAlternate) { idx = last - 1; isForward = false; //updateIconW(); } else { idx = first; } } else { updateIconP(); move = false; } } else if (idx - speed[i] > first) { idx -= speed[i]; } else if (isLoop) { if (isAlternate) { idx = first + 1; isForward = true; //updateIconW(); } else { idx = last; } } else { move = false; } if (!move) { log('no move'); clearInterval(timer); isPlay = false; updateIconP(); } updateForm(); updateTime(); log(idx); } function setTimer() { step(); if (isPlay) timer = setTimeout(setTimer, delay); } function clickPlayPause() { if (isPlay) { log('clicked pause'); isPlay = false; clearTimeout(timer); } else { log('clicked play'); isPlay = true; resetTime(); if (isForward && idx === values.length - 1) idx = 0; if (!isForward && idx === 0) idx = values.length - 1; updateIconP(); setTimer(); } updateIconP(); } function clickStepLeft() { log('clicked step left'); if (!isPlay) { if (isForward) { isForward = false; // updateIconW(); } step(); } } function clickStepRight() { log('clicked step right'); if (!isPlay) { if (!isForward) { isForward = true; //updateIconW(); } step(); } } function clickSpeedUp() { console.log('clicked speed up'); if (i < 7) { i += 1; } icons.speedUp.value = i; //updateDelay(i); //updateDisplay(i); document.getElementById("btnDelay").innerHTML = i; document.getElementById("lblDelay").innerHTML = i; updateDisplay(i); console.log(i); } function clickSpeedDown() { log('clicked speed down'); if (i > 0) {i -= 1;} icons.speedUp.value = i; document.getElementById("btnDelay").innerHTML = i; document.getElementById("lblDelay").innerHTML = i; updateDisplay(i); log(delay); } function clickDelayDecrease() { delay /= speedFactor; console.log("clicked delay decrease"); } function clickDelayIncrease() { delay *= speedFactor; console.log("clicked delay increase"); } form.p.onclick = clickPlayPause; form.l.onclick = clickStepLeft; form.r.onclick = clickStepRight; form.u.onclick = clickSpeedUp; form.d.onclick = clickSpeedDown; form.sp.onclick = clickDelayDecrease; form.sl.onclick = clickDelayIncrease; form.i.oninput = event => { console.log('form.i event', event, form.i.valueAsNumber, form.i.value); idx = form.i.valueAsNumber; updateForm(); }; if (autoplay) clickPlayPause(); dispatchEvent(); return {first: h, delay: icons.speedUp}; }