| author | Raphael Velt <raph.velt@gmail.com> |
| Tue, 02 Oct 2012 14:40:14 +0200 | |
| changeset 694 | e9400c80e1e4 |
| parent 668 | eb7e39c732c6 |
| child 719 | d0d3a9369f84 |
| permissions | -rw-r--r-- |
| 598 | 1 |
IriSP.Widgets.AnnotationsList = function(player, config) { |
2 |
IriSP.Widgets.Widget.call(this, player, config); |
|
3 |
this.searchString = false; |
|
4 |
this.lastIds = []; |
|
5 |
var _this = this; |
|
6 |
this.throttledRefresh = IriSP._.throttle(function() { |
|
7 |
_this.refresh(false); |
|
8 |
}, 1500); |
|
9 |
}; |
|
10 |
||
11 |
IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget(); |
|
12 |
||
13 |
IriSP.Widgets.AnnotationsList.prototype.defaults = { |
|
14 |
/* URL when the annotations are to be reloaded from an LDT-like segment API |
|
15 |
* e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=? |
|
16 |
*/ |
|
17 |
ajax_url : false, |
|
| 638 | 18 |
/* number of milliseconds before/after the current timecode when calling the segment API |
| 598 | 19 |
*/ |
| 694 | 20 |
ajax_granularity : 600000, |
|
654
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
21 |
default_thumbnail : "", |
| 598 | 22 |
/* URL when the annotation is not in the current project, |
23 |
* e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}} |
|
24 |
*/ |
|
25 |
foreign_url : "", |
|
26 |
annotation_type : false, |
|
27 |
refresh_interval : 0, |
|
| 694 | 28 |
limit_count : 20, |
|
654
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
29 |
newest_first : false, |
| 694 | 30 |
show_audio: true, |
|
654
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
31 |
polemics : [{ |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
32 |
keyword: "++", |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
33 |
background_color: "#c9ecc6" |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
34 |
},{ |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
35 |
keyword: "--", |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
36 |
background_color: "#f9c5c6" |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
37 |
},{ |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
38 |
keyword: "??", |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
39 |
background_color: "#cec5f9" |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
40 |
},{ |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
41 |
keyword: "==", |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
42 |
background_color: "#f9f4c6" |
|
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
43 |
}] |
| 598 | 44 |
}; |
45 |
||
| 694 | 46 |
IriSP.Widgets.AnnotationsList.prototype.messages = { |
47 |
en: { |
|
48 |
voice_annotation: "Voice Annotation", |
|
49 |
now_playing: "Now playing..." |
|
50 |
}, |
|
51 |
fr: { |
|
52 |
voice_annotation: "Annotation Vocale", |
|
53 |
now_playing: "Lecture en cours..." |
|
54 |
} |
|
55 |
} |
|
56 |
||
| 598 | 57 |
IriSP.Widgets.AnnotationsList.prototype.template = |
58 |
'<div class="Ldt-AnnotationsListWidget">' |
|
| 694 | 59 |
+ '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}' |
| 598 | 60 |
+ '<ul class="Ldt-AnnotationsList-ul">' |
| 694 | 61 |
+ '</ul>' |
62 |
+ '</div>'; |
|
63 |
||
64 |
IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = |
|
65 |
'<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">' |
|
| 598 | 66 |
+ '<div class="Ldt-AnnotationsList-ThumbContainer">' |
67 |
+ '<a href="{{url}}">' |
|
68 |
+ '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />' |
|
69 |
+ '</a>' |
|
70 |
+ '</div>' |
|
71 |
+ '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>' |
|
72 |
+ '<h3 class="Ldt-AnnotationsList-Title">' |
|
73 |
+ '<a href="{{url}}">{{title}}</a>' |
|
74 |
+ '</h3>' |
|
75 |
+ '<p class="Ldt-AnnotationsList-Description">{{description}}</p>' |
|
76 |
+ '{{#tags.length}}' |
|
77 |
+ '<ul class="Ldt-AnnotationsList-Tags">' |
|
78 |
+ '{{#tags}}' |
|
79 |
+ '{{#.}}' |
|
80 |
+ '<li class="Ldt-AnnotationsList-Tag-Li">' |
|
| 623 | 81 |
+ '<span>{{.}}</span>' |
| 598 | 82 |
+ '</li>' |
83 |
+ '{{/.}}' |
|
84 |
+ '{{/tags}}' |
|
85 |
+ '</ul>' |
|
86 |
+ '{{/tags.length}}' |
|
| 694 | 87 |
+ '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-audio={{audio}}>{{l10n.voice_annotation}}</div>{{/audio}}' |
88 |
+ '</li>'; |
|
| 598 | 89 |
|
90 |
IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) { |
|
91 |
this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
|
92 |
var _n = this.refresh(true); |
|
93 |
if (this.searchString) { |
|
94 |
if (_n) { |
|
| 694 | 95 |
this.player.trigger("search.matchFound"); |
| 598 | 96 |
} else { |
| 694 | 97 |
this.player.trigger("search.noMatchFound"); |
| 598 | 98 |
} |
99 |
} |
|
100 |
} |
|
101 |
||
102 |
//obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id; |
|
103 |
||
104 |
IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() { |
|
| 694 | 105 |
var _currentTime = this.media.getCurrentTime(), |
106 |
_duration = this.media.duration; |
|
| 598 | 107 |
this.lastAjaxQuery = _currentTime; |
108 |
var _url = Mustache.to_html(this.ajax_url, { |
|
| 638 | 109 |
media : this.source.currentMedia.id, |
| 598 | 110 |
begin : Math.max(0, _currentTime - this.ajax_granularity), |
111 |
end : Math.min(_duration.milliseconds, _currentTime + this.ajax_granularity) |
|
112 |
}); |
|
113 |
this.currentSource = this.player.loadMetadata(IriSP._.defaults({ |
|
114 |
"url" : _url |
|
115 |
}, this.metadata)); |
|
116 |
} |
|
117 |
||
| 623 | 118 |
IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() { |
| 694 | 119 |
var _currentTime = this.media.getCurrentTime(); |
120 |
var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime); |
|
| 638 | 121 |
if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) { |
122 |
this.lastMashupAnnotation = _currentAnnotation.id; |
|
| 623 | 123 |
var _currentMedia = _currentAnnotation.getMedia(), |
124 |
_url = Mustache.to_html(this.ajax_url, { |
|
| 638 | 125 |
media : _currentMedia.id, |
| 623 | 126 |
begin : Math.max(0, _currentAnnotation.annotation.begin.milliseconds - this.ajax_granularity), |
127 |
end : Math.min(_currentMedia.duration.milliseconds, _currentAnnotation.annotation.end.milliseconds + this.ajax_granularity) |
|
128 |
}); |
|
129 |
this.currentSource = this.player.loadMetadata(IriSP._.defaults({ |
|
130 |
"url" : _url |
|
131 |
}, this.metadata)); |
|
132 |
} |
|
133 |
} |
|
134 |
||
| 598 | 135 |
IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) { |
136 |
_forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw); |
|
137 |
if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) { |
|
138 |
return 0; |
|
139 |
} |
|
140 |
var _this = this, |
|
| 694 | 141 |
_currentTime = this.media.getCurrentTime(); |
| 623 | 142 |
var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations(); |
143 |
if (this.mashupMode) { |
|
| 694 | 144 |
var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime); |
| 623 | 145 |
if (typeof _currentAnnotation !== "undefined") { |
| 694 | 146 |
_currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin; |
| 638 | 147 |
var _mediaId = _currentAnnotation.getMedia().id; |
| 623 | 148 |
_list = _list.filter(function(_annotation) { |
| 638 | 149 |
return _annotation.getMedia().id === _mediaId; |
| 623 | 150 |
}); |
151 |
} |
|
152 |
} |
|
| 598 | 153 |
if (this.searchString) { |
154 |
_list = _list.searchByTextFields(this.searchString); |
|
155 |
} |
|
156 |
if (this.limit_count) { |
|
| 694 | 157 |
/* Get the n annotations closest to current timecode */ |
| 598 | 158 |
_list = _list.sortBy(function(_annotation) { |
| 694 | 159 |
return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime); |
| 598 | 160 |
}).slice(0, this.limit_count) |
161 |
} |
|
162 |
if (this.newest_first) { |
|
163 |
_list = _list.sortBy(function(_annotation) { |
|
164 |
return -_annotation.created.valueOf(); |
|
165 |
}); |
|
166 |
} else { |
|
167 |
_list = _list.sortBy(function(_annotation) { |
|
168 |
return _annotation.begin; |
|
169 |
}); |
|
170 |
} |
|
171 |
|
|
172 |
var _ids = _list.idIndex; |
|
173 |
|
|
174 |
if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) { |
|
175 |
/* This part only gets executed if the list needs updating */ |
|
176 |
this.lastIds = _ids; |
|
| 694 | 177 |
this.list_$.html(""); |
178 |
_list.forEach(function(_annotation) { |
|
179 |
var _url = ( |
|
180 |
( typeof _annotation.url !== "undefined" && _annotation.url) |
|
181 |
? _annotation.url |
|
182 |
: ( |
|
183 |
( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project ) |
|
184 |
? Mustache.to_html( |
|
185 |
_this.foreign_url, |
|
186 |
{ |
|
187 |
project : _annotation.project, |
|
188 |
media : _annotation.media.id, |
|
189 |
annotation : _annotation.id, |
|
190 |
annotationType : _annotation.annotationType.id |
|
|
654
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
191 |
} |
| 694 | 192 |
) |
193 |
: '#id=' + _annotation.id |
|
194 |
) |
|
195 |
); |
|
196 |
var _title = (_annotation.title || "").replace(_annotation.description,''), |
|
197 |
_description = _annotation.description; |
|
198 |
if (!_annotation.title) { |
|
199 |
_title = _annotation.creator; |
|
200 |
} |
|
201 |
if (!_annotation.description && _annotation.creator) { |
|
202 |
_description = _annotation.title; |
|
203 |
_title = _annotation.creator; |
|
204 |
} |
|
205 |
var _bgcolor; |
|
206 |
IriSP._(_this.polemics).each(function(_polemic) { |
|
207 |
var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true); |
|
208 |
if (_rgxp.test(_title + " " + _description)) { |
|
209 |
_bgcolor = _polemic.background_color; |
|
210 |
} |
|
211 |
}); |
|
212 |
var _data = { |
|
213 |
id : _annotation.id, |
|
214 |
media_id : _annotation.getMedia().id, |
|
215 |
title : _title, |
|
216 |
description : _description, |
|
217 |
begin : _annotation.begin.toString(), |
|
218 |
end : _annotation.end.toString(), |
|
219 |
thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail, |
|
220 |
url : _url, |
|
221 |
tags : _annotation.getTagTexts(), |
|
222 |
specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""), |
|
223 |
audio : (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null" ? _annotation.audio.href : undefined), |
|
224 |
l10n: _this.l10n |
|
225 |
}; |
|
226 |
var _html = Mustache.to_html(_this.annotationTemplate, _data); |
|
227 |
var _el = IriSP.jQuery(_html); |
|
228 |
_el.mouseover(function() { |
|
229 |
_annotation.trigger("select"); |
|
230 |
}) |
|
231 |
.mouseout(function() { |
|
232 |
_annotation.trigger("unselect"); |
|
233 |
}) |
|
234 |
.appendTo(_this.list_$); |
|
235 |
_annotation.on("select", function() { |
|
236 |
_this.annotations_$.removeClass("selected"); |
|
237 |
_el.addClass("selected"); |
|
238 |
}); |
|
239 |
_annotation.on("unselect", function() { |
|
240 |
_this.annotations_$.removeClass("selected"); |
|
241 |
});; |
|
242 |
}); |
|
243 |
|
|
244 |
this.annotations_$ = this.$.find('.Ldt-AnnotationsList-li'); |
|
| 623 | 245 |
|
246 |
/* Correct the empty tag bug */ |
|
247 |
this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() { |
|
248 |
var _el = IriSP.jQuery(this); |
|
249 |
if (!_el.text().replace(/(^\s+|\s+$)/g,'')) { |
|
250 |
_el.detach(); |
|
251 |
} |
|
252 |
}); |
|
| 598 | 253 |
|
254 |
this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() { |
|
| 694 | 255 |
_this.player.trigger("search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
256 |
}); |
|
257 |
|
|
258 |
this.$.find(".Ldt-AnnotationsList-Play").click(function() { |
|
259 |
var _el = IriSP.jQuery(this), |
|
260 |
_audiofile = _el.attr("data-audio").replace(_this.rtmp_streamer,""); |
|
261 |
_el.text(_this.l10n.now_playing); |
|
262 |
_this.jwplayer.load({ |
|
263 |
file: _audiofile, |
|
264 |
streamer: _this.rtmp_streamer |
|
265 |
}); |
|
266 |
_this.jwplayer.play(true); |
|
267 |
_this.media.pause(); |
|
268 |
_this.jw_paused_media = true; |
|
269 |
}); |
|
| 598 | 270 |
|
271 |
if(this.searchString) { |
|
|
654
a5977736d2b0
Corrected metadataplayer bug
Raphael Velt <raph.velt@gmail.com>
parents:
638
diff
changeset
|
272 |
var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString); |
| 598 | 273 |
this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() { |
274 |
var _$ = IriSP.jQuery(this); |
|
275 |
_$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '<span class="Ldt-AnnotationsList-highlight">$1</span>')) |
|
276 |
}) |
|
277 |
} |
|
278 |
} |
|
279 |
|
|
| 623 | 280 |
if (this.ajax_url) { |
281 |
if (this.mashupMode) { |
|
282 |
this.ajaxMashup(); |
|
283 |
} else { |
|
| 694 | 284 |
if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity)) { |
| 623 | 285 |
this.ajaxSource(); |
286 |
} |
|
| 598 | 287 |
} |
288 |
} |
|
289 |
return _list.length; |
|
290 |
} |
|
291 |
||
292 |
IriSP.Widgets.AnnotationsList.prototype.draw = function() { |
|
293 |
|
|
| 694 | 294 |
this.mashupMode = (this.media.elementType === "mashup"); |
295 |
|
|
296 |
this.renderTemplate(); |
|
| 598 | 297 |
|
298 |
var _this = this; |
|
299 |
|
|
| 694 | 300 |
if (this.show_audio) { |
301 |
var _tmpId = "jwplayer-" + IriSP.Model.getUID(); |
|
302 |
this.$.find(".Ldt-AnnotationsList-Audio").attr("id", _tmpId); |
|
303 |
this.jwplayer = jwplayer(_tmpId); |
|
304 |
this.jwplayer.setup({ |
|
305 |
flashplayer: IriSP.getLib("jwPlayerSWF"), |
|
306 |
width: 1, |
|
307 |
height: 1, |
|
308 |
provider: "rtmp", |
|
309 |
events: { |
|
310 |
onIdle: function() { |
|
311 |
if (_this.jw_paused_media) { |
|
312 |
_this.jw_paused_media = false; |
|
313 |
_this.media.play(); |
|
314 |
} |
|
315 |
_this.$.find(".Ldt-AnnotationsList-Play").text(_this.l10n.voice_annotation) |
|
316 |
} |
|
317 |
} |
|
318 |
}); |
|
319 |
this.jw_paused_media = false; |
|
320 |
} |
|
321 |
|
|
322 |
this.list_$ = this.$.find(".Ldt-AnnotationsList-ul"); |
|
323 |
|
|
324 |
|
|
325 |
this.onMdpEvent("search", "onSearch"); |
|
326 |
this.onMdpEvent("search.closed", "onSearch"); |
|
327 |
this.onMdpEvent("search.cleared", "onSearch"); |
|
328 |
this.onMdpEvent("AnnotationsList.refresh", function() { |
|
329 |
if (_this.ajax_url) { |
|
330 |
if (_this.mashupMode) { |
|
331 |
_this.ajaxMashup(); |
|
332 |
} else { |
|
333 |
_this.ajaxSource(); |
|
334 |
} |
|
335 |
} |
|
336 |
_this.throttledRefresh(); |
|
337 |
}); |
|
338 |
|
|
| 623 | 339 |
if (this.ajax_url) { |
340 |
if (this.mashupMode) { |
|
341 |
this.ajaxMashup(); |
|
342 |
} else { |
|
343 |
this.ajaxSource(); |
|
344 |
} |
|
| 598 | 345 |
} else { |
346 |
this.currentSource = this.source; |
|
347 |
} |
|
348 |
|
|
349 |
if (this.refresh_interval) { |
|
350 |
window.setInterval(function() { |
|
351 |
_this.currentSource.get() |
|
352 |
}, this.refresh_interval); |
|
353 |
} |
|
354 |
|
|
| 694 | 355 |
this.onMdpEvent("createAnnotationWidget.addedAnnotation"); |
| 598 | 356 |
var _events = [ |
357 |
"timeupdate", |
|
358 |
"seeked", |
|
359 |
"loadedmetadata" |
|
360 |
]; |
|
361 |
for (var _i = 0; _i < _events.length; _i++) { |
|
| 694 | 362 |
this.onMediaEvent(_events[_i], this.throttledRefresh); |
| 598 | 363 |
} |
364 |
|
|
365 |
this.throttledRefresh(); |
|
366 |
||
367 |
}; |