--- a/src/widgets/AnnotationsList.js Thu Aug 30 14:45:23 2012 +0200
+++ b/src/widgets/AnnotationsList.js Thu Jan 02 16:40:25 2014 +0100
@@ -1,12 +1,12 @@
IriSP.Widgets.AnnotationsList = function(player, config) {
IriSP.Widgets.Widget.call(this, player, config);
- this.searchString = false;
this.lastIds = [];
var _this = this;
this.throttledRefresh = IriSP._.throttle(function() {
_this.refresh(false);
- }, 1500);
- this.mashupMode = (this.source.currentMedia.elementType === "mashup");
+ }, 800);
+ this.searchString = false;
+ this.lastSearch = false;
};
IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
@@ -18,7 +18,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 +26,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,8 +44,20 @@
}]
};
+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 =
'<div class="Ldt-AnnotationsListWidget">'
+ + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
+ '<ul class="Ldt-AnnotationsList-ul">'
+ '</ul>'
+ '</div>';
@@ -52,15 +65,15 @@
IriSP.Widgets.AnnotationsList.prototype.annotationTemplate =
'<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
+ '<div class="Ldt-AnnotationsList-ThumbContainer">'
- + '<a href="{{url}}">'
+ + '<a href="{{url}}" draggable="true">'
+ '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+ '</a>'
+ '</div>'
+ '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'
- + '<h3 class="Ldt-AnnotationsList-Title">'
- + '<a href="{{url}}">{{title}}</a>'
+ + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
+ + '<a href="{{url}}">{{{htitle}}}</a>'
+ '</h3>'
- + '<p class="Ldt-AnnotationsList-Description">{{description}}</p>'
+ + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
+ '{{#tags.length}}'
+ '<ul class="Ldt-AnnotationsList-Tags">'
+ '{{#tags}}'
@@ -72,30 +85,15 @@
+ '{{/tags}}'
+ '</ul>'
+ '{{/tags.length}}'
+ + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
+ '</li>';
-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");
- } else {
- this.player.popcorn.trigger("IriSP.search.noMatchFound");
- }
- }
-}
-
//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),
@@ -104,14 +102,11 @@
this.currentSource = this.player.loadMetadata(IriSP._.defaults({
"url" : _url
}, this.metadata));
-}
+};
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(),
@@ -124,7 +119,7 @@
"url" : _url
}, this.metadata));
}
-}
+};
IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
_forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);
@@ -132,28 +127,26 @@
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;
});
}
}
- if (this.searchString) {
- _list = _list.searchByTextFields(this.searchString);
- }
+ _list = _list.filter(function(_annotation) {
+ return _annotation.found !== false;
+ });
if (this.limit_count) {
+ /* Get the n annotations closest to current timecode */
_list = _list.sortBy(function(_annotation) {
- return Math.abs(_annotation.begin.getSeconds() - _currentTime);
- }).slice(0, this.limit_count)
+ return Math.abs((_annotation.begin + _annotation.end) / 2 - _currentTime);
+ }).slice(0, this.limit_count);
}
if (this.newest_first) {
_list = _list.sortBy(function(_annotation) {
@@ -167,8 +160,9 @@
var _ids = _list.idIndex;
- if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) {
+ if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) {
/* This part only gets executed if the list needs updating */
+ this.lastSearch = this.searchString;
this.lastIds = _ids;
this.list_$.html("");
_list.forEach(function(_annotation) {
@@ -186,17 +180,22 @@
annotationType : _annotation.annotationType.id
}
)
- : '#id=' + _annotation.id
+ : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id
)
);
- var _title = (_annotation.title || "").replace(_annotation.description,''),
- _description = _annotation.description;
- if (!_annotation.title) {
- _title = _annotation.creator;
+ var _title = "",
+ _description = _annotation.description,
+ _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
+ // Update : display creator
+ if (_annotation.creator) {
+ _title = _annotation.creator;
}
- if (!_annotation.description && _annotation.creator) {
- _description = _annotation.title;
- _title = _annotation.creator;
+ if (_annotation.title) {
+ var tempTitle = _annotation.title;
+ if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+ _title = "";
+ }
+ _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
}
var _bgcolor;
IriSP._(_this.polemics).each(function(_polemic) {
@@ -208,17 +207,54 @@
var _data = {
id : _annotation.id,
media_id : _annotation.getMedia().id,
- title : _title,
- description : _description,
+ htitle : IriSP.textFieldHtml(_title),
+ hdescription : IriSP.textFieldHtml(_description),
begin : _annotation.begin.toString(),
end : _annotation.end.toString(),
- thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
+ thumbnail : _thumbnail,
url : _url,
tags : _annotation.getTagTexts(),
- specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "")
+ specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
+ l10n: _this.l10n
};
- var _html = Mustache.to_html(_this.annotationTemplate, _data);
- var _el = IriSP.jQuery(_html);
+ if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
+ _data.audio = true;
+ if (!_this.jwplayers[_annotation.id]) {
+ var _audiofile = _annotation.audio.href;
+ if (_this.audio_url_transform) {
+ _audiofile = _this.audio_url_transform(_annotation.audio.href);
+ }
+ var _tmpId = "jwplayer-" + IriSP.Model.getUID();
+ _this.jwplayers[_annotation.id] = _tmpId;
+ _this.$.find(".Ldt-AnnotationsList-Audio").append(IriSP.jQuery("<div>").attr("id", _tmpId));
+ jwplayer(_tmpId).setup({
+ flashplayer: IriSP.getLib("jwPlayerSWF"),
+ file: _audiofile,
+ fallback: false,
+ primary: "flash",
+ controls: false,
+ width: 1,
+ height: 1,
+ events: {
+ onPause: function() {
+ _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.voice_annotation);
+ },
+ onPlay: function() {
+ _this.$.find(".Ldt-AnnotationsList-Play[data-annotation-id=" + _annotation.id + "]").text(_this.l10n.now_playing);
+ }
+ }
+ });
+ }
+ }
+ var _html = Mustache.to_html(_this.annotationTemplate, _data),
+ _el = IriSP.jQuery(_html),
+ _onselect = function() {
+ _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
+ _el.addClass("selected");
+ },
+ _onunselect = function() {
+ _this.$.find('.Ldt-AnnotationsList-li').removeClass("selected");
+ };
_el.mouseover(function() {
_annotation.trigger("select");
})
@@ -226,35 +262,47 @@
_annotation.trigger("unselect");
})
.appendTo(_this.list_$);
- _annotation.on("select", function() {
- _this.annotations_$.removeClass("selected");
- _el.addClass("selected");
+ IriSP.attachDndData(_el.find("[draggable]"), {
+ title: _title,
+ description: _description,
+ uri: _url,
+ image: _annotation.thumbnail
});
- _annotation.on("unselect", function() {
- _this.annotations_$.removeClass("selected");
- });;
+ _el.on("remove", function() {
+ _annotation.off("select", _onselect);
+ _annotation.off("unselect", _onunselect);
+ });
+ _annotation.on("select", _onselect);
+ _annotation.on("unselect", _onunselect);
});
- this.annotations_$ = this.$.find('.Ldt-AnnotationsList-li');
-
/* Correct the empty tag bug */
this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() {
var _el = IriSP.jQuery(this);
if (!_el.text().replace(/(^\s+|\s+$)/g,'')) {
- _el.detach();
+ _el.remove();
}
});
this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
- _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
- })
+ _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+ });
- if(this.searchString) {
- var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString);
+ this.$.find(".Ldt-AnnotationsList-Play").click(function() {
+ var _el = IriSP.jQuery(this),
+ _annid = _el.attr("data-annotation-id");
+ if (_this.jwplayers[_annid]) {
+ jwplayer(_this.jwplayers[_annid]).play();
+ }
+ _this.media.pause();
+ });
+
+ if (this.source.getAnnotations().searching) {
+ var rx = _this.source.getAnnotations().regexp || false;
this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
var _$ = IriSP.jQuery(this);
- _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '<span class="Ldt-AnnotationsList-highlight">$1</span>'))
- })
+ _$.html(IriSP.textFieldHtml(_$.text(), rx));
+ });
}
}
@@ -262,26 +310,59 @@
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();
}
}
}
return _list.length;
-}
+};
IriSP.Widgets.AnnotationsList.prototype.draw = function() {
+ this.jwplayers = {};
+ this.mashupMode = (this.media.elementType === "mashup");
+
this.renderTemplate();
+ var _this = this;
+
this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
- this.bindPopcorn("IriSP.search", "onSearch");
- this.bindPopcorn("IriSP.search.closed", "onSearch");
- this.bindPopcorn("IriSP.search.cleared", "onSearch");
- this.bindPopcorn("IriSP.AnnotationsList.refresh","refresh");
- var _this = this;
+ this.source.getAnnotations().on("search", function(_text) {
+ _this.searchString = _text;
+ if (_this.source !== _this.currentSource) {
+ _this.currentSource.getAnnotations().search(_text);
+ _this.throttledRefresh();
+ }
+ });
+ this.source.getAnnotations().on("found", function() {
+ _this.throttledRefresh();
+ });
+ this.source.getAnnotations().on("not-found", function() {
+ _this.throttledRefresh();
+ });
+ this.source.getAnnotations().on("clear-search", function() {
+ _this.searchString = false;
+ if (_this.source !== _this.currentSource) {
+ _this.currentSource.getAnnotations().trigger("clear-search");
+ }
+ });
+ this.source.getAnnotations().on("search-cleared", function() {
+ _this.throttledRefresh();
+ });
+
+ 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) {
@@ -295,18 +376,18 @@
if (this.refresh_interval) {
window.setInterval(function() {
- _this.currentSource.get()
+ _this.currentSource.get();
}, 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();