3 var directory = new IriSP.Model.Directory(), |
3 var directory = new IriSP.Model.Directory(), |
4 content = directory.remoteSource({ |
4 content = directory.remoteSource({ |
5 url: IriSP.endpoints.content + options.id, |
5 url: IriSP.endpoints.content + options.id, |
6 serializer: IriSP.serializers.content |
6 serializer: IriSP.serializers.content |
7 }), |
7 }), |
8 apidirectory = new IriSP.Model.Directory(); |
8 apidirectory = new IriSP.Model.Directory(), |
|
9 segmenttemplate = _.template( |
|
10 '<div class="media-segment" data-mashup-id="<%= annotation.project_id %>">' |
|
11 + '<div class="media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= color %>; top: <%= top %>px;" data-segment-id="<%= annotation.id %>"></div>' |
|
12 + '<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">' |
|
13 + '<h3><%= annotation.title %></h3>' |
|
14 + '<p><%= IriSP.translate("From:") %> <span><%= annotation.begin.toString() %></span> <%= IriSP.translate("to:") %> <span><%= annotation.end.toString() %></span> (<%= IriSP.translate("duration:") %> <span><%= annotation.getDuration().toString() %></span>)</p>' |
|
15 + '<p class="mashup-link"><%= IriSP.translate("From hashcut:") %> <a href="<%= IriSP.endpoints.hashcut_page + annotation.project_id %>"></a></p>' |
|
16 + '</div></div></div>' |
|
17 ), |
|
18 segmentlisttemplate = _.template( |
|
19 '<div class="media-segment-list" style="height: <%= height %>px"><div class="media-segment-list-inner"></div><%= segments %><div class="frise-position"></div></div>' |
|
20 ), |
|
21 projtemplate = _.template( |
|
22 '<li class="item-video mashup" data-mashup-id="<%= ldt_id %>">' |
|
23 + '<a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><img class="thumbnail" alt="<%= title %>" src="<%= image %>"></a><div class="video-info">' |
|
24 + '<h3 class="title-video"><a href="<%= IriSP.endpoints.hashcut_page + ldt_id %>"><%= title %></a></h3><p class="description"><%= description %></p>' |
|
25 + '</p></div></li>' |
|
26 ), |
|
27 media; |
|
28 |
|
29 function mediaSegmentList(_annotations) { |
|
30 var html = '', |
|
31 k = $(".Ldt-Slider").width() / media.duration, |
|
32 lines = []; |
|
33 _(_annotations).each(function(_a, i) { |
|
34 var pos = k * (_a.begin + _a.end) / 2, |
|
35 corrpos = Math.max(106, Math.min(516, pos)), |
|
36 line = IriSP._(lines).find(function(line) { |
|
37 return !IriSP._(line.annotations).find(function(ann) { |
|
38 return ann.begin < _a.end && ann.end > _a.begin |
|
39 }); |
|
40 }); |
|
41 if (!line) { |
|
42 line = { index: lines.length, annotations: []}; |
|
43 lines.push(line); |
|
44 } |
|
45 line.annotations.push(_a); |
|
46 vizdata = { |
|
47 annotation : _a, |
|
48 popleft : corrpos, |
|
49 left : k * _a.begin, |
|
50 width : k * _a.getDuration(), |
|
51 height: 8, |
|
52 top: 8 * line.index, |
|
53 pointerpos : (pos - corrpos), |
|
54 color: IriSP.vizcolors[i % IriSP.vizcolors.length] |
|
55 } |
|
56 html += segmenttemplate(vizdata); |
|
57 }); |
|
58 return segmentlisttemplate({ |
|
59 height: 8 * lines.length, |
|
60 segments: html |
|
61 }); |
|
62 } |
9 |
63 |
10 content.onLoad(function() { |
64 content.onLoad(function() { |
11 |
65 |
12 IriSP.mashupcore(content, new IriSP.Model.Mashup(false, content)); |
66 IriSP.mashupcore(content, new IriSP.Model.Mashup(false, content)); |
13 |
67 |
14 var media = content.getMedias()[0]; |
68 media = content.getMedias()[0]; |
15 |
69 |
|
70 apidirectory.remoteSource({ |
|
71 url: IriSP.endpoints.segment, |
|
72 url_params: { |
|
73 iri_id: options.id, |
|
74 limit: 0 |
|
75 }, |
|
76 serializer: IriSP.serializers.segmentapi |
|
77 }).onLoad(function() { |
|
78 var medias = this.getMedias(), |
|
79 annotations = this.getAnnotations(), |
|
80 projlist = {}; |
|
81 $(".media-segments").html(mediaSegmentList(annotations)); |
|
82 annotations.forEach(function(a) { |
|
83 projlist[a.project_id] = 1 + (projlist[a.project_id] || 0); |
|
84 }); |
|
85 var projkeys = _(projlist) |
|
86 .chain() |
|
87 .keys() |
|
88 .sortBy(function(v) { |
|
89 return - projlist[v]; |
|
90 }) |
|
91 .first(8) |
|
92 .value(); |
|
93 $.ajax({ |
|
94 url: IriSP.endpoints.project, |
|
95 dataType: "json", |
|
96 data: { |
|
97 format: "json", |
|
98 ldt_id__in: projkeys |
|
99 }, |
|
100 traditional: true, |
|
101 success: function(data) { |
|
102 var proj = _(data.objects) |
|
103 .filter(function(p) { |
|
104 return /<inst/gm.test(p.ldt); |
|
105 }); |
|
106 _(proj).each(function(p) { |
|
107 $(".media-segment[data-mashup-id='" + p.ldt_id + "']").each(function() { |
|
108 $(this) |
|
109 .find(".mashup-link").show() |
|
110 .find("a").text(p.title); |
|
111 }); |
|
112 }); |
|
113 var html = _(proj) |
|
114 .chain() |
|
115 .sortBy(function(p) { |
|
116 return - projlist[p.ldt_id]; |
|
117 }) |
|
118 .map(projtemplate) |
|
119 .value() |
|
120 .join(""); |
|
121 $(".list-video").html(html); |
|
122 } |
|
123 }); |
|
124 }); |
|
125 |
16 content.trigger("set-current", media); |
126 content.trigger("set-current", media); |
17 |
127 |
18 $(".info-title a").text(media.title); |
128 $(".info-title a").text(media.title); |
19 $(".title-video-wrap .title-video").text(media.title); |
129 $(".title-video-wrap .title-video").text(media.title); |
20 $(".info-duration td").text(media.duration.toString()); |
130 $(".info-duration td").text(media.duration.toString()); |
21 $(".info-description td").text(media.description); |
131 $(".info-description td").text(media.description); |
22 $(".info-tags td").text(media.keywords); |
132 $(".info-tags td").text(media.keywords); |
23 |
133 |
24 }); |
134 }); |
|
135 |
|
136 $(".media-segments").on("mouseover", ".media-segment", function() { |
|
137 var el = $(this); |
|
138 el.find(".media-segment-popin").show(); |
|
139 var pid = el.attr("data-mashup-id"); |
|
140 $(".item-video[data-mashup-id='" + pid + "']").addClass("active"); |
|
141 }).on("mouseout", ".media-segment", function() { |
|
142 $(this).find(".media-segment-popin").hide(); |
|
143 $(".item-video").removeClass("active"); |
|
144 }).on("click", ".media-segment-section", function() { |
|
145 var sid = $(this).attr("data-segment-id"), |
|
146 s = apidirectory.getElement(sid); |
|
147 media.setCurrentTime(s.begin); |
|
148 }); |
|
149 |
|
150 $(".list-video").on("mouseover", ".item-video", function() { |
|
151 var pid = $(this).attr("data-mashup-id"); |
|
152 $(".media-segment[data-mashup-id='" + pid + "']").addClass("active"); |
|
153 }).on("mouseout", ".item-video", function() { |
|
154 $(".media-segment").removeClass("active"); |
|
155 }); |
25 } |
156 } |
|
157 |
|
158 /* END mediaplayer.js */ |
|
159 |