--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/AnnotationsList.js Mon Apr 23 19:11:08 2012 +0200
@@ -0,0 +1,225 @@
+IriSP.Widgets.AnnotationsList = function(player, config) {
+ IriSP.Widgets.Widget.call(this, player, config);
+ this.bindPopcorn("IriSP.search", "searchHandler");
+ this.bindPopcorn("IriSP.search.closed", "searchHandler");
+ this.bindPopcorn("IriSP.search.cleared", "searchHandler");
+ this.searchString = false;
+ this.lastIds = [];
+ var _this = this;
+ this.throttledRefresh = IriSP._.throttle(function() {
+ _this.refresh(false);
+ }, 1500);
+};
+
+IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.AnnotationsList.prototype.defaults = {
+ /* URL when the annotations are to be reloaded from an LDT-like segment API
+ * e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?
+ */
+ ajax_url : false,
+ /* how much ms should we look before and after the current timecode in the segment API
+ */
+ ajax_granularity : 300000,
+ default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+ /* 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}}
+ */
+ foreign_url : "",
+ cinecast_version : false,
+ annotation_type : false,
+ refresh_interval : 0,
+ limit_count : 10,
+ newest_first : false
+};
+
+IriSP.Widgets.AnnotationsList.prototype.template =
+ '<div class="Ldt-AnnotationsListWidget">'
+ + '<ul class="Ldt-AnnotationsList-ul">'
+ + '{{#annotations}}'
+ + '<li id="Ldt-Annotation-li-{{id}}" class="Ldt-AnnotationsList-li Ldt-TraceMe">'
+ + '<div class="Ldt-AnnotationsList-ThumbContainer">'
+ + '<a href="{{url}}">'
+ + '<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>'
+ + '<p class="Ldt-AnnotationsList-Description">{{description}}</p>'
+ + '{{#tags.length}}'
+ + '<ul class="Ldt-AnnotationsList-Tags">'
+ + '{{#tags}}'
+ + '{{#.}}'
+ + '<li class="Ldt-AnnotationsList-Tag-Li">'
+ + '<div class="Ldt-AnnotationsList-Tag-Div">{{.}}</div>'
+ + '</li>'
+ + '{{/.}}'
+ + '{{/tags}}'
+ + '</ul>'
+ + '{{/tags.length}}'
+ + '</li>'
+ + '{{/annotations}}'
+ + '</ul>'
+ + '</div>';
+
+IriSP.Widgets.AnnotationsList.prototype.clear = function() {
+};
+
+IriSP.Widgets.AnnotationsList.prototype.clearWidget = function() {
+};
+
+IriSP.Widgets.AnnotationsList.prototype.searchHandler = 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;
+ }
+ this.lastAjaxQuery = _currentTime;
+ _currentTime = Math.floor(1000 * _currentTime);
+ var _url = Mustache.to_html(this.ajax_url, {
+ media : this.source.currentMedia.namespacedId.name,
+ begin : Math.max(0, _currentTime - this.ajax_granularity),
+ end : Math.min(_duration.milliseconds, _currentTime + this.ajax_granularity)
+ });
+ this.currentSource = this.player.loadMetadata(IriSP._.defaults({
+ "url" : _url
+ }, this.metadata));
+}
+
+IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
+ _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);
+ if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) {
+ return 0;
+ }
+ var _this = this,
+ _currentTime = this.player.popcorn.currentTime();
+ if (typeof _currentTime == "undefined") {
+ _currentTime = 0;
+ }
+ var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type, true) : this.currentSource.getAnnotations();
+ if (this.searchString) {
+ _list = _list.searchByTextFields(this.searchString);
+ }
+ if (this.limit_count) {
+ _list = _list.sortBy(function(_annotation) {
+ return Math.abs(_annotation.begin.getSeconds() - _currentTime);
+ }).slice(0, this.limit_count)
+ }
+ if (this.newest_first) {
+ _list = _list.sortBy(function(_annotation) {
+ return -_annotation.created.valueOf();
+ });
+ } else {
+ _list = _list.sortBy(function(_annotation) {
+ return _annotation.begin;
+ });
+ }
+
+ var _ids = _list.idIndex;
+
+ if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) {
+ /* This part only gets executed if the list needs updating */
+ this.lastIds = _ids;
+
+ var _html = Mustache.to_html(
+ this.template,
+ {
+ annotations : _list.map(function(_annotation) {
+ var _url = (
+ ( typeof _annotation.url !== "undefined" )
+ ? _annotation.url
+ : (
+ ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _this.source.projectId !== _annotation.project )
+ ? Mustache.to_html(
+ this.foreign_url,
+ {
+ project : _annotation.project,
+ media : _annotation.media.id.replace(/^.*:/,''),
+ annotation : _annotation.namespacedId.name,
+ annotationType : _annotation.annotationType.id.replace(/^.*:/,'')
+ }
+ )
+ : '#id=' + _annotation.namespacedId.name
+ )
+ );
+ var _res = {
+ id : _annotation.id,
+ title : _annotation.title.replace(_annotation.description,''),
+ description : _annotation.description,
+ begin : _annotation.begin.toString(),
+ end : _annotation.end.toString(),
+ thumbnail : typeof _annotation.thumbnail !== "undefined" ? _annotation.thumbnail : _this.default_thumbnail,
+ url : _url,
+ tags : _annotation.getTagTexts()
+ }
+ return _res;
+ })
+ });
+
+ this.$.html(_html);
+
+ this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
+ _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+ })
+
+ if(this.searchString) {
+ var _searchRe = new RegExp('(' + this.searchString.replace(/(\W)/gm,'\\$1') + ')','gim');
+ 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>'))
+ })
+ }
+ }
+
+ if (this.ajax_url && this.ajax_granularity) {
+ if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) {
+ this.ajaxSource();
+ }
+ }
+ return _list.length;
+}
+
+IriSP.Widgets.AnnotationsList.prototype.draw = function() {
+ var _this = this;
+
+ if (this.ajax_url && this.ajax_granularity) {
+ this.ajaxSource();
+ } else {
+ this.currentSource = this.source;
+ }
+
+ if (this.refresh_interval) {
+ window.setInterval(function() {
+ _this.currentSource.get()
+ }, this.refresh_interval);
+ }
+
+ 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.throttledRefresh();
+
+};