--- a/integration/css/edition.css Tue Oct 30 18:45:16 2012 +0100
+++ b/integration/css/edition.css Wed Oct 31 21:16:02 2012 +0100
@@ -124,7 +124,6 @@
/* frise */
.frise{
- width: 458px;
height: 22px;
overflow: hidden;
position: relative;
@@ -140,6 +139,10 @@
.frise-indications{
z-index: 2;
}
+.bloc-pvw .frise {
+ margin: 7px 5px 2px;
+}
+
.aucun-segment{
font-weight: 600;
font-style: italic;
@@ -155,14 +158,14 @@
background-image: url(../img/border-right-segment.png);
background-repeat: repeat-y;
background-position: right top;
- -moz-box-shadow: inset 0px 2px 2px 0px #333;
- -webkit-box-shadow: inset 0px 2px 2px 0px #333;
- box-shadow: inset 0px 2px 2px 0px #333;
+ -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;
}
.frise-segment:first-child{
- -moz-box-shadow: inset 2px 2px 2px 0px #333;
- -webkit-box-shadow: inset 2px 2px 2px 0px #333;
- box-shadow: inset 2px 2px 2px 0px #333;
+ -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{
background-image: none;
@@ -189,24 +192,17 @@
position: relative;
}
-.bloc-segmentation .existant h2{
- color: #30036d;
- font-size: 14px;
- font-weight: 600;
- margin: 10px 8px 8px;
+/* col-middle - bloc-segmentation - popin.segmentation */
+
+.pointer-padder {
+ left: 5px;
+ position: absolute;
+ right: 5px;
+ top: 0;
}
-.bloc-segmentation .segment{
- width: 100%;
- height: 8px;
- background-color: #b6b8b8;
- margin-bottom: 5px;
- position: relative;
-}
-.bloc-segmentation .section{
- background-color: #ff7f0e;
- height: 6px;
- border:1px solid #999999;
- position: absolute;
+
+.pointer-padder .pointer {
+ top: 0; margin-left: -10px;
}
.segment-info {
@@ -216,14 +212,6 @@
overflow: hidden;
}
-/* col-middle - bloc-segmentation - popin.segmentation */
-.segment-info .pointer{
- top: 0; margin-left: -10px;
-}
-
-.segmentation .pointer{
- left: 230px;
-}
.segmentation h2{
font-size: 14px;
font-weight: 600;
@@ -287,31 +275,60 @@
.add-segment {
float: right; margin: 4px 0;
}
+.media-segments h2{
+ color: #30036d;
+ font-size: 14px;
+ font-weight: 600;
+ margin: 10px 8px 2px;
+}
-.segment-section{
- top: 8px; left: 15px;
+.media-segment {
+ height: 8px;
+ margin: 8px 6px 0;
+ background-color: #b6b8b8;
+ position: relative;
+}
+.media-section {
+ position: absolute;
+}
+.media-segment-section {
+ top: 0; height: 8px;
}
-.segment-section h3{
+
+.media-current-section {
+ background: url(../img/pinstripe-purple.png);
+ top: -2px; height: 2px;
+}
+
+.media-current-section-inner {
+ background: url(../img/pinstripe-purple.png);
+ margin-top: 10px; height: 2px;
+}
+.media-segment .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{
padding: 0;
color: #de2500;
margin-bottom: 4px;
font-weight: 600;
}
-.segment-section p{
+.media-segment-popin p{
+ margin-right: 155px;
font-size: 12px;
}
-.segment-section p span{
+.media-segment-popin span{
color: #7628df;
}
-
-.segment-section a.reprendre-segment{
+.reprendre-segment{
float: right;
display: block;
}
-.segment-section .instant-description{
- float: left;
- margin-right: 16px;
-}
/* col-middle - bloc-vide */
.tutorial{
padding: 0 10px;
@@ -429,9 +446,6 @@
/* popin - frise-description */
-.mashup-description img.pointer{
- right: 36px;
-}
.annotation-title {
color: #de2500;
font-size: 14px;
@@ -617,15 +631,23 @@
}
.widget {
- position: relative;
+ position: relative;
}
/* Styles from Metadataplayer */
/* Slider Widget */
+.Ldt-Slider-Container {
+ background: #969696;
+ background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%);
+ background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
+ border-top: 1px solid #969696;
+ height: 4px;
+}
+
.Ldt-Slider {
- border: none; border-radius: 0; padding: 0; margin: 0; background: #B6B8B8;
+ border: none; border-radius: 0; padding: 0; margin: 0 6px; height: 100%; background: #B6B8B8;
}
.Ldt-Slider .ui-slider-handle {
@@ -648,7 +670,7 @@
font-size: 10px;
background:url('../img/player_gradient.png') repeat-x transparent ;
height: 25px;
- border: 1px solid #b6b8b8;
+ border: 1px solid #969696;
position: relative;
}
@@ -668,7 +690,7 @@
}
.Ldt-Ctrl-spacer {
- float: left; width: 1px; height: 25px; background: #b6b8b8;
+ float: left; width: 1px; height: 25px; background: #969696;
}
.Ldt-Ctrl-Play {
@@ -823,7 +845,7 @@
/* Slice Widget */
.Ldt-Slice {
- border-radius: 0; border: none; padding: 0; margin: 12px 0 12px; background: #B6B8B8; height: 8px;
+ border-radius: 0; border: none; padding: 0; margin: 12px 6px; background: #B6B8B8; height: 8px;
}
.Ldt-Slice .ui-slider-handle {
@@ -835,10 +857,18 @@
margin-left: -7px;
}
+.ui-slider-handle.Ldt-Slice-left-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-left-handle.ui-state-active {
+ background-position: 0 -20px;
+}
+
.ui-slider-handle.Ldt-Slice-right-handle {
margin-left: 0; background-position: -7px 0;
}
+.ui-slider-handle.Ldt-Slice-right-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-right-handle.ui-state-active {
+ background-position: -7px -20px;
+}
+
.Ldt-Slice .ui-slider-range {
background: url(../img/pinstripe-purple.png);
}
--- a/integration/edition.html Tue Oct 30 18:45:16 2012 +0100
+++ b/integration/edition.html Wed Oct 31 21:16:02 2012 +0100
@@ -154,8 +154,9 @@
</div>
<div class="widget">
-
- <div class="Ldt-Slider"></div>
+ <div class="Ldt-Slider-Container">
+ <div class="Ldt-Slider"></div>
+ </div>
<div class="Ldt-Slider-Time">00:00</div>
<div class="Ldt-Ctrl">
@@ -189,7 +190,9 @@
<div class="bloc-segmentation">
<div class="Ldt-Slice"></div>
<div class="segment-info segmentation">
- <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="pointer-padder">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ </div>
<div class="popin-content">
<h2>
<span class="create-or-edit">Créer un nouveau segment</span>
@@ -222,41 +225,18 @@
</form>
</div>
</div><!-- popin segmentation -->
-<!-- //TODO: Add "Existing Segments"
- <div class="existant">
- <h2>Segments existants :</h2>
- <div class="segments">
- <div class="segment">
- <div class="section" style="left:0%;width:20%;"></div>
- <div class="popin segment-section">
- <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" />
- <div class="popin-content clearfix">
- <div class="instant-description">
- <h3>Le moment crucial où le maïs explose</h3>
- <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p>
- </div>
- <a href="#" class="button reprendre-segment">Reprendre le segment</a>
- </div>
- </div><!-- popin segment-section -->
-<!--
- </div>
- <div class="segment">
- <div class="section" style="left:20%;width:20%;"></div>
- </div>
- <div class="segment">
- <div class="section" style="left:60%;width:20%;"></div>
- </div>
- <div class="segment">
- <div class="section" style="left:80%;width:10%;"></div>
- </div>
+
+ <div class="media-segments self-media-segments">
+ <h2>Mes segments sur ce média :</h2>
+ <div class="media-segments-list">
</div>
</div>
--->
+
</div><!-- bloc-segmentation -->
<div class="bloc-pvw">
- <div class="frise clearfix">
+ <div class="frise">
<div class="frise-indications">
</div>
<div class="frise-segments">
@@ -266,7 +246,9 @@
</div>
<div class="segment-info mashup-description">
- <img class="pointer" src="img/popin-triangle.png" alt="" />
+ <div class="pointer-padder">
+ <img class="pointer" src="img/popin-triangle.png" alt="" />
+ </div>
<div class="popin-content">
<ul class="tools">
<li><a title="Éditer" class="edit" href="#"></a></li>
@@ -298,7 +280,7 @@
<div class="col-right">
<div class="liste-segment">
<h2>Liste des segments</h2>
- <div class="frise clearfix">
+ <div class="frise">
<p class="aucun-segment">Aucun segment</p>
<div class="frise-indications">
</div>
@@ -340,7 +322,7 @@
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
$(function() {
- var hashcut = new IriSP.Hashcut({url: "data/moon.json"});
+ var hashcut = new IriSP.Hashcut({url: "data/bpidata.json"});
});
</script>
</body>
Binary file integration/img/pinstripe-purple.png has changed
Binary file integration/img/slice-handles.png has changed
--- a/integration/js/editor.js Tue Oct 30 18:45:16 2012 +0100
+++ b/integration/js/editor.js Wed Oct 31 21:16:02 2012 +0100
@@ -18,7 +18,14 @@
+ '<ul class="tools"><li><a class="edit" href="#" title="Éditer le segment"></a></li><li><a class="bottom" href="#" title="Descendre le segment"></a></li>'
+ '<li><a class="top" href="#" title="Remonter le segment"></a></li><li><a class="delete" href="#" title="Supprimer le segment"></a></li></ul></span></li>'),
viztemplate = _.template('<div class="frise-segment" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
- intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>');
+ intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'),
+ 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.getMedia().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 %>">Cloner le segment</a>'
+ + '<p>De: <span><%= annotation.begin.toString() %></span> à <span><%= annotation.end.toString() %></span> (durée: <span><%= annotation.getDuration().toString() %></span>)</p>'
+ + '</div></div></div></div>');
/* Fill left column with Media List */
@@ -114,6 +121,7 @@
/* Slider */
var timeSlider = $(".Ldt-Slider"),
+ timeSliderContainer = $(".Ldt-Slider-Container"),
slidersRange = 920;
timeSlider.slider({
range: "min",
@@ -136,7 +144,7 @@
timeSliderTimeoutDuration = 1500,
timeTooltip = $(".Ldt-Slider-Time");
- timeSlider.css(calculateSliderCss(timeSliderMinimizedHeight));
+ timeSliderContainer.css(calculateSliderCss(timeSliderMinimizedHeight));
timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight));
function timeSliderMouseOver() {
@@ -165,13 +173,13 @@
}, timeSliderTimeoutDuration);
}
- timeSlider
+ timeSliderContainer
.mouseover(function() {
timeTooltip.show();
timeSliderMouseOver();
})
- .mouseout(timeSliderMouseOut)
- .mousemove(function(_e) {
+ .mouseout(timeSliderMouseOut);
+ timeSlider.mousemove(function(_e) {
var _x = _e.pageX - timeSlider.offset().left,
_t = new IriSP.Model.Time(
currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
@@ -182,7 +190,7 @@
$(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
function timeSliderAnimateToHeight(_height) {
- timeSlider.stop().animate(
+ timeSliderContainer.stop().animate(
calculateSliderCss(_height),
500,
function() {
@@ -419,12 +427,18 @@
f = slidersRange / currentMedia.duration,
tangleStart = $(".tangle-start"),
tangleEnd = $(".tangle-end"),
- tangleDuration = $(".tangle-duration");
+ tangleDuration = $(".tangle-duration"),
+ k = 100 / currentMedia.duration,
+ p = k * (start + end) / 2;
sliceSlider.slider( "values", [ f * start, f * end ] );
tangleStart.text(start.toString(tangleStart.hasClass("active"))).attr("data-milliseconds",start.milliseconds);
tangleEnd.text(end.toString(tangleEnd.hasClass("active"))).attr("data-milliseconds",end.milliseconds);
tangleDuration.text(dur.toString(tangleDuration.hasClass("active"))).attr("data-milliseconds",dur.milliseconds);
- $(".segment-info .pointer").css("left",(parseFloat($(".Ldt-Slice-left-handle").css("left")) + parseFloat($(".Ldt-Slice-right-handle").css("left")))/2)
+ $(".segment-info .pointer").css("left", p + "%");
+ $(".media-current-section").css({
+ left: (k * start) + "%",
+ width: (k * dur) + "%"
+ })
}
}
@@ -433,6 +447,7 @@
function setMedia(media) {
$(".col-left .item-video").removeClass("active");
$(".tutorial").hide();
+ //TODO: Show Tutorial when Hashcut is empty
if (currentMedia) {
currentMedia.pause();
}
@@ -477,7 +492,7 @@
$(".annotation-description").text(this.description);
setPointerToCurrentAnnotation();
}
- })
+ });
}
if (currentMedia.loaded) {
currentMedia.setCurrentTime(currentSegment.begin);
@@ -489,7 +504,34 @@
$("#segment-title").val(currentSegment.title);
$("#segment-description").val(currentSegment.description);
$("#segment-tags").val("");
+ var relatedSegments = mashup.segments.filter(function(_s) {
+ return _s.getMedia() === currentMedia && _s.annotation !== currentSegment;
+ });
+ var html = "";
+ if (relatedSegments.length) {
+ var k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration,
+ currentleft = k * currentSegment.begin,
+ currentwidth = k * currentSegment.getDuration();
+ relatedSegments.forEach(function(_s) {
+ var pos = k * (_s.annotation.begin + _s.annotation.end) / 2,
+ corrpos = Math.max(145, Math.min(305, pos));
+ vizdata = {
+ annotation : _s.annotation,
+ currentleft : currentleft,
+ currentwidth : currentwidth,
+ popleft : corrpos,
+ left : k * _s.annotation.begin,
+ width : k * _s.annotation.getDuration(),
+ pointerpos : (pos - corrpos)
+ }
+ html += mediasegmenttemplate(vizdata);
+ });
+ $(".self-media-segments").show();
+ } else {
+ $(".self-media-segments").hide();
+ }
}
+ $(".self-media-segments .media-segments-list").html(html);
if (currentMedia.elementType === "mashup") {
showPreview();
mashup.checkLoaded();
@@ -759,6 +801,7 @@
if (segment) {
mashup.setCurrentTime(segment.begin);
}
+ return false;
})
/* Click on media items */
@@ -903,10 +946,30 @@
}
});
+ /* Click on current segment in Preview */
+
$(".mashup-description .edit").click(function() {
if (mashupCurrentAnnotation) {
currentSegment = mashupCurrentAnnotation.annotation;
setMedia(mashupCurrentAnnotation.getMedia());
}
- })
+ });
+
+ /* Handling related segments */
+
+ $(".media-segments-list").on("mouseover", ".media-segment", function() {
+ $(this).find(".media-segment-popin").show();
+ }).on("mouseout", ".media-segment", function() {
+ $(this).find(".media-segment-popin").hide();
+ }).on("click", ".reprendre-segment", function() {
+ var s = project.getElement($(this).attr("data-segment-id"));
+ currentSegment.title = s.title;
+ currentSegment.description = s.description;
+ $("#segment-title").val(s.title);
+ $("#segment-description").val(s.description);
+ currentSegment.setBegin(s.begin);
+ currentSegment.setEnd(s.end);
+ return false;
+ });
+
}
