c3d2/c3d2-web
c3d2
/
c3d2-web
38
3
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

c3d2-web video-resources just like for datenspuren

This commit is contained in:
Astro 2011-10-29 03:36:22 +02:00
parent 3a3260f0b9
commit 2f80f3d771
4 changed files with 132 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/static/script/play-resources.js
View File

@ -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);
}

31
content/static/style/default.css
View File

@ -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;

102
xsl/common.xsl
View File

@ -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"/>

12
xsl/datenspuren/xhtml5.xsl
View File

@ -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">