# HG changeset patch # User veltr # Date 1335291940 -7200 # Node ID 03967b6ada7ce8ecae3d2d5212c9ac84b27e722e # Parent 43629caa77bc2bb8bba8e502dc88bb703d25bfe8 ArrowWidget, AnnotationWidget diff -r 43629caa77bc -r 03967b6ada7c src/js/serializers/PlatformSerializer.js --- a/src/js/serializers/PlatformSerializer.js Mon Apr 23 19:11:08 2012 +0200 +++ b/src/js/serializers/PlatformSerializer.js Tue Apr 24 20:25:40 2012 +0200 @@ -79,6 +79,9 @@ var _res = new IriSP.Model.Annotation(_data.id, _source); _res.title = _data.content.title || ""; _res.description = _data.content.description || ""; + if (typeof _data.content.img !== "undefined" && _data.content.img.src !== "undefined") { + _res.thumbnail = _data.content.img.src; + } _res.created = IriSP.Model.isoToDate(_data.meta["dc:created"]); if (typeof _data.color !== "undefined") { var _c = parseInt(_data.color).toString(16); @@ -92,8 +95,9 @@ _res.setTags(IriSP._(_data.tags).pluck("id-ref")); _res.setBegin(_data.begin); _res.setEnd(_data.end); - _res.creator = _data.meta["dc:creator"]; - _res.project = _data.meta.project; + _res.creator = _data.meta["dc:creator"] || ""; + _res.project = _data.meta.project || ""; + _res.source = _data.meta["dc:source"] || {}; return _res; }, serializer : function(_data, _source) { diff -r 43629caa77bc -r 03967b6ada7c src/js/widgets.js --- a/src/js/widgets.js Mon Apr 23 19:11:08 2012 +0200 +++ b/src/js/widgets.js Tue Apr 24 20:25:40 2012 +0200 @@ -100,6 +100,10 @@ this.player.popcorn.listen(_popcornEvent, this.functionWrapper(_functionName)) } +IriSP.Widgets.Widget.prototype.getWidgetAnnotations = function() { + return typeof this.annotation_type !== "undefined" && this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations(); +} + /** * This method responsible of drawing a widget on screen. */ diff -r 43629caa77bc -r 03967b6ada7c src/js/widgets/annotationsWidget.js --- a/src/js/widgets/annotationsWidget.js Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,139 +0,0 @@ -/* Internationalization for this widget */ - -IriSP.i18n.addMessages( - { - "fr": { - "keywords": "Mots-clés" - }, - "en": { - "keywords": "Keywords" - } - } -); - -IriSP.AnnotationsWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); - /* flag used when we're creating an annotation */ - this._hidden = false; -}; - - -IriSP.AnnotationsWidget.prototype = new IriSP.Widget(); - -IriSP.AnnotationsWidget.prototype.clear = function() { - this.selector.find(".Ldt-SaTitle").text(""); - this.selector.find(".Ldt-SaDescription").text(""); - this.selector.find(".Ldt-SaKeywordText").text(""); -}; - -IriSP.AnnotationsWidget.prototype.displayAnnotation = function(annotation) { - var title = annotation.content.title; - var description = annotation.content.description; - var keywords = ""; - var begin = +annotation.begin / 1000; - var end = +annotation.end / 1000; - var duration = this.getDuration(); - var tags = ""; - - var title_templ = "{{title}} - ( {{begin}} - {{end}} )"; - var endstr = Mustache.to_html(title_templ, {title: title, begin: IriSP.secondsToTime(begin), end: IriSP.secondsToTime(end)}); - - this.selector.find(".Ldt-SaTitle").text(endstr); - this.selector.find(".Ldt-SaDescription").text(description); - - - if (!IriSP.null_or_undefined(annotation.tags) && !IriSP.null_or_undefined(this._serializer._data.tags)) { - /* save the tag id and keywords in a unique structure */ - var tag_list = {}; - for (var i = 0; i < this._serializer._data.tags.length; i++) { - var id = this._serializer._data.tags[i]["id"]; - var keyword = IriSP.get_aliased(this._serializer._data.tags[i]["meta"], ["dc:title", "title"]); - - tag_list[id] = keyword; - } - - /* then browse the list of defined tags for the current annotation */ - for (var i = 0; i < annotation.tags.length; i++) { - if (tag_list.hasOwnProperty(annotation.tags[i]["id-ref"])) - tags += tag_list[annotation.tags[i]["id-ref"]] + ", "; - } - } - - tags = IriSP.i18n.getMessage("keywords") + ": " + tags.slice(0, tags.length - 2); - - this.selector.find(".Ldt-SaKeywords").text(tags); - - // update sharing buttons - var url = document.location.href + "#id=" + annotation.id; - this.selector.find(".Ldt-fbShare").attr("href", IriSP.mkFbUrl(url, this.share_text)); - this.selector.find(".Ldt-TwShare").attr("href", IriSP.mkTweetUrl(url, this.share_text)); - this.selector.find(".Ldt-GplusShare").attr("href", IriSP.mkGplusUrl(url, this.share_text)); -}; - -IriSP.AnnotationsWidget.prototype.clearWidget = function() { - /* retract the pane between two annotations */ - this.selector.find(".Ldt-SaTitle").text(""); - this.selector.find(".Ldt-SaDescription").text(""); - this.selector.find(".Ldt-SaKeywordText").html(""); - this.selector.find(".Ldt-ShowAnnotation").slideUp(); -}; - -IriSP.AnnotationsWidget.prototype.draw = function() { - var _this = this; - - var annotationMarkup = IriSP.templToHTML(IriSP.annotationWidget_template); - this.selector.append(annotationMarkup); - - this._Popcorn.listen("IriSP.AnnotationsWidget.show", - IriSP.wrap(this, this.show)); - this._Popcorn.listen("IriSP.AnnotationsWidget.hide", - IriSP.wrap(this, this.hide)); - - var legal_ids = []; - if (typeof(this._serializer.getChapitrage()) !== "undefined") - legal_ids.push(this._serializer.getChapitrage()); - else - legal_ids = this._serializer.getNonTweetIds(); - - var annotations = this._serializer._data.annotations; - var i; - - for (i in annotations) { - var annotation = annotations[i]; - var begin = Math.round((+ annotation.begin) / 1000); - var end = Math.round((+ annotation.end) / 1000); - - if (typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" - && !IriSP.underscore.include(legal_ids, annotation.meta["id-ref"])) { - continue; - } - - - var conf = {start: begin, end: end, - onStart: - function(annotation) { - return function() { - _this.displayAnnotation(annotation); - - } }(annotation), - onEnd: - function() { _this.clearWidget.call(_this); } - }; - this._Popcorn = this._Popcorn.code(conf); - } - -}; - -IriSP.AnnotationsWidget.prototype.hide = function() { - if (this._hidden == false) { - this.selector.hide(); - this._hidden = true; - } -}; - -IriSP.AnnotationsWidget.prototype.show = function() { - if (this._hidden == true) { - this.selector.show(); - this._hidden = false; - } -}; \ No newline at end of file diff -r 43629caa77bc -r 03967b6ada7c src/js/widgets/arrowWidget.js --- a/src/js/widgets/arrowWidget.js Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,91 +0,0 @@ -IriSP.ArrowWidget = function(Popcorn, config, Serializer) { - IriSP.Widget.call(this, Popcorn, config, Serializer); - - this._oldAnnotation = null; - this._blockArrow = false; -}; - - -IriSP.ArrowWidget.prototype = new IriSP.Widget(); - -IriSP.ArrowWidget.prototype.clear = function() { - -}; - -IriSP.ArrowWidget.prototype.clearWidget = function() { -}; - -IriSP.ArrowWidget.prototype.draw = function() { - var templ = Mustache.to_html(IriSP.arrowWidget_template, {}); - this.selector.append(templ); - this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); - this._Popcorn.listen("IriSP.ArrowWidget.blockArrow", IriSP.wrap(this, this.blockArrow)); - this._Popcorn.listen("IriSP.ArrowWidget.releaseArrow", IriSP.wrap(this, this.releaseArrow)); - -}; - -IriSP.ArrowWidget.prototype.timeUpdateHandler = function(percents) { - if (this._blockArrow) - return; - - var currentTime = this._Popcorn.currentTime(); - var currentAnnotation = this._serializer.currentChapitre(currentTime); - if (IriSP.null_or_undefined(currentAnnotation)) { - var c_annots = this._serializer.currentAnnotation(currentTime) - if (c_annots.length != 0) - var currentAnnotation = c_annots[0]; // FIXME : use the others ? - else - return; - } - - /* move the arrow only if the current annotation changes */ - if (currentAnnotation != this._oldAnnotation) { - var begin = (+ currentAnnotation.begin) / 1000; - var end = (+ currentAnnotation.end) / 1000; - - var duration = this.getDuration() / 1000; - var middle_time = (begin + end) / 2; - var percents = middle_time / duration; - - // we need to apply a fix because the arrow has a certain length - // it's half the length of the arrow (27 / 2). We need to convert - // it in percents though. - var totalWidth = this.selector.width(); - var pixels = percents * totalWidth; - var correction = (27 / 2); - var corrected_pixels = pixels - correction; - - /* make sure that the arrow is aligned with the pattern - of the widget under it */ - if (corrected_pixels % 3 != 0) - corrected_pixels -= (corrected_pixels % 3 - 1); - - /* don't move out of the screen */ - if (corrected_pixels <= 0) - corrected_pixels = 0; - - if (corrected_pixels <= 15) { - this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge") - .addClass("Ldt-arrowLeftEdge"); - } else if (corrected_pixels >= totalWidth - 25) { - this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge") - .addClass("Ldt-arrowRightEdge"); - } else { - this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge") - .addClass("Ldt-arrowCenter"); - } - - this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_pixels + "px"}); - - this._oldAnnotation = currentAnnotation; - } -}; - -/** Block the arrow for instance when the user is annotating */ -IriSP.ArrowWidget.prototype.blockArrow = function() { - this._blockArrow = true; -}; - -IriSP.ArrowWidget.prototype.releaseArrow = function() { - this._blockArrow = false; -}; diff -r 43629caa77bc -r 03967b6ada7c src/js/widgets/segmentsWidget.js --- a/src/js/widgets/segmentsWidget.js Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,205 +0,0 @@ -IriSP.SegmentsWidget = function(Popcorn, config, Serializer) { - - var self = this; - IriSP.Widget.call(this, Popcorn, config, Serializer); - this.oldSearchMatches = []; - - // event handlers - this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); }); - this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); }); - this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); }); - - this.defaultColors = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"] -}; - -IriSP.SegmentsWidget.prototype = new IriSP.Widget(); - -IriSP.SegmentsWidget.prototype.draw = function() { - - var self = this; - var annotations = this._serializer._data.annotations; - - this.selector.addClass("Ldt-SegmentsWidget"); - this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); - - this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker"); - - this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); - var duration = this.getDuration(); - - if (this.cinecast_version) { - var segments_annotations = IriSP.underscore.filter( - this._serializer._data.annotations, - function(_a) { - return _a.type == "cinecast:MovieExtract"; - } - ); - } - else { - - var view_type = this._serializer.getChapitrage(); - if (typeof(view_type) === "undefined") { - view_type = this._serializer.getNonTweetIds()[0]; - } - - - var i = 0; - - var segments_annotations = []; - - for (i = 0; i < annotations.length; i++) { - var annotation = annotations[i]; - - /* filter the annotations whose type is not the one we want */ - if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" - && annotation.meta["id-ref"] != view_type) { - continue; - } - - segments_annotations.push(annotation); - } -} - var _w = this.selector.width(); - var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; }); - - for (i = 0; i < segments_annotations.length; i++) { - - var annotation = segments_annotations[i]; - var begin = (+ annotation.begin); - var end = (+ annotation.end); - var id = annotation.id; - - var startPixel = Math.floor(_w * (begin / duration)); - - var endPixel = Math.floor(_w * (end / duration)); - if (annotation.id !== lastSegment.id) - var pxWidth = endPixel - startPixel -1; - else - /* the last segment has no segment following it */ - var pxWidth = endPixel - startPixel; - - var divTitle = this.cinecast_version - ? annotation.content.data - : annotation.content.title + ( annotation.content.title ? "
" : "" ) + annotation.content.description.replace(/(^.{120,140})[\s].+$/,'$1…'); - - var thumbUrl = annotation.meta.thumbnail || ''; - - var hexa_color = typeof(annotation.content.color) !== "undefined" - ? '#' + IriSP.DEC_HEXA_COLOR(annotation.content.color) - : typeof(annotation.color) !== "undefined" - ? '#' + IriSP.DEC_HEXA_COLOR(annotation.color) - : this.defaultColors[i % this.defaultColors.length]; - - /* - if (hexa_color === "FFCC00") - hexa_color = "333"; - */ - if (hexa_color.length == 5) - hexa_color = hexa_color + '00'; - - - var annotationTemplate = Mustache.to_html(IriSP.annotation_template, - {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel, - "pxWidth" : pxWidth, "hexa_color" : hexa_color, - "seekPlace" : Math.round(begin/1000), "thumbnailUrl": thumbUrl}); - - - this.selector.append(annotationTemplate); - - /* add a special class to the last segment and change its border */ - if (annotation.id === lastSegment.id) { - IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color); - } - } - // react to mediafragment messages. - this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", - function(id, divTitle) { - - var divObject = IriSP.jqId(id); - if (divObject.length) { - divObject.fadeTo(0,1); - var offset_x = divObject.position().left + divObject.outerWidth() / 2; - self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0); - IriSP.jQuery(document).one("mousemove", function() { divObject.fadeTo(0,.5); - self.TooltipWidget.hide(); }); - } - }); - - this.selector.find(".Ldt-iri-chapter") - .fadeTo(0, .5) - .click(function() { - self._Popcorn.trigger("IriSP.SegmentsWidget.click", this.id); - self._Popcorn.currentTime(IriSP.jQuery(this).attr("data-seek")); - }) - .mouseover( function(event) { - var divObject = IriSP.jQuery(this); - divObject.fadeTo(0,1); - var offset_x = divObject.position().left + divObject.outerWidth() / 2; - var thumb = divObject.attr("thumbnail-url"); - var txt = divObject.attr("title") + (thumb && thumb.length ? '
' : ''); - self.TooltipWidget.show(txt, IriSP.jQuery(this).css("background-color"), offset_x, 0); - }) - .mouseout(function(){ - IriSP.jQuery(this).fadeTo(0,.5); - self.TooltipWidget.hide(); - }); -}; - -/* restores the view after a search */ -IriSP.SegmentsWidget.prototype.clear = function() { - this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5); -}; - -IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { - this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id); - var begin = (+ annotation.begin) / 1000; - this._Popcorn.currentTime(Math.round(begin)); -}; - -IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) { - - if (searchString == "") - return; - - var matches = this._serializer.searchOccurences(searchString); - - if (IriSP.countProperties(matches) > 0) { - this._Popcorn.trigger("IriSP.search.matchFound"); - } else { - this._Popcorn.trigger("IriSP.search.noMatchFound"); - } - - // un-highlight all the blocks - this.selector.children(".Ldt-iri-chapter").css("opacity", 0.1); - - // then highlight the ones with matches. - for (var id in matches) { - var factor = 0.5 + matches[id] * 0.2; - this.selector.find("#"+id).dequeue(); - this.selector.find("#"+id).animate({opacity:factor}, 200); - } - - - this.oldSearchMatches = matches; -}; - -IriSP.SegmentsWidget.prototype.searchFieldClearedHandler = function() { - this.clear(); -}; - -IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() { - this.clear(); -}; - -IriSP.SegmentsWidget.prototype.positionUpdater = function() { - var duration = this.getDuration() / 1000; - var time = this._Popcorn.currentTime(); - //var position = ((time / duration) * 100).toFixed(2); - var position = ((time / duration) * 100).toFixed(2); - - this.positionMarker.css("left", position + "%"); -}; - -IriSP.SegmentsWidget.prototype.showAnnotation = function() { - -}; diff -r 43629caa77bc -r 03967b6ada7c src/templates/annotation.html --- a/src/templates/annotation.html Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,10 +0,0 @@ -{{! template for an annotation displayed in a segmentWidget }} -
-
diff -r 43629caa77bc -r 03967b6ada7c src/templates/annotationWidget.html --- a/src/templates/annotationWidget.html Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,19 +0,0 @@ -{{! template for the annotation widget }} -
- -
- -
-
- - - -
- -
-
-
-
- -
-
diff -r 43629caa77bc -r 03967b6ada7c src/templates/annotation_loading.html --- a/src/templates/annotation_loading.html Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,5 +0,0 @@ -{{! template shown while the annotation widget is loading }} -
-
 
-Chargement... -
\ No newline at end of file diff -r 43629caa77bc -r 03967b6ada7c src/templates/overlay_marker.html --- a/src/templates/overlay_marker.html Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,3 +0,0 @@ -{{! the template for the small bars which is z-indexed over our segment widget }} -
-
\ No newline at end of file diff -r 43629caa77bc -r 03967b6ada7c src/templates/search.html --- a/src/templates/search.html Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,10 +0,0 @@ -{{! template for the search container }} -
- -
-
diff -r 43629caa77bc -r 03967b6ada7c src/templates/sliceWidget.html --- a/src/templates/sliceWidget.html Mon Apr 23 19:11:08 2012 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,10 +0,0 @@ -{{! template for the slice widget }} -
- {{! the whole bar }} -
- -
- {{! the zone which represents our slice }} -
-
-
diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Annotation.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/widgets/Annotation.css Tue Apr 24 20:25:40 2012 +0200 @@ -0,0 +1,78 @@ +.Ldt-Annotation-Widget { + border-style: none solid solid; + border-width: 1px; + border-color: #b7b7b7; + padding: 0 1px 1px; + font-family: "Segoe UI", Helvetica, Arial, sans-serif; +} + +.Ldt-Annotation-Widget.Ldt-Annotation-ShowTop { + border-top-style: solid; + padding-top: 1px; +} + +.Ldt-Annotation-Inner { + background: url(img/pinstripe.png); + padding: 5px; +} + +.Ldt-Annotation-Inner h3 { + margin: 5px 0; + font-size: 13px; +} + +.Ldt-Annotation-Title { + color: #0068c4; +} + +.Ldt-Annotation-Time { + color: #ff3b77 +} + +.Ldt-Annotation-Inner p { + margin: 5px 0; font-size: 14px; +} + +.Ldt-Annotation-ShareIcons { + float: right; +} + +.Ldt-Annotation-Share { + display: inline-block; width: 24px; height: 24px; margin: 2px; background: url(img/socialbuttons.png); +} + +.Ldt-Annotation-Twitter { + background-position: 0 0; +} + +.Ldt-Annotation-Twitter:hover { + background-position: 0 -24px; +} + +.Ldt-Annotation-Fb { + background-position: -24px 0; +} + +.Ldt-Annotation-Fb:hover { + background-position: -24px -24px; +} + +.Ldt-Annotation-Gplus { + background-position: -48px 0; +} + +.Ldt-Annotation-Gplus:hover { + background-position: -48px -24px; +} + +ul.Ldt-Annotation-Tags { + font-size: 12px; list-style: none; padding: 0; margin: 5px 0; +} + +.Ldt-Annotation-Tags li { + display: inline-block; margin: 0 3px 0 0; padding: 0; +} + +.Ldt-Annotation-TagLabel { + font-weight: bold; +} diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Annotation.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/widgets/Annotation.js Tue Apr 24 20:25:40 2012 +0200 @@ -0,0 +1,83 @@ +// TODO: Open share links in a small window + +IriSP.Widgets.Annotation = function(player, config) { + IriSP.Widgets.Widget.call(this, player, config); + this.lastAnnotation = false; +}; + +IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget(); + +IriSP.Widgets.Annotation.prototype.messages = { + "fr": { + share_on: "Partager sur", + watching: "Je regarde ", + on_site: " sur ", + tags: "Mots-clés :" + }, + "en": { + share_on: "Share on", + watching: "I'm watching ", + on_site: " on ", + tags: "Keywords:" + } +} + +IriSP.Widgets.Annotation.prototype.template = + '
' + + '
'; + +IriSP.Widgets.Annotation.prototype.defaults = { + annotation_type : "chap", + show_top_border : false, + site_name : "Lignes de Temps" +} + +IriSP.Widgets.Annotation.prototype.draw = function() { + this.renderTemplate(); + this.bindPopcorn("timeupdate","onTimeupdate"); + this.onTimeupdate(); +} + +IriSP.Widgets.Annotation.prototype.onTimeupdate = function() { + var _time = Math.floor(this.player.popcorn.currentTime() * 1000), + _list = this.getWidgetAnnotations().filter(function(_annotation) { + return _annotation.begin <= _time && _annotation.end > _time; + }); + if (_list.length) { + if (_list[0].id !== this.lastAnnotation) { + this.drawAnnotation(_list[0]); + } + } + else { + this.$.find('.Ldt-Annotation-Inner').html(''); + } +} + +IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) { + this.lastAnnotation = _annotation.id; + console.log(_annotation); + var _url = (typeof _annotation.url !== "undefined" + ? _annotation.url + : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.namespacedId.name)), + _text = this.l10n.watching + _annotation.title + (this.site_name ? this.l10n.on_site + this.site_name : ''), + _tmpl = '
' + + '' + + '' + + '' + + '
' + + '

{{title}} ( {{begin}} - {{end}} )

' + + '

{{description}}

' + + '{{#tags.length}}{{/tags.length}}', + _attr = { + title: _annotation.title, + description: _annotation.description, + begin: _annotation.begin.toString(), + end: _annotation.end.toString(), + tags: _annotation.getTagTexts(), + l10n: this.l10n + } + _attr.fb_url = "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }); + _attr.twitter_url = "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }); + _attr.gplus_url = "https://plusone.google.com/_/+1/confirm?" + IriSP.jQuery.param({ url: _url, title: _text }); + this.$.find('.Ldt-Annotation-Inner').html(Mustache.to_html(_tmpl, _attr)); +} diff -r 43629caa77bc -r 03967b6ada7c src/widgets/AnnotationsList.js --- a/src/widgets/AnnotationsList.js Mon Apr 23 19:11:08 2012 +0200 +++ b/src/widgets/AnnotationsList.js Tue Apr 24 20:25:40 2012 +0200 @@ -1,8 +1,5 @@ IriSP.Widgets.AnnotationsList = function(player, config) { IriSP.Widgets.Widget.call(this, player, config); - this.bindPopcorn("IriSP.search", "searchHandler"); - this.bindPopcorn("IriSP.search.closed", "searchHandler"); - this.bindPopcorn("IriSP.search.cleared", "searchHandler"); this.searchString = false; this.lastIds = []; var _this = this; @@ -70,7 +67,7 @@ IriSP.Widgets.AnnotationsList.prototype.clearWidget = function() { }; -IriSP.Widgets.AnnotationsList.prototype.searchHandler = function(searchString) { +IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) { this.searchString = typeof searchString !== "undefined" ? searchString : ''; var _n = this.refresh(true); if (this.searchString) { @@ -136,18 +133,14 @@ if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) { /* This part only gets executed if the list needs updating */ this.lastIds = _ids; - - var _html = Mustache.to_html( - this.template, - { - annotations : _list.map(function(_annotation) { + var _data = _list.map(function(_annotation) { var _url = ( - ( typeof _annotation.url !== "undefined" ) + ( typeof _annotation.url !== "undefined" && _annotation.url) ? _annotation.url : ( - ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _this.source.projectId !== _annotation.project ) + ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project ) ? Mustache.to_html( - this.foreign_url, + _this.foreign_url, { project : _annotation.project, media : _annotation.media.id.replace(/^.*:/,''), @@ -164,13 +157,17 @@ description : _annotation.description, begin : _annotation.begin.toString(), end : _annotation.end.toString(), - thumbnail : typeof _annotation.thumbnail !== "undefined" ? _annotation.thumbnail : _this.default_thumbnail, + thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail, url : _url, tags : _annotation.getTagTexts() } return _res; - }) - }); + }), + _html = Mustache.to_html( + this.template, + { + annotations : _data + }); this.$.html(_html); @@ -196,6 +193,11 @@ } IriSP.Widgets.AnnotationsList.prototype.draw = function() { + + this.bindPopcorn("IriSP.search", "onSearch"); + this.bindPopcorn("IriSP.search.closed", "onSearch"); + this.bindPopcorn("IriSP.search.cleared", "onSearch"); + var _this = this; if (this.ajax_url && this.ajax_granularity) { diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Arrow.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/widgets/Arrow.css Tue Apr 24 20:25:40 2012 +0200 @@ -0,0 +1,6 @@ +/* + * + */ +.Ldt-Arrow { + margin-top: 1px; +} diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Arrow.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/widgets/Arrow.js Tue Apr 24 20:25:40 2012 +0200 @@ -0,0 +1,108 @@ +IriSP.Widgets.Arrow = function(player, config) { + IriSP.Widgets.Widget.call(this, player, config); +}; + +IriSP.Widgets.Arrow.prototype = new IriSP.Widgets.Widget(); + +IriSP.Widgets.Arrow.prototype.defaults = { + arrow_height : 16, + arrow_width : 24, + base_height : 2, + base_curve : 0, + fill_url: IriSP.widgetsDir + '/img/pinstripe.png', + fill_color: "#ffffff", + inner_stroke_color: "#ffffff", + inner_stroke_width: 4, + outer_stroke_color: "#B6B8B8", + outer_stroke_width: 1, + animation_speed: 20, + follow_current_time: false, + annotation_type: "chap" +} + +IriSP.Widgets.Arrow.prototype.draw = function() { + this.height = this.arrow_height + this.base_height; + this.$.addClass("Ldt-Arrow").css("height", this.height + "px"); + this.paper = new Raphael(this.container, this.width, this.height ); + window.myArrow = this; + this.innerArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height); + this.outerArrow = this.paper.path('M0,' + this.height + 'L' + this.width + ',' + this.height); + this.innerArrow.attr({ + stroke: this.inner_stroke_color, + "stroke-width": this.inner_stroke_width, + fill: this.fill_url ? ( 'url(' + this.fill_url + ')' ) : this.fill_color + }); + this.outerArrow.attr({ + stroke: this.outer_stroke_color, + "stroke-width": this.outer_stroke_width, + fill: "none" + }); + this.moveTo(0); + this.bindPopcorn("timeupdate","onTimeupdate"); +} + +IriSP.Widgets.Arrow.prototype.drawAt = function(_x) { + _x = Math.floor(Math.max(0, Math.min(_x, this.width))); + var _d = 'M0,' + this.height + + 'L0,' + Math.min( this.height, this.arrow_height + this.base_curve) + + 'Q0,' + this.arrow_height + + ' ' + Math.max(0, Math.min(this.base_curve, _x - this.arrow_width / 2)) + ',' + this.arrow_height + + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + this.arrow_height + + 'L' + Math.max(0, _x - this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * _x / this.arrow_width) + + 'L' + _x + ',0' + + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + Math.min(this.arrow_height, 2 * this.arrow_height * ( this.width - _x ) / this.arrow_width) + + 'L' + Math.min(this.width, _x + this.arrow_width / 2) + ',' + this.arrow_height + + 'L' + Math.min(this.width, Math.max(this.width - this.base_curve, _x + this.arrow_width / 2)) + ',' + this.arrow_height + + 'Q' + this.width + ',' + this.arrow_height + + ' ' + this.width + ',' + Math.min( this.height, this.arrow_height + this.base_curve) + + 'L' + this.width + ',' + this.height; + this.innerArrow.attr({ + path: _d + }); + this.outerArrow.attr({ + path: _d + }); +} + +IriSP.Widgets.Arrow.prototype.moveTo = function(_x) { + this.targetX = Math.floor(Math.max(0, Math.min(_x, this.width))); + if (typeof this.animInterval === "undefined") { + this.animInterval = window.setInterval( + this.functionWrapper("increment"), + 40 + ) + } + this.increment(); +} + +IriSP.Widgets.Arrow.prototype.increment = function() { + if (typeof this.currentX === "undefined") { + this.currentX = this.targetX; + } + if (this.currentX < this.targetX) { + this.currentX = Math.min(this.targetX, this.currentX + this.animation_speed); + } + if (this.currentX > this.targetX) { + this.currentX = Math.max(this.targetX, this.currentX - this.animation_speed); + } + if (this.currentX === this.targetX) { + window.clearInterval(this.animInterval); + this.animInterval = undefined; + } + this.drawAt(this.currentX); +} + +IriSP.Widgets.Arrow.prototype.onTimeupdate = function() { + var _list = [], + _time = Math.floor(this.player.popcorn.currentTime() * 1000); + if (!this.follow_current_time) { + _list = this.getWidgetAnnotations().filter(function(_annotation) { + return _annotation.begin <= _time && _annotation.end > _time; + }); + } + if (_list.length) { + _time = ( _list[0].begin + _list[0].end ) / 2; + } + var _x = this.width * _time / this.source.getDuration(); + this.moveTo(_x); +} diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Polemic.css --- a/src/widgets/Polemic.css Mon Apr 23 19:11:08 2012 +0200 +++ b/src/widgets/Polemic.css Tue Apr 24 20:25:40 2012 +0200 @@ -6,4 +6,9 @@ margin-left: -1px; width: 2px; height: 100%; -} \ No newline at end of file +} + +.Ldt-Polemic-TweetDiv { + position: absolute; +} + diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Polemic.js --- a/src/widgets/Polemic.js Mon Apr 23 19:11:08 2012 +0200 +++ b/src/widgets/Polemic.js Tue Apr 24 20:25:40 2012 +0200 @@ -39,10 +39,10 @@ ] }; -IriSP.Widgets.Polemic.prototype.searchHandler = function(searchString) { +IriSP.Widgets.Polemic.prototype.onSearch = function(searchString) { this.searchString = typeof searchString !== "undefined" ? searchString : ''; var _found = 0, - _re = IriSP.Model.regexpFromTextOrArray(searchString) + _re = IriSP.Model.regexpFromTextOrArray(searchString), _this = this; this.$tweets.each(function() { var _el = IriSP.jQuery(this); @@ -77,9 +77,9 @@ IriSP.Widgets.Polemic.prototype.draw = function() { - this.bindPopcorn("IriSP.search", "searchHandler"); - this.bindPopcorn("IriSP.search.closed", "searchHandler"); - this.bindPopcorn("IriSP.search.cleared", "searchHandler"); + this.bindPopcorn("IriSP.search", "onSearch"); + this.bindPopcorn("IriSP.search.closed", "onSearch"); + this.bindPopcorn("IriSP.search.cleared", "onSearch"); this.bindPopcorn("timeupdate", "onTimeupdate"); this.$zone = IriSP.jQuery('
'); this.$.append(this.$zone); @@ -88,7 +88,7 @@ _slice_count = Math.floor( this.width / this.element_width ), _duration = this.source.getDuration(), _max = 0, - _list = this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations(); + _list = this.getWidgetAnnotations(); for (var _i = 0; _i < _slice_count; _i++) { var _begin = new IriSP.Model.Time( _i * _duration / _slice_count ), @@ -133,28 +133,23 @@ this.$zone.append(this.$elapsed); var _x = 0, - _this = this; + _this = this, + _html = ''; function displayElement(_x, _y, _color, _id, _title) { - var _el = IriSP.jQuery('
') - .attr({ - "tweet-title" : _title, - "pos-x" : Math.floor(_x + (_this.element_width - 1) / 2), - "pos-y" : _y, - "polemic-color" : _color, - "annotation-id" : _id - }) - .css({ - position: "absolute", - width: (_this.element_width-1) + "px", - height: _this.element_height + "px", - left: _x + "px", - top: _y + "px", - background: _color - }) - .addClass("Ldt-Polemic-TweetDiv"); - _this.$zone.append(_el); - return _el; + _html += Mustache.to_html( + '
', + { + id: _id, + title: _title, + posx: Math.floor(_x + (_this.element_width - 1) / 2), + left: _x, + top: _y, + color: _color, + width: (_this.element_width-1), + height: _this.element_height + }); } IriSP._(_slices).forEach(function(_slice) { @@ -173,6 +168,8 @@ _x += _this.element_width; }); + this.$zone.append(_html); + this.$tweets = this.$.find(".Ldt-Polemic-TweetDiv"); this.$position = IriSP.jQuery('
').addClass("Ldt-Polemic-Position"); diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Segments.css --- a/src/widgets/Segments.css Mon Apr 23 19:11:08 2012 +0200 +++ b/src/widgets/Segments.css Tue Apr 24 20:25:40 2012 +0200 @@ -3,15 +3,15 @@ } .Ldt-Segments-Segment { - position: absolute; height: 100%; opacity: .7; filter:alpha(opacity=70); margin-left: -1px; border-left: 1px solid #ffffff; + position: absolute; height: 100%; opacity: .5; filter:alpha(opacity=50); margin-left: -1px; border-left: 1px solid #ffffff; } -.Ldt-Segments-Segment.active { - opacity: 1; filter:alpha(opacity=100); +.Ldt-Segments-Segment.inactive, .Ldt-Segments-Segment.unfound { + opacity: .2; filter:alpha(opacity=20); } -.Ldt-Segments-Segment.inactive { - opacity: .4; filter:alpha(opacity=40); +.Ldt-Segments-Segment.active, .Ldt-Segments-Segment.found { + opacity: 1; filter:alpha(opacity=100); } .Ldt-Segments-Position { diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Segments.js --- a/src/widgets/Segments.js Mon Apr 23 19:11:08 2012 +0200 +++ b/src/widgets/Segments.js Tue Apr 24 20:25:40 2012 +0200 @@ -1,3 +1,5 @@ +// TODO: Trigger IriSP.SegmentsWidget.click and IriSP.Mediafragment.showAnnotation + IriSP.Widgets.Segments = function(player, config) { IriSP.Widgets.Widget.call(this, player, config); }; @@ -17,17 +19,24 @@ IriSP.Widgets.Segments.prototype.template = '
{{#segments}}' - + '
' + + '
' + '{{/segments}}
' + '
'; IriSP.Widgets.Segments.prototype.draw = function() { - var _list = this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations(), + this.bindPopcorn("IriSP.search", "onSearch"); + this.bindPopcorn("IriSP.search.closed", "onSearch"); + this.bindPopcorn("IriSP.search.cleared", "onSearch"); + this.bindPopcorn("timeupdate", "onTimeupdate"); + + var _list = this.getWidgetAnnotations(), _this = this, _scale = this.width / this.source.getDuration(); this.$.css({ width : this.width + "px", - height : this.height + "px" + height : (this.height - 2) + "px", + margin : "1px 0" }); this.$.append(Mustache.to_html(this.template, { segments : _list.map(function(_annotation, _k) { @@ -37,6 +46,7 @@ return { text : _annotation.title + ( _annotation.description ? '
' + _annotation.description.replace(/(^.{120,140})[\s].+$/,'$1…') : ''), color : ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.colors[_k % _this.colors.length] ), + beginseconds : _annotation.begin.getSeconds() , left : Math.floor( _left ), width : Math.floor( _width ), center : Math.floor( _center ), @@ -44,18 +54,51 @@ } }) })); - var _seglist = this.$.find('.Ldt-Segments-Segment'); + this.$segments = this.$.find('.Ldt-Segments-Segment'); - _seglist.mouseover(function() { + this.$segments.mouseover(function() { var _el = IriSP.jQuery(this); - _seglist.removeClass("active").addClass("inactive"); + _this.$segments.removeClass("active").addClass("inactive"); _this.tooltip.show( _el.attr("center-pos"), 0, _el.attr("segment-text"), _el.attr("segment-color")); _el.removeClass("inactive").addClass("active"); - }).mouseout(function() { - _seglist.removeClass("inactive active"); + }) + .mouseout(function() { + _this.tooltip.hide(); + _this.$segments.removeClass("inactive active"); + }) + .click(function() { + var _el = IriSP.jQuery(this); + _this.player.popcorn.currentTime(_el.attr("begin-seconds")); }); } -IriSP.Widgets.Segments.prototype.searchHandler = function(searchString) { - +IriSP.Widgets.Segments.prototype.onSearch = function(searchString) { + this.searchString = typeof searchString !== "undefined" ? searchString : ''; + var _found = 0, + _re = IriSP.Model.regexpFromTextOrArray(searchString); + if (this.searchString) { + this.$segments.each(function() { + var _el = IriSP.jQuery(this); + if (_re.test(_el.attr("segment-text"))) { + _el.removeClass("unfound").addClass("found"); + _found++; + } else { + _el.removeClass("found").addClass("unfound"); + } + }); + if (_found) { + this.player.popcorn.trigger("IriSP.search.matchFound"); + } else { + this.player.popcorn.trigger("IriSP.search.noMatchFound"); + } + } else { + this.$segments.removeClass("found unfound"); + } +} + +IriSP.Widgets.Segments.prototype.onTimeupdate = function() { + var _x = Math.floor( this.width * this.player.popcorn.currentTime() / this.source.getDuration().getSeconds()); + this.$.find('.Ldt-Segments-Position').css({ + left: _x + "px" + }) } \ No newline at end of file diff -r 43629caa77bc -r 03967b6ada7c src/widgets/Sparkline.js --- a/src/widgets/Sparkline.js Mon Apr 23 19:11:08 2012 +0200 +++ b/src/widgets/Sparkline.js Tue Apr 24 20:25:40 2012 +0200 @@ -18,7 +18,7 @@ var _slices = [], _duration = this.source.getDuration(), _max = 0, - _list = this.annotation_type ? this.source.getAnnotationsByTypeTitle(this.annotation_type) : this.source.getAnnotations(); + _list = this.getWidgetAnnotations(); for (var _i = 0; _i < this.slice_count; _i++) { var _begin = new IriSP.Model.Time(_i*_duration/this.slice_count), diff -r 43629caa77bc -r 03967b6ada7c src/widgets/img/pinstripe.png Binary file src/widgets/img/pinstripe.png has changed diff -r 43629caa77bc -r 03967b6ada7c src/widgets/img/socialbuttons.png Binary file src/widgets/img/socialbuttons.png has changed diff -r 43629caa77bc -r 03967b6ada7c src/widgets/img/twitter_sprites.png Binary file src/widgets/img/twitter_sprites.png has changed diff -r 43629caa77bc -r 03967b6ada7c test/integration/polemic.htm --- a/test/integration/polemic.htm Mon Apr 23 19:11:08 2012 +0200 +++ b/test/integration/polemic.htm Tue Apr 24 20:25:40 2012 +0200 @@ -25,13 +25,13 @@ IriSP.widgetsDir = "/metadataplayer/src/widgets" IriSP.jwplayer_swf_path = "../libs/player.swf"; var _metadata = { - url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02?callback=?', + url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02?callback=?', format: 'ldt' }; var _config = { gui: { width:640, - height:800, + height:800, container:'LdtPlayer', default_options: { metadata: _metadata @@ -91,11 +91,14 @@ type: "Segments" }, { - type: "HelloWorld" + type: "Arrow" + }, + { + type: "Annotation" }, { type: "AnnotationsList", - ajax_url : "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?", + //ajax_url : "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?", foreign_url : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}", annotation_type : "tweet", container: "AnnotationsListContainer"