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);