# HG changeset patch # User veltr # Date 1351714562 -3600 # Node ID 5ce5e26091eab20c9b576caec4287edb35964730 # Parent 2100ddc308f040f2ce02c6e6872e55c2c659be89 Various improvements diff -r 2100ddc308f0 -r 5ce5e26091ea integration/css/edition.css --- 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); } diff -r 2100ddc308f0 -r 5ce5e26091ea integration/edition.html --- 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 @@
- -
+
+
+
00:00
@@ -189,7 +190,9 @@
- +
+ +

Créer un nouveau segment @@ -222,41 +225,18 @@

- - +
-
+
@@ -266,7 +246,9 @@
- +
+ +
    • @@ -298,7 +280,7 @@

    Liste des segments

    -
    +

    Aucun segment

    @@ -340,7 +322,7 @@ diff -r 2100ddc308f0 -r 5ce5e26091ea integration/img/pinstripe-purple.png Binary file integration/img/pinstripe-purple.png has changed diff -r 2100ddc308f0 -r 5ce5e26091ea integration/img/slice-handles.png Binary file integration/img/slice-handles.png has changed diff -r 2100ddc308f0 -r 5ce5e26091ea integration/js/editor.js --- 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 @@ + '
      • ' + '
    '), viztemplate = _.template('
    '), - intervaltemplate = _.template('<%= time.toString() %>'); + intervaltemplate = _.template('<%= time.toString() %>'), + mediasegmenttemplate = _.template('
    ' + + '
    ' + + '
    ' + + '
    ' + + '

    <%= annotation.title %>

    Cloner le segment' + + '

    De: <%= annotation.begin.toString() %> à <%= annotation.end.toString() %> (durée: <%= annotation.getDuration().toString() %>)

    ' + + '
    '); /* 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; + }); + }