| author | veltr |
| Mon, 19 Mar 2012 18:46:17 +0100 | |
| branch | popcorn-port |
| changeset 834 | 573c7ca752e0 |
| parent 829 | ae16691d183d |
| child 835 | a8af9da7c622 |
| permissions | -rw-r--r-- |
| 100 | 1 |
IriSP.SegmentsWidget = function(Popcorn, config, Serializer) { |
| 164 | 2 |
|
| 152 | 3 |
var self = this; |
4 |
IriSP.Widget.call(this, Popcorn, config, Serializer); |
|
5 |
this.oldSearchMatches = []; |
|
| 164 | 6 |
|
| 152 | 7 |
// event handlers |
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); }); |
|
|
154
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
10 |
this._Popcorn.listen("IriSP.search.cleared", function() { self.searchFieldClearedHandler.call(self); }); |
| 834 | 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"] |
|
| 100 | 14 |
}; |
15 |
||
| 139 | 16 |
IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
| 100 | 17 |
|
18 |
IriSP.SegmentsWidget.prototype.draw = function() { |
|
19 |
||
| 148 | 20 |
var self = this; |
| 100 | 21 |
var annotations = this._serializer._data.annotations; |
| 164 | 22 |
|
|
334
e20f97514d44
move the styling of a segment from the templates to the css.
hamidouk
parents:
321
diff
changeset
|
23 |
this.selector.addClass("Ldt-SegmentsWidget"); |
|
229
808768eb5930
rewriting the slider-port to not use jquery ui slider.
hamidouk
parents:
223
diff
changeset
|
24 |
this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
| 834 | 25 |
|
|
829
ae16691d183d
Corrected segments widget, added excludePattern option to tagcloud widget
veltr
parents:
827
diff
changeset
|
26 |
this.positionMarker = this.selector.find(".Ldt-SegmentPositionMarker"); |
| 217 | 27 |
|
|
214
50c4609e50f4
WIP - added a div that should move over the widget.
hamidouk
parents:
212
diff
changeset
|
28 |
this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); |
| 834 | 29 |
if (this.cinecast_version) { |
30 |
var _sourceMedia = IriSP.__jsonMetadata.medias[0], |
|
31 |
_mediaId = _sourceMedia.id, |
|
32 |
duration = IriSP.__jsonMetadata.medias[0].meta.duration; |
|
33 |
|
|
34 |
var segments_annotations = IriSP.underscore.filter( |
|
35 |
this._serializer._data.annotations, |
|
36 |
function(_a) { |
|
37 |
return _a.type == "cinecast:MovieExtract" && _a.media == _mediaId; |
|
38 |
} |
|
39 |
); |
|
40 |
} |
|
41 |
else { |
|
| 104 | 42 |
|
| 834 | 43 |
var duration = this._serializer.getDuration(); |
44 |
var view_type = this._serializer.getChapitrage(); |
|
45 |
if (typeof(view_type) === "undefined") { |
|
46 |
view_type = this._serializer.getNonTweetIds()[0]; |
|
47 |
} |
|
| 514 | 48 |
|
| 834 | 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(); |
|
|
515
54324c5d82ab
got a more or less correct (+- 1px) version of the segmentsWidget.
hamidouk
parents:
514
diff
changeset
|
67 |
var lastSegment = IriSP.underscore.max(segments_annotations, function(annotation) { return annotation.end; }); |
| 514 | 68 |
|
69 |
for (i = 0; i < segments_annotations.length; i++) { |
|
70 |
|
|
|
515
54324c5d82ab
got a more or less correct (+- 1px) version of the segmentsWidget.
hamidouk
parents:
514
diff
changeset
|
71 |
var annotation = segments_annotations[i]; |
| 834 | 72 |
var begin = (+ annotation.begin * (this.cinecast_version ? 1000 : 1)); |
73 |
var end = (+ annotation.end * (this.cinecast_version ? 1000 : 1)); |
|
| 164 | 74 |
var id = annotation.id; |
|
515
54324c5d82ab
got a more or less correct (+- 1px) version of the segmentsWidget.
hamidouk
parents:
514
diff
changeset
|
75 |
|
| 834 | 76 |
var startPixel = Math.floor(_w * (begin / duration)); |
| 164 | 77 |
|
| 834 | 78 |
var endPixel = Math.floor(_w * (end / duration)); |
|
516
fe8c9f4791cb
added a pixel to the last segment. Made search play nice with the borders.
hamidouk
parents:
515
diff
changeset
|
79 |
if (annotation.id !== lastSegment.id) |
|
fe8c9f4791cb
added a pixel to the last segment. Made search play nice with the borders.
hamidouk
parents:
515
diff
changeset
|
80 |
var pxWidth = endPixel - startPixel -1; |
|
fe8c9f4791cb
added a pixel to the last segment. Made search play nice with the borders.
hamidouk
parents:
515
diff
changeset
|
81 |
else |
|
fe8c9f4791cb
added a pixel to the last segment. Made search play nice with the borders.
hamidouk
parents:
515
diff
changeset
|
82 |
/* the last segment has no segment following it */ |
|
fe8c9f4791cb
added a pixel to the last segment. Made search play nice with the borders.
hamidouk
parents:
515
diff
changeset
|
83 |
var pxWidth = endPixel - startPixel; |
| 834 | 84 |
|
85 |
var divTitle = this.cinecast_version |
|
86 |
? annotation.content.data |
|
87 |
: IriSP.clean_substr(annotation.content.title + " -<br>" + annotation.content.description, 0, 132) + "..."; |
|
| 473 | 88 |
|
| 834 | 89 |
var hexa_color = typeof(annotation.content.color) !== "undefined" |
90 |
? '#' + IriSP.DEC_HEXA_COLOR(annotation.content.color) |
|
91 |
: typeof(annotation.color) !== "undefined" |
|
92 |
? '#' + IriSP.DEC_HEXA_COLOR(annotation.color) |
|
93 |
: this.defaultColors[i % this.defaultColors.length]; |
|
| 479 | 94 |
|
| 637 | 95 |
/* |
| 473 | 96 |
if (hexa_color === "FFCC00") |
97 |
hexa_color = "333"; |
|
| 637 | 98 |
*/ |
| 834 | 99 |
if (hexa_color.length == 5) |
| 479 | 100 |
hexa_color = hexa_color + '00'; |
| 473 | 101 |
|
| 834 | 102 |
|
| 100 | 103 |
var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
| 514 | 104 |
{"divTitle" : divTitle, "id" : id, "startPixel" : startPixel, |
105 |
"pxWidth" : pxWidth, "hexa_color" : hexa_color, |
|
| 100 | 106 |
"seekPlace" : Math.round(begin/1000)}); |
| 164 | 107 |
|
|
515
54324c5d82ab
got a more or less correct (+- 1px) version of the segmentsWidget.
hamidouk
parents:
514
diff
changeset
|
108 |
|
| 164 | 109 |
this.selector.append(annotationTemplate); |
|
515
54324c5d82ab
got a more or less correct (+- 1px) version of the segmentsWidget.
hamidouk
parents:
514
diff
changeset
|
110 |
|
|
516
fe8c9f4791cb
added a pixel to the last segment. Made search play nice with the borders.
hamidouk
parents:
515
diff
changeset
|
111 |
/* add a special class to the last segment and change its border */ |
|
515
54324c5d82ab
got a more or less correct (+- 1px) version of the segmentsWidget.
hamidouk
parents:
514
diff
changeset
|
112 |
if (annotation.id === lastSegment.id) { |
| 834 | 113 |
IriSP.jqId(id).addClass("Ldt-lastSegment").css("border-color", hexa_color); |
|
515
54324c5d82ab
got a more or less correct (+- 1px) version of the segmentsWidget.
hamidouk
parents:
514
diff
changeset
|
114 |
} |
| 834 | 115 |
} |
|
771
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
116 |
// react to mediafragment messages. |
|
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
117 |
this._Popcorn.listen("IriSP.Mediafragment.showAnnotation", |
| 834 | 118 |
function(id, divTitle) { |
|
771
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
119 |
|
| 834 | 120 |
var divObject = IriSP.jqId(id); |
121 |
if (divObject.length) { |
|
122 |
divObject.fadeTo(0,1); |
|
123 |
var offset_x = divObject.position().left + divObject.outerWidth() / 2; |
|
124 |
self.TooltipWidget.show(divObject.attr("title"), IriSP.jQuery(this).css("background-color"), offset_x, 0); |
|
125 |
IriSP.jQuery(document).one("mousemove", function() { divObject.fadeTo(0,.5); |
|
|
771
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
126 |
self.TooltipWidget.hide(); }); |
| 834 | 127 |
} |
128 |
}); |
|
129 |
|
|
130 |
this.selector.find(".Ldt-iri-chapter") |
|
131 |
.fadeTo(0, .5) |
|
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 |
}); |
|
| 104 | 146 |
}; |
147 |
||
|
154
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
148 |
/* restores the view after a search */ |
|
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
149 |
IriSP.SegmentsWidget.prototype.clear = function() { |
| 834 | 150 |
this.selector.children(".Ldt-iri-chapter").fadeTo(0,.5); |
|
154
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
151 |
}; |
|
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
152 |
|
| 104 | 153 |
IriSP.SegmentsWidget.prototype.clickHandler = function(annotation) { |
| 464 | 154 |
this._Popcorn.trigger("IriSP.SegmentsWidget.click", annotation.id); |
|
313
7df805ebb75e
fixed some rounding errrors in segmentsWidget.js and animated the arrow and added
hamidouk
parents:
304
diff
changeset
|
155 |
var begin = (+ annotation.begin) / 1000; |
| 392 | 156 |
this._Popcorn.currentTime(Math.round(begin)); |
|
108
62da43e72e30
broke the serializers across multiple files. added a newline to the end of
hamidouk
parents:
104
diff
changeset
|
157 |
}; |
| 148 | 158 |
|
| 152 | 159 |
IriSP.SegmentsWidget.prototype.searchHandler = function(searchString) { |
160 |
||
161 |
if (searchString == "") |
|
162 |
return; |
|
| 164 | 163 |
|
| 152 | 164 |
var matches = this._serializer.searchOccurences(searchString); |
| 164 | 165 |
|
| 355 | 166 |
if (IriSP.countProperties(matches) > 0) { |
| 398 | 167 |
this._Popcorn.trigger("IriSP.search.matchFound"); |
| 355 | 168 |
} else { |
| 398 | 169 |
this._Popcorn.trigger("IriSP.search.noMatchFound"); |
| 355 | 170 |
} |
171 |
||
| 397 | 172 |
// un-highlight all the blocks |
173 |
this.selector.children(".Ldt-iri-chapter").css("opacity", 0.1); |
|
174 |
|
|
175 |
// then highlight the ones with matches. |
|
| 152 | 176 |
for (var id in matches) { |
| 380 | 177 |
var factor = 0.5 + matches[id] * 0.2; |
| 223 | 178 |
this.selector.find("#"+id).dequeue(); |
|
353
21f3a1d501eb
changed the way the segmentsWidget highlights the matching segments.
hamidouk
parents:
336
diff
changeset
|
179 |
this.selector.find("#"+id).animate({opacity:factor}, 200); |
| 152 | 180 |
} |
| 164 | 181 |
|
| 397 | 182 |
|
| 152 | 183 |
this.oldSearchMatches = matches; |
| 148 | 184 |
}; |
| 152 | 185 |
|
|
154
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
186 |
IriSP.SegmentsWidget.prototype.searchFieldClearedHandler = function() { |
|
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
187 |
this.clear(); |
|
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
188 |
}; |
|
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
189 |
|
| 152 | 190 |
IriSP.SegmentsWidget.prototype.searchFieldClosedHandler = function() { |
|
154
6e115a094858
another tweak to the searchBox : the visualization is cleared when the searchbox
hamidouk
parents:
152
diff
changeset
|
191 |
this.clear(); |
|
214
50c4609e50f4
WIP - added a div that should move over the widget.
hamidouk
parents:
212
diff
changeset
|
192 |
}; |
|
50c4609e50f4
WIP - added a div that should move over the widget.
hamidouk
parents:
212
diff
changeset
|
193 |
|
|
50c4609e50f4
WIP - added a div that should move over the widget.
hamidouk
parents:
212
diff
changeset
|
194 |
IriSP.SegmentsWidget.prototype.positionUpdater = function() { |
| 834 | 195 |
if (this.cinecast_version) { |
196 |
var duration = IriSP.__jsonMetadata.medias[0].meta.duration; |
|
197 |
} else { |
|
198 |
var duration = this._serializer.getDuration() / 1000; |
|
199 |
} |
|
|
214
50c4609e50f4
WIP - added a div that should move over the widget.
hamidouk
parents:
212
diff
changeset
|
200 |
var time = this._Popcorn.currentTime(); |
| 483 | 201 |
//var position = ((time / duration) * 100).toFixed(2); |
| 217 | 202 |
var position = ((time / duration) * 100).toFixed(2); |
203 |
||
204 |
this.positionMarker.css("left", position + "%"); |
|
|
300
a50aea26ec89
fixed annotation bug in the segmentswidget - we were displaying every annotation,
hamidouk
parents:
229
diff
changeset
|
205 |
}; |
|
771
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
206 |
|
|
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
207 |
IriSP.SegmentsWidget.prototype.showAnnotation = function() { |
|
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
208 |
|
|
0a5194b39ffb
highlight an annotation when mediafragment tells us so.
hamidouk
parents:
687
diff
changeset
|
209 |
}; |