2017-03-10 14:19:25 +00:00
< 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" >
< / head >
< body >
< div class = "title" >
2017-03-30 02:57:04 +00:00
< span class = "episode_name" > Coloured Nicks< / span >
2017-03-17 01:45:16 +00:00
< div class = "refs_container" >
2017-03-30 02:57:04 +00:00
< span > Quotes ▼ < / span >
2017-03-17 01:45:16 +00:00
< div class = "mouse_catcher" > < / div >
< div class = "refs" >
2017-03-30 02:57:04 +00:00
< span data-id = "α" class = "ref" >
2017-03-17 01:45:16 +00:00
< span class = "ref_content" >
2017-03-30 02:57:04 +00:00
< div class = "source" > #1 • Quote date< / div >
< div class = "ref_title" > Quote text< / div >
2017-03-17 01:45:16 +00:00
< / span >
< div class = "ref_indices" >
2017-03-30 02:57:04 +00:00
< span data-timestamp = "176" class = "timecode" > < span class = "ref_index" > [α ]< / span > < span class = "time" > 2:56< / span > < / span >
2017-03-17 01:45:16 +00:00
< / div >
2017-03-30 02:57:04 +00:00
< / span >
< span data-id = "β" class = "ref" >
2017-03-17 01:45:16 +00:00
< span class = "ref_content" >
2017-03-30 02:57:04 +00:00
< div class = "source" > #2 • Quote date< / div >
< div class = "ref_title" > Quote text< / div >
2017-03-17 01:45:16 +00:00
< / span >
< div class = "ref_indices" >
2017-03-30 02:57:04 +00:00
< span data-timestamp = "312" class = "timecode" > < span class = "ref_index" > [β ]< / span > < span class = "time" > 5:12< / span > < / span >
2017-03-17 01:45:16 +00:00
< / div >
2017-03-30 02:57:04 +00:00
< / 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" >
2017-03-17 01:45:16 +00:00
< span class = "ref_content" >
2017-03-30 02:57:04 +00:00
< div class = "source" > Source< / div >
< div class = "ref_title" > Title< / div >
2017-03-17 01:45:16 +00:00
< / span >
< div class = "ref_indices" >
2017-03-30 02:57:04 +00:00
< span data-timestamp = "60" class = "timecode" > < span class = "ref_index" > [1]< / span > < span class = "time" > 1:00< / span > < / span >
2017-03-17 01:45:16 +00:00
< / div >
< / a >
2017-03-30 02:57:04 +00:00
< a data-id = "milton_forum" href = "http://example.com/" target = "_blank" class = "ref" >
2017-03-17 01:45:16 +00:00
< span class = "ref_content" >
2017-03-30 02:57:04 +00:00
< div class = "source" > Source< / div >
< div class = "ref_title" > Title< / div >
2017-03-17 01:45:16 +00:00
< / span >
< div class = "ref_indices" >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-17 01:45:16 +00:00
< / div >
< / a >
< / div >
2017-03-11 02:48:11 +00:00
< / div >
2017-03-17 01:45:16 +00:00
< span class = "annotator_container" > Annotator: < span class = "annotator" > Miblo< / span > < / span >
2017-03-10 14:19:25 +00:00
< / div >
2017-03-17 01:45:16 +00:00
< div class = "player_container" >
< div class = "video_container" data-videoId = "ug5WkCROkOk" > < / div >
2017-03-11 02:48:11 +00:00
< div class = "markers_container" >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-11 02:48:11 +00:00
< div class = "progress faded" >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-11 02:48:11 +00:00
< / div >
< div class = "progress main" >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-11 02:48:11 +00:00
< / div >
< / div >
2017-03-30 02:57:04 +00:00
< div data-timestamp = "176" class = "marker" data-ref = "α" >
< div class = "content" > < span class = "timecode" > 2:56< / span > “ Quote text” < sup > α < / sup > < / div >
2017-03-11 02:48:11 +00:00
< div class = "progress faded" >
2017-03-30 02:57:04 +00:00
< div class = "content" > < span class = "timecode" > 2:56< / span > “ Quote text” < sup > α < / sup > < / div >
2017-03-11 02:48:11 +00:00
< / div >
< div class = "progress main" >
2017-03-30 02:57:04 +00:00
< div class = "content" > < span class = "timecode" > 2:56< / span > “ Quote text” < sup > α < / sup > < / div >
2017-03-11 02:48:11 +00:00
< / div >
< / div >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-11 02:48:11 +00:00
< div class = "progress faded" >
2017-03-30 02:57:04 +00:00
< div class = "content" > < span class = "timecode" > 5:12< / span > Matrix multiplication< sup > β < / sup > < span class = "categories" > < div class = "category mathematics" > < / div > < / span > < / div >
2017-03-11 02:48:11 +00:00
< / div >
< div class = "progress main" >
2017-03-30 02:57:04 +00:00
< div class = "content" > < span class = "timecode" > 5:12< / span > Matrix multiplication< sup > β < / sup > < span class = "categories" > < div class = "category mathematics" > < / div > < / span > < / div >
2017-03-11 02:48:11 +00:00
< / div >
< / div >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-11 02:48:11 +00:00
< div class = "progress faded" >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-11 02:48:11 +00:00
< / div >
< div class = "progress main" >
2017-03-30 02:57:04 +00:00
< 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 >
2017-03-11 02:48:11 +00:00
< / div >
< / div >
2017-03-30 02:57:04 +00:00
< div data-timestamp = "642" class = "marker" >
< div class = "content" > < span class = "timecode" > 10:42< / span > Some text. Simples!< / div >
2017-03-11 02:48:11 +00:00
< div class = "progress faded" >
2017-03-30 02:57:04 +00:00
< div class = "content" > < span class = "timecode" > 10:42< / span > Some text. Simples!< / div >
2017-03-11 02:48:11 +00:00
< / div >
< div class = "progress main" >
2017-03-30 02:57:04 +00:00
< div class = "content" > < span class = "timecode" > 10:42< / span > Some text. Simples!< / div >
2017-03-11 02:48:11 +00:00
< / 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;
2017-03-10 14:19:25 +00:00
2017-03-11 02:48:11 +00:00
case 'p':
case 'a':
case 'w': {
player.jumpToPrevMarker();
} break;
}
});
2017-03-10 14:19:25 +00:00
2017-03-11 02:48:11 +00:00
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();
2017-03-15 02:10:11 +00:00
ev.stopPropagation();
2017-03-11 02:48:11 +00:00
return false;
}
});
}
2017-03-10 14:19:25 +00:00
2017-03-11 02:48:11 +00:00
var refSources = document.querySelectorAll(".refs .ref");
for (var i = 0; i < refSources.length ; + + i ) {
refSources[i].addEventListener("click", function(ev) {
if (player) {
player.pause();
}
});
}
2017-03-10 14:19:25 +00:00
2017-03-11 02:48:11 +00:00
function onRefChanged(ref) {
2017-03-30 02:57:04 +00:00
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(",");
2017-03-15 02:10:11 +00:00
2017-03-30 02:57:04 +00:00
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");
2017-03-11 02:48:11 +00:00
} else {
2017-03-30 02:57:04 +00:00
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");
2017-03-11 02:48:11 +00:00
}
}
2017-03-10 14:19:25 +00:00
}
2017-03-11 02:48:11 +00:00
}
< / script >
< / body >
2017-03-10 14:19:25 +00:00
< / html >
