# HG changeset patch # User veltr # Date 1352395487 -3600 # Node ID 3ec2343f2b85a371e776b24c222126df3977ec29 # Parent 76efa2333f3163169042420837060bda75ef2f40 Refactoring to have common code between editor and player diff -r 76efa2333f31 -r 3ec2343f2b85 integration/css/common.css --- a/integration/css/common.css Tue Nov 06 18:49:13 2012 +0100 +++ b/integration/css/common.css Thu Nov 08 18:24:47 2012 +0100 @@ -380,17 +380,17 @@ /* content */ .left-content, .right-content{ - padding-top: 8px; float: left; } .left-content h2, .right-content h2{ padding: 6px 0; - margin-bottom: 14px; + margin: 8px 0 14px; border-bottom: 1px solid #333333; color: #30036d; font-size: 18px; font-weight: 600; + clear: both; } /* left-content */ .left-content{ @@ -499,6 +499,7 @@ background: #CCCCCC; } .frise-segment{ + cursor: pointer; height: 22px; position: absolute; background-image: url(../img/border-right-segment.png); diff -r 76efa2333f31 -r 3ec2343f2b85 integration/css/edition.css --- a/integration/css/edition.css Tue Nov 06 18:49:13 2012 +0100 +++ b/integration/css/edition.css Thu Nov 08 18:24:47 2012 +0100 @@ -46,27 +46,12 @@ .update-title .form-left{ float: left; } -.update-title textarea{ - width: 200px; - height: 66px; - max-width: 530px; -} .update-title .form-left{ margin-right: 12px; } .update-title .pointer{ left: 110px; } -.update-title label{ - display: block; - margin-bottom: 4px; -} -.update-title input[type=text]{ - width: 200px; -} -.update-title p.titre-wrap{ - margin-bottom: 6px; -} /* col */ .col-middle, .col-left, @@ -140,7 +125,7 @@ font-size: 14px; font-weight: 600; color:#de2500; - margin: 5px 0 10px; + margin: 5px 0 2px; } .time-tangle { @@ -173,31 +158,34 @@ float: left; } .segmentation .form-segment-left{ - width: 228px; + width: 230px; } -.segmentation form p{ - margin-bottom: 8px; -} -.segmentation label{ + +.segmentation label, .update-title label { display: block; font-size: 12px; font-weight: 600; - margin-bottom: 4px; + margin: 8px 0 4px; } -.segmentation textarea{ +.segmentation textarea, .update-title textarea { width: 200px; - height: 66px; + height: 69px; max-width: 200px; font-size: 12px; } -.segmentation input[type=text]{ + +.segmentation textarea { + margin-bottom: 32px; +} + +.segmentation input[type=text], .update-title input[type=text]{ font-size: 12px; width: 200px; height: 20px; } .add-segment { - float: right; margin: 4px 0; + position: absolute; right: 10px; bottom: 10px; } .media-segments h2{ color: #30036d; @@ -536,3 +524,21 @@ left: 0; position: absolute; width: 100%; background: url(../img/tooltip.png) bottom no-repeat; } + +.tagit { + border: 1px solid #867A97; + padding: 0 4px; width: 200px; + font-size: 12px; font-family: OpenSans; +} + +ul.tagit li.tagit-choice { + padding: 3px 18px 3px 3px; +} + +ul.tagit li.tagit-new { + padding: 0; +} + +ul.tagit input[type="text"] { + width: 100px; +} diff -r 76efa2333f31 -r 3ec2343f2b85 integration/css/hashcut.css --- a/integration/css/hashcut.css Tue Nov 06 18:49:13 2012 +0100 +++ b/integration/css/hashcut.css Thu Nov 08 18:24:47 2012 +0100 @@ -35,10 +35,11 @@ color: #7628df; } .cloner{ - float: right; + float: right; margin-bottom: 8px; } .list-video{ - height: 450px; + height: auto; + margin-left: -10px; } .item-video:hover, .item-video.active{ diff -r 76efa2333f31 -r 3ec2343f2b85 integration/data/moon.json --- a/integration/data/moon.json Tue Nov 06 18:49:13 2012 +0100 +++ b/integration/data/moon.json Thu Nov 08 18:24:47 2012 +0100 @@ -1,20 +1,20 @@ [ { - "id": "melies", + "id": "f72aa2f4-29bb-11e2-a193-08002791f1b7", "video": "http://www.iri.centrepompidou.fr/dev/~veltr/mashup/moon/melies.mp4", "title": "Le voyage à la lune", "author": "Georges Méliès", "thumbnail": "http://www.iri.centrepompidou.fr/dev/~veltr/mashup/moon/melies.jpg", "duration": 674000 }, { - "id": "apollo", + "id": "7e96d10c-29be-11e2-a481-08002791f1b7", "video": "http://www.iri.centrepompidou.fr/dev/~veltr/mashup/moon/apollo.mp4", "title": "Apollo 11 Overview", "author": "NASA", "thumbnail": "http://www.iri.centrepompidou.fr/dev/~veltr/mashup/moon/apollo.jpg", "duration": 137000 }, { - "id": "juno", + "id": "7c3f5e0e-29c0-11e2-8017-08002791f1b7", "video": "http://www.iri.centrepompidou.fr/dev/~veltr/mashup/moon/juno.mp4", "title": "Launch of Juno!", "author": "NASA", diff -r 76efa2333f31 -r 3ec2343f2b85 integration/edition.html --- a/integration/edition.html Tue Nov 06 18:49:13 2012 +0100 +++ b/integration/edition.html Thu Nov 08 18:24:47 2012 +0100 @@ -8,6 +8,7 @@ Hashcut > Edition + @@ -24,19 +25,15 @@
-

- - -

-

- - -

+ + + +
    -

    +

    -

    +
    @@ -212,7 +209,7 @@

    - +

    @@ -237,7 +234,7 @@
    -
    +
    @@ -270,7 +267,7 @@ Tags : - (fonctionnalité à venir) + @@ -286,7 +283,7 @@

    Liste des segments

    -
    +

    Aucun segment

    @@ -320,16 +317,18 @@ + + diff -r 76efa2333f31 -r 3ec2343f2b85 integration/hashcut.html --- a/integration/hashcut.html Tue Nov 06 18:49:13 2012 +0100 +++ b/integration/hashcut.html Thu Nov 08 18:24:47 2012 +0100 @@ -158,13 +158,11 @@
    -
    +
    -
    - 15:0030:0045:001:00:001:15:001:30:001:45:00
    @@ -197,7 +195,7 @@

    Plus d’informations

    -
    +
    @@ -206,20 +204,20 @@ - + - + - + - +
    Durée :17:03
    Auteur : Hashcutter75
    Description : An Atlas V rocket lofted the Juno spacecraft toward Jupiter from Space Launch Complex-41. The 4-ton Juno spacecraft will take five years to reach Jupiter on a mission to study its structure and decipher its history.
    Cloner le Hashcut @@ -280,6 +278,18 @@ + + + + + + diff -r 76efa2333f31 -r 3ec2343f2b85 integration/img/tooltip.png Binary file integration/img/tooltip.png has changed diff -r 76efa2333f31 -r 3ec2343f2b85 integration/js/editor.js --- a/integration/js/editor.js Tue Nov 06 18:49:13 2012 +0100 +++ b/integration/js/editor.js Thu Nov 08 18:24:47 2012 +0100 @@ -13,8 +13,7 @@ mashup_title_placeholder: "Hashcut sans titre" } -IriSP.Hashcut = function(options) { - +IriSP.editor = function(options) { /* Load Media List */ @@ -24,48 +23,60 @@ serializer: IriSP.serializers.medialist }), mashup = new IriSP.Model.Mashup(false, project), - mediatemplate = _.template('
  • <%= title %>' + mediatemplate = _.template('
  • <%= title %>' + '<%= title %><%= description %>' + '<%= IriSP.hc_messages.Duration_ %> <%= duration.toString() %>
    • '), - segmenttemplate = _.template('
  • ' + segmenttemplate = _.template('
  • ' + '<%= annotation.getMedia().title %>' + '
    • <%= annotation.status_messages.join("
    • ") %>
    <%= annotation.getMedia().title %>' + '<%= annotation.title %><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)' + '
      • ' + '
    • '), - viztemplate = _.template('
    '), - intervaltemplate = _.template('<%= time.toString() %>'), mediasegmenttemplate = _.template('
    ' - + '
    ' + + '
    ' + '
    ' + '
    ' + '

    <%= annotation.title %>

    <%= IriSP.hc_messages.clone_segment %>' + '

    <%= IriSP.hc_messages.From_ %> <%= annotation.begin.toString() %> <%= IriSP.hc_messages.to_ %> <%= annotation.end.toString() %> (<%= IriSP.hc_messages.duration_ %> <%= annotation.getDuration().toString() %>)

    ' - + '
    '); + + '
    '), + addMode, currentMedia, currentSegment; + + IriSP.mashupcore(project, mashup); /* Validation of segments and mashup */ var segmentcritical = [ { validate: function(_s) { - var _d = _s.getDuration(); - return (_d > 1000 && _d < 180000); + return (_s.getDuration() >= 1000); }, - message: "La durée du segment doit être comprise entre 1 seconde et trois minutes" + message: "Le segment doit durer au moins une seconde" + }, + { + validate: function(_s) { + return (_s.getDuration() < 180000); + }, + message: "Le segment doit durer moins de trois minutes" }, { validate: function(_s) { return (!!_s.title && _s.title !== IriSP.hc_messages.segment_title_placeholder); }, - message: "Un titre doit être donné au segment" + message: "Le segment doit avoir un titre" } ]; var segmentwarning = [ { validate: function(_s) { - return (_s.description); + return (!!_s.description); }, message: "Il est recommandé de donner une description au segment" + }, + { + validate: function(_s) { + return (!!_s.keywords.length); + }, + message: "Il est recommandé de tagguer le segment" } ]; @@ -129,30 +140,14 @@ }); /* Fill right column when mashup is updated */ - - function setPointerToCurrentAnnotation() { - if (mashupCurrentAnnotation) { - var p = (mashupCurrentAnnotation.begin + mashupCurrentAnnotation.end) / (2 * mashup.duration); - $(".mashup-description .pointer").css("left", (100 * p) + "%"); - } - } function updateMashupUI() { - var listhtml = '', vizhtml = '', t = 0, k = mashup.duration ? (100 / mashup.duration) : 0; - var critical = false, warning = false, messages = []; + var listhtml = '', critical = false, warning = false, messages = []; mashup.segments.forEach(function(_s) { listhtml += segmenttemplate(_s); - var vizdata = { - left: k * t, - width: k * _s.duration, - color: _s.getMedia().color, - segmentid: _s.annotation.id - } - vizhtml += viztemplate(vizdata); if (_s.annotation.status === "critical") { critical = true; } - t += _s.duration.milliseconds; }); if (critical) { messages.push("Certains segments ne sont pas valides"); @@ -179,217 +174,22 @@ $(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status); $(".liste-segment .validate-tooltip").html("
    • " + messages.join("
    • ")+"
    "); - var intervals = [ 1000, 2000, 5000, 10000, 30000, 60000, 120000, 300000, 600000, 900000, 1800000, 3600000, 7200000 ]; - - function createIntervals(maxn) { - for (var i = 0; i < intervals.length; i++) { - if (mashup.duration / intervals[i] <= maxn) { - var html = ''; - for (var j = intervals[i]; j < mashup.duration; j += intervals[i]) { - html += intervaltemplate({ left: k * j, time: new IriSP.Model.Time(j) }); - } - return html; - } - } - return ""; - } + $(".col-right .list-video").html(listhtml).find(".item-video:last-child .bottom, .item-video:first-child .top").addClass("disable"); - $(".col-right .list-video").html(listhtml).find(".item-video:last-child .bottom, .item-video:first-child .top").addClass("disable"); - $(".mashup-total-duration").text(mashup.duration.toString()); - $(".frise-segments").html(vizhtml); - $(".col-right .frise-indications").html(createIntervals(4)); - $(".bloc-pvw .frise-indications").html(createIntervals(8)); - highlightCurrentSegment(); - if (currentMedia === mashup) { - $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString()); - if (mashupTimecode > mashup.duration) { - mashup.setCurrentTime(mashup.duration); - } - changeCurrentAnnotation(); - setPointerToCurrentAnnotation(); - } - } - - mashup.on("change",updateMashupUI); - - /* Slider */ - - var timeSlider = $(".Ldt-Slider"), - timeSliderContainer = $(".Ldt-Slider-Container"), - slidersRange = 920; - timeSlider.slider({ - range: "min", - value: 0, - min: 0, - max: slidersRange, - slide: function(event, ui) { - if (currentMedia) { - var t = currentMedia.duration * ui.value / slidersRange; - currentMedia.setCurrentTime(t); - } - } - }); - - var timeSliderHandle = timeSlider.find('.ui-slider-handle'), - timeSliderMaximized = false, - timeSliderTimeoutId = false, - timeSliderMinimizedHeight = 4, - timeSliderMaximizedHeight = 10, - timeSliderTimeoutDuration = 1500, - timeTooltip = $(".Ldt-Slider-Time"); - - timeSliderContainer.css(calculateSliderCss(timeSliderMinimizedHeight)); - timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight)); - - function timeSliderMouseOver() { - if (timeSliderTimeoutId) { - window.clearTimeout(timeSliderTimeoutId); - timeSliderTimeoutId = false; - } - if (!timeSliderMaximized) { - timeSliderAnimateToHeight(timeSliderMaximizedHeight); - timeSliderMaximized = true; - } - } - - function timeSliderMouseOut() { - timeTooltip.hide(); - if (timeSliderTimeoutId) { - clearTimeout(timeSliderTimeoutId); - timeSliderTimeoutId = false; - } - timeSliderTimeoutId = setTimeout(function() { - if (timeSliderMaximized) { - timeSliderAnimateToHeight(timeSliderMinimizedHeight); - timeSliderMaximized = false; - } - timeSliderTimeoutId = false; - }, timeSliderTimeoutDuration); + project.trigger("mouseout-annotation"); } - timeSliderContainer - .mouseover(function() { - timeTooltip.show(); - timeSliderMouseOver(); - }) - .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); - }); - - $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut); - - function timeSliderAnimateToHeight(_height) { - timeSliderContainer.stop().animate( - calculateSliderCss(_height), - 500, - function() { - IriSP.jQuery(this).css("overflow","visible"); - }); - timeSliderHandle.stop().animate( - calculateHandleCss(_height), - 500, - function() { - IriSP.jQuery(this).css("overflow","visible"); - }); - } - - function calculateSliderCss(_size) { - return { - height: _size + "px", - "margin-top": (timeSliderMinimizedHeight - _size) + "px" - }; - } - - function calculateHandleCss(_size) { - return { - height: (2 + _size) + "px", - width: (2 + _size) + "px", - "margin-left": -Math.ceil(2 + _size / 2) + "px" - } - } - - /* Controller Widget */ - - var volBlock = $(".Ldt-Ctrl-Volume-Control"); - - $('.Ldt-Ctrl-Sound') - .click(function() { - if (currentMedia) { - currentMedia.setMuted(!currentMedia.getMuted()); - } - }) - .mouseover(function() { - volBlock.show(); - }) - .mouseout(function() { - volBlock.hide(); - }); - volBlock.mouseover(function() { - volBlock.show(); - }).mouseout(function() { - volBlock.hide(); + mashup.on("setcurrent", function() { + currentMedia = mashup; }); - var volBar = $(".Ldt-Ctrl-Volume-Bar"); - - function ctrlVolumeUpdater() { - if (currentMedia) { - var _muted = currentMedia.getMuted(), - _vol = currentMedia.getVolume(); - if (_vol === false) { - _vol = .5; - } - var _soundCtl = $(".Ldt-Ctrl-Sound"); - _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full"); - if (_muted) { - _soundCtl.attr("title", "Activer le son") - .addClass("Ldt-Ctrl-Sound-Mute"); - } else { - _soundCtl.attr("title", "Couper le son") - .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" ) - } - volBar.slider("value", _muted ? 0 : 100 * _vol); - volBar.attr("title",'Volume : ' + Math.floor(100 * _vol) + '%'); - } - } - - volBar.slider({ - slide: function(event, ui) { - if (currentMedia) { - currentMedia.setVolume(ui.value / 100); - } - } - }); - - $(".Ldt-Ctrl-Play").click(function() { - if (currentMedia) { - if (currentMedia.getPaused()) { - currentMedia.play(); - } else { - currentMedia.pause(); - } - } - }); - - $(".Ldt-Ctrl-SetIn").click(function() { - if (currentMedia && currentSegment) { - currentSegment.setBegin(currentMedia.getCurrentTime()); - } - }); - $(".Ldt-Ctrl-SetOut").click(function() { - if (currentMedia && currentSegment) { - currentSegment.setEnd(currentMedia.getCurrentTime()); - } - }); + mashup.on("change",updateMashupUI); /* Slice Widget */ var sliceSlider = $(".Ldt-Slice"), - sliceStartTime; + sliceStartTime, + slidersRange = 920; sliceSlider.slider({ range: true, @@ -430,93 +230,8 @@ } }); - /* UI Events */ - - function onCurrentMediaPlay() { - $(".Ldt-Ctrl-Play") - .attr("title", "Pause") - .removeClass("Ldt-Ctrl-Play-PlayState") - .addClass("Ldt-Ctrl-Play-PauseState") - } - function onCurrentMediaPause() { - $(".Ldt-Ctrl-Play") - .attr("title", "Lecture") - .removeClass("Ldt-Ctrl-Play-PauseState") - .addClass("Ldt-Ctrl-Play-PlayState") - } - - function onCurrentMediaTimeupdate(_time) { - $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString()); - timeSlider.slider("value",slidersRange * _time / currentMedia.duration); - } - - /* Mashup Player */ - - var mashupCurrentMedia = null, - mashupCurrentAnnotation = null, - mashupSegmentBegin, - mashupSegmentEnd, - mashupTimecode = 0, - mashupSeeking = false, - seekdiv = $(".video-wait"), - mashupTimedelta; - - function showSeek() { - if (mashupSeeking) { - seekdiv.show(); - } - } - - function changeCurrentAnnotation() { - if (mashupTimecode >= mashup.duration) { - if (!mashup.paused) { - mashup.paused = true; - mashup.trigger("pause"); - } - mashupTimecode = 0; - } - var _annotation = mashup.getAnnotationAtTime( mashupTimecode ); - if (typeof _annotation === "undefined") { - if (mashupCurrentMedia) { - mashupCurrentMedia.pause(); - if (!mashup.paused) { - mashup.paused = true; - mashup.trigger("pause"); - } - } - return; - } - mashupCurrentAnnotation = _annotation; - mashupSegmentBegin = mashupCurrentAnnotation.annotation.begin.milliseconds; - mashupSegmentEnd = mashupCurrentAnnotation.annotation.end.milliseconds; - mashupTimedelta = mashupSegmentBegin - mashupCurrentAnnotation.begin.milliseconds; - mashupCurrentMedia = mashupCurrentAnnotation.getMedia(); - - project.getMedias().forEach(function(_media) { - if (_media !== mashupCurrentMedia) { - _media.hide(); - _media.pause(); - } else { - _media.show(); - } - }); - - mashupCurrentMedia.setCurrentTime( mashupTimecode + mashupTimedelta); - mashupCurrentMedia.seeking = true; - - if (!mashup.paused) { - mashupCurrentMedia.play(); - mashupSeeking = true; - setTimeout(showSeek,200); - } - mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode)); - - } - - /* Set current Media */ - - var currentMedia, currentSegment; + /* Update Segment UI */ function updateSegmentUI() { if (currentMedia && currentSegment) { @@ -564,23 +279,14 @@ } } - var addMode; - function setMedia(media) { if (currentMedia) { currentMedia.pause(); } currentMedia = media; + project.trigger("set-current", media); if (currentMedia.elementType == "media") { - $("video").hide(); showSegmentation(); - if (!currentMedia.loaded) { - seekdiv.show(); - } - var currentvideo = $('#video_' + currentMedia.id); - if (!currentvideo.length) { - addMediaPlayer(currentMedia); - } $(".tab-media-title").text(currentMedia.title); addMode = !(currentSegment && mashup.hasAnnotation(currentSegment)); @@ -591,6 +297,8 @@ currentSegment.setBegin(0); currentSegment.setEnd(currentMedia.duration); currentSegment.title = IriSP.hc_messages.segment_title_placeholder; + currentSegment.color = currentMedia.color; + currentSegment.keywords = []; currentSegment.description = ""; currentSegment.on("change-begin", function() { if (currentMedia && currentSegment === this) { @@ -604,28 +312,25 @@ updateSegmentUI(); } }); - currentSegment.on("enter", function() { - if (currentMedia === mashup) { - $(".annotation-title").text(this.title); - $(".annotation-begin").text(this.begin.toString()); - $(".annotation-end").text(this.end.toString()); - $(".annotation-media-title").text(this.getMedia().title); - $(".annotation-description").text(this.description); - setPointerToCurrentAnnotation(); - highlightCurrentSegment(); - } - }); } if (currentMedia.loaded) { currentMedia.setCurrentTime(currentSegment.begin); } $(".add-segment").val(addMode ? "Ajouter au Hashcut" : "Sauvegarder"); $(".create-or-edit").text(addMode ? "Créer un nouveau segment" : "Modifier le segment"); - updateSegmentUI(); media.show(); $("#segment-title").val(currentSegment.title); $("#segment-description").val(currentSegment.description); - $("#segment-tags").val(""); + var segment_tags = $("#segment-tags"); + segment_tags.tagit("option","onTagRemoved",function(){}); + segment_tags.tagit("option","onTagAdded",function(){}); + segment_tags.tagit("removeAll"); + _(currentSegment.keywords).each(function(tag) { + segment_tags.tagit("createTag",tag); + }); + segment_tags.tagit("option","onTagRemoved",updateSegmentTags); + segment_tags.tagit("option","onTagAdded",updateSegmentTags); + updateSegmentUI(); var relatedSegments = mashup.segments.filter(function(_s) { return _s.getMedia() === currentMedia && _s.annotation !== currentSegment; }); @@ -652,254 +357,15 @@ } else { $(".self-media-segments").hide(); } + + //TODO: Show Related Segments from http://capsicum/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/f72aa2f4-29bb-11e2-a193-08002791f1b7/0/674000?format=json + } $(".self-media-segments .media-segments-list").html(html); if (currentMedia.elementType === "mashup") { showPreview(); - mashup.checkLoaded(); } - $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString()); - // TODO: Do something with the tags ! - onCurrentMediaTimeupdate(currentMedia.getCurrentTime()); - onCurrentMediaPause(); - highlightCurrentSegment(); } - - function addMediaPlayer(media) { - var videoid = "video_" + media.id, - videoEl = $('