--- a/integration/css/common.css Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/css/common.css Fri Nov 16 19:23:20 2012 +0100
@@ -96,19 +96,24 @@
}
/* header - title-video-wrap */
.title-video-wrap{
- width: 460px;
+ width: 380px;
}
-.title-video-wrap a{
- position: absolute;
- top: 10px;
+.title-video-wrap .title-video {
+ margin-top: 10px;
left: 0;
font-size: 18px;
font-weight: bold;
color: #30036d;
text-decoration: underline;
+}
+.title-video-wrap .title-video:hover {
+ text-decoration: none;
+}
+.title-video-wrap .open-popin {
+ color: #30036d;
background-image: url(../img/pencil-icon.png);
background-repeat: no-repeat;
- background-position: right 2px;
+ background-position: right 6px;
padding-right: 20px;
min-height: 20px;
}
@@ -149,6 +154,7 @@
}
/* header - profil-wrap */
.header .profil-wrap{
+ float: right;
width: 250px;
}
.header .profil-wrap a{
@@ -419,12 +425,12 @@
}
.item-video {
margin-bottom: 1px;
- cursor: pointer;
padding: 5px 10px 5px 10px;
clear: both;
width: auto;
min-height: 62px;
display: block;
+ position: relative;
}
.item-video img{
float: left;
@@ -434,48 +440,47 @@
box-shadow: 2px 2px 2px #333333;
}
.item-video .video-info{
- display: block;
margin-left: 88px;
}
.item-video .title-video{
font-size: 13px;
font-weight: 600;
color: #30036d;
- display: block;
margin-bottom: 1px;
}
-.item-video .author{
+.item-video .description{
font-size: 11px;
- display: block;
margin-bottom: 1px;
}
.item-video .time-length{
font-size: 12px;
font-weight: 600;
- display: block;
}
.item-video .time-length span{
color: #de2500;
}
-.item-video .number{
+.item-video .media-count-wrap {
+ width: 30px;
+ text-align: center;
+ position: absolute;
+ top: 45px;
+ left: 75px;
+ height: 15px;
+ display: none;
+}
+.item-video .media-count{
color: #FFF;
font-size: 10px;
- text-align: center;
- width:15px;
- height: 15px;
line-height: 15px;
background-color: #ff00fc;
- position: absolute;
- display: block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- top: 54px;
- left: 78px;
+ padding: 0 3px;
+ border: 1px solid #DE2500;
}
.item-video .subtitle{
margin-bottom: 2px;
- display: block;
color: #de2500;
font-size: 11px;
}
@@ -483,7 +488,6 @@
color: #7628df;
font-size: 12px;
font-weight: 600;
- display: block;
}
/* frise */
.frise{
@@ -492,6 +496,10 @@
border: 1px solid #333333;
}
+.mashup-frise {
+ cursor: pointer;
+}
+
.frise-overflow {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}
@@ -509,30 +517,31 @@
background: #CCCCCC;
}
.frise-segment{
- cursor: pointer;
- height: 22px;
position: absolute;
+ 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;
+ box-shadow: inset 0px 1px 1px 0px #666;
}
-.frise-segment:first-child{
+.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;
}
-.frise-segment:last-child{
+.mashup-frise .frise-segment:last-child{
background-image: none;
}
-.frise-segment.active {
+.frise-segment.active, .mashup-frise .frise-segment.active {
background-image: url(../img/pinstripe-purple.png);
background-repeat: repeat;
}
.frise-indication{
- height: 22px;
+ height: 100%;
line-height: 22px;
display: inline-block;
position: absolute;
@@ -544,6 +553,7 @@
text-align: center;
background: url(../img/bg-indication.png) 15px 0 no-repeat;
margin-left: -15px;
+ text-shadow: 1px 1px 1px #000000;
}
.frise-position {
width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute;
@@ -617,6 +627,22 @@
position: relative;
}
+.segment-tooltip-wrapper {
+ position: absolute; height: 0; width: 0;
+ top: 0; z-index: 7; display: none; left: 50%;
+}
+
+.segment-tooltip {
+ padding: 4px; border: 1px solid #867a97; background: url(../img/bg-jaune.png);
+ width: 130px; position: absolute; bottom: 14px; left: -70px;
+ font-size: 12px; font-weight: 600; text-align: center; color: #DE2500;
+}
+
+.segment-tooltip-tip {
+ position: absolute; top: -15px; left: -10px; background: url(../img/inv-triangle.png);
+ width: 20px; height: 13px;
+}
+
/* Styles from Metadataplayer */
/* Slider Widget */
@@ -824,4 +850,89 @@
.Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
background: #F7268E;
-}
\ No newline at end of file
+}
+
+/* Social Share Widget */
+
+.Ldt-Social {
+ float: right; margin-top: 10px;
+}
+
+.Ldt-Social a {
+ float: left; width: 24px; height: 24px; background: url(../img/socialbuttons.png);
+}
+
+.Ldt-Social-Url-Container {
+ float: left; width: 24px; height: 24px; position: relative;
+}
+
+a.Ldt-Social-Url {
+ margin: 0; background-position: -96px 0;
+}
+
+a.Ldt-Social-Url:hover {
+ background-position: -96px -24px;
+}
+
+.Ldt-Social-UrlPop {
+ position: absolute; left: 20px; top: -2px; background: url(../img/socialcopy.png);
+ padding: 3px 0 0 12px; width: 218px; height: 27px;
+ display: none;
+}
+
+.Ldt-Social-Input, .Ldt-Social-CopyBtn {
+ font-size: 11px; margin: 1px; border: 1px solid #ccc; height: 16px;
+ padding: 1px; border-radius: 2px; display: inline-block;
+}
+
+.Ldt-Social-Input:hover, .Ldt-Social-CopyBtn.hover {
+ border-color: #8080ff;
+}
+
+.Ldt-Social-Input {
+ width: 150px;
+}
+
+.Ldt-Social-CopyBtn {
+ font-weight: bold; width: 50px; text-align: center; background: #f0f0ff; line-height: 16px; width: 46px;
+}
+
+.Ldt-Social-CopyBtn.hover {
+ background: #ffe0a0;
+}
+
+.Ldt-Social-CopyBtn.active {
+ background: #ff8000;
+}
+
+a.Ldt-Social-Twitter {
+ background-position: 0 0;
+}
+
+a.Ldt-Social-Twitter:hover {
+ background-position: 0 -24px;
+}
+
+a.Ldt-Social-Fb {
+ background-position: -24px 0;
+}
+
+a.Ldt-Social-Fb:hover {
+ background-position: -24px -24px;
+}
+
+a.Ldt-Social-Gplus {
+ background-position: -48px 0;
+}
+
+a.Ldt-Social-Gplus:hover {
+ background-position: -48px -24px;
+}
+
+a.Ldt-Social-Mail {
+ background-position: -72px 0;
+}
+
+a.Ldt-Social-Mail:hover {
+ background-position: -72px -24px;
+}
--- a/integration/css/edition.css Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/css/edition.css Fri Nov 16 19:23:20 2012 +0100
@@ -11,26 +11,8 @@
.title-video-wrap{
width: 460px;
}
-.title-video-wrap a{
- position: absolute;
- top: 10px;
- left: 0;
- font-size: 18px;
- font-weight: bold;
- color: #30036d;
- text-decoration: underline;
- background-image: url(../img/pencil-icon.png);
- background-repeat: no-repeat;
- background-position: right 2px;
- padding-right: 20px;
- min-height: 20px;
-}
-.title-video-wrap a:hover{
- text-decoration: none;
-}
-.title-video-wrap p.time-length{
- position: absolute;
- top: 34px;
+.title-video-wrap .time-length{
+ margin-top: 5px;
color: #333333;
font-size: 14px;
}
@@ -40,17 +22,10 @@
/* popin - update-title */
.update-title {
top: 34px;
- left: 150px;
-}
-.update-title .form-right,
-.update-title .form-left{
- float: left;
-}
-.update-title .form-left{
- margin-right: 12px;
+ left: 220px;
}
.update-title .pointer{
- left: 110px;
+ left: 50px;
}
/* col */
.col-middle,
@@ -336,11 +311,8 @@
position: relative;
height: 20px;
}
-.col-right .frise-segment{
- height: 20px;
-}
+
.col-right .frise-indication{
- height: 20px;
line-height: 20px;
}
@@ -349,6 +321,9 @@
background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
}
+.item-video {
+ cursor: pointer;
+}
/* tools */
.tools {
--- a/integration/css/hashcut.css Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/css/hashcut.css Fri Nov 16 19:23:20 2012 +0100
@@ -1,6 +1,3 @@
-.title-video-wrap a{
- background-image: none;
-}
.more-info-wrap{
padding-right: 10px;
}
@@ -54,9 +51,19 @@
background-color: #999999;
display: block;
}
+.title-video a {
+ color: #30036d;
+}
+.item-video .title-video a:hover {
+ text-decoration: underline;
+}
.item-video .frise{
border:none;
}
+.item-video a:hover img {
+ margin: 2px 0 0 2px;
+ box-shadow: -2px -2px 2px #333333;
+}
.bloc-video{
padding-left: 10px;
}
@@ -76,4 +83,7 @@
}
.Ldt-Slider {
margin: 0;
-}
\ No newline at end of file
+}
+.frise-segment {
+ cursor: pointer;
+}
--- a/integration/edition.html Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/edition.html Fri Nov 16 19:23:20 2012 +0100
@@ -23,17 +23,15 @@
<div class="popin update-title" id="update-title">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
- <form class="clearfix" action="#" method="">
- <div class="form-left">
+ <form class="clearfix" action="#" id="hashcut-form" method="">
+ <p>
<label for="hashcut-title">Titre :</label>
<input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
- <label for="hashcut-tags">Tags :</label>
- <ul id="hashcut-tags"></ul>
- </div>
- <div class="form-right">
+ </p>
+ <p>
<label for="hashcut-description">Description :</label>
<textarea name="" id="hashcut-description"></textarea>
- </div>
+ </p>
</form>
</div>
</div><!-- popin update-title -->
@@ -108,7 +106,9 @@
<span>Le Mashup<br />Cliquable</span>
</a></h1>
<div class="title-video-wrap">
- <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
+ <p class="title-video">
+ <a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
+ </p>
<p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
</div>
<div class="profil-wrap">
@@ -173,7 +173,7 @@
<div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
</div>
<div class="Ldt-Ctrl-spacer"></div>
- <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full Ldt-TraceMe" title="Couper/Activer le son"></div>
+ <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>
</div>
<div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
<div class="Ldt-Ctrl-Volume-Bar"></div>
@@ -248,6 +248,10 @@
</div>
</div>
<div class="frise-position"></div>
+ <div class="mashup-tooltip segment-tooltip-wrapper">
+ <div class="segment-tooltip"></div>
+ <div class="segment-tooltip-tip"></div>
+ </div>
</div>
@@ -297,6 +301,10 @@
<div class="frise-indications">
</div>
</div>
+ <div class="mashup-tooltip segment-tooltip-wrapper">
+ <div class="segment-tooltip"></div>
+ <div class="segment-tooltip-tip"></div>
+ </div>
</div>
</div>
@@ -329,6 +337,7 @@
<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/medialist-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>
@@ -336,8 +345,9 @@
<script type="text/javascript">
$(function() {
var hashcut = IriSP.editor({
- url: "data/moon.json",
- segment_api_endpoint: "http://capsicum/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/",
+ //url: "data/bpidata.json",
+ url: "data/moon-local.json",
+ segment_api_endpoint: "http://capsicum/pf/ldtplatform/api/ldt/1.0/segments/",
project_api_endpoint: "http://capsicum/pf/ldtplatform/api/ldt/1.0/projects/"
});
});
--- a/integration/hashcut.html Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/hashcut.html Fri Nov 16 19:23:20 2012 +0100
@@ -19,27 +19,6 @@
</div>
<div class="header">
<!-- popin header -->
- <div class="popin update-title" id="update-title">
- <img class="pointer" src="img/popin-triangle.png" alt="" />
- <div class="popin-content">
- <form class="clearfix" action="#" method="">
- <div class="form-left">
- <p class="titre-wrap">
- <label for="hashcut-title">Titre :</label>
- <input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
- </p>
- <p>
- <label for="hashcut-tags">Tags :</label>
- <input type="text" id="hashcut-tags" name="" value="" />
- </p>
- </div>
- <p class="form-right">
- <label for="hashcut-description">Description :</label>
- <textarea name="" id="hashcut-description"></textarea>
- </p>
- </form>
- </div>
- </div><!-- popin update-title -->
<div class="popin user info" id="user">
<img class="pointer" src="img/popin-triangle.png" alt="" />
@@ -62,11 +41,11 @@
<label for="signup-pseudo">Pseudonyme : </label>
<input type="text" id="signup-pseudo" name="" />
</p>
- <p >
+ <p>
<label for="signup-email">Email : </label>
<input type="text" id="signup-email" name="" />
</p>
- <p >
+ <p>
<label for="signup-password">Mot de passe : </label>
<input type="password" id="signup-password" name="" />
</p>
@@ -111,7 +90,20 @@
<span>Le Mashup<br />Cliquable</span>
</a></h1>
<div class="title-video-wrap">
- <a title="Modifier le titre et la description" href="#">Hashcut sans titre</a>
+ <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="#">Hashcut sans titre</p>
</div>
<div class="profil-wrap">
<a href="#" class="all-hashcut">Tous les Hashcuts</a>
@@ -124,12 +116,14 @@
<div class="left-content">
<h2>Lire le Hashcut</h2>
<div class="bloc-video">
- <div class="video"></div>
+ <div class="video">
+ <div class="video-wait"></div>
+ </div>
<div class="widget">
- <div class="Ldt-Slider-Container" style="height: 6.29154px; margin-top: -2.29154px; overflow: hidden;">
- <div class="Ldt-Slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%; height: 8.29154px; width: 8.29154px; margin-left: -5.14577px; overflow: hidden;"></a></div>
+ <div class="Ldt-Slider-Container">
+ <div class="Ldt-Slider"></div>
</div>
- <div class="Ldt-Slider-Time" style="display: none; left: 51.5px;">07:17</div>
+ <div class="Ldt-Slider-Time"></div>
<div class="Ldt-Ctrl">
<div class="Ldt-Ctrl-Left">
@@ -150,10 +144,10 @@
<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-TraceMe Ldt-Ctrl-Sound-Full"></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 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Volume : 100%"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;"></a></div>
+ <div class="Ldt-Ctrl-Volume-Bar"></div>
</div>
</div>
@@ -166,6 +160,10 @@
</div>
</div>
<div class="frise-position"></div>
+ <div class="mashup-tooltip segment-tooltip-wrapper">
+ <div class="segment-tooltip"></div>
+ <div class="segment-tooltip-tip"></div>
+ </div>
</div>
<div class="segment-info mashup-description">
@@ -224,36 +222,7 @@
</div>
<h2>Médias utilisés dans le Hashcut</h2>
<ul class="list-video">
- <li class="item-video">
- <img alt="Roms en errance" src="thumbnails/roms-80.jpg">
- <span class="video-info">
- <span class="title-video">Roms en errance</span>
- <span class="author">Par : Bernard Kleindienst</span>
- <span class="time-length">Durée : <span>1:09:00</span></span>
- <span class="frise">
- <div class="frise-overflow">
- <div class="frise-segments">
- <div style="background-color:#9467bd; left:20%; width:41.02564102564102%;" class="frise-segment"></div>
- </div>
- </div>
- </span>
- </span>
- </li>
- <li class="item-video">
- <img alt="Roms en errance" src="thumbnails/roms-80.jpg">
- <span class="video-info">
- <span class="title-video">Roms en errance</span>
- <span class="author">Par : Bernard Kleindienst</span>
- <span class="time-length">Durée : <span>1:09:00</span></span>
- <span class="frise">
- <div class="frise-overflow">
- <div class="frise-segments">
- <div style="background-color:#9467bd; left:20%; width:41.02564102564102%;" class="frise-segment"></div>
- </div>
- </div>
- </span>
- </span>
- </li>
+
</ul>
</div><!-- right-content -->
@@ -284,10 +253,12 @@
<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">
$(function() {
IriSP.player({
url: "data/moon-mashup.json"
+// url: "http://capsicum/pf/ldtplatform/ldt/cljson/id/d204aa58-2cf2-11e2-a234-08002791f1b7"
})
})
</script>
Binary file integration/img/inv-triangle.png has changed
Binary file integration/img/socialbuttons.png has changed
Binary file integration/img/socialcopy.png has changed
--- a/integration/js/editor.js Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/editor.js Fri Nov 16 19:23:20 2012 +0100
@@ -10,7 +10,8 @@
From_: "De :",
to_: "à :",
segment_title_placeholder: "Segment sans titre",
- mashup_title_placeholder: "Hashcut sans titre"
+ mashup_title_placeholder: "Hashcut sans titre",
+ copy_of_: "Copie de ",
}
IriSP.editor = function(options) {
@@ -24,22 +25,24 @@
serializer: IriSP.serializers.medialist
}),
mashup = new IriSP.Model.Mashup(false, project),
- mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />'
- + '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>'
- + '<span class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
+ mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>'
+ + '<img src="<%= thumbnail %>" alt="<%= title %>" />'
+ + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>'
+ + '<p class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></p></div></li>'),
segmenttemplate = _.template('<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
- + '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
- + '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>'
- + '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
+ + '<img src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
+ + '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><div class="video-info"><h3 class="title-video"><%= annotation.getMedia().title %></h3>'
+ + '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>'
+ '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>'
- + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></span></li>'),
+ + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></div></li>'),
mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">'
- + '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= annotation.color %>"></div>'
+ + '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>"></div>'
+ '<div class="media-section media-current-section" style="left:<%= currentleft %>px; width:<%= currentwidth %>px;"><div class="media-current-section-inner"></div></div>'
+ '<div class="popin media-segment-popin" style="left:<%= popleft %>px"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">'
+ '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>'
+ '<p><%= IriSP.hc_messages.From_ %> <span><%= annotation.begin.toString() %></span> <%= IriSP.hc_messages.to_ %> <span><%= annotation.end.toString() %></span> (<%= IriSP.hc_messages.duration_ %> <span><%= annotation.getDuration().toString() %></span>)</p>'
+ '</div></div></div></div>'),
+ mashupstatus = '',
addMode, currentMedia, currentSegment;
IriSP.mashupcore(project, mashup);
@@ -112,6 +115,47 @@
html += mediatemplate(_m);
});
$(".col-left .list-video").html(html);
+ project.getMedias().forEach(function(_m) {
+/* var dataType = (IriSP.Model.isLocalURL(options.segment_api_endpoint) ? "json" : "jsonp");
+ $.ajax({
+ url: ,
+ dataType: dataType,
+ data: {
+ format: dataType,
+ iri_id: _m.id
+ },
+ success: function(data) {
+ console.log(data);
+ if (data.objects && data.objects.length) {
+ var mediaid = data.objects[0].iri_id;
+ mediasegmentscache[mediaid] = data.objects;
+ if (currentMedia && mediaid === currentMedia.id && currentSegment) {
+ showOtherSegments();
+ }
+ }
+ }
+ }); */
+ apidirectory.remoteSource({
+ url: options.segment_api_endpoint,
+ url_params: {
+ iri_id: _m.id,
+ limit: 0
+ },
+ serializer: IriSP.serializers.segmentapi
+ }).onLoad(function() {
+ var medias = this.getMedias(),
+ annotations = this.getAnnotations();
+ if (medias && medias.length) {
+ var mediaid = medias[0].id;
+ el = $(".item-video[data-media-id='" + mediaid + "'] .media-count");
+ el.text(annotations.length).parent().show();
+ mediasegmentscache[mediaid] = annotations;
+ if (currentMedia && mediaid === currentMedia.id && currentSegment) {
+ showOtherSegments();
+ }
+ }
+ });
+ });
});
/* Search Media with left column form */
@@ -170,6 +214,8 @@
if (!messages.length) {
messages.push("Le hashcut est valide !");
}
+ mashupstatus = ' - ' + messages.join('\n - ');
+
$(".publier-button").toggleClass("disable", critical);
$(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status);
@@ -301,6 +347,7 @@
currentSegment.setEnd(currentMedia.duration);
currentSegment.title = IriSP.hc_messages.segment_title_placeholder;
currentSegment.color = currentMedia.color;
+ currentSegment.thumbnail = currentMedia.thumbnail;
currentSegment.created = new Date();
currentSegment.keywords = [];
currentSegment.description = "";
@@ -339,7 +386,7 @@
return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
});
var html = "",
- k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration,
+ k = $(".Ldt-Slider").width() / currentMedia.duration,
currentleft = k * currentSegment.begin,
currentwidth = k * currentSegment.getDuration();
if (relatedSegments.length) {
@@ -362,40 +409,59 @@
$(".self-media-segments").hide();
}
$(".self-media-segments .media-segments-list").html(html);
-
- $(".other-media-segments").hide();
- apidirectory.remoteSource({
- url: options.segment_api_endpoint + currentMedia.id + "/0/" + currentMedia.duration.milliseconds + "?format=json",
- serializer: IriSP.serializers.ldt
- }).onLoad(function() {
- var medias = this.getMedias(),
- annotations = this.getAnnotations();
- if (medias && medias.length && medias[0].id === currentMedia.id && annotations && annotations.length ) {
- var html = "";
- annotations.forEach(function(_a) {
- var pos = k * (_a.begin + _a.end) / 2,
- corrpos = Math.max(145, Math.min(305, pos));
- vizdata = {
- annotation : _a,
- currentleft : currentleft,
- currentwidth : currentwidth,
- popleft : corrpos,
- left : k * _a.begin,
- width : k * _a.getDuration(),
- pointerpos : (pos - corrpos)
- }
- html += mediasegmenttemplate(vizdata);
- });
- $(".other-media-segments").show();
- $(".other-media-segments .media-segments-list").html(html);
- }
- });
+ showOtherSegments();
+ project.trigger("mouseout-annotation");
}
if (currentMedia.elementType === "mashup") {
showPreview();
}
}
-
+
+ /* Show Related Segments */
+
+ function showOtherSegments() {
+ var annotations = mediasegmentscache[currentMedia.id]
+ if (annotations && annotations.length) {
+ var html = "",
+ k = $(".Ldt-Slider").width() / currentMedia.duration,
+ currentleft = k * currentSegment.begin,
+ currentwidth = k * currentSegment.getDuration();
+ annotations.forEach(function(_a) {
+ var pos = k * (_a.begin + _a.end) / 2,
+ corrpos = Math.max(145, Math.min(305, pos));
+ vizdata = {
+ annotation : _a,
+ currentleft : currentleft,
+ currentwidth : currentwidth,
+ popleft : corrpos,
+ left : k * _a.begin,
+ width : k * _a.getDuration(),
+ pointerpos : (pos - corrpos),
+ color: currentMedia.color
+ }
+ html += mediasegmenttemplate(vizdata);
+ });
+ $(".other-media-segments").show();
+ $(".other-media-segments .media-segments-list").html(html);
+ }
+ else {
+ $(".other-media-segments").hide();
+ $(".other-media-segments .media-segments-list").html("");
+ }
+ }
+ /* Set In, Out */
+
+ $(".Ldt-Ctrl-SetIn").click(function() {
+ if (currentMedia && currentSegment) {
+ currentSegment.setBegin(currentMedia.getCurrentTime());
+ }
+ });
+ $(".Ldt-Ctrl-SetOut").click(function() {
+ if (currentMedia && currentSegment) {
+ currentSegment.setEnd(currentMedia.getCurrentTime());
+ }
+ });
+
/* Segment Form interaction */
$("#segment-title").on("keyup change input paste", function() {
@@ -405,6 +471,11 @@
mashup.trigger("change");
}
});
+ $("#segment-title").on("focus click", function() {
+ if ($(this).val() === IriSP.hc_messages.segment_title_placeholder) {
+ $(this).val("");
+ }
+ });
$("#segment-description").on("keyup change input paste", function() {
if (currentMedia && currentSegment) {
currentSegment.description = $(this).val();
@@ -482,7 +553,7 @@
$(".media[data-media-id='" + mediaid + "']").addClass("active");
});
- project.on("mouseout-annotation", function(annotation) {
+ project.on("mouseout-annotation", function() {
$(".media").removeClass("active");
var mediaid = undefined;
if (currentMedia && currentMedia.elementType === "media") {
@@ -604,10 +675,11 @@
/* Click on current segment in Preview */
$(".mashup-description .edit").click(function() {
- if (mashupCurrentAnnotation) {
- currentSegment = mashupCurrentAnnotation.annotation;
- setMedia(mashupCurrentAnnotation.getMedia());
+ if (mashup.currentAnnotation) {
+ currentSegment = mashup.currentAnnotation.annotation;
+ setMedia(mashup.currentAnnotation.getMedia());
}
+ return false;
});
/* Handling related segments */
@@ -619,22 +691,18 @@
}).on("click", ".reprendre-segment", function() {
var sid = $(this).attr("data-segment-id"),
s = directory.getElement(sid) || apidirectory.getElement(sid);
- currentSegment.title = s.title;
+ currentSegment.title = IriSP.hc_messages.copy_of_ + s.title;
currentSegment.description = s.description;
- $("#segment-title").val(s.title);
+ $("#segment-title").val(IriSP.hc_messages.copy_of_ + s.title);
$("#segment-description").val(s.description);
currentSegment.setBegin(s.begin);
currentSegment.setEnd(s.end);
+ //TODO: ET LES TAGS !
return false;
});
/* Changing Hashcut Title and description */
- $("#hashcut-tags").tagit({
- onTagRemoved: updateSegmentTags,
- onTagAdded: updateSegmentTags
- });
-
mashup.title = IriSP.hc_messages.mashup_title_placeholder;
$(".title-video-wrap a").text(mashup.title);
$("#hashcut-title").val(mashup.title);
@@ -644,37 +712,67 @@
$(".title-video-wrap a").text(mashup.title);
mashup.trigger("change");
});
+ $("#hashcut-title").on("focus click", function() {
+ if ($(this).val() === IriSP.hc_messages.mashup_title_placeholder) {
+ $(this).val("");
+ }
+ });
$("#hashcut-description").on("keyup change input paste", function() {
mashup.description = $(this).val();
mashup.trigger("change");
});
- function updateMashupTags() {
- window.setTimeout(function() {
- mashup.keywords = $("#segment-tags").tagit("assignedTags");
- }, 0);
- }
+ $("#hashcut-form").submit(function() {
+ $(".update-title").hide();
+ return false;
+ })
/* Publication */
$(".publier-button").click(function() {
+ if ($(this).hasClass("disable")) {
+ alert("Le Mashup ne peut pas être publié pour les raisons suivantes :\n\n"+mashupstatus);
+ return false;
+ }
var postproject = directory.newLocalSource(),
- anntype = new IriSP.Model.AnnotationType(false, postproject),
+ medias = mashup.getMedias()
annotations = mashup.getOriginalAnnotations();
- anntype.title = "hashcut-segments";
- annotations.forEach(function(_a) {
- _a.setAnnotationType(anntype.id);
+ postproject.addList("annotationType");
+ postproject.addList("tag");
+ medias.forEach(function(_m) {
+ var anntype = new IriSP.Model.AnnotationType(false, postproject);
+ anntype.title = "Segments from " + _m.title;
+ anntype.media = _m;
+ postproject.getAnnotationTypes().push(anntype);
});
- postproject.addList("media",mashup.getMedias());
- postproject.addList("annotationType",[anntype]);
+ annotations.forEach(function(_a) {
+ _a.setAnnotationType(
+ postproject.getAnnotationTypes().filter(
+ function(_at) { return _at.media === _a.getMedia() }
+ )[0].id);
+ var tagids = [];
+ _(_a.keywords).each(function(keyword) {
+ var tags = postproject.getTags().searchByTitle(keyword);
+ if (tags.length) {
+ tagids.push(tags[0].id);
+ } else {
+ var tag = new IriSP.Model.Tag(false, postproject);
+ tag.title = tag.description = keyword;
+ postproject.getTags().push(tag);
+ tagids.push(tag.id);
+ }
+ });
+ _a.setTags(tagids);
+ });
postproject.addList("annotation",annotations);
+ postproject.addList("media",medias);
postproject.addList("mashup",[mashup]);
- postproject.addList("tag");
- postproject.creator = "IRI";
+ postproject.creator = "admin";
+ postproject.created = new Date();
+ postproject.modified = new Date();
postproject.title = mashup.title;
postproject.description = mashup.description;
- console.log(IriSP.serializers.ldt.serialize(postproject));
$.ajax({
type: "POST",
url: options.project_api_endpoint,
@@ -682,12 +780,13 @@
contentType: "application/cinelab",
// headers: {"X-CSRFToken": "{{csrf_token}}"},
success: function(data, status, request){
- alert("api post success");
+ console.log(request.getResponseHeader("Location"));
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
}
});
+ return false;
});
mashup.trigger("change");
--- a/integration/js/ldt-serializer.js Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/ldt-serializer.js Fri Nov 16 19:23:20 2012 +0100
@@ -31,16 +31,42 @@
}
return _res;
},
- serializer : function(_data, _source) {
- return {
+ serializer : function(_data, _source, _dest) {
+ var _res = {
id : _data.id,
url : _data.video,
meta : {
- "dc:title" : _data.title,
- "dc:description" : _data.description,
+ "dc:title": _data.title || "",
+ "dc:description": _data.description || "",
+ "dc:created" : IriSP.Model.dateToIso(_data.created || _source.created),
+ "dc:modified" : IriSP.Model.dateToIso(_data.modified || _source.modified),
+ "dc:creator" : _data.creator || _source.creator,
+ "dc:contributor" : _data.contributor || _source.contributor || _data.creator || _source.creator,
"dc:duration" : _data.duration.milliseconds
}
}
+ _dest.medias.push(_res);
+ var _list = {
+ id: IriSP.Model.getUID(),
+ meta : {
+ "dc:title": _data.title || "",
+ "dc:description": _data.description || "",
+ "dc:created" : IriSP.Model.dateToIso(_data.created || _source.created),
+ "dc:modified" : IriSP.Model.dateToIso(_data.modified || _source.modified),
+ "dc:creator" : _data.creator || _source.creator,
+ "dc:contributor" : _data.contributor || _source.contributor || _data.creator || _source.creator,
+ "id-ref": _data.id
+ },
+ items: _source.getAnnotationTypes().filter(function(_at) {
+ return _at.media === _data;
+ }).map(function(_at) {
+ return {
+ "id-ref": _at.id
+ }
+ })
+ }
+ _dest.lists.push(_list);
+ _dest.views[0].contents.push(_data.id);
}
},
tag : {
@@ -51,13 +77,19 @@
_res.title = _data.meta["dc:title"];
return _res;
},
- serializer : function(_data, _source) {
- return {
+ serializer : function(_data, _source, _dest) {
+ var _res = {
id : _data.id,
meta : {
- "dc:title" : _data.title
+ "dc:title": _data.title || "",
+ "dc:description": _data.description || "",
+ "dc:created" : IriSP.Model.dateToIso(_data.created || _source.created),
+ "dc:modified" : IriSP.Model.dateToIso(_data.modified || _source.modified),
+ "dc:creator" : _data.creator || _source.creator,
+ "dc:contributor" : _data.contributor || _source.contributor || _data.creator || _source.creator,
}
}
+ _dest.tags.push(_res);
}
},
annotationType : {
@@ -68,12 +100,18 @@
_res.description = _data["dc:description"];
return _res;
},
- serializer : function(_data, _source) {
- return {
+ serializer : function(_data, _source, _dest) {
+ var _res = {
id : _data.id,
- "dc:title" : _data.title,
- "dc:description" : _data.description
+ "dc:title": _data.title || "",
+ "dc:description": _data.description || "",
+ "dc:created" : IriSP.Model.dateToIso(_data.created || _source.created),
+ "dc:modified" : IriSP.Model.dateToIso(_data.modified || _source.modified),
+ "dc:creator" : _data.creator || _source.creator,
+ "dc:contributor" : _data.contributor || _source.contributor || _data.creator || _source.creator,
}
+ _dest["annotation-types"].push(_res);
+ _dest.views[0].annotation_types.push(_data.id);
}
},
annotation : {
@@ -109,22 +147,29 @@
}
return _res;
},
- serializer : function(_data, _source) {
- return {
+ serializer : function(_data, _source, _dest) {
+ var _color = parseInt(_data.color.replace(/^#/,''),16).toString();
+ var _res = {
id : _data.id,
begin : _data.begin.milliseconds,
end : _data.end.milliseconds,
content : {
- title : _data.title,
- description : _data.description,
- audio : _data.audio
+ title : _data.title || "",
+ description : _data.description || "",
+ audio : _data.audio,
+ img: {
+ src: _data.thumbnail
+ }
},
+ color: _color,
media : _data.media.id,
meta : {
"id-ref" : _data.getAnnotationType().id,
- "dc:created" : IriSP.Model.dateToIso(_data.created),
- "dc:creator" : _data.creator,
- project : _source.projectId
+ "dc:created" : IriSP.Model.dateToIso(_data.created || _source.created),
+ "dc:modified" : IriSP.Model.dateToIso(_data.modified || _source.modified),
+ "dc:creator" : _data.creator || _source.creator,
+ "dc:contributor" : _data.contributor || _source.contributor || _data.creator || _source.creator,
+// project : _source.projectId
},
tags : IriSP._(_data.tag.id).map(function(_id) {
return {
@@ -132,6 +177,7 @@
}
})
}
+ _dest.annotations.push(_res);
}
},
mashup : {
@@ -147,11 +193,15 @@
_res.setAnnotationsById(_data.items);
return _res;
},
- serializer : function(_data, _source) {
- return {
+ serializer : function(_data, _source, _dest) {
+ var _res = {
meta : {
- "dc:title": _data.title,
- "dc:description": _data.description,
+ "dc:title": _data.title || "",
+ "dc:description": _data.description || "",
+ "dc:created" : IriSP.Model.dateToIso(_data.created || _source.created),
+ "dc:modified" : IriSP.Model.dateToIso(_data.modified || _source.modified),
+ "dc:creator" : _data.creator || _source.creator,
+ "dc:contributor" : _data.contributor || _source.contributor || _data.creator || _source.creator,
listtype: "mashup"
},
items: _data.segments.map(function(_annotation) {
@@ -159,6 +209,7 @@
}),
id: _data.id
}
+ _dest.lists.push(_res);
}
}
},
@@ -166,26 +217,36 @@
var _res = {
meta: {
"dc:creator": _source.creator,
+ "dc:contributor" : _source.contributor || _source.creator,
"dc:created": IriSP.Model.dateToIso(_source.created),
- "dc:title": _source.title,
- "dc:description": _source.description,
- "id": _source.projectId || _source.id
+ "dc:modified" : IriSP.Model.dateToIso(_source.modified),
+ "dc:title": _source.title || "",
+ "dc:description": _source.description || "",
+ id: _source.projectId || _source.id
},
- views: []
+ views: [
+ {
+ id: IriSP.Model.getUID(),
+ contents: [],
+ annotation_types: []
+ }
+ ],
+ lists: [],
+ "annotation-types": [],
+ medias: [],
+ tags: [],
+ annotations: []
},
_this = this;
_source.forEach(function(_list, _typename) {
if (typeof _this.types[_typename] !== "undefined") {
- _res[_this.types[_typename].serialized_name] = _list.map(function(_el) {
- return _this.types[_typename].serializer(_el, _source);
+ _list.forEach(function(_el) {
+ _this.types[_typename].serializer(_el, _source, _res);
});
}
});
return JSON.stringify(_res);
},
- loadData : function(_url, _callback) {
- IriSP.jQuery.getJSON(_url, _callback)
- },
deSerialize : function(_data, _source) {
if (typeof _data !== "object" || _data === null) {
return;
--- a/integration/js/mashupcore.js Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/mashupcore.js Fri Nov 16 19:23:20 2012 +0100
@@ -42,7 +42,7 @@
mashup.setCurrentTime(mashup.duration);
}
changeCurrentAnnotation();
- mashup.trigger("enter-annotation",mashupCurrentAnnotation);
+ mashup.trigger("enter-annotation",mashup.currentAnnotation);
}
}
@@ -109,11 +109,15 @@
})
.mouseout(timeSliderMouseOut);
timeSlider.mousemove(function(_e) {
- var _x = _e.pageX - timeSlider.offset().left,
- _t = new IriSP.Model.Time(
- );
- timeTooltip.text(_t.toString()).css("left",_x);
- });
+ if (!currentMedia) {
+ return;
+ }
+ var _x = _e.pageX - timeSlider.offset().left,
+ _t = new IriSP.Model.Time(
+ Math.max(0, currentMedia.duration * Math.min(1, _x / timeSlider.width()))
+ );
+ timeTooltip.text(_t.toString()).css("left",_x);
+ });
$(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
@@ -210,17 +214,6 @@
}
});
- $(".Ldt-Ctrl-SetIn").click(function() {
- if (currentMedia && currentSegment) {
- currentSegment.setBegin(currentMedia.getCurrentTime());
- }
- });
- $(".Ldt-Ctrl-SetOut").click(function() {
- if (currentMedia && currentSegment) {
- currentSegment.setEnd(currentMedia.getCurrentTime());
- }
- });
-
/* UI Events */
function onCurrentMediaPlay() {
@@ -245,17 +238,16 @@
/* Mashup Player */
mashup.currentMedia = null;
-
- var mashupCurrentAnnotation = null,
- mashupSegmentBegin,
+ mashup.currentAnnotation = null;
+ mashup.seeking = false;
+ var mashupSegmentBegin,
mashupSegmentEnd,
mashupTimecode = 0,
- mashupSeeking = false,
seekdiv = $(".video-wait"),
mashupTimedelta;
function showSeek() {
- if (mashupSeeking) {
+ if (currentMedia.seeking) {
seekdiv.show();
}
}
@@ -279,11 +271,11 @@
}
return;
}
- mashupCurrentAnnotation = _annotation;
- mashupSegmentBegin = mashupCurrentAnnotation.annotation.begin.milliseconds;
- mashupSegmentEnd = mashupCurrentAnnotation.annotation.end.milliseconds;
- mashupTimedelta = mashupSegmentBegin - mashupCurrentAnnotation.begin.milliseconds;
- mashup.currentMedia = mashupCurrentAnnotation.getMedia();
+ mashup.currentAnnotation = _annotation;
+ mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds;
+ mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds;
+ mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
+ mashup.currentMedia = mashup.currentAnnotation.getMedia();
project.getMedias().forEach(function(_media) {
if (_media !== mashup.currentMedia) {
@@ -299,7 +291,7 @@
if (!mashup.paused) {
mashup.currentMedia.play();
- mashupSeeking = true;
+ mashup.seeking = true;
setTimeout(showSeek,200);
}
mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
@@ -355,6 +347,8 @@
media.on("setcurrenttime", function(_milliseconds) {
if (media.loaded) {
popcorn.currentTime(_milliseconds / 1000);
+ media.seeking = true;
+ setTimeout(showSeek,200);
}
});
@@ -469,10 +463,10 @@
media.on("seeked", function() {
media.seeking = false;
- if (mashup === currentMedia && media === mashup.currentMedia && mashupSeeking) {
- mashupSeeking = false;
- seekdiv.hide();
+ if (mashup === currentMedia && media === mashup.currentMedia && mashup.seeking) {
+ mashup.seeking = false;
}
+ seekdiv.hide();
});
media.on("volumechange", function() {
@@ -576,14 +570,20 @@
if (!annotation) {
return;
}
+ var segment = mashup.getAnnotation(annotation);
$(".annotation[data-segment-id='" + annotation.id + "']").addClass("active");
+ $(".mashup-tooltip").show().css({
+ left: (100 * ( segment.begin + segment.end ) / ( 2 * mashup.duration ) ) + "%"
+ });
+ $(".mashup-tooltip .segment-tooltip").text(annotation.title);
});
project.on("mouseout-annotation", function() {
- if (currentMedia === mashup && mashupCurrentAnnotation) {
+ if (currentMedia === mashup && mashup.currentAnnotation) {
$(".annotation").removeClass("active");
- $(".item-video.annotation[data-segment-id='" + mashupCurrentAnnotation.annotation.id + "']").addClass("active");
+ $(".item-video.annotation[data-segment-id='" + mashup.currentAnnotation.annotation.id + "']").addClass("active");
}
+ $(".mashup-tooltip").hide();
});
project.on("click-annotation", function(annotation) {
@@ -616,15 +616,37 @@
currentMedia.trigger("pause");
});
- $(".frise")
- .on("mouseover", ".frise-segment", function() {
- project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id")));
+ var mouseoverSegment;
+
+ $(".mashup-frise")
+ .mousemove(function(evt) {
+ if (!mashup.duration.milliseconds) {
+ return;
+ }
+ var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+ if (segment) {
+ if (segment !== mouseoverSegment) {
+ project.trigger("mouseover-annotation", segment.annotation);
+ }
+ } else {
+ if (mouseoverSegment) {
+ project.trigger("mouseout-annotation");
+ }
+ }
+ mouseoverSegment = segment;
})
- .on("mouseout", ".frise-segment", function() {
+ .mouseleave(function() {
project.trigger("mouseout-annotation");
+ mouseoverSegment = undefined;
})
- .on("click", ".frise-segment", function() {
- project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id")));
+ .click(function(evt) {
+ if (!mashup.duration.milliseconds) {
+ return;
+ }
+ var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+ if (segment) {
+ project.trigger("click-annotation", segment.annotation);
+ }
});
mashup.trigger("add");
--- a/integration/js/mashupplayer.js Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/mashupplayer.js Fri Nov 16 19:23:20 2012 +0100
@@ -5,7 +5,14 @@
url: options.url,
serializer: IriSP.serializers.ldt
}),
- mashup;
+ mashup,
+ mediatemplate = _.template('<li class="item-video media" data-media-id="<%= media.id %>">'
+ + '<a href="#"><img 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>'
+ + '<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 %>%;"'
+ + ' class="frise-segment annotation" data-segment-id="<%= annotation.id %>" title="<%= annotation.title %>"></div>')
project.onLoad(function() {
mashup = project.getMashups()[0];
@@ -17,5 +24,57 @@
$(".info-author a").text(mashup.creator);
$(".info-description td").text(mashup.description);
+ var html = '';
+ mashup.getMedias().forEach(function(media) {
+ var segments = mashup.segments.filter(function(segment) {
+ return segment.getMedia() === media;
+ });
+ var segmentshtml = '', k = media.duration ? (100 / media.duration) : 0;
+ segments.forEach(function(segment) {
+ var vizdata = {
+ annotation: segment.annotation,
+ left: k * segment.annotation.begin,
+ width: k * segment.annotation.getDuration()
+ }
+ segmentshtml += segmenttemplate(vizdata);
+ });
+ var mediadata = {
+ media: media,
+ segments: segmentshtml
+ }
+ html += mediatemplate(mediadata);
+ });
+
+ $(".list-video").html(html);
+
+ project.on("mouseover-annotation", function(annotation) {
+ var mediaid = annotation.getMedia().id;
+ $(".media").removeClass("active");
+ $(".media[data-media-id='" + mediaid + "']").addClass("active");
+ });
+
+ project.on("mouseout-annotation", function(annotation) {
+ $(".media").removeClass("active");
+ var mediaid = mashup.currentMedia.id;
+ $(".media[data-media-id='" + mediaid + "']").addClass("active");
+ });
+
+ $(".list-video .frise-segment")
+ .mouseover(function() {
+ project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id")));
+ })
+ .click(function() {
+ project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id")));
+ });
+
+ $(".item-video")
+ .mouseover(function() {
+ $(".media").removeClass("active");
+ })
+ .mouseout(function() {
+ project.trigger("mouseout-annotation");
+ })
+
+
});
}
--- a/integration/js/medialist-serializer.js Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/medialist-serializer.js Fri Nov 16 19:23:20 2012 +0100
@@ -1,7 +1,4 @@
IriSP.serializers.medialist = {
- loadData : function(_url, _callback) {
- IriSP.jQuery.getJSON(_url, _callback);
- },
deSerialize : function(_data, _source) {
var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"];
var _medialist = new IriSP.Model.List(_source.directory);
--- a/integration/js/model.js Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/model.js Fri Nov 16 19:23:20 2012 +0100
@@ -25,6 +25,13 @@
getUID : function() {
return uidbase + pad(4, (++uidincrement % 0x10000), 16) + "-" + rand16(4) + "-" + rand16(6) + rand16(6);
},
+ isLocalURL : function(url) {
+ var matches = url.match(/^(\w+:)\/\/([^/]+)/);
+ if (matches) {
+ return(matches[1] === document.location.protocol && matches[2] === document.location.host)
+ }
+ return true;
+ },
regexpFromTextOrArray : function(_textOrArray, _testOnly, _iexact) {
var _testOnly = _testOnly || false,
_iexact = _iexact || false;
@@ -1057,10 +1064,18 @@
Model.RemoteSource.prototype.get = function() {
this.status = Model._SOURCE_STATUS_WAITING;
- var _this = this;
- this.serializer.loadData(this.url, function(_result) {
- _this.deSerialize(_result);
- _this.handleCallbacks();
+ var _this = this,
+ urlparams = this.url_params || {},
+ dataType = (Model.isLocalURL(this.url) ? "json" : "jsonp");
+ urlparams.format = dataType;
+ ns.jQuery.ajax({
+ url: this.url,
+ dataType: dataType,
+ data: urlparams,
+ success: function(_result) {
+ _this.deSerialize(_result);
+ _this.handleCallbacks();
+ }
});
}
@@ -1076,10 +1091,12 @@
throw "Error : Model.Directory.remoteSource(configuration): configuration.url is undefined";
}
var _config = ns._({ directory: this }).extend(_properties);
- if (typeof this.remoteSources[_properties.url] === "undefined") {
- this.remoteSources[_properties.url] = new Model.RemoteSource(_config);
+ _config.url_params = _config.url_params || {};
+ var _hash = _config.url + "?" + ns.jQuery.param(_config.url_params);
+ if (typeof this.remoteSources[_hash] === "undefined") {
+ this.remoteSources[_hash] = new Model.RemoteSource(_config);
}
- return this.remoteSources[_properties.url];
+ return this.remoteSources[_hash];
}
Model.Directory.prototype.newLocalSource = function(_properties) {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/segmentapi-serializer.js Fri Nov 16 19:23:20 2012 +0100
@@ -0,0 +1,23 @@
+IriSP.serializers.segmentapi = {
+ deSerialize : function(_data, _source) {
+ var _annotationlist = new IriSP.Model.List(_source.directory),
+ _medialist = new IriSP.Model.List(_source.directory);
+ _source.addList("media", _medialist);
+ IriSP._(_data.objects).each(function(_s) {
+ var _ann = new IriSP.Model.Annotation(_s.element_id, _source),
+ _media = _source.getElement(_s.iri_id);
+ if (!_media) {
+ _media = new IriSP.Model.Media(_s.iri_id, _source);
+ _source.getMedias().push(_media);
+ }
+ _ann.setMedia(_s.iri_id);
+ _ann.title = _s.title;
+ _ann.description = _s.abstract;
+ _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(",");
+ _annotationlist.push(_ann);
+ });
+ _source.addList("annotation", _annotationlist);
+ }
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/social.js Fri Nov 16 19:23:20 2012 +0100
@@ -0,0 +1,47 @@
+$(function() {
+
+ var url = document.location.href,
+ text = $("title").text(),
+ clipId = IriSP.Model.getUID(),
+ clip;
+
+ $(".Ldt-Social-CopyBtn").attr("id", this.clipId);
+
+ $(".Ldt-Social-Url").click(function() {
+ var _pop = $(".Ldt-Social-UrlPop");
+ _pop.toggle();
+ if (_pop.is(":visible")) {
+ if (typeof clip == "undefined") {
+ clip = new ZeroClipboard.Client();
+ clip.setHandCursor( true );
+ clip.glue(clipId);
+
+ clip.addEventListener( 'onMouseUp', function() {
+ _pop.hide();
+ clip.hide();
+ });
+ }
+ clip.show();
+ clip.setText( url );
+ $(".Ldt-Social-Input").val(url).focus();
+ } else {
+ clip.hide();
+ }
+ return false;
+ });
+ $(".Ldt-Social-Input").focus(function() {
+ this.select();
+ });
+ $(".Ldt-Social-Ext").click(function() {
+ window.open(
+ $(this).attr("href"),
+ "_blank",
+ "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0");
+ return false;
+ });
+
+ $(".Ldt-Social-Fb").attr("href", "http://www.facebook.com/share.php?" + $.param({ u: url, t: text }));
+ $(".Ldt-Social-Twitter").attr("href", "https://twitter.com/intent/tweet?" + $.param({ url: url, text: text }));
+ $(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + $.param({ url: url, title: text }));
+ $(".Ldt-Social-Mail").attr("href", "mailto:?" + $.param({ subject: text, body: text + ": " + url }));
+});
