# HG changeset patch # User veltr # Date 1332179177 -3600 # Node ID 573c7ca752e0ba78cbe62e915ecd5b482b909d79 # Parent 33a5d5882be4762b82c1487d62cfa04aa7264113 Adapted Stackgraph for Cinecast diff -r 33a5d5882be4 -r 573c7ca752e0 src/js/main.js --- a/src/js/main.js Fri Mar 16 19:31:26 2012 +0100 +++ b/src/js/main.js Mon Mar 19 18:46:17 2012 +0100 @@ -43,13 +43,10 @@ /* widget specific requirements */ for (var idx in config.gui.widgets) { if (config.gui.widgets[idx].type === "PolemicWidget" || - config.gui.widgets[idx].type === "StackGraphWidget") { + config.gui.widgets[idx].type === "StackGraphWidget" || + config.gui.widgets[idx].type === "SparklineWidget") { $L.script(libs.raphael); } - - if (config.gui.widgets[idx].type === "SparklineWidget") { - $L.script(libs.jquery_sparkline); - } } // same for modules diff -r 33a5d5882be4 -r 573c7ca752e0 src/js/utils.js --- a/src/js/utils.js Fri Mar 16 19:31:26 2012 +0100 +++ b/src/js/utils.js Mon Mar 19 18:46:17 2012 +0100 @@ -123,7 +123,11 @@ IriSP.encodeURI = function(str) { return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28'). replace(/\)/g, '%29').replace(/\*/g, '%2A'); -} +} + +IriSP.jqId = function (myid) { + return IriSP.jQuery('#' + myid.replace(/(:|\.)/g,'\\$1')); + } IriSP.__guidCounter = 0; IriSP.guid = function(prefix) { diff -r 33a5d5882be4 -r 573c7ca752e0 src/js/widgets/createAnnotationWidget.js --- a/src/js/widgets/createAnnotationWidget.js Fri Mar 16 19:31:26 2012 +0100 +++ b/src/js/widgets/createAnnotationWidget.js Mon Mar 19 18:46:17 2012 +0100 @@ -245,7 +245,7 @@ this.selector.find(".Ldt-createAnnotation-Title").parent().show(); } - var url = document.location.href + "#id=" + annotation.id; + var url = typeof annotation.url == "string" ? annotation.url : document.location.href + "#id=" + annotation.id; var twStatus = IriSP.mkTweetUrl(url); var gpStatus = IriSP.mkGplusUrl(url); var fbStatus = IriSP.mkFbUrl(url); diff -r 33a5d5882be4 -r 573c7ca752e0 src/js/widgets/segmentsWidget.js --- a/src/js/widgets/segmentsWidget.js Fri Mar 16 19:31:26 2012 +0100 +++ b/src/js/widgets/segmentsWidget.js Mon Mar 19 18:46:17 2012 +0100 @@ -8,36 +8,13 @@ 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.checkOption("cinecast_version"); + 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(); -/* Get the width of a segment, in pixels. */ -IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) { - var begin = Math.round((+ annotation.begin) / 1000); - var end = Math.round((+ annotation.end) / 1000); - var duration = this._serializer.getDuration() / 1000; - - var startPourcent = IriSP.timeToPourcent(begin, duration); - var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100)); - - var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); - var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)); - - return endPixel; -}; - -/* compute the total length of a group of segments */ -IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) { - var self = this; - var total = 0; - - for (var i = 0; i < segmentsList.length; i++) - total += self.segmentToPixel(segmentsList[i].annotation); - - return total; -}; - IriSP.SegmentsWidget.prototype.draw = function() { var self = this; @@ -45,69 +22,84 @@ this.selector.addClass("Ldt-SegmentsWidget"); this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); - - var view_type = this._serializer.getChapitrage(); - if (typeof(view_type) === "undefined") { - view_type = this._serializer.getNonTweetIds()[0]; - } + this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker"); this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); - - - var i = 0; - - var segments_annotations = []; - - for (i = 0; i < annotations.length; i++) { - var annotation = annotations[i]; + if (this.cinecast_version) { + var _sourceMedia = IriSP.__jsonMetadata.medias[0], + _mediaId = _sourceMedia.id, + duration = IriSP.__jsonMetadata.medias[0].meta.duration; + + var segments_annotations = IriSP.underscore.filter( + this._serializer._data.annotations, + function(_a) { + return _a.type == "cinecast:MovieExtract" && _a.media == _mediaId; + } + ); + } + else { - /* 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 duration = this._serializer.getDuration(); + var view_type = this._serializer.getChapitrage(); + if (typeof(view_type) === "undefined") { + view_type = this._serializer.getNonTweetIds()[0]; + } - var totalWidth = this.selector.width() - segments_annotations.length; + + 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 duration = this._serializer.getDuration(); + var begin = (+ annotation.begin * (this.cinecast_version ? 1000 : 1)); + var end = (+ annotation.end * (this.cinecast_version ? 1000 : 1)); var id = annotation.id; - var startPixel = Math.floor(this.selector.parent().width() * (begin / duration)); + var startPixel = Math.floor(_w * (begin / duration)); - var endPixel = Math.floor(this.selector.parent().width() * (end / 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 = IriSP.clean_substr(annotation.content.title + " -
" + annotation.content.description, 0, 132) + "..."; - - if (typeof(annotation.content.color) !== "undefined") - var color = annotation.content.color; - else - var color = annotation.color; + + var divTitle = this.cinecast_version + ? annotation.content.data + : IriSP.clean_substr(annotation.content.title + " -
" + annotation.content.description, 0, 132) + "..."; - var hexa_color = IriSP.DEC_HEXA_COLOR(color); + 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 == 4) + 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, @@ -118,61 +110,44 @@ /* add a special class to the last segment and change its border */ if (annotation.id === lastSegment.id) { - this.selector.find("#" + id).addClass("Ldt-lastSegment"); - this.selector.find(".Ldt-lastSegment").css("border-color", "#" + hexa_color); + IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color); } - - IriSP.jQuery("#" + id).fadeTo(0, 0.3); - - IriSP.jQuery("#" + id).mouseover( - /* we wrap the handler in another function because js's scoping - rules are function-based - otherwise, the internal vars like - divTitle are preserved but they are looked-up from the draw - method scope, so after that the loop is run, so they're not - preserved */ - (function(divTitle) { - return function(event) { - IriSP.jQuery(this).animate({opacity: 0.6}, 5); - var offset_x = IriSP.jQuery(this).position().left + IriSP.jQuery(this).outerWidth() / 2; - - self.TooltipWidget.show(divTitle, color, offset_x, 0); - } })(divTitle)).mouseout(function(){ - IriSP.jQuery(this).animate({opacity: 0.3}, 5); - self.TooltipWidget.hide(); - }); - + } // react to mediafragment messages. this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", - function(id, divTitle) { - return function(annotation_id) { - if (annotation_id !== id) - return; + function(id, divTitle) { - var divObject = IriSP.jQuery("#" + id); - divObject.animate({opacity: 0.6}, 5); - var offset = divObject.offset(); - var correction = divObject.outerWidth() / 2; - - var offset_x = offset.left + correction - 106; - if (offset_x < 0) - offset_x = 0; - - var offset_y = offset.top; - - self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160); - IriSP.jQuery(document).one("mousemove", function() { divObject.animate({opacity: 0.3}, 5); + 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(); }); - }; }(id, divTitle)); - - IriSP.jQuery("#" + id).click(function(_this, annotation) { - return function() { _this.clickHandler(annotation)}; - }(this, annotation)); - } + } + }); + + 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; + self.TooltipWidget.show(divObject.attr("title"), 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").animate({opacity:0.3}, 100); + this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5); }; IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { @@ -217,7 +192,11 @@ }; IriSP.SegmentsWidget.prototype.positionUpdater = function() { - var duration = this._serializer.getDuration() / 1000; + if (this.cinecast_version) { + var duration = IriSP.__jsonMetadata.medias[0].meta.duration; + } else { + var duration = this._serializer.getDuration() / 1000; + } var time = this._Popcorn.currentTime(); //var position = ((time / duration) * 100).toFixed(2); var position = ((time / duration) * 100).toFixed(2); diff -r 33a5d5882be4 -r 573c7ca752e0 src/js/widgets/sparklineWidget.js --- a/src/js/widgets/sparklineWidget.js Fri Mar 16 19:31:26 2012 +0100 +++ b/src/js/widgets/sparklineWidget.js Mon Mar 19 18:46:17 2012 +0100 @@ -4,6 +4,21 @@ this._oldAnnotation = null; this._results = []; + + this.lineColor = this._config.lineColor || "#7492b4"; + this.fillColor = this._config.fillColor || "#aeaeb8"; + this.lineWidth = this._config.lineWidth || 2; + this.slices = this._config.slices || Math.floor(this.width/20); + if (!this.width) { + this.width = this.selector.width(); + } + if (!this.height) { + this.height = 40; + } + this.selector.css("height", this.height + "px"); + if (this._config.background) { + this.selector.css("background", this._config.background); + } }; @@ -15,19 +30,13 @@ /** draw the sparkline using jquery sparkline */ IriSP.SparklineWidget.prototype.draw = function() { - var templ = Mustache.to_html(IriSP.SparklineWidget_template, {width: this.width, height: this.height}); - /** this widget uses three divs - - the first is the sparkline, which is generated by jquery sparkline, - the second is an overlay div to display the progression in the video, - and the third is a div to react to clicks - */ + this.duration = this._serializer.getDuration(); + this.paper = new Raphael(this.selector[0], this.width, this.height); var views = this._serializer._data.views; var stat_view; if (!IriSP.null_or_undefined(views)) { - - var i; - for (i = 0; i < views.length; i++) { + for (var i = 0; i < views.length; i++) { var view = views[i]; if (view.id === "stat") { stat_view = view; @@ -36,105 +45,101 @@ } } + var _ = IriSP.underscore; // If we've found the correct view, feed the directly the data from the view // to jquery sparkline. Otherwise, compute it ourselves. - if (!IriSP.null_or_undefined(stat_view)) { - console.log("sparklinewidget : using stats embedded in the json"); - var results = stat_view.meta.stat.split(","); - } else { - console.log("sparklinewidget : computing stats ourselves"); - var num_columns = (this.selector.width()) / IriSP.widgetsDefaults["SparklineWidget"].column_width; - var duration = this._serializer.getDuration(); - var time_step = duration / num_columns; /* the time interval between two columns */ - var results = []; - var i = 0; /* the index in the loop */ - - /* this algorithm makes one assumption : that the array is sorted - (it's done for us by the JSONSerializer). We go through the array - and count how many comments fall within a peculiar time piece. - As i is preserved between each iteration, it's O(n). - */ - - for(var j = 0; j < num_columns && i < this._serializer._data.annotations.length; j++) { - var count = 0; - var annotation_begin = +(this._serializer._data.annotations[i].begin); - - while(annotation_begin >= j * time_step && annotation_begin <= (j + 1) * time_step ) { - count++; - i++; - if (i >= this._serializer._data.annotations.length) - break; - - annotation_begin = +(this._serializer._data.annotations[i].begin); - - } - - results.push(count); + if (!IriSP.null_or_undefined(stat_view)) { + console.log("sparklinewidget : using stats embedded in the json"); + var _results = stat_view.meta.stat.split(","); + } else { + var _annotations = this._serializer._data.annotations, + _sliceDuration = Math.floor( this.duration / this.slices), + _results = _(_.range(this.slices)).map(function(_i) { + return _(_annotations).filter(function(_a){ + return (_a.begin <= (1 + _i) * _sliceDuration) && (_a.end >= _i * _sliceDuration) + }).length; + }); } - } + var _max = Math.max(1, _(_results).max()), + _h = this.height, + _scale = (_h - this.lineWidth) / _max, + _width = this.width / this.slices, + _y = _(_results).map(function(_v) { + return _h - (_scale * _v); + }), + _d = _(_y).reduce(function(_memo, _v, _k) { + return _memo + ( _k + ? 'C' + (_k * _width) + ' ' + _y[_k - 1] + ' ' + (_k * _width) + ' ' + _v + ' ' + ((_k + .5) * _width) + ' ' + _v + : 'M0 ' + _v + 'L' + (.5*_width) + ' ' + _v ) + },'') + 'L' + this.width + ' ' + _y[_y.length - 1], + _d2 = _d + 'L' + this.width + ' ' + this.height + 'L0 ' + this.height; + this.paper.path(_d2).attr({ + "stroke" : "none", + "fill" : this.fillColor + }); + + this.paper.path(_d).attr({ + "fill" : "none", + "stroke" : this.lineColor, + "stroke-width" : this.lineWidth + }); + this.rectangleProgress = this.paper.rect(0,0,0,this.height) + .attr({ + "stroke" : "none", + "fill" : "#808080", + "opacity" : .3 + }); + this.ligneProgress = this.paper.path("M0 0L0 "+this.height).attr({"stroke":"#ff00ff", "line-width" : 2}); // save the results in an array so that we can re-use them when a new annotation // is added. - this._results = results; + this._results = _results; - this.selector.append(templ); - this.selector.find(".Ldt-sparkLine").css("background", "#c7c8cc"); - this.selector.find(".Ldt-sparkLine").sparkline(results, {lineColor: "#7492b4", fillColor: "#aeaeb8", - spotColor: "#b70056", - width: this.width, height: this.height}); this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeUpdateHandler)); - this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation)); +// this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.handleNewAnnotation)); - IriSP.jQuery(".Ldt-sparkLineClickOverlay").click(IriSP.wrap(this, this.clickHandler)); + this.selector.click(IriSP.wrap(this, this.clickHandler)); }; /** react to a timeupdate event */ IriSP.SparklineWidget.prototype.timeUpdateHandler = function() { - var currentTime = this._Popcorn.currentTime(); - var duration = this._serializer.getDuration() / 1000; - var proportion = ((currentTime / duration) * 100).toFixed(4); - - IriSP.jQuery(".Ldt-sparkLinePositionMarker").css("width", proportion + "%"); + var _currentTime = this._Popcorn.currentTime(), + _x = (1000 * _currentTime / this.duration) * this.width; + this.rectangleProgress.attr({ + "width" : _x + }); + this.ligneProgress.attr({ + "path" : "M" + _x + " 0L" + _x + " " + this.height + }); + } /** handle clicks on the widget */ IriSP.SparklineWidget.prototype.clickHandler = function(event) { - /* this piece of code is a little bit convoluted - here's how it works : - we want to handle clicks on the progress bar and convert those to seeks in the media. - However, jquery only gives us a global position, and we want a number of pixels relative - to our container div, so we get the parent position, and compute an offset to this position, - and finally compute the progress ratio in the media. - Finally we multiply this ratio with the duration to get the correct time - */ - - var parentOffset = this.selector.offset(); - var width = this.selector.width(); - var relX = event.pageX - parentOffset.left; - - var duration = this._serializer.getDuration() / 1000; - var newTime = ((relX / width) * duration).toFixed(2); + var relX = event.pageX - this.selector.offset().left; + var newTime = ((relX / this.width) * this.duration/1000).toFixed(2); this._Popcorn.trigger("IriSP.SparklineWidget.clicked", newTime); - this._Popcorn.currentTime(newTime); + this._Popcorn.currentTime(newTime); }; /** react when a new annotation is added */ IriSP.SparklineWidget.prototype.handleNewAnnotation = function(annotation) { - var num_columns = this._results.length; - var duration = this._serializer.getDuration(); - var time_step = Math.round(duration / num_columns); /* the time interval between two columns */ - var begin = +annotation.begin; - var end = +annotation.end; - - /* increment all the values between the beginning and the end of the annotation */ - var index_begin = Math.floor(begin / time_step); - var index_end = Math.floor(end / time_step); - - for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) { - this._results[i]++; - } - - this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8", - spotColor: "#b70056", - width: this.width, height: this.height}); +// var num_columns = this._results.length; +// var duration = this._serializer.getDuration(); +// var time_step = Math.round(duration / num_columns); /* the time interval between two columns */ +// var begin = +annotation.begin; +// var end = +annotation.end; +// +// /* increment all the values between the beginning and the end of the annotation */ +// var index_begin = Math.floor(begin / time_step); +// var index_end = Math.floor(end / time_step); +// +// for (var i = index_begin; i < Math.min(index_end, this._results.length); i++) { +// this._results[i]++; +// } +// +// this.selector.find(".Ldt-sparkLine").sparkline(this._results, {lineColor: "#7492b4", fillColor: "#aeaeb8", +// spotColor: "#b70056", +// width: this.width, height: this.height}); }; \ No newline at end of file diff -r 33a5d5882be4 -r 573c7ca752e0 src/js/widgets/stackGraphWidget.js --- a/src/js/widgets/stackGraphWidget.js Fri Mar 16 19:31:26 2012 +0100 +++ b/src/js/widgets/stackGraphWidget.js Mon Mar 19 18:46:17 2012 +0100 @@ -60,7 +60,7 @@ return _g.length }).length, _scale = this.height / _max, - _width = this.width / this.sliceCount + _width = this.width / this.sliceCount, _showTitle = !this._config.excludeTitle, _showDescription = !this._config.excludeDescription; diff -r 33a5d5882be4 -r 573c7ca752e0 src/templates/SparklineWidget.html --- a/src/templates/SparklineWidget.html Fri Mar 16 19:31:26 2012 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,5 +0,0 @@ -
-
-
-
Loading
-
diff -r 33a5d5882be4 -r 573c7ca752e0 src/templates/annotation.html --- a/src/templates/annotation.html Fri Mar 16 19:31:26 2012 +0100 +++ b/src/templates/annotation.html Mon Mar 19 18:46:17 2012 +0100 @@ -3,6 +3,7 @@ class='Ldt-iri-chapter Ldt-TraceMe' style='left: {{startPixel}}px; width: {{pxWidth}}px; - background-color:#{{hexa_color}};' + background-color:{{hexa_color}};' + data-seek='{{seekPlace}}' > diff -r 33a5d5882be4 -r 573c7ca752e0 src/templates/player.html --- a/src/templates/player.html Fri Mar 16 19:31:26 2012 +0100 +++ b/src/templates/player.html Mon Mar 19 18:46:17 2012 +0100 @@ -9,8 +9,8 @@ {{/disable_annotate_btn}} {{^disable_search_btn}}
+
{{/disable_search_btn}} -