<html> <head> <meta charset="UTF-8"> <!-- Load the player --> <script type="text/javascript" src="player.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="topics.css"> </head> <body> <div class="title"> <span class="episode_name">Coloured Nicks</span> <div class="refs_container"> <span>Quotes ▼</span> <div class="mouse_catcher"></div> <div class="refs"> <span data-id="α" class="ref"> <span class="ref_content"> <div class="source">#1 • Quote date</div> <div class="ref_title">Quote text</div> </span> <div class="ref_indices"> <span data-timestamp="176" class="timecode"><span class="ref_index">[α]</span><span class="time">2:56</span></span> </div> </span> <span data-id="β" class="ref"> <span class="ref_content"> <div class="source">#2 • Quote date</div> <div class="ref_title">Quote text</div> </span> <div class="ref_indices"> <span data-timestamp="312" class="timecode"><span class="ref_index">[β]</span><span class="time">5:12</span></span> </div> </span> </div> </div> <div class="refs_container"> <span>References ▼</span> <div class="mouse_catcher"></div> <div class="refs"> <a data-id="serge_rgb" href="http://example.com/" target="_blank" class="ref"> <span class="ref_content"> <div class="source">Source</div> <div class="ref_title">Title</div> </span> <div class="ref_indices"> <span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span> </div> </a> <a data-id="milton_forum" href="http://example.com/" target="_blank" class="ref"> <span class="ref_content"> <div class="source">Source</div> <div class="ref_title">Title</div> </span> <div class="ref_indices"> <span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[3]</span><span class="time">10:24</span></span> </div> </a> </div> </div> <span class="annotator_container">Annotator: <span class="annotator">Miblo</span></span> </div> <div class="player_container"> <div class="video_container" data-videoId="ug5WkCROkOk"></div> <div class="markers_container"> <div data-timestamp="60" class="marker authored cat_rendering research" data-ref="serge_rgb,milton_forum"> <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div> <div class="progress faded"> <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div> </div> <div class="progress main"> <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div> </div> </div> <div data-timestamp="176" class="marker" data-ref="α"> <div class="content"><span class="timecode">2:56</span>“Quote text”<sup>α</sup></div> <div class="progress faded"> <div class="content"><span class="timecode">2:56</span>“Quote text”<sup>α</sup></div> </div> <div class="progress main"> <div class="content"><span class="timecode">2:56</span>“Quote text”<sup>α</sup></div> </div> </div> <div data-timestamp="312" class="marker blackboard cat_mathematics" data-ref="β"> <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div> <div class="progress faded"> <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div> </div> <div class="progress main"> <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div> </div> </div> <div data-timestamp="624" class="marker" data-ref="milton_forum"> <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div> <div class="progress faded"> <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div> </div> <div class="progress main"> <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div> </div> </div> <div data-timestamp="642" class="marker"> <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div> <div class="progress faded"> <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div> </div> <div class="progress main"> <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div> </div> </div> </div> </div> <script> var player = new Player(document.querySelector(".player_container"), onRefChanged); window.addEventListener("resize", function() { player.updateSize(); }); document.addEventListener("keypress", function(ev) { switch (ev.key) { case 'n': case 'd': case 's': { player.jumpToNextMarker(); } break; case 'p': case 'a': case 'w': { player.jumpToPrevMarker(); } break; } }); var refTimecodes = document.querySelectorAll(".refs .ref .timecode"); for (var i = 0; i < refTimecodes.length; ++i) { refTimecodes[i].addEventListener("click", function(ev) { if (player) { var time = ev.currentTarget.getAttribute("data-timestamp"); player.setTime(parseInt(time, 10)); player.play(); ev.preventDefault(); ev.stopPropagation(); return false; } }); } var refSources = document.querySelectorAll(".refs .ref"); for (var i = 0; i < refSources.length; ++i) { refSources[i].addEventListener("click", function(ev) { if (player) { player.pause(); } }); } function onRefChanged(ref) { var sourceMenus = document.querySelectorAll(".refs_container"); for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex) { var SetMenu = 0; if (ref !== undefined && ref !== null) { var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref"); var refs = ref.split(","); for (var i = 0; i < refElements.length; ++i) { if (refs.includes(refElements[i].getAttribute("data-id"))) { refElements[i].classList.add("current"); SetMenu = 1; } else { refElements[i].classList.remove("current"); } } if(SetMenu) { sourceMenus[MenuIndex].classList.add("current"); } else { sourceMenus[MenuIndex].classList.remove("current"); } } else { sourceMenus[MenuIndex].classList.remove("current"); var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref"); for (var i = 0; i < refs.length; ++i) { refs[i].classList.remove("current"); } } } } </script> </body> </html>