18 } |
18 } |
19 } |
19 } |
20 |
20 |
21 IriSP.Widgets.MediaList.prototype.defaults = { |
21 IriSP.Widgets.MediaList.prototype.defaults = { |
22 default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png", |
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}}/" |
23 media_url_template : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/", |
|
24 default_color : "#000080" |
24 }; |
25 }; |
25 |
26 |
26 IriSP.Widgets.MediaList.prototype.template = |
27 IriSP.Widgets.MediaList.prototype.template = |
27 '<div class="Ldt-MediaList-NowPlaying"><h2>{{l10n.now_playing}}</h2><hr />' |
28 '<div class="Ldt-MediaList-NowPlaying"><h2>{{l10n.now_playing}}</h2><hr />' |
28 + '<div class="Ldt-MediaList-NowContainer">' |
29 + '<div class="Ldt-MediaList-NowContainer">' |
29 + '<div class="Ldt-MediaList-Now-ThumbContainer"><a href="" target="_blank">' |
30 + '<div class="Ldt-MediaList-Now-ThumbContainer"><a href="" target="_blank">' |
30 + '<img class="Ldt-MediaList-Now-Thumbnail" src="" /></a></div>' |
31 + '<img class="Ldt-MediaList-Now-Thumbnail" src="" /></a></div>' |
31 + '<h3 class="Ldt-MediaList-Now-Title"><a href="" target="_blank"></a></h3>' |
32 + '<h3 class="Ldt-MediaList-Now-Title"><a href="" target="_blank"></a></h3>' |
32 + '<p class="Ldt-MediaList-Now-Description"></p></div></div>' |
33 + '<p class="Ldt-MediaList-Now-Description"></p><div class="Ldt-MediaList-Now-MediaView"></div></div></div>' |
33 + '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></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}}'; |
34 |
38 |
35 IriSP.Widgets.MediaList.prototype.mediaTemplate = |
39 IriSP.Widgets.MediaList.prototype.mediaTemplate = |
36 '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">' |
40 '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">' |
37 + '<img class="Ldt-MediaList-Other-Thumbnail" src="{{thumbnail}}" /></a></div>' |
41 + '<img class="Ldt-MediaList-Other-Thumbnail" src="{{thumbnail}}" /></a></div>' |
38 + '<h3 class="Ldt-MediaList-Other-Title"><a href="{{url}}" target="_blank">{{title}}</a></h3>' |
42 + '<h3 class="Ldt-MediaList-Other-Title"><a href="{{url}}" target="_blank">{{title}}</a></h3>' |
39 + '<p class="Ldt-MediaList-Other-Description">{{description}}</p></li>' |
43 + '<p class="Ldt-MediaList-Other-Description">{{description}}</p><div class="Ldt-MediaList-Other-MediaView">' |
|
44 + IriSP.Widgets.MediaList.prototype.mediaViewTemplate + '</div></li>'; |
|
45 |
40 |
46 |
41 IriSP.Widgets.MediaList.prototype.onSearch = function(searchString) { |
47 IriSP.Widgets.MediaList.prototype.onSearch = function(searchString) { |
42 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
48 this.searchString = typeof searchString !== "undefined" ? searchString : ''; |
43 var _n = this.refresh(true); |
49 var _n = this.refresh(true); |
44 if (this.searchString) { |
50 if (this.searchString) { |
55 this.$.addClass("Ldt-MediaListWidget") |
61 this.$.addClass("Ldt-MediaListWidget") |
56 this.renderTemplate(); |
62 this.renderTemplate(); |
57 this.redraw(); |
63 this.redraw(); |
58 }; |
64 }; |
59 |
65 |
|
66 IriSP.Widgets.MediaList.prototype.getSegments = function(_media) { |
|
67 var _this = this, |
|
68 _scale = this.$.width()/_media.duration.milliseconds; |
|
69 return this.getWidgetAnnotations() |
|
70 .filter(function(_annotation) { |
|
71 return _annotation.getMedia().id == _media.id; |
|
72 }) |
|
73 .map(function(_a) { |
|
74 var _annotation = ( _a.type = "mashedAnnotation" ? _a.annotation : _a ); |
|
75 return { |
|
76 left: _scale * _annotation.begin, |
|
77 width: _scale * (_annotation.end - _annotation.begin), |
|
78 color: ( typeof _annotation.color !== "undefined" && _annotation.color ? _annotation.color : _this.default_color ) |
|
79 } |
|
80 }) |
|
81 } |
|
82 |
60 IriSP.Widgets.MediaList.prototype.redraw = function(_media) { |
83 IriSP.Widgets.MediaList.prototype.redraw = function(_media) { |
61 if (typeof _media !== "undefined") { |
84 if (typeof _media !== "undefined") { |
62 this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.other_media); |
85 this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.other_media); |
63 this.$.find('.Ldt-MediaList-NowPlaying').show(); |
86 this.$.find('.Ldt-MediaList-NowPlaying').show(); |
64 this.$.find('.Ldt-MediaList-Now-Thumbnail').attr("src", _media.thumbnail || this.default_thumbnail); |
87 this.$.find('.Ldt-MediaList-Now-Thumbnail').attr("src", _media.thumbnail || this.default_thumbnail); |
67 var _url = _media.url || Mustache.to_html( |
90 var _url = _media.url || Mustache.to_html( |
68 this.media_url_template, { |
91 this.media_url_template, { |
69 media: _media.id |
92 media: _media.id |
70 }); |
93 }); |
71 this.$.find('.Ldt-MediaList-NowContainer a').attr("href", _url); |
94 this.$.find('.Ldt-MediaList-NowContainer a').attr("href", _url); |
|
95 var _mediaView = Mustache.to_html( this.mediaViewTemplate, { |
|
96 segments: this.getSegments(_media) |
|
97 }); |
|
98 this.$.find('.Ldt-MediaList-Now-MediaView').html(_mediaView); |
72 } else { |
99 } else { |
73 this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.all_media); |
100 this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.all_media); |
74 this.$.find('.Ldt-MediaList-NowPlaying').hide(); |
101 this.$.find('.Ldt-MediaList-NowPlaying').hide(); |
75 } |
102 } |
76 var _this = this, |
103 var _this = this, |
85 url: _media.url || Mustache.to_html( |
112 url: _media.url || Mustache.to_html( |
86 _this.media_url_template, { |
113 _this.media_url_template, { |
87 media: _media.id |
114 media: _media.id |
88 }), |
115 }), |
89 title: _media.title, |
116 title: _media.title, |
90 description: _media.description |
117 description: _media.description, |
|
118 segments: _this.getSegments(_media) |
91 }) |
119 }) |
92 }).join(""); |
120 }).join(""); |
93 this.$.find('.Ldt-MediaList-OtherList').html(_html); |
121 this.$.find('.Ldt-MediaList-OtherList').html(_html); |
94 } else { |
122 } else { |
95 this.$.find('.Ldt-MediaList-Other').hide(); |
123 this.$.find('.Ldt-MediaList-Other').hide(); |