30:T562,md`## Options + \`format\`: display function - default: \`identity\` + \`index\`: returns index of value instead of value - default: \`false\` + \`initial\`: initial index - default: \`0\` + \`delay\`: time between 2 increments in ms - default \`1000/60\` ie. 60 fps + \`autoplay\`: starts upon creation - default: \`true\` + \`loop\`: starts over after run: default - default: \`false\` + \`alternate\`: change direction after run - default: \`false\` + \`width\`: slider width in px - default: \`300\` + \`time\`: display runtime - default: \`false\` + \`speedFactor\`: speed up/down factor - default: \`1.5\` + \`show\`: controls which buttons are displayed - default: \`null\` ie. all buttons + \`debug\`: console.logs some events - default: \`false\` ## Buttons: + ${btn(fas`play`)} to start play + ${btn(fas`pause`)} to pause + ${btn(fas`stop`)} to stop and reset + ${btn(fas`step-forward`)} to step forward + ${btn(fas`step-backward`)} to step backward + ${btn( fas`chevron-up` )} to speed up ie. decrease delay (divide by \`speedFactor\`) + ${btn( fas`chevron-down` )} to speed down ie. increase delay (multiply by \`speedFactor\`) + ${btn(fas`arrow-right`)} or ${btn(fas`arrow-left`)} to toggle direction + ${btn(fas`exchange-alt`)} to toggle "change direction when an end is reached" + ${btn(fas`redo`)} to toggle "restart from other end when an end is reached" `31:T1d5b,function Player( values, { format = (value) => value, index = false, initial = 0, delay = 1000 / 60, autoplay = true, loop = false, alternate = false, width = 300, time = false, speedFactor = 1.5, 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 subgroup = html`

${btns}

${format( values[idx] )}

`; const form = 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.toRight) 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() { form.value = index ? idx : values[idx]; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); } function resetTime() { t0 = new Date(); } function clearTime() { form.t.value = ""; } function updateTime() { const t1 = new Date(); const dt = (t1.getTime() - t0.getTime()) / 1000; if (time) form.t.value = `${dt.toFixed(2)} s`; } function step(isManualForward = null) { const _isForward = isManualForward === null ? isForward : isManualForward; const _canUpdateIsForward = isManualForward === null; if (isManualForward !== null) { log("_isForward", _isForward); log("_canUpdateIsForward", _canUpdateIsForward); } 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; if (_canUpdateIsForward) isForward = false; updateIconW(); } else { idx = first; } } else { move = false; } } else if (idx > first) { idx--; } else if (isLoop) { if (isAlternate) { idx = first + 1; if (_canUpdateIsForward) 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() { 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) { step(false); } } function clickStepRight() { log("clicked step right"); if (!isPlay) { step(true); } } 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.toRight) 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(form, { update, remoteClickPlayPause }); }32:[] 2e:{"title":"Player","cells":[{"id":0,"value":"md`# Player\n\nInspired by [https://observablehq.com/@mbostock/scrubber](https://observablehq.com/@mbostock/scrubber).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`To use in your notebook:\n\n~~~js\nimport {Player} from \"@oscar6echo/player\"\nimport {style as faStyle} from \"@airbornemint/fontawesome\"\nfaStyle({ solid: true })\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`## Examples\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"numbers = Array.from({length: 256}, (_, i) => i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"dates = Array.from({ length: 365 }, (_, i) => {\n const date = new Date(2019, 0, 1);\n date.setDate(i + 1);\n return date;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"letters = 'abcdefghijklmnopqrstuvwxyz'.split('')","pinned":true,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`### Format & Initial\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"viewof a = Player(dates, {\n autoplay: true,\n initial: 100,\n format: (date) =>\n date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" }),\n debug: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"md`\\`a\\` = ${a}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"md`### Index\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"viewof b = Player(letters, { index: true, delay: 1000 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"md`\\`b\\` = ${b}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`### Delay\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"viewof c = Player(numbers, { delay: 250 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`\\`c\\` = ${c}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"md`### Loop & Alternate\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"viewof d = Player(numbers, { loop: true, alternate: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`\\`d\\` = ${d}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"md`### Width & Time\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof e = Player(numbers, {\n width: 450,\n time: true,\n loop: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`\\`e\\` = ${e}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"md`### Select Buttons\n+ \\`show\\` is an object with keys among [\\`play\\`, \\`stop\\`, \\`stepLeft\\`, \\`stepRight\\`, \\`speedUp\\`, \\`speedDown\\`, \\`alternate\\`, \\`loop\\`] - default \\`null\\` i.e. all buttons are displayed\n+ if all values in \\`show\\` are \\`true\\`, only those mentioned are displayed\n+ if all values in \\`show\\` are \\`false\\`, only those mentioned are hidden\n+ if all values in \\`show\\` are \\`false\\` and \\`false\\`, those not mentioned are hidden \n+ \\`play\\` always shows, irrespective of input\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"viewof f = Player(letters, {\n delay: 250,\n loop: true,\n show: { play: true, stop: true }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":916,"value":"md`\\`f\\` = ${f}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"viewof g = Player(letters, {\n delay: 350,\n loop: true,\n show: { stepLeft: false, stepRight: false, alternate: false }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":918,"value":"md`\\`g\\` = ${g}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"md`### Programmatic Update\nTo update a player from outside, via third party code, use its \\`update()\\` method. \nFor more info about this approach see notebook [Nesting & Setting viewof](https://observablehq.com/@oscar6echo/nesting-viewof). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"{\n const text = 'update player g';\n const btn = html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"sb = `\nmargin-right: 0.3em;\nwidth: 2em;\nborder-radius:0;\nbackground-color:${bgc};\nborder: 1px solid #bbb;\noutline: none\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"bgc = '#f5f5f5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"bgc2 = '#cdcdcd'","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"function fas(s) {\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"import { style as faStyle } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}