function Player( values, { format = value => value, index = false, initial = 0, delay = 1000 / 60, autoplay = true, loop = false, alternate = false, width = 300, time = false, speedFactor = 3, debug = false, show = null } = {} ) { const delay0 = delay; const alternate0 = alternate; const loop0 = loop; values = Array.from(values); let idx = initial; let isPlay = false; let isAlternate = null; let isLoop = null; let isForward = true; let timer = null; let t0 = null; let t1 = null; 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 btnDesc = [ ['p', 'play'], ['s', 'stop'], ['l', 'stepLeft'], ['r', 'stepRight'], ['u', 'speedUp'], ['d', 'speedDown'], ['w', 'toRight'], ['a', 'alternate'], ['b', 'loop'] ]; const func = !show ? (acc, v) => ((acc[v] = true), acc) : Object.values(show).every(e => e) ? (acc, v) => ((acc[v] = show[v] === true ? true : false), acc) : Object.values(show).every(e => !e) ? (acc, v) => ((acc[v] = show[v] === false ? false : true), acc) : (acc, v) => ((acc[v] = show[v] || true), acc); const showBtn = btnDesc.map(e => e[1]).reduce(func, {}); showBtn.play = true; const btns = btnDesc.map(([x, kind]) => { if (!showBtn[kind]) return ''; const icon = icons[kind]; return html``; // }); const form = html` `; const h = html` `; 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 updateIconW() { if (!showBtn.way) return; const before = form.w.firstChild; const after = isForward ? icons.toRight : icons.toLeft; form.w.replaceChild(after, before); } function updateIconStyleA() { if (!showBtn.alternate) return; form.a.style.background = isAlternate ? bgc2 : bgc; } function updateIconStyleB() { if (!showBtn.loop) return; form.b.style.background = isLoop ? bgc2 : bgc; } 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]; 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 < last) { idx++; } else if (isLoop) { if (isAlternate) { idx = last - 1; isForward = false; updateIconW(); } else { idx = first; } } else { move = false; } } else if (idx > first) { idx--; } 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 clickStop() { mutable selected_1 = [4] mutable music = "" mutable current_title = "Click 'play' to see findings" log('clicked stop'); clearInterval(timer); isPlay = false; idx = initial; delay = delay0; alternate = alternate0; loop = loop0; updateIconStyleA(); updateIconStyleB(); updateIconP(); updateForm(); clearTime(); } 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() { log('clicked speed up'); delay /= speedFactor; log(delay); } function clickSpeedDown() { log('clicked speed down'); delay *= speedFactor; log(delay); } function clickWay() { log('clicked toggle way'); isForward = !isForward; updateIconW(); } function clickAlternate() { log('clicked toggle alternate'); isAlternate = !isAlternate; updateIconStyleA(); } function clickLoop() { log('clicked toggle loop'); isLoop = !isLoop; updateIconStyleB(); } if (showBtn.play) form.p.onclick = clickPlayPause; if (showBtn.stop) form.s.onclick = clickStop; if (showBtn.stepLeft) form.l.onclick = clickStepLeft; if (showBtn.stepRight) form.r.onclick = clickStepRight; if (showBtn.speedUp) form.u.onclick = clickSpeedUp; if (showBtn.speedDown) form.d.onclick = clickSpeedDown; if (showBtn.way) form.w.onclick = clickWay; if (showBtn.alternate) form.a.onclick = clickAlternate; if (showBtn.loop) form.b.onclick = clickLoop; form.i.oninput = event => { // console.log('form.i event', event, form.i.valueAsNumber, form.i.value); idx = form.i.valueAsNumber; updateForm(); }; if (alternate) clickAlternate(); if (loop) clickLoop(); if (autoplay) clickPlayPause(); dispatchEvent(); if (showBtn.stop) disposal(form).then(clickStop); const update = i => { idx = i; updateForm(); }; const remoteClickPlayPause = () => { clickPlayPause(); }; return Object.assign(h, { update, remoteClickPlayPause }); }