23 project = directory.remoteSource({ |
23 project = directory.remoteSource({ |
24 url: options.url, |
24 url: options.url, |
25 serializer: IriSP.serializers.medialist |
25 serializer: IriSP.serializers.medialist |
26 }), |
26 }), |
27 mashup = new IriSP.Model.Mashup(false, project), |
27 mashup = new IriSP.Model.Mashup(false, project), |
28 mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>' |
28 mediatemplate = _.template( |
29 + '<img src="<%= thumbnail %>" alt="<%= title %>" />' |
29 '<li class="item-video media" data-media-id="<%= id %>"><div class="media-count-wrap"><span class="media-count"></span></div>' |
|
30 + '<img class="thumbnail" src="<%= thumbnail %>" alt="<%= title %>" />' |
30 + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>' |
31 + '<div class="video-info"><h3 class="title-video"><%= title %></h3><p class="description"><%= description %></p>' |
31 + '<p class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></p></div></li>'), |
32 + '<p class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></p></div><div class="media-found-segments"></div></li>' |
32 segmenttemplate = _.template('<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">' |
33 ), |
33 + '<img src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />' |
34 segmenttemplate = _.template( |
|
35 '<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">' |
|
36 + '<img class="thumbnail" src="<%= annotation.thumbnail %>" alt="<%= annotation.getMedia().title %>" />' |
34 + '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><div class="video-info"><h3 class="title-video"><%= annotation.getMedia().title %></h3>' |
37 + '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><div class="video-info"><h3 class="title-video"><%= annotation.getMedia().title %></h3>' |
35 + '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>' |
38 + '<p class="subtitle"><%= annotation.title %></p><p class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</p>' |
36 + '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>' |
39 + '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>' |
37 + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></div></li>'), |
40 + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></div></li>' |
38 mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">' |
41 ), |
39 + '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>"></div>' |
42 mediasegmenttemplate = _.template( |
40 + '<div class="media-section media-current-section" style="left:<%= currentleft %>px; width:<%= currentwidth %>px;"><div class="media-current-section-inner"></div></div>' |
43 '<div class="media-segment">' |
41 + '<div class="popin media-segment-popin" style="left:<%= popleft %>px"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">' |
44 + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>' |
|
45 + '<div class="popin media-segment-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">' |
42 + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>' |
46 + '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>' |
43 + '<p><%= IriSP.hc_messages.From_ %> <span><%= annotation.begin.toString() %></span> <%= IriSP.hc_messages.to_ %> <span><%= annotation.end.toString() %></span> (<%= IriSP.hc_messages.duration_ %> <span><%= annotation.getDuration().toString() %></span>)</p>' |
47 + '<p><%= IriSP.hc_messages.From_ %> <span><%= annotation.begin.toString() %></span> <%= IriSP.hc_messages.to_ %> <span><%= annotation.end.toString() %></span> (<%= IriSP.hc_messages.duration_ %> <span><%= annotation.getDuration().toString() %></span>)</p>' |
44 + '</div></div></div></div>'), |
48 + '</div></div></div>' |
|
49 ), |
|
50 mediasegmentlisttemplate = _.template( |
|
51 '<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>' |
|
52 ), |
|
53 mediafoundtemplate = _.template( |
|
54 '<div class="media-segment"><div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;"></div>' |
|
55 + '<div class="popin media-found-popin" style="left:<%= popleft %>px; top: <%= 5+top %>px;"><img style="left:<%= pointerpos %>px;" class="pointer" src="img/popin-triangle.png" alt="" /><div class="popin-content">' |
|
56 + '<h3><%= title %></h3><a href="#" class="button clone-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>' |
|
57 + '</div></div></div>' |
|
58 ), |
|
59 mediafoundlisttemplate = _.template( |
|
60 '<div class="media-found-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %></div>' |
|
61 ), |
45 mashupstatus = '', |
62 mashupstatus = '', |
46 addMode, currentMedia, currentSegment; |
63 addMode, currentMedia, currentSegment; |
|
64 |
|
65 var colors = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"]; |
47 |
66 |
48 IriSP.mashupcore(project, mashup); |
67 IriSP.mashupcore(project, mashup); |
49 |
68 |
50 /* Validation of segments and mashup */ |
69 /* Validation of segments and mashup */ |
51 |
70 |
114 project.getMedias().forEach(function(_m) { |
133 project.getMedias().forEach(function(_m) { |
115 html += mediatemplate(_m); |
134 html += mediatemplate(_m); |
116 }); |
135 }); |
117 $(".col-left .list-video").html(html); |
136 $(".col-left .list-video").html(html); |
118 project.getMedias().forEach(function(_m) { |
137 project.getMedias().forEach(function(_m) { |
119 /* var dataType = (IriSP.Model.isLocalURL(options.segment_api_endpoint) ? "json" : "jsonp"); |
|
120 $.ajax({ |
|
121 url: , |
|
122 dataType: dataType, |
|
123 data: { |
|
124 format: dataType, |
|
125 iri_id: _m.id |
|
126 }, |
|
127 success: function(data) { |
|
128 console.log(data); |
|
129 if (data.objects && data.objects.length) { |
|
130 var mediaid = data.objects[0].iri_id; |
|
131 mediasegmentscache[mediaid] = data.objects; |
|
132 if (currentMedia && mediaid === currentMedia.id && currentSegment) { |
|
133 showOtherSegments(); |
|
134 } |
|
135 } |
|
136 } |
|
137 }); */ |
|
138 apidirectory.remoteSource({ |
138 apidirectory.remoteSource({ |
139 url: options.segment_api_endpoint, |
139 url: options.segment_api_endpoint, |
140 url_params: { |
140 url_params: { |
141 iri_id: _m.id, |
141 iri_id: _m.id, |
142 limit: 0 |
142 limit: 0 |
166 var find = IriSP.Model.regexpFromTextOrArray(val, true), |
166 var find = IriSP.Model.regexpFromTextOrArray(val, true), |
167 replace = IriSP.Model.regexpFromTextOrArray(val, false); |
167 replace = IriSP.Model.regexpFromTextOrArray(val, false); |
168 } |
168 } |
169 $(".col-left .item-video").each(function() { |
169 $(".col-left .item-video").each(function() { |
170 var li = $(this), |
170 var li = $(this), |
171 title = $(this).find(".title-video"), |
171 mediaid = li.attr("data-media-id"), |
172 titletext = title.text(); |
172 media = directory.getElement(mediaid); |
173 if (val && find.test(titletext)) { |
173 if (!val) { |
174 title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>')); |
174 li.find(".title-video").text(media.title); |
|
175 li.find(".description").text(media.description); |
|
176 li.find(".media-found-segments").html(""); |
175 li.show(); |
177 li.show(); |
176 } else { |
178 } else { |
177 title.text(titletext); |
179 var apimedia = apidirectory.getElement(mediaid); |
178 if (val) { |
180 if (apimedia) { |
|
181 var annotations = apimedia.getAnnotations().searchByTextFields(val); |
|
182 } else { |
|
183 var annotations = []; |
|
184 } |
|
185 var found = find.test(media.title) || find.test(media.description) || annotations.length; |
|
186 if (found) { |
|
187 li.find(".title-video").html(media.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>')); |
|
188 li.find(".description").html(media.description.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>')); |
|
189 var html = '', |
|
190 k = 230 / media.duration, |
|
191 lines = []; |
|
192 _(annotations).each(function(_a, i) { |
|
193 var pos = k * (_a.begin + _a.end) / 2, |
|
194 corrpos = Math.max(76, Math.min(156, pos)), |
|
195 line = IriSP._(lines).find(function(line) { |
|
196 return !IriSP._(line.annotations).find(function(ann) { |
|
197 return ann.begin < _a.end && ann.end > _a.begin |
|
198 }); |
|
199 }); |
|
200 if (!line) { |
|
201 line = { index: lines.length, annotations: []}; |
|
202 lines.push(line); |
|
203 } |
|
204 line.annotations.push(_a); |
|
205 vizdata = { |
|
206 annotation : _a, |
|
207 left : k * _a.begin, |
|
208 width : k * _a.getDuration(), |
|
209 top: 8 * line.index, |
|
210 color: colors[i % colors.length], |
|
211 title: _a.title.replace(replace, '<span style="background: #fc00ff; color: #ffffff;">$1</span>'), |
|
212 popleft : corrpos, |
|
213 pointerpos : (pos - corrpos), |
|
214 } |
|
215 html += mediafoundtemplate(vizdata); |
|
216 }); |
|
217 html = mediafoundlisttemplate({ |
|
218 height: 8 * lines.length, |
|
219 segments: html |
|
220 }); |
|
221 li.find(".media-found-segments").html(html); |
|
222 li.show(); |
|
223 } else { |
179 li.hide(); |
224 li.hide(); |
180 } else { |
|
181 li.show(); |
|
182 } |
225 } |
183 } |
226 } |
184 }) |
227 }) |
185 }); |
228 }); |
186 |
229 |
341 addMode = !(currentSegment && mashup.hasAnnotation(currentSegment)); |
384 addMode = !(currentSegment && mashup.hasAnnotation(currentSegment)); |
342 |
385 |
343 if (!currentSegment) { |
386 if (!currentSegment) { |
344 currentSegment = new IriSP.Model.Annotation(false, project); |
387 currentSegment = new IriSP.Model.Annotation(false, project); |
345 currentSegment.setMedia(currentMedia.id); |
388 currentSegment.setMedia(currentMedia.id); |
346 currentSegment.setBegin(0); |
389 currentSegment.setBegin(currentMedia.getCurrentTime()); |
347 currentSegment.setEnd(currentMedia.duration); |
390 currentSegment.setEnd(Math.min(currentMedia.getCurrentTime() + 180000, currentMedia.duration)); |
348 currentSegment.title = IriSP.hc_messages.segment_title_placeholder; |
391 currentSegment.title = IriSP.hc_messages.segment_title_placeholder; |
349 currentSegment.color = currentMedia.color; |
392 currentSegment.color = currentMedia.color; |
350 currentSegment.thumbnail = currentMedia.thumbnail; |
393 currentSegment.thumbnail = currentMedia.thumbnail; |
351 currentSegment.created = new Date(); |
394 currentSegment.created = new Date(); |
352 currentSegment.keywords = []; |
395 currentSegment.keywords = []; |
383 segment_tags.tagit("option","onTagAdded",updateSegmentTags); |
426 segment_tags.tagit("option","onTagAdded",updateSegmentTags); |
384 updateSegmentUI(); |
427 updateSegmentUI(); |
385 var relatedSegments = mashup.segments.filter(function(_s) { |
428 var relatedSegments = mashup.segments.filter(function(_s) { |
386 return _s.getMedia() === currentMedia && _s.annotation !== currentSegment; |
429 return _s.getMedia() === currentMedia && _s.annotation !== currentSegment; |
387 }); |
430 }); |
388 var html = "", |
|
389 k = $(".Ldt-Slider").width() / currentMedia.duration, |
|
390 currentleft = k * currentSegment.begin, |
|
391 currentwidth = k * currentSegment.getDuration(); |
|
392 if (relatedSegments.length) { |
431 if (relatedSegments.length) { |
393 relatedSegments.forEach(function(_s) { |
|
394 var pos = k * (_s.annotation.begin + _s.annotation.end) / 2, |
|
395 corrpos = Math.max(145, Math.min(305, pos)); |
|
396 vizdata = { |
|
397 annotation : _s.annotation, |
|
398 currentleft : currentleft, |
|
399 currentwidth : currentwidth, |
|
400 popleft : corrpos, |
|
401 left : k * _s.annotation.begin, |
|
402 width : k * _s.annotation.getDuration(), |
|
403 pointerpos : (pos - corrpos) |
|
404 } |
|
405 html += mediasegmenttemplate(vizdata); |
|
406 }); |
|
407 $(".self-media-segments").show(); |
432 $(".self-media-segments").show(); |
408 } else { |
433 } else { |
409 $(".self-media-segments").hide(); |
434 $(".self-media-segments").hide(); |
410 } |
435 } |
411 $(".self-media-segments .media-segments-list").html(html); |
436 $(".self-media-segments .media-segments-list").html(mediaSegmentList(_(relatedSegments).pluck("annotation"))); |
412 showOtherSegments(); |
437 showOtherSegments(); |
413 project.trigger("mouseout-annotation"); |
438 project.trigger("mouseout-annotation"); |
414 } |
439 } |
415 if (currentMedia.elementType === "mashup") { |
440 if (currentMedia.elementType === "mashup") { |
416 showPreview(); |
441 showPreview(); |
417 } |
442 } |
418 } |
443 } |
419 |
444 |
|
445 function mediaSegmentList(_annotations) { |
|
446 var html = '', |
|
447 k = $(".Ldt-Slider").width() / currentMedia.duration, |
|
448 lines = []; |
|
449 _(_annotations).each(function(_a, i) { |
|
450 var pos = k * (_a.begin + _a.end) / 2, |
|
451 corrpos = Math.max(145, Math.min(305, pos)), |
|
452 line = IriSP._(lines).find(function(line) { |
|
453 return !IriSP._(line.annotations).find(function(ann) { |
|
454 return ann.begin < _a.end && ann.end > _a.begin |
|
455 }); |
|
456 }); |
|
457 if (!line) { |
|
458 line = { index: lines.length, annotations: []}; |
|
459 lines.push(line); |
|
460 } |
|
461 line.annotations.push(_a); |
|
462 vizdata = { |
|
463 annotation : _a, |
|
464 popleft : corrpos, |
|
465 left : k * _a.begin, |
|
466 width : k * _a.getDuration(), |
|
467 height: 8, |
|
468 top: 8 * line.index, |
|
469 pointerpos : (pos - corrpos), |
|
470 color: colors[i % colors.length] |
|
471 } |
|
472 html += mediasegmenttemplate(vizdata); |
|
473 }); |
|
474 return mediasegmentlisttemplate({ |
|
475 height: 8 * lines.length, |
|
476 left: k * currentSegment.begin, |
|
477 width: k * currentSegment.getDuration(), |
|
478 segments: html |
|
479 }); |
|
480 } |
|
481 |
420 /* Show Related Segments */ |
482 /* Show Related Segments */ |
421 |
483 |
422 function showOtherSegments() { |
484 function showOtherSegments() { |
423 var annotations = mediasegmentscache[currentMedia.id] |
485 var annotations = mediasegmentscache[currentMedia.id]; |
|
486 $(".other-media-segments .media-segments-list").html(mediaSegmentList(annotations)); |
424 if (annotations && annotations.length) { |
487 if (annotations && annotations.length) { |
425 var html = "", |
|
426 k = $(".Ldt-Slider").width() / currentMedia.duration, |
|
427 currentleft = k * currentSegment.begin, |
|
428 currentwidth = k * currentSegment.getDuration(); |
|
429 annotations.forEach(function(_a) { |
|
430 var pos = k * (_a.begin + _a.end) / 2, |
|
431 corrpos = Math.max(145, Math.min(305, pos)); |
|
432 vizdata = { |
|
433 annotation : _a, |
|
434 currentleft : currentleft, |
|
435 currentwidth : currentwidth, |
|
436 popleft : corrpos, |
|
437 left : k * _a.begin, |
|
438 width : k * _a.getDuration(), |
|
439 pointerpos : (pos - corrpos), |
|
440 color: currentMedia.color |
|
441 } |
|
442 html += mediasegmenttemplate(vizdata); |
|
443 }); |
|
444 $(".other-media-segments").show(); |
488 $(".other-media-segments").show(); |
445 $(".other-media-segments .media-segments-list").html(html); |
|
446 } |
489 } |
447 else { |
490 else { |
448 $(".other-media-segments").hide(); |
491 $(".other-media-segments").hide(); |
449 $(".other-media-segments .media-segments-list").html(""); |
|
450 } |
492 } |
451 } |
493 } |
452 /* Set In, Out */ |
494 /* Set In, Out */ |
453 |
495 |
454 $(".Ldt-Ctrl-SetIn").click(function() { |
496 $(".Ldt-Ctrl-SetIn").click(function() { |
682 return false; |
725 return false; |
683 }); |
726 }); |
684 |
727 |
685 /* Handling related segments */ |
728 /* Handling related segments */ |
686 |
729 |
|
730 function cloneSegment(sid) { |
|
731 var s = directory.getElement(sid) || apidirectory.getElement(sid), |
|
732 media = directory.getElement(s.getMedia().id); |
|
733 |
|
734 currentSegment = new IriSP.Model.Annotation(false, project); |
|
735 currentSegment.setMedia(media.id); |
|
736 currentSegment.setBegin(s.begin); |
|
737 currentSegment.setEnd(s.end); |
|
738 currentSegment.title = IriSP.hc_messages.copy_of_ + s.title; |
|
739 currentSegment.description = s.description; |
|
740 currentSegment.keywords = s.keywords; |
|
741 currentSegment.color = media.color; |
|
742 currentSegment.thumbnail = media.thumbnail; |
|
743 currentSegment.created = new Date(); |
|
744 currentSegment.on("change-begin", function() { |
|
745 if (currentMedia && currentSegment === this) { |
|
746 currentMedia.setCurrentTime(this.begin); |
|
747 updateSegmentUI(); |
|
748 } |
|
749 }); |
|
750 currentSegment.on("change-end", function() { |
|
751 if (currentMedia && currentSegment === this) { |
|
752 currentMedia.setCurrentTime(this.end); |
|
753 updateSegmentUI(); |
|
754 } |
|
755 }); |
|
756 setMedia(media); |
|
757 } |
|
758 |
687 $(".media-segments-list").on("mouseover", ".media-segment", function() { |
759 $(".media-segments-list").on("mouseover", ".media-segment", function() { |
688 $(this).find(".media-segment-popin").show(); |
760 $(this).find(".media-segment-popin").show(); |
689 }).on("mouseout", ".media-segment", function() { |
761 }).on("mouseout", ".media-segment", function() { |
690 $(this).find(".media-segment-popin").hide(); |
762 $(this).find(".media-segment-popin").hide(); |
691 }).on("click", ".reprendre-segment", function() { |
763 }).on("click", ".reprendre-segment", function() { |
692 var sid = $(this).attr("data-segment-id"), |
764 cloneSegment($(this).attr("data-segment-id")); |
693 s = directory.getElement(sid) || apidirectory.getElement(sid); |
765 return false; |
694 currentSegment.title = IriSP.hc_messages.copy_of_ + s.title; |
766 }); |
695 currentSegment.description = s.description; |
767 |
696 $("#segment-title").val(IriSP.hc_messages.copy_of_ + s.title); |
768 $(".col-left").on("mouseover", ".media-segment", function() { |
697 $("#segment-description").val(s.description); |
769 $(this).find(".media-found-popin").show(); |
698 currentSegment.setBegin(s.begin); |
770 }).on("mouseout", ".media-segment", function() { |
699 currentSegment.setEnd(s.end); |
771 $(this).find(".media-found-popin").hide(); |
700 //TODO: ET LES TAGS ! |
772 }).on("click", ".clone-segment", function() { |
701 return false; |
773 cloneSegment($(this).attr("data-segment-id")); |
702 }); |
774 return false; |
703 |
775 }); |
704 /* Changing Hashcut Title and description */ |
776 /* Changing Hashcut Title and description */ |
705 |
777 |
706 mashup.title = IriSP.hc_messages.mashup_title_placeholder; |
778 mashup.title = IriSP.hc_messages.mashup_title_placeholder; |
707 $(".title-video-wrap a").text(mashup.title); |
779 $(".title-video-wrap a").text(mashup.title); |
708 $("#hashcut-title").val(mashup.title); |
780 $("#hashcut-title").val(mashup.title); |