diff --git a/ui/asciicast-annot.js b/ui/asciicast-annot.js
new file mode 100644
index 0000000..d903e5e
--- /dev/null
+++ b/ui/asciicast-annot.js
@@ -0,0 +1,32 @@
+// This is normal asciinema v1 recording with "var data =" line prepended.
+var data =
+{
+ "duration": 10.0,
+ "env": {
+ "TERM": "xterm",
+ "SHELL": "/bin/bash"
+ },
+ "version": 1,
+ "title": "dumb sample asciicast",
+ "height": 24,
+ "command": null,
+ "width": 80,
+ "annotations": [
+ {at:0.5, dur: 1, relx: 0.1, rely: 0.1, text: "annotation #1"},
+ {at:3.0, dur: 3, relx: 0.8, rely: 0.8, text: "annotation\n#2"}
+ ],
+ "stdout": [
+ [
+ 0,
+ "Just"
+ ],
+ [
+ 0.5,
+ " a dumb"
+ ],
+ [
+ 3.0,
+ " sample asciicast.\r\n"
+ ],
+ ]
+}
\ No newline at end of file
diff --git a/ui/index-annotations.html b/ui/index-annotations.html
new file mode 100644
index 0000000..8d0bb01
--- /dev/null
+++ b/ui/index-annotations.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui/js/player.js b/ui/js/player.js
index 499a797..1d8d290 100644
--- a/ui/js/player.js
+++ b/ui/js/player.js
@@ -28,6 +28,9 @@ var player = function(audioFile, containerElem, events) {
var init = function(audioFile, containerElem, events) {
Player.container = containerElem;
+ $('')
+ .appendTo(Player.container);
+
Player.termContainer = $('')
.appendTo(Player.container);
@@ -62,6 +65,11 @@ var player = function(audioFile, containerElem, events) {
Player.eventOff = 0;
Player.rem = 0;
Player.timerHandle = undefined;
+ Player.annotations = [];
+ if (events.annotations !== undefined) {
+ Player.annotations = events.annotations;
+ }
+ Player.annOff = 0;
Player.playTime = 0;
@@ -73,6 +81,7 @@ var player = function(audioFile, containerElem, events) {
Player.term.clear();
Player.term.reset();
Player.pos = 0;
+ Player.annOff = 0;
}
var i = back ? 0 : Player.eventOff;
@@ -81,6 +90,9 @@ var player = function(audioFile, containerElem, events) {
Player.pos + Player.termEvents[i][0] <= (t / 1000)) {
str += Player.termEvents[i][1];
Player.pos += Player.termEvents[i++][0];
+ if (Player.annOff < Player.annotations.length && Player.pos >= Player.annotations[Player.annOff].at) {
+ Player.annOff++;
+ }
}
i = i == Player.termEvents.length ? i - 1 : i;
@@ -108,6 +120,21 @@ var player = function(audioFile, containerElem, events) {
} else {
str = Player.termEvents[Player.eventOff][1];
Player.pos += Player.termEvents[Player.eventOff++][0];
+ if (Player.annOff < Player.annotations.length && Player.pos >= Player.annotations[Player.annOff].at) {
+ var ann = Player.annotations[Player.annOff++];
+ var off = $("#term").offset();
+ var w = $("#term").width();
+ var h = $("#term").height();
+ $("#annot").css({
+ position: "absolute",
+ left: off.left + w * ann.relx,
+ top: off.top + h * ann.rely,
+ "z-index": 10000,
+ visibility: "visible"
+ });
+ $("#annot").html(ann.text.replace("\n", "
"));
+ setTimeout(function() { $("#annot").css("visibility", "hidden"); }, ann.dur * 1000);
+ }
}
Player.term.write(str);