# HG changeset patch # User veltr # Date 1352196087 -3600 # Node ID 47f9a2d63a0ab1d826c859c78ec635ed3d260203 # Parent 1cb099921ca84db21f0b5175855e60b3c8d26b49 Various UI improvements diff -r 1cb099921ca8 -r 47f9a2d63a0a integration/css/edition.css --- a/integration/css/edition.css Mon Nov 05 15:06:14 2012 +0100 +++ b/integration/css/edition.css Tue Nov 06 11:01:27 2012 +0100 @@ -23,6 +23,7 @@ background-repeat: no-repeat; background-position: right 2px; padding-right: 20px; + min-height: 20px; } .title-video-wrap a:hover{ text-decoration: none; @@ -125,19 +126,12 @@ /* frise */ .frise{ height: 22px; - overflow: hidden; position: relative; border: 1px solid #333333; } -.frise-segments,.frise-indications{ - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; -} -.frise-indications{ - z-index: 2; + +.frise-overflow { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .bloc-pvw .frise { margin: 7px 5px 2px; @@ -170,6 +164,10 @@ .frise-segment:last-child{ background-image: none; } +.frise-segment.active { + background-image: url(../img/pinstripe-purple.png); + background-repeat: repeat; +} .frise-indication{ height: 22px; line-height: 22px; @@ -185,7 +183,8 @@ margin-left: -15px; } .frise-position { - width: 1px; margin-left: -0.5px; position: absolute; height: 100%; background: #FF00FC; + width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute; + z-index: 3; background: #FF00FC; } /* col-middle - bloc-segmentation */ .bloc-segmentation{ @@ -334,6 +333,10 @@ padding: 0 10px; color: #FFF; font-weight: 600; + display: none; +} +.empty-mode .tutorial { + display: block; } .tutorial h2{ padding-top: 16px; @@ -343,10 +346,10 @@ .tutorial ol{ padding-left: 22px; } -.tutorial ol li:first-child{ +.tutorial li:first-child{ width: 324px; } -.tutorial ol li{ +.tutorial li{ list-style: decimal; font-size: 14px; margin-bottom: 16px; @@ -359,51 +362,40 @@ min-height: 750px; background: url(../img/bg-col.png) repeat-x 0 0 #e6e6e6; } -.col-left form{ +.left-head { background: url(../img/bg-video-search.png) 0 0 repeat-x #906ebe; height: 70px; padding-left: 10px; margin-bottom: 1px; } -.col-left form h2{ +.left-head h2{ padding-top: 8px; margin-bottom: 12px; color: #30036d; font-size: 16px; font-weight: 600; } -.col-left input[type=text]{ - width: 206px; +.left-head input { + width: 222px; font-size: 14px; border: none; height: 20px; - padding: 0 20px 0 4px; + padding: 0 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; + background: #FFF url(../img/zoom-icon.png) 214px 3px no-repeat; } -.col-left form p{ - position: relative; - width: 230px; -} -.col-left input[type=text]::-webkit-input-placeholder{ + +.col-left input::-webkit-input-placeholder{ color: #b48aed; font-style: italic; } -.col-left input[type=text]:-moz-placeholder { +.col-left input:-moz-placeholder { color: #b48aed; font-style: italic; } -.col-left input[type=submit]{ - position: absolute; - right: 2px; - width: 20px; - top: 0; - height: 20px; - border: none; - z-index: 2; - background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat; -} + .col-left .item-video:hover, .col-left .item-video.active{ background: url(../img/arrow-item-video-sprite.png) right center no-repeat; @@ -611,7 +603,16 @@ position: relative; background: #333333; } -a.publier-button{ +.video-wait { + display: none; + position: absolute; left: 0; top: 0; width: 100%; height: 100%; + background-color: rgba(120, 120, 140, .6); + background-image: url(../img/reel.gif); + background-position: center; + background-repeat: no-repeat; + z-index: 3; +} +.publier-button{ position: absolute; width: 69px; height: 67px; @@ -620,13 +621,13 @@ top: 10px; z-index: 4; } -a.publier-button:hover{ +.publier-button:hover{ background-position: 0 -67px; } -a.publier-button.disable{ +.publier-button.disable{ background: url(../img/publier-button-sprite.png) 0 -67px no-repeat; } -a.publier-button.disable:hover{ +.publier-button.disable:hover{ background-color: none; } @@ -644,6 +645,7 @@ background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%); border-top: 1px solid #969696; height: 4px; + position: relative; z-index: 5; } .Ldt-Slider { @@ -660,7 +662,7 @@ .Ldt-Slider-Time { position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8; - font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px; + font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -14px; display: none; text-align: center; font-weight: bold; } diff -r 1cb099921ca8 -r 47f9a2d63a0a integration/edition.html --- a/integration/edition.html Mon Nov 05 15:06:14 2012 +0100 +++ b/integration/edition.html Tue Nov 06 11:01:27 2012 +0100 @@ -121,13 +121,10 @@
-
+

Sélectionner les vidéos

-

- - -

- + +
@@ -150,6 +147,7 @@
  • Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !
  • +
    @@ -237,9 +235,11 @@
    -
    -
    -
    +
    +
    +
    +
    +
    @@ -282,9 +282,11 @@

    Liste des segments

    Aucun segment

    -
    -
    -
    +
    +
    +
    +
    +
    diff -r 1cb099921ca8 -r 47f9a2d63a0a integration/img/reel.gif Binary file integration/img/reel.gif has changed diff -r 1cb099921ca8 -r 47f9a2d63a0a integration/js/editor.js --- a/integration/js/editor.js Mon Nov 05 15:06:14 2012 +0100 +++ b/integration/js/editor.js Tue Nov 06 11:01:27 2012 +0100 @@ -1,5 +1,15 @@ + +IriSP.hc_messages = { + duration_ : "Durée :", + edit_segment: "Éditer le segment", + segment_down: "Descendre le segment", + segment_up: "Remonter le segment", + delete_segment: "Supprimer le segment" +} + IriSP.Hashcut = function(options) { + /* Load Media List */ var directory = new IriSP.Model.Directory(), @@ -10,14 +20,14 @@ mashup = new IriSP.Model.Mashup(false, project), mediatemplate = _.template('
  • <%= title %>' + '<%= title %><%= description %>' - + 'Durée : <%= duration.toString() %>
  • '), + + '<%= IriSP.hc_messages.duration_ %> <%= duration.toString() %>'), segmenttemplate = _.template('
  • ' + '<%= annotation.getMedia().title %>' + '<%= annotation.getMedia().title %>' + '<%= annotation.title %><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)' - + '
    • ' - + '
  • '), - viztemplate = _.template('
    '), + + '
    • ' + + '
    '), + viztemplate = _.template('
    '), intervaltemplate = _.template('<%= time.toString() %>'), mediasegmenttemplate = _.template('
    ' + '
    ' @@ -79,7 +89,8 @@ var vizdata = { left: k * t, width: k * _s.duration, - color: _s.getMedia().color + color: _s.getMedia().color, + segmentid: _s.annotation.id } vizhtml += viztemplate(vizdata); t += _s.duration.milliseconds; @@ -182,7 +193,6 @@ timeSlider.mousemove(function(_e) { var _x = _e.pageX - timeSlider.offset().left, _t = new IriSP.Model.Time( - currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0 ); timeTooltip.text(_t.toString()).css("left",_x); }); @@ -366,9 +376,15 @@ mashupSegmentEnd, mashupTimecode = 0, mashupSeeking = false, - mashupSeekdiv, + seekdiv = $(".video-wait"), mashupTimedelta; - + + function showSeek() { + if (mashupSeeking) { + seekdiv.show(); + } + } + function changeCurrentAnnotation() { if (mashupTimecode >= mashup.duration) { if (!mashup.paused) { @@ -409,7 +425,7 @@ if (!mashup.paused) { mashupCurrentMedia.play(); mashupSeeking = true; -//TODO: _seekdiv.show(); + setTimeout(showSeek,200); } mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode)); @@ -445,17 +461,16 @@ var addMode; function setMedia(media) { - $(".col-left .item-video").removeClass("active"); - $(".tutorial").hide(); - //TODO: Show Tutorial when Hashcut is empty if (currentMedia) { currentMedia.pause(); } currentMedia = media; if (currentMedia.elementType == "media") { $("video").hide(); - $(".col-left .item-video[data-media-id='" + currentMedia.id + "']").addClass("active"); showSegmentation(); + if (!currentMedia.loaded) { + seekdiv.show(); + } var currentvideo = $('#video_' + currentMedia.id); if (!currentvideo.length) { addMediaPlayer(currentMedia); @@ -491,6 +506,7 @@ $(".annotation-media-title").text(this.getMedia().title); $(".annotation-description").text(this.description); setPointerToCurrentAnnotation(); + highlightCurrentSegment(); } }); } @@ -655,6 +671,9 @@ // Binding UI Events and Mashup Playing to Media media.on("loadedmetadata", function() { + if (media === currentMedia) { + seekdiv.hide(); + } mashup.checkLoaded(); }); @@ -701,7 +720,7 @@ media.seeking = false; if (mashup === currentMedia && media === mashupCurrentMedia && mashupSeeking) { mashupSeeking = false; -//TODO: _seekdiv.hide(); + seekdiv.hide(); } }); @@ -821,6 +840,11 @@ $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode"); return false; } + function showEmpty() { + $("video").hide(); + $(".col-middle").removeClass("pvw-mode segment-mode").addClass("empty-mode"); + return false; + } $(".tab-pvw").click(function() { if (mashup.segments.length) { @@ -836,17 +860,42 @@ } function highlightCurrentSegment() { - $(".organize-segments .item-video").removeClass("active"); + $(".organize-segments .item-video, .col-left .item-video, .frise-segment").removeClass("active"); + var segmentid = undefined; if (currentMedia && currentSegment) { - $(".item-video[data-segment-id='" + currentSegment.id + "']").addClass("active"); + segmentid = currentSegment.id; + } + if (currentMedia === mashup && mashupCurrentAnnotation) { + segmentid = mashupCurrentAnnotation.annotation.id; } + $(".item-video[data-segment-id='" + segmentid + "']").addClass("active"); + var mediaid = undefined; + if (currentMedia) { + mediaid = currentMedia.id; + } + if (currentMedia === mashup && mashupCurrentMedia) { + mediaid = mashupCurrentMedia.id + } + $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active"); } - $(".organize-segments").sortable({ + function hoverSegment() { + var segmentid = $(this).attr("data-segment-id"); + $(".organize-segments .item-video, .frise-segment").removeClass("active"); + $(".item-video[data-segment-id='" + segmentid + "'], .frise-segment[data-segment-id='" + segmentid + "']").addClass("active"); + } + + $(".frise") + .on("mouseover", ".frise-segment", hoverSegment) + .on("mouseout", ".frise-segment", highlightCurrentSegment) + + $(".organize-segments") + .sortable({ stop : reorganizeMashup - }); - - $(".organize-segments").on("click", ".item-video", function(e) { + }) + .on("mouseover", ".item-video", hoverSegment) + .on("mouseout", ".item-video", highlightCurrentSegment) + .on("click", ".item-video", function(e) { var el = $(this), segment = mashup.getAnnotationById(el.attr("data-segment-id")); setMedia(mashup); @@ -854,34 +903,33 @@ mashup.setCurrentTime(segment.begin); } return false; - }); - - $(".organize-segments").on("click", ".edit", function(e) { + }) + .on("click", ".edit", function(e) { var currentItem = $(this).parents(".item-video"), media = project.getElement(currentItem.attr("data-media-id")), segment = project.getElement(currentItem.attr("data-segment-id")); currentSegment = segment; setMedia(media); return false; - }); - - $(".organize-segments").on("click", ".top", function(e){ + }) + .on("click", ".top", function(e){ var currentItem = $(this).parents(".item-video"); currentItem.insertBefore(currentItem.prev()); reorganizeMashup(); return false; - }); - - $(".organize-segments").on("click", ".bottom", function(e){ + }) + .on("click", ".bottom", function(e){ var currentItem = $(this).parents(".item-video"); currentItem.insertAfter(currentItem.next()); reorganizeMashup(); return false; - }); - - $(".organize-segments").on("click", ".delete", function(e){ + }) + .on("click", ".delete", function(e){ var id = $(this).parents(".item-video").attr("data-segment-id"); mashup.removeAnnotationById(id); + if (!mashup.segments.length) { + showEmpty(); + } return false; }); @@ -972,4 +1020,11 @@ return false; }); + /* Changing Hashcut Title and description */ + + $("#hashcut-title").on("keyup change input paste", function() { + mashup.title = $(this).val(); + $(".title-video-wrap a").text(mashup.title); + }); + }