1 IriSP.editor = function(options) { |
1 IriSP.editor = function(options) { |
|
2 |
|
3 window.shortenText = function(text, minlength, maxlength) { |
|
4 var min = (typeof minlength === "undefined" ? 100 : minlength), |
|
5 max = (typeof maxlength === "undefined" ? min + 20 : maxlength), |
|
6 rx = new RegExp("(^.{" + min + "," + max + "})[\s].+$"); |
|
7 return text.replace(/[\n\r\s]+/mg,' ').replace(rx,'$1…'); |
|
8 } |
2 |
9 |
3 /* Load Media List */ |
10 /* Load Media List */ |
4 |
11 |
5 var directory = new IriSP.Model.Directory(), |
12 var directory = new IriSP.Model.Directory(), |
6 apidirectory = new IriSP.Model.Directory(), |
13 apidirectory = new IriSP.Model.Directory(), |
11 }), |
18 }), |
12 mashup = new IriSP.Model.Mashup(false, project), |
19 mashup = new IriSP.Model.Mashup(false, project), |
13 mediatemplate = _.template( |
20 mediatemplate = _.template( |
14 '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>' |
21 '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>' |
15 + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />' |
22 + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />' |
16 + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>' |
23 + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= shortenText(description) %></p>' |
17 + '<p class="time-length"><%= gettext("Duration:") %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>' |
24 + '<p class="time-length"><%= gettext("Duration:") %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>' |
18 ), |
25 ), |
19 segmenttemplate = _.template( |
26 segmenttemplate = _.template( |
20 '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">' |
27 '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">' |
21 + '<img class="thumbnail" src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />' |
28 + '<img class="thumbnail" src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />' |
27 mediasegmenttemplate = _.template( |
34 mediasegmenttemplate = _.template( |
28 '<div class="media-segment">' |
35 '<div class="media-segment">' |
29 + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>' |
36 + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>' |
30 + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">' |
37 + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">' |
31 + '<h3 class="segment-title"><%= annotation.title %></h3>' |
38 + '<h3 class="segment-title"><%= annotation.title %></h3>' |
32 + '<p><%= annotation.description %></p><% if (annotation.keywords.length) { print("<p><strong>" + gettext("Tags:") + "</strong> " + annotation.keywords.join(", ") + "</p>"); } %>' |
39 + '<p><%= shortenText(annotation.description) %></p><% if (annotation.keywords.length) { print("<p><strong>" + gettext("Tags:") + "</strong> " + annotation.keywords.join(", ") + "</p>"); } %>' |
33 + '<a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>' |
40 + '<a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>' |
34 + '<p><%= gettext("From:") %> <span><%= annotation.begin.toString() %></span> <%= gettext("to:") %> <span><%= annotation.end.toString() %></span> (<%= gettext("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>' |
41 + '<p><%= gettext("From:") %> <span><%= annotation.begin.toString() %></span> <%= gettext("to:") %> <span><%= annotation.end.toString() %></span> (<%= gettext("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>' |
35 + '</div></div></div>' |
42 + '</div></div></div>' |
36 ), |
43 ), |
37 mediasegmentlisttemplate = _.template( |
44 mediasegmentlisttemplate = _.template( |
38 '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-current-section" style="left: <%= left %>px; width: <%= width %>px;"></div><div class="media-segment-list-inner"></div><%= segments %></div>' |
45 '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-current-section" style="left: <%= left %>px; width: <%= width %>px;"></div><div class="media-segment-list-inner"></div><%= segments %></div>' |
39 ), |
46 ), |
40 mediafoundtemplate = _.template( |
47 mediafoundtemplate = _.template( |
41 '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>' |
48 '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>' |
42 + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><div style="left:<%= pointerpos %>px;" class="pointer"></div><div class="popin-content">' |
49 + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= top-5 %>px;"><div class="popin-content">' |
43 + '<h3 class="segment-title"><%= title %></h3>' |
50 + '<h3 class="segment-title"><%= title %></h3>' |
44 + '<p><%= description %></p><% if (tags) { print("<p><strong>" + gettext("Tags:") + "</strong> " + tags + "</p>"); } %>' |
51 + '<p><%= description %></p><% if (tags) { print("<p><strong>" + gettext("Tags:") + "</strong> " + tags + "</p>"); } %>' |
45 + '<a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>' |
52 + '<a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= gettext("Clone segment") %></a>' |
46 + '</div></div></div>' |
53 + '</div><div style="left:<%= pointerpos %>px;" class="pointer"></div></div></div>' |
47 ), |
54 ), |
48 mediafoundlisttemplate = _.template( |
55 mediafoundlisttemplate = _.template( |
49 '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>' |
56 '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>' |
50 ), |
57 ), |
51 mashupstatus = '', |
58 mashupstatus = '', |
62 { |
69 { |
63 validate: function(_s) { |
70 validate: function(_s) { |
64 return (_s.getDuration() >= 1000); |
71 return (_s.getDuration() >= 1000); |
65 }, |
72 }, |
66 message: gettext("A segment must be at least one second long") |
73 message: gettext("A segment must be at least one second long") |
67 }, |
|
68 { |
|
69 validate: function(_s) { |
|
70 return (_s.getDuration() < 180000); |
|
71 }, |
|
72 message: gettext("A segment must be at most three minutes long") |
|
73 }, |
74 }, |
74 { |
75 { |
75 validate: function(_s) { |
76 validate: function(_s) { |
76 return (!!_s.title && _s.title !== gettext("Untitled segment")); |
77 return (!!_s.title && _s.title !== gettext("Untitled segment")); |
77 }, |
78 }, |
165 var li = $(this), |
166 var li = $(this), |
166 mediaid = li.attr("data-media-id"), |
167 mediaid = li.attr("data-media-id"), |
167 media = directory.getElement(mediaid); |
168 media = directory.getElement(mediaid); |
168 if (!val) { |
169 if (!val) { |
169 li.find(".title-video").text(media.title); |
170 li.find(".title-video").text(media.title); |
170 li.find(".description").text(media.description); |
171 li.find(".description").text(shortenText(media.description)); |
171 li.find(".media-found-segments").html(""); |
172 li.find(".media-found-segments").html(""); |
172 li.show(); |
173 li.show(); |
173 } else { |
174 } else { |
174 var apimedia = apidirectory.getElement(mediaid); |
175 var apimedia = apidirectory.getElement(mediaid); |
175 if (apimedia) { |
176 if (apimedia) { |
178 var annotations = []; |
179 var annotations = []; |
179 } |
180 } |
180 var found = find.test(media.title) || find.test(media.description) || annotations.length; |
181 var found = find.test(media.title) || find.test(media.description) || annotations.length; |
181 if (found) { |
182 if (found) { |
182 li.find(".title-video").html(media.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>')); |
183 li.find(".title-video").html(media.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>')); |
183 li.find(".description").html(media.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>')); |
184 li.find(".description").html(shortenText(media.description).replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>')); |
184 var html = '', |
185 var html = '', |
185 k = 230 / media.duration, |
186 k = 230 / media.duration, |
186 lines = []; |
187 lines = []; |
187 _(annotations).each(function(_a, i) { |
188 _(annotations).each(function(_a, i) { |
188 var pos = k * (_a.begin + _a.end) / 2, |
189 var pos = k * (_a.begin + _a.end) / 2, |
202 left : k * _a.begin, |
203 left : k * _a.begin, |
203 width : k * _a.getDuration(), |
204 width : k * _a.getDuration(), |
204 top: 8 * line.index, |
205 top: 8 * line.index, |
205 color: IriSP.vizcolors[i % IriSP.vizcolors.length], |
206 color: IriSP.vizcolors[i % IriSP.vizcolors.length], |
206 title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'), |
207 title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'), |
207 description: _a.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'), |
208 description: shortenText(_a.description).replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'), |
208 tags: _a.keywords.join(", ").replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'), |
209 tags: _a.keywords.join(", ").replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'), |
209 popleft : corrpos, |
210 popleft : corrpos, |
210 pointerpos : (pos - corrpos), |
211 pointerpos : (pos - corrpos), |
211 } |
212 } |
212 html += mediafoundtemplate(vizdata); |
213 html += mediafoundtemplate(vizdata); |