2f:[{"id":"71305591ce86375860197230170139d5ca8f20b0d4d0ca8cfa282572696aac769290aedb3934fef6c41885d1398b59dbccbb91b9d67afb4f63c68953faf0b3b5","href":"https://static.observableusercontent.com/files/71305591ce86375860197230170139d5ca8f20b0d4d0ca8cfa282572696aac769290aedb3934fef6c41885d1398b59dbccbb91b9d67afb4f63c68953faf0b3b5","name":"John_Uniquely_laob2@1.mp4","type":"video/mp4","lastModified":1739304965731.529,"size":740304},{"id":"cbb19a98a70b2096adf596f05cac73931bba01058a8171dfd52f8dbf738779d1363d32465deef23d0b31ad6f266868fbe6422e200df7a8fedd0ab2c77bc978ff","href":"https://static.observableusercontent.com/files/cbb19a98a70b2096adf596f05cac73931bba01058a8171dfd52f8dbf738779d1363d32465deef23d0b31ad6f266868fbe6422e200df7a8fedd0ab2c77bc978ff","name":"jcvidalignment2.json","type":"application/json","lastModified":1739304965731.529,"size":1803},{"id":"ba3d3cfff97f9936ca4d0fa70975869afcdacd340c9541fd6484a4d6b2fa00c44281c7b20154f603dda17c8b037421851a371b1231543c582ca8125dbe609d10","href":"https://static.observableusercontent.com/files/ba3d3cfff97f9936ca4d0fa70975869afcdacd340c9541fd6484a4d6b2fa00c44281c7b20154f603dda17c8b037421851a371b1231543c582ca8125dbe609d10","name":"PrestigeEliteStd-Bd.woff2","type":"font/woff2","lastModified":1739304965731.529,"size":15948}] 2d:{"title":"Scoring the Typographic Surfacewith Video","cells":[{"id":0,"value":"md`# Scoring the Typographic Surface
*with Video*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"import { verseTag } from \"@dla/imports\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":867,"value":"verseTag","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"verseText = html`Uniquely,\n in the LAOB, \npublished works will link back,\n seamlessly,\n to the very notebooks \n that are\n animating, dynamically\n manipulating, or\n providing commentary on \n what their readers experience.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"verseSpanned = html`${addSpans(verseText)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`Now we can get the values for \\`offsetLeft\\` (in calculated \\`vw\\`) and \\`offsetTop\\` (in \\`px\\`) from each of the \\`\\` elements, and put them in an \\`Array\\` returned by our \\`wordOffsets()\\` method:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"offsets = wordOffsets(verseSpanned)","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"viewof play = Button(\"Play\", {\n reduce: async () => {\n loop();\n await Promises.delay(3500).then(() =>\n document.getElementById(\"thevid\").play()\n );\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"videoElem = html`

\n ${makeSpans()}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1050,"value":"// playEmbeddable = {\n// loop();\n// await Promises.delay(1000).then(() =>\n// document.getElementById(\"thevid\").play()\n// );\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":922,"value":"vurl = await FileAttachment(\"John_Uniquely_laob2@1.mp4\").url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"md`## Functions etc.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"wordOffsets = verseSpans => {\n let array = [];\n if (verseSpans == ``) return array;\n let vw = document.documentElement.clientWidth;\n let nodes = Array.from(verseSpans.children);\n nodes.forEach((node, index) => {\n if (node.offsetLeft != undefined) {\n array.push([(node.offsetLeft / vw) * 100, node.offsetTop]);\n }\n });\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"addSpans = verseElem => {\n // ensure that verseTag is registered:\n verseTag;\n let newText = ``;\n let text = verseElem.innerText;\n let wordStart = text.search(/\\S/); // nonwhitespace\n while (wordStart != -1) {\n newText += text.substr(0, wordStart);\n text = text.substr(wordStart);\n let wordEnd = text.search(/\\s/); // whitespace\n if (wordEnd == -1) wordEnd = text.length; // text ends with nonwhitespace\n newText += `` + text.substr(0, wordEnd) + ``;\n text = text.substr(wordEnd);\n wordStart = text.search(/\\S/);\n }\n return `${newText}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":632,"value":"loop = async () => {\n // for (let j = 0; j < 2; j++) {\n for (let i = 0; i < offsets.length; i++) {\n await scorepause(\"u\" + i, unitPauses[i].pause * 1000);\n }\n // }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"scorepause = async (span, pause) => {\n return await Promises.delay(pause).then(() => {\n let theElem = document.getElementById(`${span}`);\n theElem.classList.toggle('visible');\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1031,"value":"makeSpans()","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"makeSpans = () => {\n let s = ``;\n verseSpanned;\n let spans = Array.from(verseSpanned.children);\n spans.forEach((span, index) => {\n if (span.offsetLeft != undefined) {\n let offl = offsets[index][0];\n let offt = offsets[index][1];\n let wstr = index == 3 ? LAOB + \",\" : span.innerHTML;\n s += `${wstr}`;\n }\n });\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"mutable spans = ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"audioAlignment_JSON = FileAttachment(\"jcvidalignment2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"alignedWords_JSON = {\n let a = [];\n let extraTimeAtEndOfScore = 4;\n Object.keys(audioAlignment_JSON).forEach(segments => {\n audioAlignment_JSON[segments].forEach(speech => {\n a = a.concat(speech.wdlist);\n });\n });\n a.forEach((word, index) => {\n index < a.length - 1\n ? (word.gap = a[index + 1].start - word.end)\n : (word.gap = extraTimeAtEndOfScore);\n });\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"unitPauses = {\n let a = [];\n let l = alignedWords_JSON.length - 1;\n let p = 0;\n alignedWords_JSON.forEach((word, index) => {\n let o = {};\n o.id = 'u' + index;\n let i = index - 1;\n if (index > 0)\n p =\n alignedWords_JSON[i].end -\n alignedWords_JSON[i].start +\n alignedWords_JSON[i].gap;\n else\n p =\n alignedWords_JSON[l].end -\n alignedWords_JSON[l].start +\n alignedWords_JSON[l].gap;\n\n o.pause = p;\n a.push(o);\n });\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"vidcss = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1016,"value":"html`${LAOB}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"LAOB","pinned":true,"hidden":false,"mode":"ojs"},{"id":1014,"value":"import { LAOB } from \"@laob/laob\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"import { Button, Select, Text } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}