42 keyword: "==", |
41 keyword: "==", |
43 background_color: "#f9f4c6" |
42 background_color: "#f9f4c6" |
44 }] |
43 }] |
45 }; |
44 }; |
46 |
45 |
47 IriSP.Widgets.AnnotationsList.prototype.messages = { |
|
48 en: { |
|
49 voice_annotation: "Voice Annotation", |
|
50 now_playing: "Now playing..." |
|
51 }, |
|
52 fr: { |
|
53 voice_annotation: "Annotation Vocale", |
|
54 now_playing: "Lecture en cours..." |
|
55 } |
|
56 }; |
|
57 |
|
58 IriSP.Widgets.AnnotationsList.prototype.template = |
46 IriSP.Widgets.AnnotationsList.prototype.template = |
59 '<div class="Ldt-AnnotationsListWidget">' |
47 '<div class="Ldt-AnnotationsListWidget">' |
60 + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}' |
|
61 + '<ul class="Ldt-AnnotationsList-ul">' |
48 + '<ul class="Ldt-AnnotationsList-ul">' |
62 + '</ul>' |
49 + '</ul>' |
63 + '</div>'; |
50 + '</div>'; |
64 |
51 |
65 IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = |
52 IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = |
66 '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">' |
53 '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">' |
67 + '<div class="Ldt-AnnotationsList-ThumbContainer">' |
54 + '<div class="Ldt-AnnotationsList-ThumbContainer">' |
68 + '<a href="{{url}}" draggable="true">' |
55 + '<a href="{{url}}">' |
69 + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />' |
56 + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />' |
70 + '</a>' |
57 + '</a>' |
71 + '</div>' |
58 + '</div>' |
72 + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>' |
59 + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>' |
73 + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">' |
60 + '<h3 class="Ldt-AnnotationsList-Title">' |
74 + '<a href="{{url}}">{{{htitle}}}</a>' |
61 + '<a href="{{url}}">{{title}}</a>' |
75 + '</h3>' |
62 + '</h3>' |
76 + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>' |
63 + '<p class="Ldt-AnnotationsList-Description">{{description}}</p>' |
77 + '{{#tags.length}}' |
64 + '{{#tags.length}}' |
78 + '<ul class="Ldt-AnnotationsList-Tags">' |
65 + '<ul class="Ldt-AnnotationsList-Tags">' |
79 + '{{#tags}}' |
66 + '{{#tags}}' |
80 + '{{#.}}' |
67 + '{{#.}}' |
81 + '<li class="Ldt-AnnotationsList-Tag-Li">' |
68 + '<li class="Ldt-AnnotationsList-Tag-Li">' |
83 + '</li>' |
70 + '</li>' |
84 + '{{/.}}' |
71 + '{{/.}}' |
85 + '{{/tags}}' |
72 + '{{/tags}}' |
86 + '</ul>' |
73 + '</ul>' |
87 + '{{/tags.length}}' |
74 + '{{/tags.length}}' |
88 + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}' |
|
89 + '</li>'; |
75 + '</li>'; |
90 |
76 |
|
77 IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) { |
|
78 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
|
79 var _n = this.refresh(true); |
|
80 if (this.searchString) { |
|
81 if (_n) { |
|
82 this.player.popcorn.trigger("IriSP.search.matchFound"); |
|
83 } else { |
|
84 this.player.popcorn.trigger("IriSP.search.noMatchFound"); |
|
85 } |
|
86 } |
|
87 } |
|
88 |
91 //obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id; |
89 //obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id; |
92 |
90 |
93 IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() { |
91 IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() { |
94 var _currentTime = this.media.getCurrentTime(), |
92 var _currentTime = this.player.popcorn.currentTime(), |
95 _duration = this.media.duration; |
93 _duration = this.source.getDuration(); |
|
94 if (typeof _currentTime == "undefined") { |
|
95 _currentTime = 0; |
|
96 } |
96 this.lastAjaxQuery = _currentTime; |
97 this.lastAjaxQuery = _currentTime; |
|
98 _currentTime = Math.floor(1000 * _currentTime); |
97 var _url = Mustache.to_html(this.ajax_url, { |
99 var _url = Mustache.to_html(this.ajax_url, { |
98 media : this.source.currentMedia.id, |
100 media : this.source.currentMedia.id, |
99 begin : Math.max(0, _currentTime - this.ajax_granularity), |
101 begin : Math.max(0, _currentTime - this.ajax_granularity), |
100 end : Math.min(_duration.milliseconds, _currentTime + this.ajax_granularity) |
102 end : Math.min(_duration.milliseconds, _currentTime + this.ajax_granularity) |
101 }); |
103 }); |
102 this.currentSource = this.player.loadMetadata(IriSP._.defaults({ |
104 this.currentSource = this.player.loadMetadata(IriSP._.defaults({ |
103 "url" : _url |
105 "url" : _url |
104 }, this.metadata)); |
106 }, this.metadata)); |
105 }; |
107 } |
106 |
108 |
107 IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() { |
109 IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() { |
108 var _currentTime = this.media.getCurrentTime(); |
110 var _currentTime = this.player.popcorn.currentTime(); |
109 var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime); |
111 if (typeof _currentTime == "undefined") { |
|
112 _currentTime = 0; |
|
113 } |
|
114 var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000); |
110 if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) { |
115 if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) { |
111 this.lastMashupAnnotation = _currentAnnotation.id; |
116 this.lastMashupAnnotation = _currentAnnotation.id; |
112 var _currentMedia = _currentAnnotation.getMedia(), |
117 var _currentMedia = _currentAnnotation.getMedia(), |
113 _url = Mustache.to_html(this.ajax_url, { |
118 _url = Mustache.to_html(this.ajax_url, { |
114 media : _currentMedia.id, |
119 media : _currentMedia.id, |
117 }); |
122 }); |
118 this.currentSource = this.player.loadMetadata(IriSP._.defaults({ |
123 this.currentSource = this.player.loadMetadata(IriSP._.defaults({ |
119 "url" : _url |
124 "url" : _url |
120 }, this.metadata)); |
125 }, this.metadata)); |
121 } |
126 } |
122 }; |
127 } |
123 |
128 |
124 IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) { |
129 IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) { |
125 _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw); |
130 _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw); |
126 if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) { |
131 if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) { |
127 return 0; |
132 return 0; |
128 } |
133 } |
129 var _this = this, |
134 var _this = this, |
130 _currentTime = this.media.getCurrentTime(); |
135 _currentTime = this.player.popcorn.currentTime(); |
|
136 if (typeof _currentTime == "undefined") { |
|
137 _currentTime = 0; |
|
138 } |
131 var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations(); |
139 var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations(); |
132 if (this.mashupMode) { |
140 if (this.mashupMode) { |
133 var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime); |
141 var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000); |
134 if (typeof _currentAnnotation !== "undefined") { |
142 if (typeof _currentAnnotation !== "undefined") { |
135 _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin; |
143 _currentTime = _currentTime - _currentAnnotation.begin.getSeconds() + _currentAnnotation.annotation.begin.getSeconds(); |
136 var _mediaId = _currentAnnotation.getMedia().id; |
144 var _mediaId = _currentAnnotation.getMedia().id; |
137 _list = _list.filter(function(_annotation) { |
145 _list = _list.filter(function(_annotation) { |
138 return _annotation.getMedia().id === _mediaId; |
146 return _annotation.getMedia().id === _mediaId; |
139 }); |
147 }); |
140 } |
148 } |
141 } |
149 } |
142 _list = _list.filter(function(_annotation) { |
150 if (this.searchString) { |
143 return _annotation.found !== false; |
151 _list = _list.searchByTextFields(this.searchString); |
144 }); |
152 } |
145 if (this.limit_count) { |
153 if (this.limit_count) { |
146 /* Get the n annotations closest to current timecode */ |
|
147 _list = _list.sortBy(function(_annotation) { |
154 _list = _list.sortBy(function(_annotation) { |
148 return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime); |
155 return Math.abs(_annotation.begin.getSeconds() - _currentTime); |
149 }).slice(0, this.limit_count); |
156 }).slice(0, this.limit_count) |
150 } |
157 } |
151 if (this.newest_first) { |
158 if (this.newest_first) { |
152 _list = _list.sortBy(function(_annotation) { |
159 _list = _list.sortBy(function(_annotation) { |
153 return -_annotation.created.valueOf(); |
160 return -_annotation.created.valueOf(); |
154 }); |
161 }); |
178 media : _annotation.media.id, |
184 media : _annotation.media.id, |
179 annotation : _annotation.id, |
185 annotation : _annotation.id, |
180 annotationType : _annotation.annotationType.id |
186 annotationType : _annotation.annotationType.id |
181 } |
187 } |
182 ) |
188 ) |
183 : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id |
189 : '#id=' + _annotation.id |
184 ) |
190 ) |
185 ); |
191 ); |
186 var _title = "", |
192 var _title = (_annotation.title || "").replace(_annotation.description,''), |
187 _description = _annotation.description, |
193 _description = _annotation.description; |
188 _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail); |
194 if (!_annotation.title) { |
189 // Update : display creator |
195 _title = _annotation.creator; |
190 if (_annotation.creator) { |
|
191 _title = _annotation.creator; |
|
192 } |
196 } |
193 if (_annotation.title) { |
197 if (!_annotation.description && _annotation.creator) { |
194 var tempTitle = _annotation.title; |
198 _description = _annotation.title; |
195 if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){ |
199 _title = _annotation.creator; |
196 _title = ""; |
|
197 } |
|
198 _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title; |
|
199 } |
200 } |
200 var _bgcolor; |
201 var _bgcolor; |
201 IriSP._(_this.polemics).each(function(_polemic) { |
202 IriSP._(_this.polemics).each(function(_polemic) { |
202 var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true); |
203 var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true); |
203 if (_rgxp.test(_title + " " + _description)) { |
204 if (_rgxp.test(_title + " " + _description)) { |
205 } |
206 } |
206 }); |
207 }); |
207 var _data = { |
208 var _data = { |
208 id : _annotation.id, |
209 id : _annotation.id, |
209 media_id : _annotation.getMedia().id, |
210 media_id : _annotation.getMedia().id, |
210 htitle : IriSP.textFieldHtml(_title), |
211 title : _title, |
211 hdescription : IriSP.textFieldHtml(_description), |
212 description : _description, |
212 begin : _annotation.begin.toString(), |
213 begin : _annotation.begin.toString(), |
213 end : _annotation.end.toString(), |
214 end : _annotation.end.toString(), |
214 thumbnail : _thumbnail, |
215 thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail, |
215 url : _url, |
216 url : _url, |
216 tags : _annotation.getTagTexts(), |
217 tags : _annotation.getTagTexts(), |
217 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""), |
218 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "") |
218 l10n: _this.l10n |
|
219 }; |
219 }; |
220 if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") { |
220 var _html = Mustache.to_html(_this.annotationTemplate, _data); |
221 _data.audio = true; |
221 var _el = IriSP.jQuery(_html); |
222 if (!_this.jwplayers[_annotation.id]) { |
|
223 var _audiofile = _annotation.audio.href; |
|
224 if (_this.audio_url_transform) { |
|
225 _audiofile = _this.audio_url_transform(_annotation.audio.href); |
|
226 } |
|
227 var _tmpId = "jwplayer-" + IriSP.Model.getUID(); |
|
228 _this.jwplayers[_annotation.id] = _tmpId; |
|
229 _this.$.find(".Ldt-AnnotationsList-Audio").append(IriSP.jQuery("<div>").attr("id", _tmpId)); |
|
230 jwplayer(_tmpId).setup({ |
|
231 flashplayer: IriSP.getLib("jwPlayerSWF"), |
|
232 file: _audiofile, |
|
233 fallback: false, |
|
234 primary: "flash", |
|
235 controls: false, |
|
236 width: 1, |
|
237 height: 1, |
|
238 events: { |
|
239 onPause: function() { |
|
240 _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.voice_annotation); |
|
241 }, |
|
242 onPlay: function() { |
|
243 _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.now_playing); |
|
244 } |
|
245 } |
|
246 }); |
|
247 } |
|
248 } |
|
249 var _html = Mustache.to_html(_this.annotationTemplate, _data), |
|
250 _el = IriSP.jQuery(_html), |
|
251 _onselect = function() { |
|
252 _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected"); |
|
253 _el.addClass("selected"); |
|
254 }, |
|
255 _onunselect = function() { |
|
256 _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected"); |
|
257 }; |
|
258 _el.mouseover(function() { |
222 _el.mouseover(function() { |
259 _annotation.trigger("select"); |
223 _annotation.trigger("select"); |
260 }) |
224 }) |
261 .mouseout(function() { |
225 .mouseout(function() { |
262 _annotation.trigger("unselect"); |
226 _annotation.trigger("unselect"); |
263 }) |
227 }) |
264 .appendTo(_this.list_$); |
228 .appendTo(_this.list_$); |
265 IriSP.attachDndData(_el.find("[draggable]"), { |
229 _annotation.on("select", function() { |
266 title: _title, |
230 _this.annotations_$.removeClass("selected"); |
267 description: _description, |
231 _el.addClass("selected"); |
268 uri: _url, |
|
269 image: _annotation.thumbnail |
|
270 }); |
232 }); |
271 _el.on("remove", function() { |
233 _annotation.on("unselect", function() { |
272 _annotation.off("select", _onselect); |
234 _this.annotations_$.removeClass("selected"); |
273 _annotation.off("unselect", _onunselect); |
235 });; |
274 }); |
|
275 _annotation.on("select", _onselect); |
|
276 _annotation.on("unselect", _onunselect); |
|
277 }); |
236 }); |
|
237 |
|
238 this.annotations_$ = this.$.find('.Ldt-AnnotationsList-li'); |
278 |
239 |
279 /* Correct the empty tag bug */ |
240 /* Correct the empty tag bug */ |
280 this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() { |
241 this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() { |
281 var _el = IriSP.jQuery(this); |
242 var _el = IriSP.jQuery(this); |
282 if (!_el.text().replace(/(^\s+|\s+$)/g,'')) { |
243 if (!_el.text().replace(/(^\s+|\s+$)/g,'')) { |
283 _el.remove(); |
244 _el.detach(); |
284 } |
245 } |
285 }); |
246 }); |
286 |
247 |
287 this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() { |
248 this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() { |
288 _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
249 _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); |
289 }); |
250 }) |
290 |
251 |
291 this.$.find(".Ldt-AnnotationsList-Play").click(function() { |
252 if(this.searchString) { |
292 var _el = IriSP.jQuery(this), |
253 var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString); |
293 _annid = _el.attr("data-annotation-id"); |
|
294 if (_this.jwplayers[_annid]) { |
|
295 jwplayer(_this.jwplayers[_annid]).play(); |
|
296 } |
|
297 _this.media.pause(); |
|
298 }); |
|
299 |
|
300 if (this.source.getAnnotations().searching) { |
|
301 var rx = _this.source.getAnnotations().regexp || false; |
|
302 this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() { |
254 this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() { |
303 var _$ = IriSP.jQuery(this); |
255 var _$ = IriSP.jQuery(this); |
304 _$.html(IriSP.textFieldHtml(_$.text(), rx)); |
256 _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '<span class="Ldt-AnnotationsList-highlight">$1</span>')) |
305 }); |
257 }) |
306 } |
258 } |
307 } |
259 } |
308 |
260 |
309 if (this.ajax_url) { |
261 if (this.ajax_url) { |
310 if (this.mashupMode) { |
262 if (this.mashupMode) { |
311 this.ajaxMashup(); |
263 this.ajaxMashup(); |
312 } else { |
264 } else { |
313 if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity)) { |
265 if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) { |
314 this.ajaxSource(); |
266 this.ajaxSource(); |
315 } |
267 } |
316 } |
268 } |
317 } |
269 } |
318 return _list.length; |
270 return _list.length; |
319 }; |
271 } |
320 |
272 |
321 IriSP.Widgets.AnnotationsList.prototype.draw = function() { |
273 IriSP.Widgets.AnnotationsList.prototype.draw = function() { |
322 |
274 |
323 this.jwplayers = {}; |
|
324 this.mashupMode = (this.media.elementType === "mashup"); |
|
325 |
|
326 this.renderTemplate(); |
275 this.renderTemplate(); |
327 |
276 |
|
277 this.list_$ = this.$.find(".Ldt-AnnotationsList-ul"); |
|
278 |
|
279 this.bindPopcorn("IriSP.search", "onSearch"); |
|
280 this.bindPopcorn("IriSP.search.closed", "onSearch"); |
|
281 this.bindPopcorn("IriSP.search.cleared", "onSearch"); |
|
282 this.bindPopcorn("IriSP.AnnotationsList.refresh","refresh"); |
|
283 |
328 var _this = this; |
284 var _this = this; |
329 |
|
330 this.list_$ = this.$.find(".Ldt-AnnotationsList-ul"); |
|
331 |
|
332 |
|
333 this.source.getAnnotations().on("search", function(_text) { |
|
334 _this.searchString = _text; |
|
335 if (_this.source !== _this.currentSource) { |
|
336 _this.currentSource.getAnnotations().search(_text); |
|
337 _this.throttledRefresh(); |
|
338 } |
|
339 }); |
|
340 this.source.getAnnotations().on("found", function() { |
|
341 _this.throttledRefresh(); |
|
342 }); |
|
343 this.source.getAnnotations().on("not-found", function() { |
|
344 _this.throttledRefresh(); |
|
345 }); |
|
346 this.source.getAnnotations().on("clear-search", function() { |
|
347 _this.searchString = false; |
|
348 if (_this.source !== _this.currentSource) { |
|
349 _this.currentSource.getAnnotations().trigger("clear-search"); |
|
350 } |
|
351 }); |
|
352 this.source.getAnnotations().on("search-cleared", function() { |
|
353 _this.throttledRefresh(); |
|
354 }); |
|
355 |
|
356 this.onMdpEvent("AnnotationsList.refresh", function() { |
|
357 if (_this.ajax_url) { |
|
358 if (_this.mashupMode) { |
|
359 _this.ajaxMashup(); |
|
360 } else { |
|
361 _this.ajaxSource(); |
|
362 } |
|
363 } |
|
364 _this.throttledRefresh(); |
|
365 }); |
|
366 |
285 |
367 if (this.ajax_url) { |
286 if (this.ajax_url) { |
368 if (this.mashupMode) { |
287 if (this.mashupMode) { |
369 this.ajaxMashup(); |
288 this.ajaxMashup(); |
370 } else { |
289 } else { |