diff -r 919e362b9db1 -r 3ab36f402b0c src/widgets/AnnotationsList.js --- 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 = '
' + + '{{#show_audio}}
{{/show_audio}}' + '' + '
'; @@ -52,15 +65,15 @@ IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = '
  • ' + '
    ' - + '' + + '' + '' + '' + '
    ' + '
    {{begin}} - {{end}}
    ' - + '

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

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

    ' - + '

    {{description}}

    ' + + '

    {{{hdescription}}}

    ' + '{{#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.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("
    ").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, '$1')) - }) + _$.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();