|
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: "Vidéo en cours", |
|
11 all_media: "Toutes les vidéos", |
|
12 other_media: "Autres vidéos" |
|
13 }, |
|
14 "en": { |
|
15 now_playing: "Now playing", |
|
16 all_media: "All videos", |
|
17 other_media: "Other videos" |
|
18 } |
|
19 }; |
|
20 |
|
21 IriSP.Widgets.MediaList.prototype.defaults = { |
|
22 default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png", |
|
23 media_url_template : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/", |
|
24 default_color : "#000080" |
|
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 class="Ldt-MediaList-Now-MediaView"></div></div></div>' |
|
34 + '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></div>'; |
|
35 |
|
36 IriSP.Widgets.MediaList.prototype.mediaViewTemplate = |
|
37 '<div class="Ldt-MediaList-MediaView-Background"></div>{{#segments}}<div class="Ldt-MediaList-Segment" style="background: {{color}}; left: {{left}}px; width: {{width}}px;"></div>{{/segments}}'; |
|
38 |
|
39 IriSP.Widgets.MediaList.prototype.mediaTemplate = |
|
40 '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">' |
|
41 + '<img class="Ldt-MediaList-Other-Thumbnail" src="{{thumbnail}}" /></a></div>' |
|
42 + '<h3 class="Ldt-MediaList-Other-Title"><a href="{{url}}" target="_blank">{{title}}</a></h3>' |
|
43 + '<p class="Ldt-MediaList-Other-Description">{{description}}</p><div class="Ldt-MediaList-Other-MediaView">' |
|
44 + IriSP.Widgets.MediaList.prototype.mediaViewTemplate + '</div></li>'; |
|
45 |
|
46 |
|
47 IriSP.Widgets.MediaList.prototype.onSearch = function(searchString) { |
|
48 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
|
49 var _n = this.refresh(true); |
|
50 if (this.searchString) { |
|
51 if (_n) { |
|
52 this.player.trigger("search.matchFound"); |
|
53 } else { |
|
54 this.player.trigger("search.noMatchFound"); |
|
55 } |
|
56 } |
|
57 }; |
|
58 |
|
59 IriSP.Widgets.MediaList.prototype.draw = function() { |
|
60 this.$.addClass("Ldt-MediaListWidget") |
|
61 this.renderTemplate(); |
|
62 var _this = this; |
|
63 if (typeof this.media.getMedias === "function") { |
|
64 this.media.on("enter-annotation", function(_a) { |
|
65 _this.redraw(_a.getMedia()); |
|
66 }); |
|
67 } |
|
68 this.redraw(); |
|
69 }; |
|
70 |
|
71 IriSP.Widgets.MediaList.prototype.getSegments = function(_media) { |
|
72 var _this = this, |
|
73 _scale = this.$.width()/_media.duration.milliseconds; |
|
74 return this.getWidgetAnnotations() |
|
75 .filter(function(_annotation) { |
|
76 return _annotation.getMedia().id == _media.id; |
|
77 }) |
|
78 .map(function(_a) { |
|
79 var _annotation = ( _a.type = "mashedAnnotation" ? _a.annotation : _a ); |
|
80 return { |
|
81 left: _scale * _annotation.begin, |
|
82 width: _scale * (_annotation.end - _annotation.begin), |
|
83 color: ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.default_color ) |
|
84 }; |
|
85 }); |
|
86 }; |
|
87 |
|
88 IriSP.Widgets.MediaList.prototype.redraw = function(_media) { |
|
89 if (typeof _media !== "undefined") { |
|
90 this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.other_media); |
|
91 this.$.find('.Ldt-MediaList-NowPlaying').show(); |
|
92 this.$.find('.Ldt-MediaList-Now-Thumbnail').attr("src", _media.thumbnail || this.default_thumbnail); |
|
93 this.$.find('.Ldt-MediaList-Now-Title a').html(_media.title); |
|
94 this.$.find('.Ldt-MediaList-Now-Description').html(_media.description); |
|
95 var _url = _media.url || Mustache.to_html( |
|
96 this.media_url_template, { |
|
97 media: _media.id |
|
98 }); |
|
99 this.$.find('.Ldt-MediaList-NowContainer a').attr("href", _url); |
|
100 var _mediaView = Mustache.to_html( this.mediaViewTemplate, { |
|
101 segments: this.getSegments(_media) |
|
102 }); |
|
103 this.$.find('.Ldt-MediaList-Now-MediaView').html(_mediaView); |
|
104 } else { |
|
105 this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.all_media); |
|
106 this.$.find('.Ldt-MediaList-NowPlaying').hide(); |
|
107 } |
|
108 var _this = this, |
|
109 _otherlist = this.source.getMedias().filter(function(_m) { |
|
110 return (_m.id !== _this.lastMedia) |
|
111 }); |
|
112 if (_otherlist.length) { |
|
113 this.$.find('.Ldt-MediaList-Other').show(); |
|
114 var _html = _otherlist.map(function(_media) { |
|
115 return Mustache.to_html(_this.mediaTemplate, { |
|
116 thumbnail: _media.thumbnail || _this.default_thumbnail, |
|
117 url: _media.url || Mustache.to_html( |
|
118 _this.media_url_template, { |
|
119 media: _media.id |
|
120 }), |
|
121 title: _media.title, |
|
122 description: _media.description, |
|
123 segments: _this.getSegments(_media) |
|
124 }); |
|
125 }).join(""); |
|
126 this.$.find('.Ldt-MediaList-OtherList').html(_html); |
|
127 } else { |
|
128 this.$.find('.Ldt-MediaList-Other').hide(); |
|
129 } |
|
130 }; |