# HG changeset patch # User veltr # Date 1353090200 -3600 # Node ID 5a5024bc74e690b2d734e28cbf5befc42bf767b6 # Parent 40909e8d68554034595f298be111b4bd67abc6da Save before weekend diff -r 40909e8d6855 -r 5a5024bc74e6 integration/css/common.css --- 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; +} diff -r 40909e8d6855 -r 5a5024bc74e6 integration/css/edition.css --- 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 { diff -r 40909e8d6855 -r 5a5024bc74e6 integration/css/hashcut.css --- 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; +} diff -r 40909e8d6855 -r 5a5024bc74e6 integration/edition.html --- 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 @@
-
-
+ +

- -

    -
    -
    +

    +

    -

    +

    @@ -108,7 +106,9 @@ Le Mashup
    Cliquable
    - Hashcut sans titre +

    + Hashcut sans titre +

    Durée: 00:00

    @@ -173,7 +173,7 @@
    00:00
    -
    +
    @@ -248,6 +248,10 @@
    +
    +
    +
    +
    @@ -297,6 +301,10 @@
    +
    +
    +
    +
    @@ -329,6 +337,7 @@ + @@ -336,8 +345,9 @@ + diff -r 40909e8d6855 -r 5a5024bc74e6 integration/img/inv-triangle.png Binary file integration/img/inv-triangle.png has changed diff -r 40909e8d6855 -r 5a5024bc74e6 integration/img/socialbuttons.png Binary file integration/img/socialbuttons.png has changed diff -r 40909e8d6855 -r 5a5024bc74e6 integration/img/socialcopy.png Binary file integration/img/socialcopy.png has changed diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/editor.js --- 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('
  • <%= title %>' - + '<%= title %><%= description %>' - + '<%= IriSP.hc_messages.Duration_ %> <%= duration.toString() %>
    • '), + mediatemplate = _.template('
  • ' + + '<%= title %>' + + '

    <%= title %>

    <%= description %>

    ' + + '

    <%= IriSP.hc_messages.Duration_ %> <%= duration.toString() %>

    • '), segmenttemplate = _.template('
  • ' - + '<%= annotation.getMedia().title %>' - + '
    • <%= annotation.status_messages.join("
    • ") %>
    <%= annotation.getMedia().title %>' - + '<%= annotation.title %><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)' + + '<%= annotation.getMedia().title %>' + + '
    • <%= annotation.status_messages.join("
    • ") %>

    <%= annotation.getMedia().title %>

    ' + + '

    <%= annotation.title %>

    <%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().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() %>)

    ' + '
    '), + 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"); diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/ldt-serializer.js --- 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; diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/mashupcore.js --- 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"); diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/mashupplayer.js --- 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('
  • ' + + '<%= media.title %>
    ' + + '

    <%= media.title %>

    <%= media.description %>

    ' + + '

    Durée : <%= media.duration.toString() %>

    ' + + '
    <%= segments %>
    • '); + segmenttemplate = _.template('
    ') 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"); + }) + + }); } diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/medialist-serializer.js --- 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); diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/model.js --- 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) { diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/segmentapi-serializer.js --- /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 diff -r 40909e8d6855 -r 5a5024bc74e6 integration/js/social.js --- /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 })); +});