diff -r 3ab36f402b0c -r 198c2b79f5e1 src/widgets/AnnotationsList.js --- a/src/widgets/AnnotationsList.js Thu Jan 02 16:40:25 2014 +0100 +++ b/src/widgets/AnnotationsList.js Thu Jan 02 16:49:20 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); - }, 800); - this.searchString = false; - this.lastSearch = false; + }, 1500); + this.mashupMode = (this.source.currentMedia.elementType === "mashup"); }; 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 : 600000, + ajax_granularity : 300000, 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,9 +26,8 @@ foreign_url : "", annotation_type : false, refresh_interval : 0, - limit_count : 20, + limit_count : 10, newest_first : false, - show_audio: true, polemics : [{ keyword: "++", background_color: "#c9ecc6" @@ -44,20 +43,8 @@ }] }; -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 = '
' - + '{{#show_audio}}
{{/show_audio}}' + '' + '
'; @@ -65,15 +52,15 @@ IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = '
  • ' + '
    ' - + '' + + '' + '' + '' + '
    ' + '
    {{begin}} - {{end}}
    ' - + '

    ' - + '{{{htitle}}}' + + '

    ' + + '{{title}}' + '

    ' - + '

    {{{hdescription}}}

    ' + + '

    {{description}}

    ' + '{{#tags.length}}' + '' + '{{/tags.length}}' - + '{{#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"); + } 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.media.getCurrentTime(), - _duration = this.media.duration; + 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.id, begin : Math.max(0, _currentTime - this.ajax_granularity), @@ -102,11 +104,14 @@ this.currentSource = this.player.loadMetadata(IriSP._.defaults({ "url" : _url }, this.metadata)); -}; +} IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() { - var _currentTime = this.media.getCurrentTime(); - var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime); + var _currentTime = this.player.popcorn.currentTime(); + if (typeof _currentTime == "undefined") { + _currentTime = 0; + } + var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000); if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.id !== this.lastMashupAnnotation) { this.lastMashupAnnotation = _currentAnnotation.id; var _currentMedia = _currentAnnotation.getMedia(), @@ -119,7 +124,7 @@ "url" : _url }, this.metadata)); } -}; +} IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) { _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw); @@ -127,26 +132,28 @@ return 0; } var _this = this, - _currentTime = this.media.getCurrentTime(); + _currentTime = this.player.popcorn.currentTime(); + if (typeof _currentTime == "undefined") { + _currentTime = 0; + } var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations(); if (this.mashupMode) { - var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime); + var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000); if (typeof _currentAnnotation !== "undefined") { - _currentTime = _currentTime - _currentAnnotation.begin + _currentAnnotation.annotation.begin; + _currentTime = _currentTime - _currentAnnotation.begin.getSeconds() + _currentAnnotation.annotation.begin.getSeconds(); var _mediaId = _currentAnnotation.getMedia().id; _list = _list.filter(function(_annotation) { return _annotation.getMedia().id === _mediaId; }); } } - _list = _list.filter(function(_annotation) { - return _annotation.found !== false; - }); + if (this.searchString) { + _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 + _annotation.end) / 2 - _currentTime); - }).slice(0, this.limit_count); + return Math.abs(_annotation.begin.getSeconds() - _currentTime); + }).slice(0, this.limit_count) } if (this.newest_first) { _list = _list.sortBy(function(_annotation) { @@ -160,9 +167,8 @@ var _ids = _list.idIndex; - if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds) || this.searchString !== this.lastSearch) { + if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) { /* This part only gets executed if the list needs updating */ - this.lastSearch = this.searchString; this.lastIds = _ids; this.list_$.html(""); _list.forEach(function(_annotation) { @@ -180,22 +186,17 @@ annotationType : _annotation.annotationType.id } ) - : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id + : '#id=' + _annotation.id ) ); - 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; + var _title = (_annotation.title || "").replace(_annotation.description,''), + _description = _annotation.description; + if (!_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; + if (!_annotation.description && _annotation.creator) { + _description = _annotation.title; + _title = _annotation.creator; } var _bgcolor; IriSP._(_this.polemics).each(function(_polemic) { @@ -207,54 +208,17 @@ var _data = { id : _annotation.id, media_id : _annotation.getMedia().id, - htitle : IriSP.textFieldHtml(_title), - hdescription : IriSP.textFieldHtml(_description), + title : _title, + description : _description, begin : _annotation.begin.toString(), end : _annotation.end.toString(), - thumbnail : _thumbnail, + 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 : ""), - l10n: _this.l10n + specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "") }; - 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("
    ").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"); - }; + var _html = Mustache.to_html(_this.annotationTemplate, _data); + var _el = IriSP.jQuery(_html); _el.mouseover(function() { _annotation.trigger("select"); }) @@ -262,47 +226,35 @@ _annotation.trigger("unselect"); }) .appendTo(_this.list_$); - IriSP.attachDndData(_el.find("[draggable]"), { - title: _title, - description: _description, - uri: _url, - image: _annotation.thumbnail + _annotation.on("select", function() { + _this.annotations_$.removeClass("selected"); + _el.addClass("selected"); }); - _el.on("remove", function() { - _annotation.off("select", _onselect); - _annotation.off("unselect", _onunselect); - }); - _annotation.on("select", _onselect); - _annotation.on("unselect", _onunselect); + _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() { var _el = IriSP.jQuery(this); if (!_el.text().replace(/(^\s+|\s+$)/g,'')) { - _el.remove(); + _el.detach(); } }); this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() { - _this.source.getAnnotations().search(IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); - }); + _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); + }) - 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; + if(this.searchString) { + var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString); this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() { var _$ = IriSP.jQuery(this); - _$.html(IriSP.textFieldHtml(_$.text(), rx)); - }); + _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '$1')) + }) } } @@ -310,59 +262,26 @@ if (this.mashupMode) { this.ajaxMashup(); } else { - if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity)) { + if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) { 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"); - 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(); - }); + var _this = this; if (this.ajax_url) { if (this.mashupMode) { @@ -376,18 +295,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.onMediaEvent(_events[_i], this.throttledRefresh); + this.player.popcorn.listen(_events[_i], this.throttledRefresh); } this.throttledRefresh();