diff -r ff11367d4955 -r e9400c80e1e4 web/res/metadataplayer/AnnotationsList.js
--- a/web/res/metadataplayer/AnnotationsList.js Mon Oct 15 14:34:47 2012 +0200
+++ b/web/res/metadataplayer/AnnotationsList.js Tue Oct 02 14:40:14 2012 +0200
@@ -6,7 +6,6 @@
this.throttledRefresh = IriSP._.throttle(function() {
_this.refresh(false);
}, 1500);
- this.mashupMode = (this.source.currentMedia.elementType === "mashup");
};
IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
@@ -18,7 +17,7 @@
ajax_url : false,
/* number of milliseconds before/after the current timecode when calling the segment API
*/
- ajax_granularity : 300000,
+ ajax_granularity : 600000,
default_thumbnail : "",
/* URL when the annotation is not in the current project,
* e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}
@@ -26,8 +25,9 @@
foreign_url : "",
annotation_type : false,
refresh_interval : 0,
- limit_count : 10,
+ limit_count : 20,
newest_first : false,
+ show_audio: true,
polemics : [{
keyword: "++",
background_color: "#c9ecc6"
@@ -43,11 +43,26 @@
}]
};
+IriSP.Widgets.AnnotationsList.prototype.messages = {
+ en: {
+ voice_annotation: "Voice Annotation",
+ now_playing: "Now playing..."
+ },
+ fr: {
+ voice_annotation: "Annotation Vocale",
+ now_playing: "Lecture en cours..."
+ }
+}
+
IriSP.Widgets.AnnotationsList.prototype.template =
'';
+
+IriSP.Widgets.AnnotationsList.prototype.annotationTemplate =
+ ''
+ '';
+ + '{{#audio}}{{l10n.voice_annotation}}
{{/audio}}'
+ + '';
IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) {
this.searchString = typeof searchString !== "undefined" ? searchString : '';
var _n = this.refresh(true);
if (this.searchString) {
if (_n) {
- this.player.popcorn.trigger("IriSP.search.matchFound");
+ this.player.trigger("search.matchFound");
} else {
- this.player.popcorn.trigger("IriSP.search.noMatchFound");
+ this.player.trigger("search.noMatchFound");
}
}
}
@@ -89,13 +102,9 @@
//obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;
IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() {
- var _currentTime = this.player.popcorn.currentTime(),
- _duration = this.source.getDuration();
- if (typeof _currentTime == "undefined") {
- _currentTime = 0;
- }
+ var _currentTime = this.media.getCurrentTime(),
+ _duration = this.media.duration;
this.lastAjaxQuery = _currentTime;
- _currentTime = Math.floor(1000 * _currentTime);
var _url = Mustache.to_html(this.ajax_url, {
media : this.source.currentMedia.id,
begin : Math.max(0, _currentTime - this.ajax_granularity),
@@ -107,11 +116,8 @@
}
IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
- var _currentTime = this.player.popcorn.currentTime();
- if (typeof _currentTime == "undefined") {
- _currentTime = 0;
- }
- var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
+ var _currentTime = this.media.getCurrentTime();
+ var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) {
this.lastMashupAnnotation = _currentAnnotation.id;
var _currentMedia = _currentAnnotation.getMedia(),
@@ -132,15 +138,12 @@
return 0;
}
var _this = this,
- _currentTime = this.player.popcorn.currentTime();
- if (typeof _currentTime == "undefined") {
- _currentTime = 0;
- }
+ _currentTime = this.media.getCurrentTime();
var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations();
if (this.mashupMode) {
- var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
+ var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
if (typeof _currentAnnotation !== "undefined") {
- _currentTime = _currentTime - _currentAnnotation.begin.getSeconds() + _currentAnnotation.annotation.begin.getSeconds();
+ _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin;
var _mediaId = _currentAnnotation.getMedia().id;
_list = _list.filter(function(_annotation) {
return _annotation.getMedia().id === _mediaId;
@@ -151,8 +154,9 @@
_list = _list.searchByTextFields(this.searchString);
}
if (this.limit_count) {
+ /* Get the n annotations closest to current timecode */
_list = _list.sortBy(function(_annotation) {
- return Math.abs(_annotation.begin.getSeconds() - _currentTime);
+ return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
}).slice(0, this.limit_count)
}
if (this.newest_first) {
@@ -170,61 +174,74 @@
if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) {
/* This part only gets executed if the list needs updating */
this.lastIds = _ids;
- var _data = _list.map(function(_annotation) {
- var _url = (
- ( typeof _annotation.url !== "undefined" && _annotation.url)
- ? _annotation.url
- : (
- ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project )
- ? Mustache.to_html(
- _this.foreign_url,
- {
- project : _annotation.project,
- media : _annotation.media.id,
- annotation : _annotation.id,
- annotationType : _annotation.annotationType.id
- }
- )
- : '#id=' + _annotation.id
- )
- );
- var _title = (_annotation.title || "").replace(_annotation.description,''),
- _description = _annotation.description;
- if (!_annotation.title) {
- _title = _annotation.creator;
- }
- if (!_annotation.description && _annotation.creator) {
- _description = _annotation.title;
- _title = _annotation.creator;
- }
- var _bgcolor;
- IriSP._(_this.polemics).each(function(_polemic) {
- var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true);
- if (_rgxp.test(_title + " " + _description)) {
- _bgcolor = _polemic.background_color;
+ this.list_$.html("");
+ _list.forEach(function(_annotation) {
+ var _url = (
+ ( typeof _annotation.url !== "undefined" && _annotation.url)
+ ? _annotation.url
+ : (
+ ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _annotation.project && _this.source.projectId !== _annotation.project )
+ ? Mustache.to_html(
+ _this.foreign_url,
+ {
+ project : _annotation.project,
+ media : _annotation.media.id,
+ annotation : _annotation.id,
+ annotationType : _annotation.annotationType.id
}
- });
- var _res = {
- id : _annotation.id,
- media_id : _annotation.getMedia().id,
- title : _title,
- description : _description,
- begin : _annotation.begin.toString(),
- end : _annotation.end.toString(),
- thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
- url : _url,
- tags : _annotation.getTagTexts(),
- specific_style : (typeof _bgcolor !== "undefined" ? "background: " + _bgcolor : "")
- }
- return _res;
- }),
- _html = Mustache.to_html(
- this.template,
- {
- annotations : _data
- });
-
- this.$.html(_html);
+ )
+ : '#id=' + _annotation.id
+ )
+ );
+ var _title = (_annotation.title || "").replace(_annotation.description,''),
+ _description = _annotation.description;
+ if (!_annotation.title) {
+ _title = _annotation.creator;
+ }
+ if (!_annotation.description && _annotation.creator) {
+ _description = _annotation.title;
+ _title = _annotation.creator;
+ }
+ var _bgcolor;
+ IriSP._(_this.polemics).each(function(_polemic) {
+ var _rgxp = IriSP.Model.regexpFromTextOrArray(_polemic.keyword, true);
+ if (_rgxp.test(_title + " " + _description)) {
+ _bgcolor = _polemic.background_color;
+ }
+ });
+ var _data = {
+ id : _annotation.id,
+ media_id : _annotation.getMedia().id,
+ title : _title,
+ description : _description,
+ begin : _annotation.begin.toString(),
+ end : _annotation.end.toString(),
+ thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
+ url : _url,
+ tags : _annotation.getTagTexts(),
+ specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
+ audio : (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null" ? _annotation.audio.href : undefined),
+ l10n: _this.l10n
+ };
+ var _html = Mustache.to_html(_this.annotationTemplate, _data);
+ var _el = IriSP.jQuery(_html);
+ _el.mouseover(function() {
+ _annotation.trigger("select");
+ })
+ .mouseout(function() {
+ _annotation.trigger("unselect");
+ })
+ .appendTo(_this.list_$);
+ _annotation.on("select", function() {
+ _this.annotations_$.removeClass("selected");
+ _el.addClass("selected");
+ });
+ _annotation.on("unselect", function() {
+ _this.annotations_$.removeClass("selected");
+ });;
+ });
+
+ this.annotations_$ = this.$.find('.Ldt-AnnotationsList-li');
/* Correct the empty tag bug */
this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() {
@@ -235,8 +252,21 @@
});
this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
- _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
- })
+ _this.player.trigger("search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+ });
+
+ this.$.find(".Ldt-AnnotationsList-Play").click(function() {
+ var _el = IriSP.jQuery(this),
+ _audiofile = _el.attr("data-audio").replace(_this.rtmp_streamer,"");
+ _el.text(_this.l10n.now_playing);
+ _this.jwplayer.load({
+ file: _audiofile,
+ streamer: _this.rtmp_streamer
+ });
+ _this.jwplayer.play(true);
+ _this.media.pause();
+ _this.jw_paused_media = true;
+ });
if(this.searchString) {
var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString);
@@ -251,7 +281,7 @@
if (this.mashupMode) {
this.ajaxMashup();
} else {
- if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) {
+ if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity)) {
this.ajaxSource();
}
}
@@ -261,13 +291,51 @@
IriSP.Widgets.AnnotationsList.prototype.draw = function() {
- this.bindPopcorn("IriSP.search", "onSearch");
- this.bindPopcorn("IriSP.search.closed", "onSearch");
- this.bindPopcorn("IriSP.search.cleared", "onSearch");
- this.bindPopcorn("IriSP.AnnotationsList.refresh","refresh");
+ this.mashupMode = (this.media.elementType === "mashup");
+
+ this.renderTemplate();
var _this = this;
+ if (this.show_audio) {
+ var _tmpId = "jwplayer-" + IriSP.Model.getUID();
+ this.$.find(".Ldt-AnnotationsList-Audio").attr("id", _tmpId);
+ this.jwplayer = jwplayer(_tmpId);
+ this.jwplayer.setup({
+ flashplayer: IriSP.getLib("jwPlayerSWF"),
+ width: 1,
+ height: 1,
+ provider: "rtmp",
+ events: {
+ onIdle: function() {
+ if (_this.jw_paused_media) {
+ _this.jw_paused_media = false;
+ _this.media.play();
+ }
+ _this.$.find(".Ldt-AnnotationsList-Play").text(_this.l10n.voice_annotation)
+ }
+ }
+ });
+ this.jw_paused_media = false;
+ }
+
+ this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
+
+
+ this.onMdpEvent("search", "onSearch");
+ this.onMdpEvent("search.closed", "onSearch");
+ this.onMdpEvent("search.cleared", "onSearch");
+ this.onMdpEvent("AnnotationsList.refresh", function() {
+ if (_this.ajax_url) {
+ if (_this.mashupMode) {
+ _this.ajaxMashup();
+ } else {
+ _this.ajaxSource();
+ }
+ }
+ _this.throttledRefresh();
+ });
+
if (this.ajax_url) {
if (this.mashupMode) {
this.ajaxMashup();
@@ -284,14 +352,14 @@
}, this.refresh_interval);
}
+ this.onMdpEvent("createAnnotationWidget.addedAnnotation");
var _events = [
- "IriSP.createAnnotationWidget.addedAnnotation",
"timeupdate",
"seeked",
"loadedmetadata"
];
for (var _i = 0; _i < _events.length; _i++) {
- this.player.popcorn.listen(_events[_i], this.throttledRefresh);
+ this.onMediaEvent(_events[_i], this.throttledRefresh);
}
this.throttledRefresh();