From 2f80f3d7710f7d37d48a3d2ab1ed646bbdce2e57 Mon Sep 17 00:00:00 2001
From: Astro <astro@spaceboyz.net>
Date: Sat, 29 Oct 2011 03:36:22 +0200
Subject: [PATCH] c3d2-web video-resources just like for datenspuren

---
 content/static/script/play-resources.js |   2 +-
 content/static/style/default.css        |  31 +++++++
 xsl/common.xsl                          | 102 ++++++++++++++++++++++--
 xsl/datenspuren/xhtml5.xsl              |  12 +--
 4 files changed, 132 insertions(+), 15 deletions(-)

diff --git a/content/static/script/play-resources.js b/content/static/script/play-resources.js
index c53f67141..1dbf87cad 100644
--- a/content/static/script/play-resources.js
+++ b/content/static/script/play-resources.js
@@ -120,7 +120,7 @@ $(document).ready(function() {
 	if (res.map(function(r) {
 			return r.type;
 		    }).some(canPlay)) {
-	    var liEl = $('<li></li>');
+	    var liEl = $('<li class="play-resource"></li>');
 	    $(this).before(liEl);
 	    var player = addButton(liEl, res);
 	}
diff --git a/content/static/style/default.css b/content/static/style/default.css
index 7618c3bbd..323eaa763 100644
--- a/content/static/style/default.css
+++ b/content/static/style/default.css
@@ -641,6 +641,37 @@ li audio, li video, li .poster {
     font-weight: bold;
 }
 
+.video-resource {
+    vertical-align: top;
+    width: 48%;
+    margin: 1em auto;
+    display: inline-block;
+    text-align: center;
+}
+.video-resource h4 {
+    line-height: 1em;
+    height: 2em;
+    vertical-align: bottom;
+}
+.video-resource img {
+    max-width: 95%;
+}
+.video-resource ul {
+    padding: 0;
+}
+.video-resource ul li.play-resource {
+    display: block;
+}
+.video-resource ul li {
+    display: inline-block;
+    margin: 0 0.8em;
+}
+.video-resource .size {
+    margin-left: 0.4em;
+    font-size: 85%;
+    color: #333;
+}
+
 p.blockquote {
         padding: .5em .5em .5em 2em;
         border-left: 20px solid #eee;
diff --git a/xsl/common.xsl b/xsl/common.xsl
index 22155c36a..4f8c09dce 100644
--- a/xsl/common.xsl
+++ b/xsl/common.xsl
@@ -312,11 +312,19 @@
   <!-- Resources/alternatives in HTML -->
 
   <xsl:template match="resource">
-    <ul>
-      <xsl:call-template name="resource-item"/>
-
-      <xsl:apply-templates mode="resource"/>
-    </ul>
+    <xsl:choose>
+      <xsl:when test="not(starts-with(@type, 'video/')) or count(resource[not(starts-with(@type, 'video/'))]) &gt; 0">
+	<!-- Is not only video/* -->
+	<ul>
+	  <xsl:call-template name="resource-item"/>
+	  <xsl:apply-templates mode="resource"/>
+	</ul>
+      </xsl:when>
+      <xsl:otherwise>
+	<!-- Video only -->
+	<xsl:call-template name="video-resource"/>
+      </xsl:otherwise>
+    </xsl:choose>
   </xsl:template>
 
   <xsl:template match="resource/alternative" mode="resource">
@@ -368,6 +376,76 @@
     </li>
   </xsl:template>
 
+  <xsl:template name="video-resource">
+    <section class="video-resource">
+      <h4>
+	<xsl:choose>
+	  <xsl:when test="@details-link">
+	    <a href="{@details-link}">
+	      <xsl:value-of select="@title"/>
+	    </a>
+	  </xsl:when>
+	  <xsl:otherwise>
+	    <xsl:value-of select="@title"/>
+	  </xsl:otherwise>
+	</xsl:choose>
+      </h4>
+      <ul>
+	<xsl:call-template name="video-resource-item"/>
+	<xsl:apply-templates mode="video-resource"/>
+
+	<xsl:if test="@feedback-link">
+	  <li class="feedback"><a href="{@feedback-link}">Feedback</a></li>
+	</xsl:if>
+      </ul>
+    </section>
+  </xsl:template>
+
+  <xsl:template match="resource/alternative" mode="video-resource">
+    <xsl:call-template name="video-resource-item">
+      <xsl:with-param name="title">
+	<xsl:choose>
+	  <xsl:when test="@title"><xsl:value-of select="@title"/></xsl:when>
+	  <xsl:otherwise><xsl:value-of select="../@title"/></xsl:otherwise>
+	</xsl:choose>
+      </xsl:with-param>
+    </xsl:call-template>
+  </xsl:template>
+
+  <xsl:template name="video-resource-item">
+    <xsl:variable name="href">
+      <xsl:call-template name="make-href">
+        <xsl:with-param name="href" select="@url"/>
+      </xsl:call-template>
+    </xsl:variable>
+
+    <li class="{name(.)}">
+      <!-- HTML5 dataset hints for play-resources.js poster -->
+      <xsl:if test="@poster">
+	<xsl:attribute name="data-poster">
+	  <xsl:value-of select="@poster"/>
+	</xsl:attribute>
+      </xsl:if>
+      <xsl:if test="@preview">
+	<xsl:attribute name="data-preview">
+	  <xsl:value-of select="@preview"/>
+	</xsl:attribute>
+      </xsl:if>
+
+      <!-- MIME type hinting works even in the browser -->
+      <a href="{$href}" type="{@type}" class="mime" rel="enclosure">
+	<xsl:call-template name="mime-for-human-short">
+	  <xsl:with-param name="mime" select="@type"/>
+	</xsl:call-template>
+      </a>
+
+      <span class="size">
+	<xsl:call-template name="format-filesize">
+	  <xsl:with-param name="value" select="@size"/>
+	</xsl:call-template>
+      </span>
+    </li>
+  </xsl:template>
 
   <!-- Helpers -->
 
@@ -429,6 +507,20 @@
     </xsl:choose>
   </xsl:template>
 
+  <xsl:template name="mime-for-human-short">
+    <xsl:param name="mime"/>
+
+    <xsl:choose>
+      <xsl:when test="@type='video/mp4'">MP4</xsl:when>
+      <xsl:when test="@type='video/webm'">WebM</xsl:when>
+      <xsl:when test="@type='video/ogg'">Ogg</xsl:when>
+      <xsl:when test="@type='video/avi'">AVI</xsl:when>
+      <xsl:when test="@type='video/x-flv'">FLV</xsl:when>
+      <xsl:when test="@type='application/x-bittorrent'">BitTorrent</xsl:when>
+      <xsl:otherwise><xsl:value-of select="@type"/></xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
   <xsl:template name="normalize-path">
     <xsl:param name="path"/>
 
diff --git a/xsl/datenspuren/xhtml5.xsl b/xsl/datenspuren/xhtml5.xsl
index a7b584d3a..66ce8e306 100644
--- a/xsl/datenspuren/xhtml5.xsl
+++ b/xsl/datenspuren/xhtml5.xsl
@@ -343,15 +343,9 @@
   </xsl:template>
   <xsl:template name="link-resource">
     <a href="{@url}" type="{@type}">
-      <xsl:choose>
-	<xsl:when test="@type='video/mp4'">MP4</xsl:when>
-	<xsl:when test="@type='video/webm'">WebM</xsl:when>
-	<xsl:when test="@type='video/ogg'">Ogg</xsl:when>
-	<xsl:when test="@type='video/avi'">AVI</xsl:when>
-	<xsl:when test="@type='video/x-flv'">FLV</xsl:when>
-	<xsl:when test="@type='application/x-bittorrent'">BitTorrent</xsl:when>
-	<xsl:otherwise><xsl:value-of select="@type"/></xsl:otherwise>
-      </xsl:choose>
+      <xsl:call-template name="mime-for-human-short">
+	<xsl:with-param name="mime" select="@type"/>
+      </xsl:call-template>
     </a>
     <span class="size">
       <xsl:call-template name="format-filesize">