play-resources: chapters support

content/static/script/play-resources.js

@@ -31,7 +31,7 @@ function arrayForEach(array, iter) {
     }
 }
 
-function addButton(container, res) {
+function addButton(container, res, chapters) {
     var button = $('<a class="play" title="Abspielen"><span class="postercaption">▶ Play</span></a>');
     if (res.poster) {
 	var img = $('<img class="poster"/>');
@@ -54,7 +54,7 @@ function addButton(container, res) {
     button.click(function() {
 	button.remove();
 
-	addPlayer(container, res);
+	addPlayer(container, res, chapters);
 
 	var section = container.parents().
 	    filter(function() {
@@ -66,7 +66,16 @@ function addButton(container, res) {
     container.append(button);
 }
 
-function addPlayer(container, res) {
+function parseTime(time) {
+    var parts = time.split(":"), part;
+    var r = 0;
+    while((part = parts.shift())) {
+	r = r * 60 + parseInt(part);
+    }
+    return r;
+}
+
+function addPlayer(container, res, chapters) {
     var types = arrayMap(res, function(res) {
 	return res.type;
     });
@@ -127,6 +136,30 @@ function addPlayer(container, res) {
 	if (fallback)
 	    html5player.append(fallback);
 	container.append(html5player);
+	if (chapters[0]) {
+	    var dl = $('<dl class="chapters"></dl>');
+	    var prevStart;
+	    chapters.find('chapter').each(function() {
+		var title = this.getAttribute('title');
+		var start = this.getAttribute('start');
+		var href = this.getAttribute('href');
+		if (start && start != prevStart) {
+		    var dt = $('<dt><a href="#"></a></dt>');
+		    var dt_a = dt.find('a');
+		    dt_a.text(start);
+		    dt_a.click(function(ev) {
+			ev.preventDefault();
+			html5player[0].currentTime = parseTime(start);
+		    });
+		    dl.append(dt);
+		}
+		prevStart = start;
+		var dd = $('<dd></dd>');
+		dd.text(title);
+		dl.append(dd);
+	    });
+	    container.append(dl);
+	}
     } else if (fallback) {
 	container.append(fallback);
     } else {
@@ -164,7 +197,7 @@ $(document).ready(function() {
 	}), canPlay)) {
 	    var liEl = $('<li class="play-resource"></li>');
 	    $(this).before(liEl);
-	    var player = addButton(liEl, res);
+	    var player = addButton(liEl, res, $(this).find('chapters'));
 	}
     });
   } catch (x) {

content/static/style/default.css

@@ -717,6 +717,26 @@ li audio, li video, li .poster {
     color: #333;
 }
 
+.chapters {
+    margin: 0.5em auto;
+}
+.chapters dt, .chapters dd {
+    line-height: 2em;
+    margin: 0;
+    padding: 0;
+}
+.chapters dt {
+    width: 8em;
+    text-align: right;
+    margin-bottom: -2em;
+}
+.chapters dt:after {
+    content: '';
+}
+.chapters dd {
+    margin-left: 10em;
+}
+
 p.blockquote {
         padding: .5em .5em .5em 2em;
         border-left: 20px solid #eee;