From 258087e82f293b4770d9d36d0d3bc6a90cf797aa Mon Sep 17 00:00:00 2001
From: Astro <astro@spaceboyz.net>
Date: Mon, 15 Nov 2010 01:41:31 +0100
Subject: [PATCH] play-resources.js & Play button

---
 content/static/script/play-resources.js | 123 ++++++++++++++++++++++++
 content/static/style/default.css        |   5 +
 xsl/header.xsl                          |   5 +
 xsl/xhtml5.xsl                          |  30 +-----
 4 files changed, 135 insertions(+), 28 deletions(-)
 create mode 100644 content/static/script/play-resources.js

diff --git a/content/static/script/play-resources.js b/content/static/script/play-resources.js
new file mode 100644
index 000000000..94224ac25
--- /dev/null
+++ b/content/static/script/play-resources.js
@@ -0,0 +1,123 @@
+function addButton(container, res) {
+    var button = $('<a class="play">▶ Play</a>');
+    button.click(function() {
+	button.remove();
+
+	addPlayer(container, res);
+    });
+    container.append(button);
+}
+
+function addPlayer(container, res) {
+    var types = res.map(function(res) {
+			    return res.type;
+			});
+    /* Can we have <audio> or <video> please?
+     *
+     * Video must be prefered over audio because <audio> can play
+     * videos too.
+     */
+    var html5player;
+    if (types.some(canPlayVideo)) {
+	html5player = $('<video controls="controls" autoplay="autoplay"></video>');
+    } else if (types.some(canPlayAudio)) {
+	html5player = $('<audio controls="controls" autoplay="autoplay"></audio>');
+    }
+    /* ...install sources */
+    if (html5player) {
+	res.forEach(function(r) {
+	    var src = $('<source/>');
+	    src.attr('src', r.href);
+	    src.attr('type', r.type);
+	    html5player.append(src);
+	});
+    }
+
+    /* Anything else than HTML5? */
+    var fallback;
+    res.forEach(function(r) {
+	if (fallback)  /* Got one already */
+	    return;
+
+	if (r.type === 'audio/mpeg') {
+	    var movie = '/script/dewplayer-mini.swf?showtime=1&amp;autostart=1&amp;mp3=' + r.href;
+	    fallback = $('<object type="application/x-shockwave-flash" width="150" height="20">' +
+		'<param name="wmode" value="transparent"/>' +
+		'<param name="allowScriptAccess" value="always"/>' +
+		'<param name="movie"/>' +
+		'</object>');
+	    fallback.attr('data', movie);
+	    fallback.find('param[name="movie"]').attr('value', movie);
+	}
+    });
+
+    /* Add stuff to page */
+    if (html5player) {
+	if (fallback)
+	    html5player.append(fallback);
+	container.append(html5player);
+    } else if (fallback) {
+	container.append(fallback);
+    } else {
+	container.append('<p>Upps, das musst du wohl erstmal herunterladen</p>');
+    }
+}
+
+$(document).ready(function() {
+    /* Iterate over all resources in HTML output */
+    $('.resource').each(function() {
+	var resource = { href: $(this).find('a').attr('href'),
+			 type: $(this).find('a').attr('type') };
+
+	/* Get all associated alternatives */
+	var alternativeEls = $(this).nextUntil('.resource');
+	var alternatives = alternativeEls.find('a').
+	    map(function() {
+		    return { href: $(this).attr('href'),
+			     type: $(this).attr('type') };
+		}).
+	    toArray();
+
+	var res = [resource].concat(alternatives);
+
+	/* Check playability */
+	if (res.map(function(res) {
+			return res.type;
+		    }).some(canPlay)) {
+	    var liEl = $('<li></li>');
+	    alternativeEls.last().after(liEl);
+	    var player = addButton(liEl, res);
+	}
+    });
+});
+
+function canPlay(type) {
+    return canPlayAudio(type) ||
+	canPlayVideo(type) ||
+	canFallback(type);
+}
+
+/**
+ * From http://diveintohtml5.org/everything.html
+ */
+function canPlayAudio(type) {
+    var a = document.createElement('audio');
+    return !!(a.canPlayType &&
+	      a.canPlayType(type).replace(/no/, ''));
+}
+
+/**
+ * Partially from http://diveintohtml5.org/everything.html
+ *
+ * But we don't want audio/* as <video>
+ */
+function canPlayVideo(type) {
+    var v = document.createElement('video');
+    return !!(v.canPlayType &&
+	      v.canPlayType(type).replace(/no/, '') &&
+	      !(/^audio\//.test(type)));
+}
+
+function canFallback(type) {
+    return type === 'audio/mpeg';
+}
diff --git a/content/static/style/default.css b/content/static/style/default.css
index 63c04e554..0eb7bd8bd 100644
--- a/content/static/style/default.css
+++ b/content/static/style/default.css
@@ -765,3 +765,8 @@ a.flattr:hover {
     text-decoration: none;    
     border-bottom: none;
 }
+
+.play {
+    cursor: pointer;
+    font-weight: bold;
+}
diff --git a/xsl/header.xsl b/xsl/header.xsl
index 144db8706..c5763eb24 100644
--- a/xsl/header.xsl
+++ b/xsl/header.xsl
@@ -54,6 +54,11 @@
     <xsl:text>
 </xsl:text>
   </script>
+  <script src="{$baseurl}script/play-resources.js"
+          type="text/javascript" defer="defer">
+    <xsl:text>
+</xsl:text>
+  </script>
   
   </xsl:template>
 
diff --git a/xsl/xhtml5.xsl b/xsl/xhtml5.xsl
index b394f7c45..b3c35efc4 100644
--- a/xsl/xhtml5.xsl
+++ b/xsl/xhtml5.xsl
@@ -374,8 +374,6 @@
     <xsl:call-template name="resource-item"/>
 
     <xsl:apply-templates select="alternative" mode="resources-in-news"/>
-
-    <xsl:call-template name="insert-player"/>
   </xsl:template>
 
   <xsl:template match="resource/alternative" mode="resources-in-news">
@@ -392,7 +390,8 @@
       </xsl:call-template>
     </xsl:variable>
 
-    <li>
+    <!-- @class = "resource" | "alternative" -->
+    <li class="{name(.)}">
       <!-- MIME-Type ist nützlich z.B. für ftp:// URLs -->
       <a href="{$href}" type="{@type}" class="mime" rel="enclosure">
         <xsl:choose>
@@ -409,29 +408,4 @@
     </li>
   </xsl:template>
 
-  <xsl:template name="insert-player">
-    <xsl:if test="@type='audio/mpeg' or @type='application/ogg' or
-		  count(resource[@type='audio/mpeg' or @type='application/ogg']) &gt; 0">
-      <li>
-	<audio preload="none" controls="controls">
-	  <source src="{@url}" type="{@type}"/>
-	  <xsl:for-each select="alternative">
-	    <source src="{@url}" type="{@type}"/>
-	  </xsl:for-each>
-	</audio>
-      </li>
-    </xsl:if>
-    <xsl:if test="@type='video/webm' or @type='video/ogg' or @type='video/mp4' or
-		  count(resource[@type='video/webm' or @type='video/ogg' or @type='video/mp4']) &gt; 0">
-      <li>
-	<video preload="none" controls="controls">
-	  <source src="{@url}" type="{@type}"/>
-	  <xsl:for-each select="alternative">
-	    <source src="{@url}" type="{@type}"/>
-	  </xsl:for-each>
-	</video>
-      </li>
-    </xsl:if>
-  </xsl:template>
-
 </xsl:stylesheet>