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

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

     3     this.lastMedia = false;

     4 };

     5 

     6 IriSP.Widgets.MediaList.prototype = new IriSP.Widgets.Widget();

     7 

     8 IriSP.Widgets.MediaList.prototype.messages = {

     9     "fr": {

    10         now_playing: "Média en cours",

    11         all_media: "Tous les medias",

    12         other_media: "Autres médias"

    13     },

    14     "en": {

    15         now_playing: "Now playing",

    16         all_media: "All media",

    17         other_media: "Other media"

    18     }

    19 }

    20 

    21 IriSP.Widgets.MediaList.prototype.defaults = {

    22     annotation_type: false,

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

    24     media_url_template : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/"

    25 };

    26 

    27 IriSP.Widgets.MediaList.prototype.template =

    28     '<div class="Ldt-MediaList-NowPlaying"><h2>{{l10n.now_playing}}</h2><hr />'

    29     + '<div class="Ldt-MediaList-NowContainer">'

    30     + '<div class="Ldt-MediaList-Now-ThumbContainer"><a href="" target="_blank">'

    31     + '<img class="Ldt-MediaList-Now-Thumbnail" src="" /></a></div>'

    32     + '<h3 class="Ldt-MediaList-Now-Title"><a href="" target="_blank"></a></h3>'

    33     + '<p class="Ldt-MediaList-Now-Description"></p></div>'

    34     + '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></div></div>';

    35 

    36 IriSP.Widgets.MediaList.prototype.mediaTemplate =

    37     '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">'

    38     + '<img class="Ldt-MediaList-Other-Thumbnail" src="{{thumbnail}}" /></a></div>'

    39     + '<h3 class="Ldt-MediaList-Other-Title"><a href="{{url}}" target="_blank">{{title}}</a></h3>'

    40     + '<p class="Ldt-MediaList-Other-Description">{{description}}</p></li>'

    41 

    42 IriSP.Widgets.MediaList.prototype.onSearch = function(searchString) {

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

    44     var _n = this.refresh(true);

    45     if (this.searchString) {

    46         if (_n) {

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

    48         } else {

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

    50         }

    51     }

    52 }

    53 

    54 IriSP.Widgets.MediaList.prototype.draw = function() {

    55     this.bindPopcorn("timeupdate","onTimeupdate");

    56     this.$.addClass("Ldt-MediaListWidget")

    57     this.renderTemplate();

    58     this.redraw();

    59 };

    60 

    61 IriSP.Widgets.MediaList.prototype.redraw = function() {

    62     var _media = this.lastMedia ? this.source.getElement(this.lastMedia) : undefined;

    63     if (typeof _media !== "undefined") {

    64         this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.other_media);

    65         this.$.find('.Ldt-MediaList-NowPlaying').show();

    66         this.$.find('.Ldt-MediaList-Now-Thumbnail').attr("src", _media.thumbnail || this.default_thumbnail);

    67         this.$.find('.Ldt-MediaList-Now-Title a').html(_media.title);

    68         this.$.find('.Ldt-MediaList-Now-Description').html(_media.description);

    69         var _url = _media.url || Mustache.to_html(

    70                 this.media_url_template, {

    71                     media: _media.namespacedId.name

    72                 });

    73         this.$.find('.Ldt-MediaList-NowContainer a').attr("href", _url);

    74     } else {

    75         this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.all_media);

    76         this.$.find('.Ldt-MediaList-NowPlaying').hide();

    77     }

    78     var _this = this,

    79         _otherlist = this.source.getMedias().filter(function(_media) {

    80             return (_media.id !== _this.lastMedia)

    81         });

    82     if (_otherlist.length) {

    83         this.$.find('.Ldt-MediaList-Other').show();

    84         var _html = _otherlist.map(function(_media) {

    85             return Mustache.to_html(_this.mediaTemplate, {

    86                 thumbnail: _media.thumbnail || _this.default_thumbnail,

    87                 url: _media.url || Mustache.to_html(

    88                     _this.media_url_template, {

    89                         media: _media.namespacedId.name

    90                     }),

    91                 title: _media.title,

    92                 description: _media.description

    93             })

    94         }).join("");

    95         this.$.find('.Ldt-MediaList-OtherList').html(_html);

    96     } else {

    97         this.$.find('.Ldt-MediaList-Other').hide();

    98     }

    99 };

   100 

   101 IriSP.Widgets.MediaList.prototype.onTimeupdate = function() {

   102     var _time = Math.floor(this.player.popcorn.currentTime() * 1000),

   103         _list = this.getWidgetAnnotations().filter(function(_annotation) {

   104             return _annotation.begin <= _time && _annotation.end > _time;

   105         });

   106     if (_list.length) {

   107         var _media = _list[0].getMedia();

   108         if (_media.id !== this.lastMedia) {

   109             this.lastMedia = _media.id;

   110             this.redraw();

   111         }

   112     }

   113 }