1 IriSP.Widgets.AnnotationsList = function(player, config) {

     2     IriSP.Widgets.Widget.call(this, player, config);

     3     this.bindPopcorn("IriSP.search", "searchHandler");

     4     this.bindPopcorn("IriSP.search.closed", "searchHandler");

     5     this.bindPopcorn("IriSP.search.cleared", "searchHandler");

     6     this.searchString = false;

     7     this.lastIds = [];

     8     var _this = this;

     9     this.throttledRefresh = IriSP._.throttle(function() {

    10         _this.refresh(false);

    11     }, 1500);

    12 };

    13 

    14 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();

    15 

    16 IriSP.Widgets.AnnotationsList.prototype.defaults = {

    17     /* URL when the annotations are to be reloaded from an LDT-like segment API

    18      * e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?

    19      */

    20     ajax_url : false,

    21     /* how much ms should we look before and after the current timecode in the segment API

    22      */

    23     ajax_granularity : 300000, 

    24     default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",

    25     /* URL when the annotation is not in the current project,

    26      * e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}

    27      */

    28     foreign_url : "",

    29     cinecast_version : false,

    30     annotation_type : false,

    31     refresh_interval : 0,

    32     limit_count : 10,

    33     newest_first : false

    34 };

    35 

    36 IriSP.Widgets.AnnotationsList.prototype.template =

    37     '<div class="Ldt-AnnotationsListWidget">'

    38     + '<ul class="Ldt-AnnotationsList-ul">'

    39     + '{{#annotations}}'

    40     + '<li id="Ldt-Annotation-li-{{id}}" class="Ldt-AnnotationsList-li Ldt-TraceMe">'

    41     + '<div class="Ldt-AnnotationsList-ThumbContainer">'

    42     + '<a href="{{url}}">'

    43     + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'

    44     + '</a>'

    45     + '</div>'

    46     + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'

    47     + '<h3 class="Ldt-AnnotationsList-Title">'

    48     + '<a href="{{url}}">{{title}}</a>'

    49     + '</h3>'

    50     + '<p class="Ldt-AnnotationsList-Description">{{description}}</p>'

    51     + '{{#tags.length}}'

    52     + '<ul class="Ldt-AnnotationsList-Tags">'

    53     + '{{#tags}}'

    54     + '{{#.}}'

    55     + '<li class="Ldt-AnnotationsList-Tag-Li">'

    56     + '<div class="Ldt-AnnotationsList-Tag-Div">{{.}}</div>'

    57     + '</li>'

    58     + '{{/.}}'

    59     + '{{/tags}}'

    60     + '</ul>'

    61     + '{{/tags.length}}'

    62     + '</li>'

    63     + '{{/annotations}}'

    64     + '</ul>'

    65     + '</div>';

    66 

    67 IriSP.Widgets.AnnotationsList.prototype.clear = function() {

    68 };

    69 

    70 IriSP.Widgets.AnnotationsList.prototype.clearWidget = function() {

    71 };

    72 

    73 IriSP.Widgets.AnnotationsList.prototype.searchHandler = function(searchString) {

    74     this.searchString = typeof searchString !== "undefined" ? searchString : '';

    75     var _n = this.refresh(true);

    76     if (this.searchString) {

    77         if (_n) {

    78             this.player.popcorn.trigger("IriSP.search.matchFound");

    79         } else {

    80             this.player.popcorn.trigger("IriSP.search.noMatchFound");

    81         }

    82     }

    83 }

    84 

    85 //obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;

    86 

    87 IriSP.Widgets.AnnotationsList.prototype.ajaxSource = function() {

    88     var _currentTime = this.player.popcorn.currentTime(),

    89         _duration = this.source.getDuration();

    90     if (typeof _currentTime == "undefined") {

    91         _currentTime = 0;

    92     }

    93     this.lastAjaxQuery = _currentTime;

    94     _currentTime = Math.floor(1000 * _currentTime);

    95     var _url = Mustache.to_html(this.ajax_url, {

    96         media : this.source.currentMedia.namespacedId.name,

    97         begin : Math.max(0, _currentTime - this.ajax_granularity),

    98         end : Math.min(_duration.milliseconds, _currentTime + this.ajax_granularity)

    99     });

   100     this.currentSource = this.player.loadMetadata(IriSP._.defaults({

   101         "url" : _url

   102     }, this.metadata));

   103 }

   104 

   105 IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {

   106     _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);

   107     if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) {

   108         return 0;

   109     }

   110     var _this = this,

   111         _currentTime = this.player.popcorn.currentTime();

   112     if (typeof _currentTime == "undefined") {

   113         _currentTime = 0;

   114     }

   115     var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type, true) : this.currentSource.getAnnotations();

   116     if (this.searchString) {

   117         _list = _list.searchByTextFields(this.searchString);

   118     }

   119     if (this.limit_count) {

   120         _list = _list.sortBy(function(_annotation) {

   121             return Math.abs(_annotation.begin.getSeconds() - _currentTime);

   122         }).slice(0, this.limit_count)

   123     }

   124     if (this.newest_first) {

   125         _list = _list.sortBy(function(_annotation) {

   126             return -_annotation.created.valueOf();

   127         });

   128     } else {

   129         _list = _list.sortBy(function(_annotation) {

   130             return _annotation.begin;

   131         });

   132     }

   133     

   134     var _ids = _list.idIndex;

   135     

   136     if (_forceRedraw || !IriSP._.isEqual(_ids, this.lastIds)) {

   137         /* This part only gets executed if the list needs updating */

   138         this.lastIds = _ids;

   139        

   140         var _html = Mustache.to_html(

   141             this.template,

   142             {

   143                 annotations : _list.map(function(_annotation) {

   144                     var _url = (

   145                         ( typeof _annotation.url !== "undefined" )

   146                         ? _annotation.url

   147                         : (

   148                             ( typeof _this.source.projectId !== "undefined" && typeof _annotation.project !== "undefined" && _this.source.projectId !== _annotation.project )

   149                             ? Mustache.to_html(

   150                                 this.foreign_url,

   151                                 {

   152                                     project : _annotation.project,

   153                                     media : _annotation.media.id.replace(/^.*:/,''),

   154                                     annotation : _annotation.namespacedId.name,

   155                                     annotationType : _annotation.annotationType.id.replace(/^.*:/,'')

   156                                 }

   157                             )

   158                             : '#id=' + _annotation.namespacedId.name

   159                             )

   160                     );

   161                     var _res = {

   162                         id : _annotation.id,

   163                         title : _annotation.title.replace(_annotation.description,''),

   164                         description : _annotation.description,

   165                         begin : _annotation.begin.toString(),

   166                         end : _annotation.end.toString(),

   167                         thumbnail : typeof _annotation.thumbnail !== "undefined" ? _annotation.thumbnail : _this.default_thumbnail,

   168                         url : _url,

   169                         tags : _annotation.getTagTexts()

   170                     }

   171                     return _res;

   172                 })

   173             });

   174     

   175         this.$.html(_html);

   176     

   177         this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {

   178             _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));

   179         })

   180         

   181         if(this.searchString) {

   182             var _searchRe = new RegExp('(' + this.searchString.replace(/(\W)/gm,'\\$1') + ')','gim');

   183             this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {

   184                 var _$ = IriSP.jQuery(this);

   185                 _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '<span class="Ldt-AnnotationsList-highlight">$1</span>'))

   186             })

   187         }

   188     }

   189     

   190     if (this.ajax_url && this.ajax_granularity) {

   191         if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) {

   192             this.ajaxSource();

   193         }

   194     }

   195     return _list.length;

   196 }

   197 

   198 IriSP.Widgets.AnnotationsList.prototype.draw = function() {

   199     var _this = this;

   200     

   201     if (this.ajax_url && this.ajax_granularity) {

   202         this.ajaxSource();

   203     } else {

   204         this.currentSource = this.source;

   205     }

   206     

   207     if (this.refresh_interval) {

   208         window.setInterval(function() {

   209             _this.currentSource.get()

   210         }, this.refresh_interval);

   211     }

   212     

   213     var _events = [

   214         "IriSP.createAnnotationWidget.addedAnnotation",

   215         "timeupdate",

   216         "seeked",

   217         "loadedmetadata"

   218     ];

   219     for (var _i = 0; _i < _events.length; _i++) {

   220         this.player.popcorn.listen(_events[_i], this.throttledRefresh);

   221     }

   222     

   223     this.throttledRefresh();

   224 

   225 };