--- a/.hgignore Fri Nov 23 19:13:50 2012 +0100
+++ b/.hgignore Mon Nov 26 18:42:56 2012 +0100
@@ -2,4 +2,6 @@
syntax: regexp
^\.project$
syntax: regexp
-^\.hgcheck$
\ No newline at end of file
+^\.hgcheck$
+syntax: regexp
+^integration/js/hashcut\.js$
\ No newline at end of file
--- a/integration/css/common.css Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/css/common.css Mon Nov 26 18:42:56 2012 +0100
@@ -194,7 +194,6 @@
.content{
width: 960px;
min-height: 750px;
- background: url(../img/bg-degrade.png) 0 0 repeat-x;
}
/* popin */
.popin{
@@ -533,20 +532,9 @@
height: 100%;
}
.mashup-frise .frise-segment {
- background-image: url(../img/border-right-segment.png);
- background-repeat: repeat-y;
- background-position: right top;
- -moz-box-shadow: inset 0px 1px 1px 0px #666;
- -webkit-box-shadow: inset 0px 1px 1px 0px #666;
- box-shadow: inset 0px 1px 1px 0px #666;
-}
-.mashup-frise .frise-segment:first-child{
- -moz-box-shadow: inset 1px 1px 1px 0px #666;
- -webkit-box-shadow: inset 1px 1px 1px 0px #666;
- box-shadow: inset 1px 1px 1px 0px #666;
-}
-.mashup-frise .frise-segment:last-child{
- background-image: none;
+ -moz-box-shadow: inset 1px 1px 1px #333333;
+ -webkit-box-shadow: inset 1px 1px 1px #333333;
+ box-shadow: inset 1px 1px 1px #333333;
}
.frise-segment.active, .mashup-frise .frise-segment.active {
background-image: url(../img/pinstripe-purple.png);
@@ -948,3 +936,30 @@
a.Ldt-Social-Mail:hover {
background-position: -72px -24px;
}
+
+
+.media-segment-list-inner {
+ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/bg-segments.png);
+}
+
+.media-segment-section {
+ position: absolute; height: 8px; cursor: pointer;
+ -moz-box-shadow: inset 1px 1px 1px #808080;
+ -webkit-box-shadow: inset 1px 1px 1px #808080;
+ box-shadow: inset 1px 1px 1px #808080;
+}
+
+.media-segment-popin h3, .media-found-popin h3{
+ padding: 0;
+ color: #de2500;
+ margin-bottom: 4px;
+ font-weight: 600;
+}
+
+.media-segment-popin p{
+ font-size: 12px;
+}
+
+.media-segment-popin span{
+ color: #7628df;
+}
--- a/integration/css/edition.css Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/css/edition.css Mon Nov 26 18:42:56 2012 +0100
@@ -163,7 +163,6 @@
position: absolute; right: 10px; bottom: 10px;
}
-
.media-segments h2{
color: #30036d;
font-size: 14px;
@@ -177,6 +176,21 @@
position: relative;
}
+.media-segment-popin .pointer{
+ margin-left: 140px
+}
+
+.media-segment-popin {
+ padding-top: 12px; overflow: hidden;
+ top: 2px; width: 300px; margin-left: -151px;
+ display: none;
+}
+
+.media-segment-popin p{
+ margin-right: 155px;
+ font-size: 12px;
+}
+
.media-found-segments {
clear: both; padding-top: 5px;
}
@@ -189,42 +203,12 @@
padding-bottom: 1px; position: relative;
}
-.media-segment-list-inner {
- position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/bg-segments.png);
-}
-
-.media-segment-section {
- position: absolute; height: 8px;
-}
-
.media-current-section {
background: url(../img/pinstripe-purple.png);
top: -2px; bottom: -2px; margin-left: -1px; padding: 2px 1px;
position: absolute;
}
-.media-segment-popin .pointer{
- margin-left: 140px
-}
-.media-segment-popin {
- padding-top: 12px; overflow: hidden;
- top: 2px; width: 300px; margin-left: -151px;
- display: none;
-}
-.media-segment-popin h3, .media-found-popin h3{
- padding: 0;
- color: #de2500;
- margin-bottom: 4px;
- font-weight: 600;
-}
-.media-segment-popin p{
- margin-right: 155px;
- font-size: 12px;
-}
-.media-segment-popin span{
- color: #7628df;
-}
-
.media-found-popin {
padding-top: 12px; overflow: hidden;
top: 2px; width: 170px; display: none;
--- a/integration/css/hashcut.css Fri Nov 23 19:13:50 2012 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,88 +0,0 @@
-.more-info-wrap{
- padding-right: 10px;
-}
-.more-info{
- text-align: left;
-}
-.more-info th{
- font-weight: 600;
- font-style: normal;
- font-size: 12px;
- width: 78px;
-}
-.more-info td{
- padding-bottom: 12px;
- font-size: 12px;
-}
-.more-info a{
- text-decoration: underline;
-}
-.more-info a:hover{
- text-decoration: none;
-}
-.info-title a{
- color:#30036d;
- font-size: 14px;
- font-weight: bold;
-}
-.info-duration td{
- color: #de2500;
-}
-.info-author a{
- color: #7628df;
-}
-.cloner{
- float: right; margin-bottom: 8px;
-}
-.list-video{
- height: auto;
- margin-left: -10px;
-}
-.item-video:hover,
-.item-video.active{
- background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
-}
-.time-length{
- margin-bottom: 5px;
-}
-.item-video .frise{
- width: 100%;
- height: 8px;
- background-color: #999999;
- display: block;
-}
-.title-video a {
- color: #30036d;
-}
-.item-video .title-video a:hover {
- text-decoration: underline;
-}
-.item-video .frise{
- border:none;
-}
-.bloc-video{
- padding-left: 10px;
-}
-.video {
- height: 400px;
- width: 620px;
-}
-.bloc-pvw{
- margin-top: 7px;
-}
-.popin-content h2{
- margin: 0;
- border:none;
-}
-.Ldt-Ctrl {
- margin-bottom: 6px;
-}
-.Ldt-Slider {
- margin: 0;
-}
-.frise-segment {
- cursor: pointer;
-}
-.segment-info .pointer {
- margin-left: -10px;
-}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/css/players.css Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,128 @@
+.more-info-wrap{
+ padding-right: 10px;
+}
+.more-info{
+ text-align: left;
+}
+.more-info th{
+ font-weight: 600;
+ font-style: normal;
+ font-size: 12px;
+ width: 78px;
+}
+.more-info td{
+ padding-bottom: 12px;
+ font-size: 12px;
+}
+.more-info a{
+ text-decoration: underline;
+}
+.more-info a:hover{
+ text-decoration: none;
+}
+.info-title a{
+ color:#30036d;
+ font-size: 14px;
+ font-weight: bold;
+}
+.info-duration td{
+ color: #de2500;
+}
+.info-author a{
+ color: #7628df;
+}
+.cloner{
+ float: right; margin-bottom: 8px;
+}
+.list-video{
+ height: auto;
+ margin-left: -10px;
+ max-height: 450px;
+}
+.item-video:hover,
+.item-video.active{
+ background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
+}
+.time-length{
+ margin-bottom: 5px;
+}
+.item-video .frise{
+ width: 100%;
+ height: 8px;
+ background-color: #999999;
+ display: block;
+}
+.title-video a {
+ color: #30036d;
+}
+.item-video .title-video a:hover {
+ text-decoration: underline;
+}
+.item-video .frise{
+ border:none;
+}
+.bloc-video{
+ padding-left: 10px;
+}
+.video {
+ height: 400px;
+ width: 620px;
+}
+.bloc-pvw{
+ margin-top: 7px;
+}
+.popin-content h2{
+ margin: 0;
+ border:none;
+}
+.Ldt-Ctrl {
+ margin-bottom: 6px;
+}
+.Ldt-Slider {
+ margin: 0;
+}
+.frise-segment {
+ cursor: pointer;
+}
+.segment-info .pointer {
+ margin-left: -10px;
+}
+
+.media-segment-popin .pointer{
+ margin-left: 105px
+}
+
+.media-segment-popin {
+ padding-top: 12px; overflow: hidden;
+ top: 2px; width: 230px; margin-left: -116px;
+ display: none;
+}
+
+.media-segment-list {
+ margin: 8px 0 0;
+ padding-bottom: 1px;
+ position: relative;
+}
+
+.active .media-segment-section, .media-segment:hover .media-segment-section {
+ -moz-box-shadow: inset 0 0 2px 2px #fc00ff, 0 0 2px #fc00ff;
+ -webkit-box-shadow: inset 0 0 2px 2px #fc00ff, 0 0 2px #fc00ff;
+ box-shadow: inset 0 0 2px 2px #fc00ff, 0 0 2px #fc00ff;
+}
+
+.mashup-link {
+ display: none;
+ font-size: 13px;
+ color: #30036D;
+ margin-top: 5px;
+}
+
+.mashup-link a {
+ color: #30036D;
+ font-weight: 600;
+ text-decoration: underline;
+}
+
+.mashup-link a:hover {
+ text-decoration: none;
+}
--- a/integration/edition.html Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/edition.html Mon Nov 26 18:42:56 2012 +0100
@@ -352,16 +352,7 @@
<script type="text/javascript" src="lib/tag-it.js"></script>
<script type="text/javascript" src="lib/underscore-min.js"></script>
<script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
- <script type="text/javascript" src="js/init.js"></script>
- <script type="text/javascript" src="js/i18n.js"></script>
- <script type="text/javascript" src="js/ldt-serializer.js"></script>
- <script type="text/javascript" src="js/medialist-serializer.js"></script>
- <script type="text/javascript" src="js/contentapi-serializer.js"></script>
- <script type="text/javascript" src="js/segmentapi-serializer.js"></script>
- <script type="text/javascript" src="js/model.js"></script>
- <script type="text/javascript" src="js/mashupcore.js"></script>
- <script type="text/javascript" src="js/editor.js"></script>
- <script type="text/javascript" src="js/common.js"></script>
+ <script type="text/javascript" src="js/hashcut.js"></script>
<script type="text/javascript">
IriSP.endpoints = {
--- a/integration/hashcut.html Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/hashcut.html Mon Nov 26 18:42:56 2012 +0100
@@ -10,7 +10,7 @@
<link rel="stylesheet" href="lib/jquery-ui.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
- <link rel="stylesheet" href="css/hashcut.css" />
+ <link rel="stylesheet" href="css/players.css" />
</head>
<body>
@@ -183,15 +183,15 @@
<tbody>
<tr>
<th>Extrait de :</th>
- <td><span class="annotation-media-title">Firminy, le maire et l'architecte</span> (<span class="annotation-time annotation-begin">00:00</span> - <span class="annotation-time annotation-end">53:50</span>)</td>
+ <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
</tr>
<tr>
<th>Description :</th>
- <td><span class="annotation-description">Extrait de « Firminy, le maire et l'architecte »</span></td>
+ <td><span class="annotation-description"></span></td>
</tr>
<tr>
<th>Tags :</th>
- <td><span class="annotation-tags">(fonctionnalité à venir)</span></td>
+ <td><span class="annotation-tags"></span></td>
</tr>
</tbody>
</table>
@@ -258,14 +258,7 @@
<script type="text/javascript" src="lib/underscore-min.js"></script>
<script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
<script type="text/javascript" src="lib/ZeroClipboard.js"></script>
- <script type="text/javascript" src="js/init.js"></script>
- <script type="text/javascript" src="js/ldt-serializer.js"></script>
- <script type="text/javascript" src="js/contentapi-serializer.js"></script>
- <script type="text/javascript" src="js/model.js"></script>
- <script type="text/javascript" src="js/mashupcore.js"></script>
- <script type="text/javascript" src="js/mashupplayer.js"></script>
- <script type="text/javascript" src="js/common.js"></script>
- <script type="text/javascript" src="js/social.js"></script>
+ <script type="text/javascript" src="js/hashcut.js"></script>
<script type="text/javascript">
IriSP.endpoints = {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/compile.bat Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,9 @@
+@echo off
+
+type init.js > hashcut.js
+
+set jsfiles=i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer social
+
+FOR %%f IN (%jsfiles%) DO (type %%f.js >> hashcut.js)
+
+echo Hashcut.js compiled successfully!
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/compile.sh Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,10 @@
+#!/bin/sh
+
+cat init.js > hashcut.js
+
+jsfiles="i18n model ldt-serializer segmentapi-serializer contentapi-serializer mashupcore editor mashupplayer mediaplayer social"
+
+for jsfile in $jsfiles
+do
+ cat $jsfile.js >> hashcut.js
+done
--- a/integration/js/contentapi-serializer.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/contentapi-serializer.js Mon Nov 26 18:42:56 2012 +0100
@@ -1,6 +1,5 @@
IriSP.serializers.content = {
deSerialize : function(_data, _source) {
- var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
var _medialist = new IriSP.Model.List(_source.directory);
function deserializeObject(_m, i) {
@@ -10,7 +9,7 @@
_media.description = _m.description;
_media.setDuration(_m.duration);
_media.thumbnail = _m.image;
- _media.color = colors[i % colors.length];
+ _media.color = IriSP.vizcolors[i % IriSP.vizcolors.length];
_media.keywords = _m.tags;
_medialist.push(_media);
}
@@ -23,4 +22,6 @@
_source.addList("media", _medialist);
}
-}
\ No newline at end of file
+};
+
+/* END contentapi-serializer.js */
--- a/integration/js/editor.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/editor.js Mon Nov 26 18:42:56 2012 +0100
@@ -52,8 +52,6 @@
mashupstatus = '',
addMode, currentMedia, currentSegment;
- var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
-
IriSP.mashupcore(project, mashup);
/* Validation of segments and mashup */
@@ -197,7 +195,7 @@
left : k * _a.begin,
width : k * _a.getDuration(),
top: 8 * line.index,
- color: colors[i % colors.length],
+ color: IriSP.vizcolors[i % IriSP.vizcolors.length],
title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'),
popleft : corrpos,
pointerpos : (pos - corrpos),
@@ -457,7 +455,7 @@
height: 8,
top: 8 * line.index,
pointerpos : (pos - corrpos),
- color: colors[i % colors.length]
+ color: IriSP.vizcolors[i % IriSP.vizcolors.length]
}
html += mediasegmenttemplate(vizdata);
});
@@ -873,3 +871,5 @@
mashup.trigger("change");
}
+
+/* END editor.js */
--- a/integration/js/i18n.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/i18n.js Mon Nov 26 18:42:56 2012 +0100
@@ -29,7 +29,8 @@
"Edit existing segment": "Modifier le segment",
"The hashcut can't be published because:": "Le Hashcut ne peut pas être publié pour les raisons suivantes :",
"Server error\nYour hashcut couldn't be published": "Erreur serveur\nVotre hashcut n'a pas pu être publié",
- "You haven't published your hashcut yet.\nIf you leave this page, it will be lost": "Vous n'avez pas encore publié votre Hashcut.\nSi vous quittez cette page, il sera perdu."
+ "You haven't published your hashcut yet.\nIf you leave this page, it will be lost": "Vous n'avez pas encore publié votre Hashcut.\nSi vous quittez cette page, il sera perdu.",
+ "From hashcut:": "Du hashcut :"
}
};
@@ -55,3 +56,5 @@
}
}) ());
+
+/* END i18n.js */
--- a/integration/js/init.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/init.js Mon Nov 26 18:42:56 2012 +0100
@@ -1,6 +1,6 @@
/*
* Copyright 2012 Institut de recherche et d'innovation
- * contributor(s) : Raphael Velt, Karim Hamidou, Samuel Huron, Thibaut Cavalie
+ * contributor(s) : Raphael Velt, Karim Hamidou, Samuel Huron, Thibaut Cavalie, Anthony Ly
*
* contact@iri.centrepompidou.fr
* http://www.iri.centrepompidou.fr
@@ -23,3 +23,17 @@
IriSP._ = _;
IriSP.jQuery = jQuery;
+
+/* COLOR SCHEMES
+ * Color Brewer Set1 (9 classes): [ "#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999" ]
+ * Color Brewer Set3 (12 classes): ["#8DD3C7", "#FFFFB3", "#BEBADA", "#FB8072", "#80B1D3", "#FDB462", "#B3DE69", "#FCCDE5", "#D9D9D9", "#BC80BD", "#CCEBC5", "#FFED6F"]
+ * Color Brewer Paired (11 classes): ["#A6CEE3", "#1F78B4", "#B2DF8A", "#33A02C", "#FB9A99", "#E31A1C", "#FDBF6F", "#FF7F00", "#CAB2D6", "#6A3D9A", "#FFFF99" ]
+ * d3 Category10: ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
+ * d3 Category20: ["#1f77b4 ", "#aec7e8 ", "#ff7f0e ", "#ffbb78 ", "#2ca02c ", "#98df8a ", "#d62728 ", "#ff9896 ", "#9467bd ", "#c5b0d5 ", "#8c564b ", "#c49c94 ", "#e377c2 ", "#f7b6d2 ", "#7f7f7f ", "#c7c7c7 ", "#bcbd22 ", "#dbdb8d ", "#17becf ", "#9edae5"];
+ * d3 Category20b: ["#393b79 ", "#5254a3 ", "#6b6ecf ", "#9c9ede ", "#637939 ", "#8ca252 ", "#b5cf6b ", "#cedb9c ", "#8c6d31 ", "#bd9e39 ", "#e7ba52 ", "#e7cb94 ", "#843c39 ", "#ad494a ", "#d6616b ", "#e7969c ", "#7b4173 ", "#a55194 ", "#ce6dbd ", "#de9ed6"];
+ * d3 Category20c: ["#3182bd ", "#6baed6 ", "#9ecae1 ", "#c6dbef ", "#e6550d ", "#fd8d3c ", "#fdae6b ", "#fdd0a2 ", "#31a354 ", "#74c476 ", "#a1d99b ", "#c7e9c0 ", "#756bb1 ", "#9e9ac8 ", "#bcbddc ", "#dadaeb ", "#636363 ", "#969696 ", "#bdbdbd ", "#d9d9d9"];
+ */
+
+IriSP.vizcolors = ["#1f77b4 ", "#aec7e8 ", "#ff7f0e ", "#ffbb78 ", "#2ca02c ", "#98df8a ", "#d62728 ", "#ff9896 ", "#9467bd ", "#c5b0d5 ", "#8c564b ", "#c49c94 ", "#e377c2 ", "#f7b6d2 ", "#7f7f7f ", "#c7c7c7 ", "#bcbd22 ", "#dbdb8d ", "#17becf ", "#9edae5"];
+
+/* END init.js */
--- a/integration/js/ldt-serializer.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/ldt-serializer.js Mon Nov 26 18:42:56 2012 +0100
@@ -283,3 +283,5 @@
}
}
+/* END ldt-serializer.js */
+
--- a/integration/js/mashupcore.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mashupcore.js Mon Nov 26 18:42:56 2012 +0100
@@ -442,6 +442,7 @@
media.on("timeupdate", function(_time) {
if (media === currentMedia) {
+ $(".frise-position").css("left",(100*_time/media.duration)+"%");
onCurrentMediaTimeupdate(_time);
}
if (mashup === currentMedia && !mashup.paused && media === mashup.currentMedia && !media.seeking) {
@@ -657,3 +658,6 @@
mashup.trigger("add");
}
+
+/* END mashupcore.js */
+
--- a/integration/js/mashupplayer.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mashupplayer.js Mon Nov 26 18:42:56 2012 +0100
@@ -9,7 +9,7 @@
mashup,
mediatemplate = _.template('<li class="item-video media" data-media-id="<%= media.id %>">'
+ '<a href="<%= IriSP.endpoints.media_page + media.id %>"><img class="thumbnail" alt="<%= media.title %>" src="<%= media.thumbnail %>"></a><div class="video-info">'
- + '<h3 class="title-video"><a href="#"><%= media.title %></a></h3><p class="description"><%= media.description %></p>'
+ + '<h3 class="title-video"><a href="<%= IriSP.endpoints.media_page + media.id %>"><%= media.title %></a></h3><p class="description"><%= media.description %></p>'
+ '<p class="time-length">Durée : <span><%= media.duration.toString() %></span></p><div class="frise">'
+ '<div class="frise-overflow"><div class="frise-segments"><%= segments %></div></div></div></div></li>');
segmenttemplate = _.template('<div style="background-color:<%= annotation.color %>; left:<%= left %>%; width: <%= width %>%;"'
@@ -86,3 +86,5 @@
});
}
+
+/* END mashupplayer.js */
--- a/integration/js/medialist-serializer.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/medialist-serializer.js Mon Nov 26 18:42:56 2012 +0100
@@ -1,6 +1,5 @@
IriSP.serializers.medialist = {
deSerialize : function(_data, _source) {
- var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
var _medialist = new IriSP.Model.List(_source.directory);
_data = IriSP._(_data).shuffle();
IriSP._(_data).each(function(_m, i) {
@@ -10,9 +9,11 @@
_media.description = "par " + _m.author;
_media.setDuration(_m.duration);
_media.thumbnail = _m.thumbnail;
- _media.color = colors[i % colors.length];
+ _media.color = IriSP.vizcolors[i % IriSP.vizcolors.length];
_medialist.push(_media);
});
_source.addList("media", _medialist);
}
-}
\ No newline at end of file
+}
+
+/* END medialist-serializer.js */
--- a/integration/js/mediaplayer.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/mediaplayer.js Mon Nov 26 18:42:56 2012 +0100
@@ -5,14 +5,124 @@
url: IriSP.endpoints.content + options.id,
serializer: IriSP.serializers.content
}),
- apidirectory = new IriSP.Model.Directory();
+ apidirectory = new IriSP.Model.Directory(),
+ segmenttemplate = _.template(
+ '<div class="media-segment" data-mashup-id="<%= annotation.project_id %>">'
+ + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>'
+ + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'
+ + '<h3><%= annotation.title %></h3>'
+ + '<p><%= IriSP.translate("From:") %> <span><%= annotation.begin.toString() %></span> <%= IriSP.translate("to:") %> <span><%= annotation.end.toString() %></span> (<%= IriSP.translate("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>'
+ + '<p class="mashup-link"><%= IriSP.translate("From hashcut:") %> <a href="<%= IriSP.endpoints.hashcut_page + annotation.project_id %>"></a></p>'
+ + '</div></div></div>'
+ ),
+ segmentlisttemplate = _.template(
+ '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %><div class="frise-position"></div></div>'
+ ),
+ projtemplate = _.template(
+ '<li class="item-video mashup" data-mashup-id="<%= ldt_id %>">'
+ + '<a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><img class="thumbnail" alt="<%= title %>" src="<%= image %>"></a><div class="video-info">'
+ + '<h3 class="title-video"><a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><%= title %></a></h3><p class="description"><%= description %></p>'
+ + '</p></div></li>'
+ ),
+ media;
+
+ function mediaSegmentList(_annotations) {
+ var html = '',
+ k = $(".Ldt-Slider").width() / media.duration,
+ lines = [];
+ _(_annotations).each(function(_a, i) {
+ var pos = k * (_a.begin + _a.end) / 2,
+ corrpos = Math.max(106, Math.min(516, pos)),
+ line = IriSP._(lines).find(function(line) {
+ return !IriSP._(line.annotations).find(function(ann) {
+ return ann.begin < _a.end && ann.end > _a.begin
+ });
+ });
+ if (!line) {
+ line = { index: lines.length, annotations: []};
+ lines.push(line);
+ }
+ line.annotations.push(_a);
+ vizdata = {
+ annotation : _a,
+ popleft : corrpos,
+ left : k * _a.begin,
+ width : k * _a.getDuration(),
+ height: 8,
+ top: 8 * line.index,
+ pointerpos : (pos - corrpos),
+ color: IriSP.vizcolors[i % IriSP.vizcolors.length]
+ }
+ html += segmenttemplate(vizdata);
+ });
+ return segmentlisttemplate({
+ height: 8 * lines.length,
+ segments: html
+ });
+ }
content.onLoad(function() {
IriSP.mashupcore(content, new IriSP.Model.Mashup(false, content));
- var media = content.getMedias()[0];
+ media = content.getMedias()[0];
+ apidirectory.remoteSource({
+ url: IriSP.endpoints.segment,
+ url_params: {
+ iri_id: options.id,
+ limit: 0
+ },
+ serializer: IriSP.serializers.segmentapi
+ }).onLoad(function() {
+ var medias = this.getMedias(),
+ annotations = this.getAnnotations(),
+ projlist = {};
+ $(".media-segments").html(mediaSegmentList(annotations));
+ annotations.forEach(function(a) {
+ projlist[a.project_id] = 1 + (projlist[a.project_id] || 0);
+ });
+ var projkeys = _(projlist)
+ .chain()
+ .keys()
+ .sortBy(function(v) {
+ return - projlist[v];
+ })
+ .first(8)
+ .value();
+ $.ajax({
+ url: IriSP.endpoints.project,
+ dataType: "json",
+ data: {
+ format: "json",
+ ldt_id__in: projkeys
+ },
+ traditional: true,
+ success: function(data) {
+ var proj = _(data.objects)
+ .filter(function(p) {
+ return /<inst/gm.test(p.ldt);
+ });
+ _(proj).each(function(p) {
+ $(".media-segment[data-mashup-id='" + p.ldt_id + "']").each(function() {
+ $(this)
+ .find(".mashup-link").show()
+ .find("a").text(p.title);
+ });
+ });
+ var html = _(proj)
+ .chain()
+ .sortBy(function(p) {
+ return - projlist[p.ldt_id];
+ })
+ .map(projtemplate)
+ .value()
+ .join("");
+ $(".list-video").html(html);
+ }
+ });
+ });
+
content.trigger("set-current", media);
$(".info-title a").text(media.title);
@@ -22,4 +132,28 @@
$(".info-tags td").text(media.keywords);
});
+
+ $(".media-segments").on("mouseover", ".media-segment", function() {
+ var el = $(this);
+ el.find(".media-segment-popin").show();
+ var pid = el.attr("data-mashup-id");
+ $(".item-video[data-mashup-id='" + pid + "']").addClass("active");
+ }).on("mouseout", ".media-segment", function() {
+ $(this).find(".media-segment-popin").hide();
+ $(".item-video").removeClass("active");
+ }).on("click", ".media-segment-section", function() {
+ var sid = $(this).attr("data-segment-id"),
+ s = apidirectory.getElement(sid);
+ media.setCurrentTime(s.begin);
+ });
+
+ $(".list-video").on("mouseover", ".item-video", function() {
+ var pid = $(this).attr("data-mashup-id");
+ $(".media-segment[data-mashup-id='" + pid + "']").addClass("active");
+ }).on("mouseout", ".item-video", function() {
+ $(".media-segment").removeClass("active");
+ });
}
+
+/* END mediaplayer.js */
+
--- a/integration/js/model.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/model.js Mon Nov 26 18:42:56 2012 +0100
@@ -1072,6 +1072,7 @@
url: this.url,
dataType: dataType,
data: urlparams,
+ traditional: true,
success: function(_result) {
_this.deSerialize(_result);
_this.handleCallbacks();
@@ -1122,3 +1123,6 @@
return Model;
})(IriSP);
+
+/* END model.js */
+
--- a/integration/js/segmentapi-serializer.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/segmentapi-serializer.js Mon Nov 26 18:42:56 2012 +0100
@@ -17,6 +17,7 @@
_ann.begin = new IriSP.Model.Time(_s.start_ts);
_ann.end = new IriSP.Model.Time(_s.start_ts + _s.duration);
_ann.keywords = _s.tags.split(",");
+ _ann.project_id = _s.project_id;
_annotationlist.push(_ann);
}
@@ -27,4 +28,6 @@
}
_source.addList("annotation", _annotationlist);
}
-}
\ No newline at end of file
+}
+
+/* END segmentapi-serializer.js */
--- a/integration/js/social.js Fri Nov 23 19:13:50 2012 +0100
+++ b/integration/js/social.js Mon Nov 26 18:42:56 2012 +0100
@@ -46,3 +46,5 @@
sel.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + $.param({ url: url, title: text }));
sel.find(".Ldt-Social-Mail").attr("href", "mailto:?" + $.param({ subject: text, body: text + ": " + url }));
}
+
+/* END social.js */
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/lib/ZeroClipboard.js Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,311 @@
+// Simple Set Clipboard System
+// Author: Joseph Huckaby
+
+var ZeroClipboard = {
+
+ version: "1.0.7",
+ clients: {}, // registered upload clients on page, indexed by id
+ moviePath: 'ZeroClipboard.swf', // URL to movie
+ nextId: 1, // ID of next movie
+
+ $: function(thingy) {
+ // simple DOM lookup utility function
+ if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
+ if (!thingy.addClass) {
+ // extend element with a few useful methods
+ thingy.hide = function() { this.style.display = 'none'; };
+ thingy.show = function() { this.style.display = ''; };
+ thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };
+ thingy.removeClass = function(name) {
+ var classes = this.className.split(/\s+/);
+ var idx = -1;
+ for (var k = 0; k < classes.length; k++) {
+ if (classes[k] == name) { idx = k; k = classes.length; }
+ }
+ if (idx > -1) {
+ classes.splice( idx, 1 );
+ this.className = classes.join(' ');
+ }
+ return this;
+ };
+ thingy.hasClass = function(name) {
+ return !!this.className.match( new RegExp("\\s*" + name + "\\s*") );
+ };
+ }
+ return thingy;
+ },
+
+ setMoviePath: function(path) {
+ // set path to ZeroClipboard.swf
+ this.moviePath = path;
+ },
+
+ dispatch: function(id, eventName, args) {
+ // receive event from flash movie, send to client
+ var client = this.clients[id];
+ if (client) {
+ client.receiveEvent(eventName, args);
+ }
+ },
+
+ register: function(id, client) {
+ // register new client to receive events
+ this.clients[id] = client;
+ },
+
+ getDOMObjectPosition: function(obj, stopObj) {
+ // get absolute coordinates for dom element
+ var info = {
+ left: 0,
+ top: 0,
+ width: obj.width ? obj.width : obj.offsetWidth,
+ height: obj.height ? obj.height : obj.offsetHeight
+ };
+
+ while (obj && (obj != stopObj)) {
+ info.left += obj.offsetLeft;
+ info.top += obj.offsetTop;
+ obj = obj.offsetParent;
+ }
+
+ return info;
+ },
+
+ Client: function(elem) {
+ // constructor for new simple upload client
+ this.handlers = {};
+
+ // unique ID
+ this.id = ZeroClipboard.nextId++;
+ this.movieId = 'ZeroClipboardMovie_' + this.id;
+
+ // register client with singleton to receive flash events
+ ZeroClipboard.register(this.id, this);
+
+ // create movie
+ if (elem) this.glue(elem);
+ }
+};
+
+ZeroClipboard.Client.prototype = {
+
+ id: 0, // unique ID for us
+ ready: false, // whether movie is ready to receive events or not
+ movie: null, // reference to movie object
+ clipText: '', // text to copy to clipboard
+ handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor
+ cssEffects: true, // enable CSS mouse effects on dom container
+ handlers: null, // user event handlers
+
+ glue: function(elem, appendElem, stylesToAdd) {
+ // glue to DOM element
+ // elem can be ID or actual DOM element object
+ this.domElement = ZeroClipboard.$(elem);
+
+ // float just above object, or zIndex 99 if dom element isn't set
+ var zIndex = 99;
+ if (this.domElement.style.zIndex) {
+ zIndex = parseInt(this.domElement.style.zIndex, 10) + 1;
+ }
+
+ if (typeof(appendElem) == 'string') {
+ appendElem = ZeroClipboard.$(appendElem);
+ }
+ else if (typeof(appendElem) == 'undefined') {
+ appendElem = document.getElementsByTagName('body')[0];
+ }
+
+ // find X/Y position of domElement
+ var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem);
+
+ // create floating DIV above element
+ this.div = document.createElement('div');
+ var style = this.div.style;
+ style.position = 'absolute';
+ style.left = '' + box.left + 'px';
+ style.top = '' + box.top + 'px';
+ style.width = '' + box.width + 'px';
+ style.height = '' + box.height + 'px';
+ style.zIndex = zIndex;
+
+ if (typeof(stylesToAdd) == 'object') {
+ for (addedStyle in stylesToAdd) {
+ style[addedStyle] = stylesToAdd[addedStyle];
+ }
+ }
+
+ // style.backgroundColor = '#f00'; // debug
+
+ appendElem.appendChild(this.div);
+
+ this.div.innerHTML = this.getHTML( box.width, box.height );
+ },
+
+ getHTML: function(width, height) {
+ // return HTML for movie
+ var html = '';
+ var flashvars = 'id=' + this.id +
+ '&width=' + width +
+ '&height=' + height;
+
+ if (navigator.userAgent.match(/MSIE/)) {
+ // IE gets an OBJECT tag
+ var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
+ html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+protocol+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><param name="wmode" value="transparent"/></object>';
+ }
+ else {
+ // all other browsers get an EMBED tag
+ html += '<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" wmode="transparent" />';
+ }
+ return html;
+ },
+
+ hide: function() {
+ // temporarily hide floater offscreen
+ if (this.div) {
+ this.div.style.left = '-2000px';
+ }
+ },
+
+ show: function() {
+ // show ourselves after a call to hide()
+ this.reposition();
+ },
+
+ destroy: function() {
+ // destroy control and floater
+ if (this.domElement && this.div) {
+ this.hide();
+ this.div.innerHTML = '';
+
+ var body = document.getElementsByTagName('body')[0];
+ try { body.removeChild( this.div ); } catch(e) {;}
+
+ this.domElement = null;
+ this.div = null;
+ }
+ },
+
+ reposition: function(elem) {
+ // reposition our floating div, optionally to new container
+ // warning: container CANNOT change size, only position
+ if (elem) {
+ this.domElement = ZeroClipboard.$(elem);
+ if (!this.domElement) this.hide();
+ }
+
+ if (this.domElement && this.div) {
+ var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
+ var style = this.div.style;
+ style.left = '' + box.left + 'px';
+ style.top = '' + box.top + 'px';
+ }
+ },
+
+ setText: function(newText) {
+ // set text to be copied to clipboard
+ this.clipText = newText;
+ if (this.ready) this.movie.setText(newText);
+ },
+
+ addEventListener: function(eventName, func) {
+ // add user event listener for event
+ // event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel
+ eventName = eventName.toString().toLowerCase().replace(/^on/, '');
+ if (!this.handlers[eventName]) this.handlers[eventName] = [];
+ this.handlers[eventName].push(func);
+ },
+
+ setHandCursor: function(enabled) {
+ // enable hand cursor (true), or default arrow cursor (false)
+ this.handCursorEnabled = enabled;
+ if (this.ready) this.movie.setHandCursor(enabled);
+ },
+
+ setCSSEffects: function(enabled) {
+ // enable or disable CSS effects on DOM container
+ this.cssEffects = !!enabled;
+ },
+
+ receiveEvent: function(eventName, args) {
+ // receive event from flash
+ eventName = eventName.toString().toLowerCase().replace(/^on/, '');
+
+ // special behavior for certain events
+ switch (eventName) {
+ case 'load':
+ // movie claims it is ready, but in IE this isn't always the case...
+ // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
+ this.movie = document.getElementById(this.movieId);
+ if (!this.movie) {
+ var self = this;
+ setTimeout( function() { self.receiveEvent('load', null); }, 1 );
+ return;
+ }
+
+ // firefox on pc needs a "kick" in order to set these in certain cases
+ if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
+ var self = this;
+ setTimeout( function() { self.receiveEvent('load', null); }, 100 );
+ this.ready = true;
+ return;
+ }
+
+ this.ready = true;
+ this.movie.setText( this.clipText );
+ this.movie.setHandCursor( this.handCursorEnabled );
+ break;
+
+ case 'mouseover':
+ if (this.domElement && this.cssEffects) {
+ this.domElement.addClass('hover');
+ if (this.recoverActive) this.domElement.addClass('active');
+ }
+ break;
+
+ case 'mouseout':
+ if (this.domElement && this.cssEffects) {
+ this.recoverActive = false;
+ if (this.domElement.hasClass('active')) {
+ this.domElement.removeClass('active');
+ this.recoverActive = true;
+ }
+ this.domElement.removeClass('hover');
+ }
+ break;
+
+ case 'mousedown':
+ if (this.domElement && this.cssEffects) {
+ this.domElement.addClass('active');
+ }
+ break;
+
+ case 'mouseup':
+ if (this.domElement && this.cssEffects) {
+ this.domElement.removeClass('active');
+ this.recoverActive = false;
+ }
+ break;
+ } // switch eventName
+
+ if (this.handlers[eventName]) {
+ for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {
+ var func = this.handlers[eventName][idx];
+
+ if (typeof(func) == 'function') {
+ // actual function reference
+ func(this, args);
+ }
+ else if ((typeof(func) == 'object') && (func.length == 2)) {
+ // PHP style object + method, i.e. [myObject, 'myMethod']
+ func[0][ func[1] ](this, args);
+ }
+ else if (typeof(func) == 'string') {
+ // name of function
+ window[func](this, args);
+ }
+ } // foreach event handler defined
+ } // user defined handler for event
+ }
+
+};
Binary file integration/lib/ZeroClipboard.swf has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/media.html Mon Nov 26 18:42:56 2012 +0100
@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" />
+ <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
+ <meta name="author" content="Anthony Ly, Raphaël Velt" />
+ <title>Hashcut > Media</title>
+ <link rel="stylesheet" href="lib/jquery-ui.css" />
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/common.css" />
+ <link rel="stylesheet" href="css/players.css" />
+ </head>
+ <body>
+
+ <div class="wrap-header-top">
+ <div class="wrap-header-top-content">
+ <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
+ </div>
+ </div><!-- wrap-header-top -->
+
+ <div class="wrap-header">
+ <div class="header">
+
+ <!-- popin user -->
+ <div class="popin user info" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Mashup75</h2>
+ <h3>mash@cinecast.fr</h3>
+ <a href="#" class="nb-hashcut">12 Hashcuts</a>
+ <p>
+ <a href="#" class="change-account button">Changer de compte</a>
+ </p>
+ </div>
+ </div><!-- popin user info-->
+
+ <div class="popin user signup" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Créer un compte :</h2>
+ <form action="#" class="signup-form">
+ <p>
+ <label for="signup-pseudo">Pseudonyme : </label>
+ <input type="text" id="signup-pseudo" name="" />
+ </p>
+ <p>
+ <label for="signup-email">Email : </label>
+ <input type="text" id="signup-email" name="" />
+ </p>
+ <p>
+ <label for="signup-password">Mot de passe : </label>
+ <input type="password" id="signup-password" name="" />
+ </p>
+ <p>
+ <label for="signup-password">Confirmer le mot de passe : </label>
+ <input type="password" id="signup-password" name="" />
+ </p>
+ <p>
+ <input class="button" type="submit" value="Créer le compte">
+ </p>
+ </form>
+
+ </div>
+ </div><!-- popin user signup-->
+
+ <div class="popin user login" id="user">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="popin-content">
+ <h2>Connexion :</h2>
+ <form action="#" class="login-form">
+ <p>
+ <label for="signup-pseudo">E-mail : </label>
+ <input type="text" id="signup-pseudo" name="" />
+ </p>
+ <p >
+ <label for="signup-email">Mot de passe : </label>
+ <input type="password" id="signup-email" name="" />
+ </p>
+ <p>
+ <input class="button" type="submit" value="Se connecter">
+ </p>
+ <p>
+ <a class="button signup-button" href="#">Créer un compte</a>
+ </p>
+ </form>
+
+ </div>
+ </div><!-- popin user login-->
+
+ <!-- /popin user -->
+
+ <h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
+ <img src="img/hashcut-logo.png" alt="Hashcut" />
+ <span>Le Mashup<br />Cliquable</span>
+ </a></h1>
+ <div class="title-video-wrap">
+ <div class="Ldt-Social">
+ <div class="Ldt-Social-Url-Container">
+ <a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url" title="Partager le lien"></a>
+ <span class="Ldt-Social-UrlPop">
+ <input class="Ldt-Social-Input"/>
+ <div class="Ldt-Social-CopyBtn">Copier</div>
+ </span>
+ </div>
+ <a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext" title="Partager sur Facebook"></a>
+ <a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext" title="Partager sur Twitter"></a>
+ <a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext" title="Partager sur Google+"></a>
+ <a href="#" target="_blank" class="Ldt-Social-Mail" title="Partager par mail"></a>
+ </div>
+ <p class="title-video" href="#">Titre du Média</p>
+ </div>
+ <div class="profil-wrap">
+ <a href="#" class="all-hashcut">Tous les Hashcuts</a>
+ <a href="#user" class="my-profil open-popin">Mon profil</a>
+ </div>
+ </div><!-- header -->
+ </div><!-- wrap-header -->
+
+ <div class="wrapper">
+ <div class="wrap">
+ <div class="content clearfix">
+
+ <div class="left-content">
+ <h2>Lire le Média</h2>
+ <div class="bloc-video">
+ <div class="video">
+ <div class="video-wait"></div>
+ </div>
+ <div class="widget">
+ <div class="Ldt-Slider-Container">
+ <div class="Ldt-Slider"></div>
+ </div>
+ <div class="Ldt-Slider-Time"></div>
+
+ <div class="Ldt-Ctrl">
+ <div class="Ldt-Ctrl-Left">
+ <div title="Lecture" class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-InOutBlock">
+ <div title="Débuter le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetIn"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div title="Finir le segment ici" class="Ldt-Ctrl-button Ldt-Ctrl-SetOut"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ </div>
+ </div>
+ <div class="Ldt-Ctrl-Right">
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-Time">
+ <div title="Temps écoulé" class="Ldt-Ctrl-Time-Elapsed">00:00</div>
+ <div class="Ldt-Ctrl-Time-Separator">/</div>
+ <div title="Temps total" class="Ldt-Ctrl-Time-Total">1:03:30</div>
+ </div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div title="Couper le son" class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full"></div>
+ </div>
+ <div title="Changer le volume" class="Ldt-Ctrl-Volume-Control">
+ <div class="Ldt-Ctrl-Volume-Bar"></div>
+ </div>
+ </div>
+
+ </div>
+ <div class="media-segments"></div>
+ </div><!-- bloc-video -->
+ </div><!-- left-content -->
+
+ <div class="right-content">
+ <h2>Plus d’informations</h2>
+ <div class="more-info-wrap">
+ <table class="more-info ">
+ <tbody>
+ <tr class="info-title">
+ <th>Titre :</th>
+ <td><a href="#">Titre du Média</a></td>
+ </tr>
+ <tr class="info-duration">
+ <th>Durée :</th>
+ <td></td>
+ </tr>
+ <tr class="info-description">
+ <th>Description : </th>
+ <td></td>
+ </tr>
+ <tr class="info-tags">
+ <th>Tags : </th>
+ <td></td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- <a href="#" class="button cloner">Cloner le Hashcut</a> -->
+ </div>
+ </ul>
+ <h2>Hashcuts utilisant le média</h2>
+ <ul class="list-video">
+
+ </ul>
+ </div><!-- right-content -->
+
+
+
+ </div><!-- content -->
+
+ <div class="footer clearfix">
+ <ul class="links-left">
+ <li><a href="#">Mentions légales</a></li>
+ <li><a href="#">Contacts</a></li>
+ </ul>
+ <ul class="links-right">
+ <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li>
+ <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
+ <li>© 2012</li>
+ </ul>
+ </div><!-- footer -->
+ </div><!-- wrap -->
+ </div><!-- wrapper -->
+ <!-- JavaScript -->
+ <script type="text/javascript" src="lib/jquery.min.js"></script>
+ <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="lib/underscore-min.js"></script>
+ <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
+ <script type="text/javascript" src="lib/ZeroClipboard.js"></script>
+ <script type="text/javascript" src="js/hashcut.js"></script>
+ <script type="text/javascript">
+
+ IriSP.endpoints = {
+ content: "/pf/ldtplatform/api/ldt/1.0/contents/",
+ project: "/pf/ldtplatform/api/ldt/1.0/projects/",
+ segment: "/pf/ldtplatform/api/ldt/1.0/segments/",
+ ldt: "http://capsicum//pf/ldtplatform/ldt/cljson/id/",
+ hashcut_page: "hashcut.html?project="
+ };
+
+ var mediarx = /media=([^&#]+)/,
+ match = document.location.href.match(mediarx),
+ mediaid = match ? match[1] : "f72aa2f4-29bb-11e2-a193-08002791f1b7";
+
+ $(function() {
+ IriSP.mediaplayer({
+ id: mediaid
+ });
+ IriSP.social();
+ });
+ </script>
+ </body>
+</html>