6 |
6 |
7 // event handlers |
7 // event handlers |
8 this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); }); |
8 this._Popcorn.listen("IriSP.search", function(searchString) { self.searchHandler.call(self, searchString); }); |
9 this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); }); |
9 this._Popcorn.listen("IriSP.search.closed", function() { self.searchFieldClosedHandler.call(self); }); |
10 this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); }); |
10 this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); }); |
|
11 |
|
12 this.checkOption("cinecast_version"); |
|
13 this.defaultColors = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"] |
11 }; |
14 }; |
12 |
15 |
13 IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
16 IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
14 |
|
15 /* Get the width of a segment, in pixels. */ |
|
16 IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) { |
|
17 var begin = Math.round((+ annotation.begin) / 1000); |
|
18 var end = Math.round((+ annotation.end) / 1000); |
|
19 var duration = this._serializer.getDuration() / 1000; |
|
20 |
|
21 var startPourcent = IriSP.timeToPourcent(begin, duration); |
|
22 var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100)); |
|
23 |
|
24 var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); |
|
25 var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)); |
|
26 |
|
27 return endPixel; |
|
28 }; |
|
29 |
|
30 /* compute the total length of a group of segments */ |
|
31 IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) { |
|
32 var self = this; |
|
33 var total = 0; |
|
34 |
|
35 for (var i = 0; i < segmentsList.length; i++) |
|
36 total += self.segmentToPixel(segmentsList[i].annotation); |
|
37 |
|
38 return total; |
|
39 }; |
|
40 |
17 |
41 IriSP.SegmentsWidget.prototype.draw = function() { |
18 IriSP.SegmentsWidget.prototype.draw = function() { |
42 |
19 |
43 var self = this; |
20 var self = this; |
44 var annotations = this._serializer._data.annotations; |
21 var annotations = this._serializer._data.annotations; |
45 |
22 |
46 this.selector.addClass("Ldt-SegmentsWidget"); |
23 this.selector.addClass("Ldt-SegmentsWidget"); |
47 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
24 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
48 |
25 |
49 var view_type = this._serializer.getChapitrage(); |
|
50 if (typeof(view_type) === "undefined") { |
|
51 view_type = this._serializer.getNonTweetIds()[0]; |
|
52 } |
|
53 this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker"); |
26 this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker"); |
54 |
27 |
55 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); |
28 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); |
56 |
29 if (this.cinecast_version) { |
57 |
30 var _sourceMedia = IriSP.__jsonMetadata.medias[0], |
58 var i = 0; |
31 _mediaId = _sourceMedia.id, |
59 |
32 duration = IriSP.__jsonMetadata.medias[0].meta.duration; |
60 var segments_annotations = []; |
33 |
61 |
34 var segments_annotations = IriSP.underscore.filter( |
62 for (i = 0; i < annotations.length; i++) { |
35 this._serializer._data.annotations, |
63 var annotation = annotations[i]; |
36 function(_a) { |
64 |
37 return _a.type == "cinecast:MovieExtract" && _a.media == _mediaId; |
65 /* filter the annotations whose type is not the one we want */ |
38 } |
66 if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" |
39 ); |
67 && annotation.meta["id-ref"] != view_type) { |
40 } |
68 continue; |
41 else { |
69 } |
42 |
70 |
43 var duration = this._serializer.getDuration(); |
71 segments_annotations.push(annotation); |
44 var view_type = this._serializer.getChapitrage(); |
72 } |
45 if (typeof(view_type) === "undefined") { |
73 |
46 view_type = this._serializer.getNonTweetIds()[0]; |
74 var totalWidth = this.selector.width() - segments_annotations.length; |
47 } |
|
48 |
|
49 |
|
50 var i = 0; |
|
51 |
|
52 var segments_annotations = []; |
|
53 |
|
54 for (i = 0; i < annotations.length; i++) { |
|
55 var annotation = annotations[i]; |
|
56 |
|
57 /* filter the annotations whose type is not the one we want */ |
|
58 if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" |
|
59 && annotation.meta["id-ref"] != view_type) { |
|
60 continue; |
|
61 } |
|
62 |
|
63 segments_annotations.push(annotation); |
|
64 } |
|
65 } |
|
66 var _w = this.selector.width(); |
75 var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; }); |
67 var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; }); |
76 |
68 |
77 for (i = 0; i < segments_annotations.length; i++) { |
69 for (i = 0; i < segments_annotations.length; i++) { |
78 |
70 |
79 var annotation = segments_annotations[i]; |
71 var annotation = segments_annotations[i]; |
80 var begin = (+ annotation.begin); |
72 var begin = (+ annotation.begin * (this.cinecast_version ? 1000 : 1)); |
81 var end = (+ annotation.end); |
73 var end = (+ annotation.end * (this.cinecast_version ? 1000 : 1)); |
82 var duration = this._serializer.getDuration(); |
|
83 var id = annotation.id; |
74 var id = annotation.id; |
84 |
75 |
85 var startPixel = Math.floor(this.selector.parent().width() * (begin / duration)); |
76 var startPixel = Math.floor(_w * (begin / duration)); |
86 |
77 |
87 var endPixel = Math.floor(this.selector.parent().width() * (end / duration)); |
78 var endPixel = Math.floor(_w * (end / duration)); |
88 |
|
89 if (annotation.id !== lastSegment.id) |
79 if (annotation.id !== lastSegment.id) |
90 var pxWidth = endPixel - startPixel -1; |
80 var pxWidth = endPixel - startPixel -1; |
91 else |
81 else |
92 /* the last segment has no segment following it */ |
82 /* the last segment has no segment following it */ |
93 var pxWidth = endPixel - startPixel; |
83 var pxWidth = endPixel - startPixel; |
94 |
84 |
95 var divTitle = IriSP.clean_substr(annotation.content.title + " -<br>" + annotation.content.description, 0, 132) + "..."; |
85 var divTitle = this.cinecast_version |
96 |
86 ? annotation.content.data |
97 if (typeof(annotation.content.color) !== "undefined") |
87 : IriSP.clean_substr(annotation.content.title + " -<br>" + annotation.content.description, 0, 132) + "..."; |
98 var color = annotation.content.color; |
88 |
99 else |
89 var hexa_color = typeof(annotation.content.color) !== "undefined" |
100 var color = annotation.color; |
90 ? '#' + IriSP.DEC_HEXA_COLOR(annotation.content.color) |
101 |
91 : typeof(annotation.color) !== "undefined" |
102 var hexa_color = IriSP.DEC_HEXA_COLOR(color); |
92 ? '#' + IriSP.DEC_HEXA_COLOR(annotation.color) |
|
93 : this.defaultColors[i % this.defaultColors.length]; |
103 |
94 |
104 /* |
95 /* |
105 if (hexa_color === "FFCC00") |
96 if (hexa_color === "FFCC00") |
106 hexa_color = "333"; |
97 hexa_color = "333"; |
107 */ |
98 */ |
108 if (hexa_color.length == 4) |
99 if (hexa_color.length == 5) |
109 hexa_color = hexa_color + '00'; |
100 hexa_color = hexa_color + '00'; |
|
101 |
110 |
102 |
111 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
103 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
112 {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel, |
104 {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel, |
113 "pxWidth" : pxWidth, "hexa_color" : hexa_color, |
105 "pxWidth" : pxWidth, "hexa_color" : hexa_color, |
114 "seekPlace" : Math.round(begin/1000)}); |
106 "seekPlace" : Math.round(begin/1000)}); |
116 |
108 |
117 this.selector.append(annotationTemplate); |
109 this.selector.append(annotationTemplate); |
118 |
110 |
119 /* add a special class to the last segment and change its border */ |
111 /* add a special class to the last segment and change its border */ |
120 if (annotation.id === lastSegment.id) { |
112 if (annotation.id === lastSegment.id) { |
121 this.selector.find("#" + id).addClass("Ldt-lastSegment"); |
113 IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color); |
122 this.selector.find(".Ldt-lastSegment").css("border-color", "#" + hexa_color); |
|
123 } |
114 } |
124 |
115 } |
125 IriSP.jQuery("#" + id).fadeTo(0, 0.3); |
|
126 |
|
127 IriSP.jQuery("#" + id).mouseover( |
|
128 /* we wrap the handler in another function because js's scoping |
|
129 rules are function-based - otherwise, the internal vars like |
|
130 divTitle are preserved but they are looked-up from the draw |
|
131 method scope, so after that the loop is run, so they're not |
|
132 preserved */ |
|
133 (function(divTitle) { |
|
134 return function(event) { |
|
135 IriSP.jQuery(this).animate({opacity: 0.6}, 5); |
|
136 var offset_x = IriSP.jQuery(this).position().left + IriSP.jQuery(this).outerWidth() / 2; |
|
137 |
|
138 self.TooltipWidget.show(divTitle, color, offset_x, 0); |
|
139 } })(divTitle)).mouseout(function(){ |
|
140 IriSP.jQuery(this).animate({opacity: 0.3}, 5); |
|
141 self.TooltipWidget.hide(); |
|
142 }); |
|
143 |
|
144 // react to mediafragment messages. |
116 // react to mediafragment messages. |
145 this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", |
117 this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", |
146 function(id, divTitle) { |
118 function(id, divTitle) { |
147 return function(annotation_id) { |
|
148 if (annotation_id !== id) |
|
149 return; |
|
150 |
119 |
151 var divObject = IriSP.jQuery("#" + id); |
120 var divObject = IriSP.jqId(id); |
152 divObject.animate({opacity: 0.6}, 5); |
121 if (divObject.length) { |
153 var offset = divObject.offset(); |
122 divObject.fadeTo(0,1); |
154 var correction = divObject.outerWidth() / 2; |
123 var offset_x = divObject.position().left + divObject.outerWidth() / 2; |
155 |
124 self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0); |
156 var offset_x = offset.left + correction - 106; |
125 IriSP.jQuery(document).one("mousemove", function() { divObject.fadeTo(0,.5); |
157 if (offset_x < 0) |
|
158 offset_x = 0; |
|
159 |
|
160 var offset_y = offset.top; |
|
161 |
|
162 self.TooltipWidget.show(divTitle, color, offset_x, offset_y - 160); |
|
163 IriSP.jQuery(document).one("mousemove", function() { divObject.animate({opacity: 0.3}, 5); |
|
164 self.TooltipWidget.hide(); }); |
126 self.TooltipWidget.hide(); }); |
165 }; }(id, divTitle)); |
127 } |
166 |
128 }); |
167 IriSP.jQuery("#" + id).click(function(_this, annotation) { |
129 |
168 return function() { _this.clickHandler(annotation)}; |
130 this.selector.find(".Ldt-iri-chapter") |
169 }(this, annotation)); |
131 .fadeTo(0, .5) |
170 } |
132 .click(function() { |
|
133 self._Popcorn.trigger("IriSP.SegmentsWidget.click", this.id); |
|
134 self._Popcorn.currentTime(IriSP.jQuery(this).attr("data-seek")); |
|
135 }) |
|
136 .mouseover( function(event) { |
|
137 var divObject = IriSP.jQuery(this); |
|
138 divObject.fadeTo(0,1); |
|
139 var offset_x = divObject.position().left + divObject.outerWidth() / 2; |
|
140 self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0); |
|
141 }) |
|
142 .mouseout(function(){ |
|
143 IriSP.jQuery(this).fadeTo(0,.5); |
|
144 self.TooltipWidget.hide(); |
|
145 }); |
171 }; |
146 }; |
172 |
147 |
173 /* restores the view after a search */ |
148 /* restores the view after a search */ |
174 IriSP.SegmentsWidget.prototype.clear = function() { |
149 IriSP.SegmentsWidget.prototype.clear = function() { |
175 this.selector.children(".Ldt-iri-chapter").animate({opacity:0.3}, 100); |
150 this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5); |
176 }; |
151 }; |
177 |
152 |
178 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { |
153 IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { |
179 this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id); |
154 this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id); |
180 var begin = (+ annotation.begin) / 1000; |
155 var begin = (+ annotation.begin) / 1000; |