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