| author | veltr |
| Fri, 09 Nov 2012 18:56:29 +0100 | |
| changeset 42 | 40909e8d6855 |
| parent 41 | 3ec2343f2b85 |
| child 43 | 5a5024bc74e6 |
| permissions | -rw-r--r-- |
| 32 | 1 |
|
2 |
IriSP.hc_messages = { |
|
| 39 | 3 |
Duration_ : "Durée :", |
4 |
duration_ : "durée :", |
|
| 32 | 5 |
edit_segment: "Éditer le segment", |
6 |
segment_down: "Descendre le segment", |
|
7 |
segment_up: "Remonter le segment", |
|
| 39 | 8 |
delete_segment: "Supprimer le segment", |
9 |
clone_segment: "Cloner le segment", |
|
10 |
From_: "De :", |
|
11 |
to_: "à :", |
|
12 |
segment_title_placeholder: "Segment sans titre", |
|
13 |
mashup_title_placeholder: "Hashcut sans titre" |
|
| 32 | 14 |
} |
15 |
||
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
16 |
IriSP.editor = function(options) { |
| 32 | 17 |
|
| 22 | 18 |
/* Load Media List */ |
19 |
|
|
20 |
var directory = new IriSP.Model.Directory(), |
|
| 42 | 21 |
apidirectory = new IriSP.Model.Directory(), |
| 22 | 22 |
project = directory.remoteSource({ |
| 27 | 23 |
url: options.url, |
| 22 | 24 |
serializer: IriSP.serializers.medialist |
25 |
}), |
|
| 25 | 26 |
mashup = new IriSP.Model.Mashup(false, project), |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
27 |
mediatemplate = _.template('<li class="item-video media" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />' |
| 27 | 28 |
+ '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>' |
| 39 | 29 |
+ '<span class="time-length"><%= IriSP.hc_messages.Duration_ %> <span><%= duration.toString() %></span></span></span></li>'), |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
30 |
segmenttemplate = _.template('<li class="item-video annotation" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">' |
| 27 | 31 |
+ '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />' |
| 39 | 32 |
+ '<div class="validate <%= annotation.status %>"><div class="validate-tooltip"><ul><li><%= annotation.status_messages.join("</li><li>") %></li></ul></div></div><span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>' |
| 27 | 33 |
+ '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>' |
| 32 | 34 |
+ '<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>' |
35 |
+ '<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></span></li>'), |
|
| 29 | 36 |
mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">' |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
37 |
+ '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= annotation.color %>"></div>' |
| 29 | 38 |
+ '<div class="media-section media-current-section" style="left:<%= currentleft %>px; width:<%= currentwidth %>px;"><div class="media-current-section-inner"></div></div>' |
39 |
+ '<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">' |
|
| 39 | 40 |
+ '<h3><%= annotation.title %></h3><a href="#" class="button reprendre-segment" data-segment-id="<%= annotation.id %>"><%= IriSP.hc_messages.clone_segment %></a>' |
41 |
+ '<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>' |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
42 |
+ '</div></div></div></div>'), |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
43 |
addMode, currentMedia, currentSegment; |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
44 |
|
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
45 |
IriSP.mashupcore(project, mashup); |
| 39 | 46 |
|
47 |
/* Validation of segments and mashup */ |
|
48 |
|
|
49 |
var segmentcritical = [ |
|
50 |
{ |
|
51 |
validate: function(_s) { |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
52 |
return (_s.getDuration() >= 1000); |
| 39 | 53 |
}, |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
54 |
message: "Le segment doit durer au moins une seconde" |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
55 |
}, |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
56 |
{ |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
57 |
validate: function(_s) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
58 |
return (_s.getDuration() < 180000); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
59 |
}, |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
60 |
message: "Le segment doit durer moins de trois minutes" |
| 39 | 61 |
}, |
62 |
{ |
|
63 |
validate: function(_s) { |
|
64 |
return (!!_s.title && _s.title !== IriSP.hc_messages.segment_title_placeholder); |
|
65 |
}, |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
66 |
message: "Le segment doit avoir un titre" |
| 39 | 67 |
} |
68 |
]; |
|
69 |
var segmentwarning = [ |
|
70 |
{ |
|
71 |
validate: function(_s) { |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
72 |
return (!!_s.description); |
| 39 | 73 |
}, |
74 |
message: "Il est recommandé de donner une description au segment" |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
75 |
}, |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
76 |
{ |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
77 |
validate: function(_s) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
78 |
return (!!_s.keywords.length); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
79 |
}, |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
80 |
message: "Il est recommandé de tagguer le segment" |
| 39 | 81 |
} |
82 |
]; |
|
83 |
|
|
84 |
var mashupcritical = [ |
|
85 |
{ |
|
86 |
validate: function(_m) { |
|
87 |
return _m.segments.length > 2; |
|
88 |
}, |
|
89 |
message: "Un hashcut doit être composé d'au moins trois segments" |
|
90 |
}, |
|
91 |
{ |
|
92 |
validate: function(_m) { |
|
93 |
return (!!_m.title && _m.title !== IriSP.hc_messages.mashup_title_placeholder); |
|
94 |
}, |
|
95 |
message: "Un titre doit être donné au hashcut" |
|
96 |
} |
|
97 |
]; |
|
98 |
var mashupwarning = [ |
|
99 |
{ |
|
100 |
validate: function(_m) { |
|
101 |
return !!_m.description |
|
102 |
}, |
|
103 |
message: "Il est recommandé de donner une description au hashcut" |
|
104 |
} |
|
105 |
]; |
|
| 22 | 106 |
|
107 |
/* Fill left column with Media List */ |
|
| 25 | 108 |
|
| 22 | 109 |
project.onLoad(function() { |
110 |
var html = ''; |
|
111 |
project.getMedias().forEach(function(_m) { |
|
| 27 | 112 |
html += mediatemplate(_m); |
| 13 | 113 |
}); |
| 22 | 114 |
$(".col-left .list-video").html(html); |
115 |
}); |
|
116 |
|
|
117 |
/* Search Media with left column form */ |
|
118 |
|
|
119 |
$(".col-left input").on("keyup change input paste", function() { |
|
120 |
var val = $(this).val(); |
|
121 |
if (val) { |
|
122 |
var find = IriSP.Model.regexpFromTextOrArray(val, true), |
|
123 |
replace = IriSP.Model.regexpFromTextOrArray(val, false); |
|
124 |
} |
|
125 |
$(".col-left .item-video").each(function() { |
|
126 |
var li = $(this), |
|
127 |
title = $(this).find(".title-video"), |
|
128 |
titletext = title.text(); |
|
129 |
if (val && find.test(titletext)) { |
|
130 |
title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>')); |
|
131 |
li.show(); |
|
132 |
} else { |
|
133 |
title.text(titletext); |
|
134 |
if (val) { |
|
135 |
li.hide(); |
|
| 13 | 136 |
} else { |
| 22 | 137 |
li.show(); |
| 13 | 138 |
} |
| 22 | 139 |
} |
140 |
}) |
|
141 |
}); |
|
142 |
|
|
| 25 | 143 |
/* Fill right column when mashup is updated */ |
144 |
|
|
| 27 | 145 |
function updateMashupUI() { |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
146 |
var listhtml = '', critical = false, warning = false, messages = []; |
| 27 | 147 |
mashup.segments.forEach(function(_s) { |
148 |
listhtml += segmenttemplate(_s); |
|
| 39 | 149 |
if (_s.annotation.status === "critical") { |
150 |
critical = true; |
|
151 |
} |
|
| 27 | 152 |
}); |
| 39 | 153 |
if (critical) { |
154 |
messages.push("Certains segments ne sont pas valides"); |
|
155 |
} |
|
156 |
|
|
157 |
_(mashupcritical).each(function(sc) { |
|
158 |
if (!sc.validate(mashup)) { |
|
159 |
critical = true; |
|
160 |
messages.push(sc.message); |
|
161 |
} |
|
162 |
}); |
|
163 |
_(mashupwarning).each(function(sc) { |
|
164 |
if (!sc.validate(mashup)) { |
|
165 |
warning = true; |
|
166 |
messages.push(sc.message); |
|
167 |
} |
|
168 |
}); |
|
169 |
mashup.status = critical ? "critical" : (warning ? "warning" : "valid"); |
|
170 |
if (!messages.length) { |
|
171 |
messages.push("Le hashcut est valide !"); |
|
172 |
} |
|
173 |
$(".publier-button").toggleClass("disable", critical); |
|
174 |
|
|
175 |
$(".liste-segment .validate").removeClass("critical warning valid").addClass(mashup.status); |
|
176 |
$(".liste-segment .validate-tooltip").html("<ul><li>" + messages.join("</li><li>")+"</li></ul>"); |
|
| 27 | 177 |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
178 |
$(".col-right .list-video").html(listhtml).find(".item-video:last-child .bottom, .item-video:first-child .top").addClass("disable"); |
| 27 | 179 |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
180 |
project.trigger("mouseout-annotation"); |
| 22 | 181 |
} |
182 |
|
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
183 |
mashup.on("setcurrent", function() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
184 |
currentMedia = mashup; |
| 22 | 185 |
}); |
186 |
|
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
187 |
mashup.on("change",updateMashupUI); |
| 25 | 188 |
|
| 23 | 189 |
/* Slice Widget */ |
| 25 | 190 |
|
| 23 | 191 |
var sliceSlider = $(".Ldt-Slice"), |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
192 |
sliceStartTime, |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
193 |
slidersRange = 920; |
| 23 | 194 |
|
195 |
sliceSlider.slider({ |
|
196 |
range: true, |
|
197 |
values: [0, slidersRange], |
|
198 |
min: 0, |
|
199 |
max: slidersRange, |
|
200 |
start: function() { |
|
201 |
if (currentMedia) { |
|
202 |
if (!currentMedia.getPaused()) { |
|
203 |
currentMedia.pause(); |
|
204 |
} |
|
205 |
} |
|
206 |
}, |
|
207 |
slide: function(event, ui) { |
|
| 27 | 208 |
if (currentMedia && currentSegment) { |
| 23 | 209 |
var t = currentMedia.duration * ui.value / slidersRange; |
| 25 | 210 |
if (ui.value === ui.values[0]) { |
| 27 | 211 |
currentSegment.setBegin(t); |
| 25 | 212 |
} else { |
| 27 | 213 |
currentSegment.setEnd(t); |
| 25 | 214 |
} |
| 23 | 215 |
} |
216 |
} |
|
217 |
}); |
|
218 |
|
|
| 25 | 219 |
sliceSlider.find(".ui-slider-handle:first") |
220 |
.addClass("Ldt-Slice-left-handle") |
|
221 |
.click(function() { |
|
| 27 | 222 |
if (currentMedia && currentSegment) { |
223 |
currentMedia.setCurrentTime(currentSegment.begin); |
|
| 25 | 224 |
} |
225 |
}); |
|
226 |
sliceSlider.find(".ui-slider-handle:last") |
|
227 |
.addClass("Ldt-Slice-right-handle") |
|
228 |
.click(function() { |
|
| 27 | 229 |
if (currentMedia && currentSegment) { |
230 |
currentMedia.setCurrentTime(currentSegment.end); |
|
| 25 | 231 |
} |
232 |
}); |
|
| 23 | 233 |
|
234 |
|
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
235 |
/* Update Segment UI */ |
| 22 | 236 |
|
| 39 | 237 |
function updateSegmentUI() { |
| 27 | 238 |
if (currentMedia && currentSegment) { |
239 |
var start = currentSegment.begin, |
|
240 |
end = currentSegment.end, |
|
241 |
dur = currentSegment.getDuration(), |
|
242 |
f = slidersRange / currentMedia.duration, |
|
243 |
tangleStart = $(".tangle-start"), |
|
244 |
tangleEnd = $(".tangle-end"), |
|
| 29 | 245 |
tangleDuration = $(".tangle-duration"), |
246 |
k = 100 / currentMedia.duration, |
|
247 |
p = k * (start + end) / 2; |
|
| 25 | 248 |
sliceSlider.slider( "values", [ f * start, f * end ] ); |
| 27 | 249 |
tangleStart.text(start.toString(tangleStart.hasClass("active"))).attr("data-milliseconds",start.milliseconds); |
250 |
tangleEnd.text(end.toString(tangleEnd.hasClass("active"))).attr("data-milliseconds",end.milliseconds); |
|
251 |
tangleDuration.text(dur.toString(tangleDuration.hasClass("active"))).attr("data-milliseconds",dur.milliseconds); |
|
| 39 | 252 |
$(".segmentation .pointer").css("left", p + "%"); |
| 29 | 253 |
$(".media-current-section").css({ |
254 |
left: (k * start) + "%", |
|
255 |
width: (k * dur) + "%" |
|
| 39 | 256 |
}); |
257 |
var messages = [], |
|
258 |
critical = false, |
|
259 |
warning = false; |
|
260 |
_(segmentcritical).each(function(sc) { |
|
261 |
if (!sc.validate(currentSegment)) { |
|
262 |
critical = true; |
|
263 |
messages.push(sc.message); |
|
264 |
} |
|
265 |
}); |
|
266 |
_(segmentwarning).each(function(sc) { |
|
267 |
if (!sc.validate(currentSegment)) { |
|
268 |
warning = true; |
|
269 |
messages.push(sc.message); |
|
270 |
} |
|
271 |
}); |
|
272 |
currentSegment.status = critical ? "critical" : (warning ? "warning" : "valid"); |
|
273 |
if (!messages.length) { |
|
274 |
messages.push("Le segment est valide !") |
|
275 |
} |
|
276 |
currentSegment.status_messages = messages; |
|
277 |
|
|
278 |
$(".segmentation .validate").removeClass("critical warning valid").addClass(currentSegment.status); |
|
279 |
$(".segmentation .validate-tooltip").html("<ul><li>" + currentSegment.status_messages.join("</li><li>")+"</li></ul>"); |
|
| 25 | 280 |
} |
281 |
} |
|
282 |
|
|
| 42 | 283 |
var mediasegmentscache = {}; |
284 |
|
|
| 27 | 285 |
function setMedia(media) { |
| 23 | 286 |
if (currentMedia) { |
287 |
currentMedia.pause(); |
|
288 |
} |
|
| 27 | 289 |
currentMedia = media; |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
290 |
project.trigger("set-current", media); |
| 22 | 291 |
if (currentMedia.elementType == "media") { |
| 23 | 292 |
showSegmentation(); |
293 |
$(".tab-media-title").text(currentMedia.title); |
|
| 27 | 294 |
|
295 |
addMode = !(currentSegment && mashup.hasAnnotation(currentSegment)); |
|
296 |
|
|
297 |
if (!currentSegment) { |
|
298 |
currentSegment = new IriSP.Model.Annotation(false, project); |
|
299 |
currentSegment.setMedia(currentMedia.id); |
|
300 |
currentSegment.setBegin(0); |
|
301 |
currentSegment.setEnd(currentMedia.duration); |
|
| 39 | 302 |
currentSegment.title = IriSP.hc_messages.segment_title_placeholder; |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
303 |
currentSegment.color = currentMedia.color; |
| 42 | 304 |
currentSegment.created = new Date(); |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
305 |
currentSegment.keywords = []; |
| 39 | 306 |
currentSegment.description = ""; |
| 27 | 307 |
currentSegment.on("change-begin", function() { |
308 |
if (currentMedia && currentSegment === this) { |
|
| 25 | 309 |
currentMedia.setCurrentTime(this.begin); |
| 39 | 310 |
updateSegmentUI(); |
| 25 | 311 |
} |
312 |
}); |
|
| 27 | 313 |
currentSegment.on("change-end", function() { |
314 |
if (currentMedia && currentSegment === this) { |
|
| 25 | 315 |
currentMedia.setCurrentTime(this.end); |
| 39 | 316 |
updateSegmentUI(); |
| 25 | 317 |
} |
318 |
}); |
|
319 |
} |
|
| 27 | 320 |
if (currentMedia.loaded) { |
321 |
currentMedia.setCurrentTime(currentSegment.begin); |
|
322 |
} |
|
323 |
$(".add-segment").val(addMode ? "Ajouter au Hashcut" : "Sauvegarder"); |
|
324 |
$(".create-or-edit").text(addMode ? "Créer un nouveau segment" : "Modifier le segment"); |
|
325 |
media.show(); |
|
326 |
$("#segment-title").val(currentSegment.title); |
|
327 |
$("#segment-description").val(currentSegment.description); |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
328 |
var segment_tags = $("#segment-tags"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
329 |
segment_tags.tagit("option","onTagRemoved",function(){}); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
330 |
segment_tags.tagit("option","onTagAdded",function(){}); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
331 |
segment_tags.tagit("removeAll"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
332 |
_(currentSegment.keywords).each(function(tag) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
333 |
segment_tags.tagit("createTag",tag); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
334 |
}); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
335 |
segment_tags.tagit("option","onTagRemoved",updateSegmentTags); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
336 |
segment_tags.tagit("option","onTagAdded",updateSegmentTags); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
337 |
updateSegmentUI(); |
| 29 | 338 |
var relatedSegments = mashup.segments.filter(function(_s) { |
339 |
return _s.getMedia() === currentMedia && _s.annotation !== currentSegment; |
|
340 |
}); |
|
| 42 | 341 |
var html = "", |
342 |
k = $(".Ldt-Slider").width() / currentSegment.getMedia().duration, |
|
343 |
currentleft = k * currentSegment.begin, |
|
344 |
currentwidth = k * currentSegment.getDuration(); |
|
| 29 | 345 |
if (relatedSegments.length) { |
346 |
relatedSegments.forEach(function(_s) { |
|
347 |
var pos = k * (_s.annotation.begin + _s.annotation.end) / 2, |
|
348 |
corrpos = Math.max(145, Math.min(305, pos)); |
|
349 |
vizdata = { |
|
350 |
annotation : _s.annotation, |
|
351 |
currentleft : currentleft, |
|
352 |
currentwidth : currentwidth, |
|
353 |
popleft : corrpos, |
|
354 |
left : k * _s.annotation.begin, |
|
355 |
width : k * _s.annotation.getDuration(), |
|
356 |
pointerpos : (pos - corrpos) |
|
357 |
} |
|
358 |
html += mediasegmenttemplate(vizdata); |
|
359 |
}); |
|
360 |
$(".self-media-segments").show(); |
|
361 |
} else { |
|
362 |
$(".self-media-segments").hide(); |
|
363 |
} |
|
| 42 | 364 |
$(".self-media-segments .media-segments-list").html(html); |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
365 |
|
| 42 | 366 |
$(".other-media-segments").hide(); |
367 |
apidirectory.remoteSource({ |
|
368 |
url: options.segment_api_endpoint + currentMedia.id + "/0/" + currentMedia.duration.milliseconds + "?format=json", |
|
369 |
serializer: IriSP.serializers.ldt |
|
370 |
}).onLoad(function() { |
|
371 |
var medias = this.getMedias(), |
|
372 |
annotations = this.getAnnotations(); |
|
373 |
if (medias && medias.length && medias[0].id === currentMedia.id && annotations && annotations.length ) { |
|
374 |
var html = ""; |
|
375 |
annotations.forEach(function(_a) { |
|
376 |
var pos = k * (_a.begin + _a.end) / 2, |
|
377 |
corrpos = Math.max(145, Math.min(305, pos)); |
|
378 |
vizdata = { |
|
379 |
annotation : _a, |
|
380 |
currentleft : currentleft, |
|
381 |
currentwidth : currentwidth, |
|
382 |
popleft : corrpos, |
|
383 |
left : k * _a.begin, |
|
384 |
width : k * _a.getDuration(), |
|
385 |
pointerpos : (pos - corrpos) |
|
386 |
} |
|
387 |
html += mediasegmenttemplate(vizdata); |
|
388 |
}); |
|
389 |
$(".other-media-segments").show(); |
|
390 |
$(".other-media-segments .media-segments-list").html(html); |
|
391 |
} |
|
392 |
}); |
|
| 22 | 393 |
} |
| 27 | 394 |
if (currentMedia.elementType === "mashup") { |
395 |
showPreview(); |
|
396 |
} |
|
| 22 | 397 |
} |
| 27 | 398 |
|
| 25 | 399 |
/* Segment Form interaction */ |
400 |
|
|
401 |
$("#segment-title").on("keyup change input paste", function() { |
|
| 27 | 402 |
if (currentMedia && currentSegment) { |
403 |
currentSegment.title = $(this).val(); |
|
| 39 | 404 |
updateSegmentUI(); |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
405 |
mashup.trigger("change"); |
| 25 | 406 |
} |
407 |
}); |
|
408 |
$("#segment-description").on("keyup change input paste", function() { |
|
| 27 | 409 |
if (currentMedia && currentSegment) { |
410 |
currentSegment.description = $(this).val(); |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
411 |
mashup.trigger("change"); |
| 25 | 412 |
} |
413 |
}); |
|
414 |
$("#segment-form").submit(function() { |
|
| 27 | 415 |
if (addMode) { |
416 |
mashup.addAnnotation(currentSegment); |
|
417 |
} else { |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
418 |
mashup.trigger("change"); |
| 27 | 419 |
} |
420 |
var segment = mashup.getAnnotation(currentSegment); |
|
421 |
currentSegment = undefined; |
|
422 |
setMedia(mashup); |
|
423 |
if (segment) { |
|
424 |
mashup.setCurrentTime(segment.begin); |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
425 |
mashup.trigger("enter-annotation",segment); |
| 27 | 426 |
} |
| 29 | 427 |
return false; |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
428 |
}); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
429 |
|
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
430 |
$("#segment-tags").tagit(); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
431 |
|
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
432 |
|
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
433 |
/* We have to defer this function because the tagit events |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
434 |
* are triggered before the data are updated */ |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
435 |
function updateSegmentTags() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
436 |
window.setTimeout(function() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
437 |
if (currentMedia && currentSegment) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
438 |
currentSegment.keywords = $("#segment-tags").tagit("assignedTags"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
439 |
} |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
440 |
}, 0); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
441 |
} |
| 25 | 442 |
|
| 22 | 443 |
/* Click on media items */ |
444 |
|
|
445 |
$(".col-left").on("click", ".item-video", function() { |
|
| 27 | 446 |
currentSegment = undefined; |
447 |
setMedia(project.getElement($(this).attr("data-media-id"))); |
|
| 22 | 448 |
}); |
| 12 | 449 |
|
| 22 | 450 |
/* Click on Tabs */ |
451 |
|
|
452 |
function showSegmentation() { |
|
453 |
$(".col-middle").removeClass("empty-mode pvw-mode").addClass("segment-mode"); |
|
454 |
return false; |
|
455 |
} |
|
456 |
function showPreview() { |
|
457 |
$(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode"); |
|
458 |
return false; |
|
459 |
} |
|
| 32 | 460 |
function showEmpty() { |
461 |
$("video").hide(); |
|
462 |
$(".col-middle").removeClass("pvw-mode segment-mode").addClass("empty-mode"); |
|
463 |
return false; |
|
464 |
} |
|
| 22 | 465 |
|
| 27 | 466 |
$(".tab-pvw").click(function() { |
467 |
if (mashup.segments.length) { |
|
468 |
setMedia(mashup); |
|
| 22 | 469 |
} |
470 |
}); |
|
471 |
|
|
| 27 | 472 |
/* Click on segments */ |
473 |
|
|
474 |
function reorganizeMashup() { |
|
475 |
var ids = $(".organize-segments .item-video").map(function(){return $(this).attr("data-segment-id")}); |
|
476 |
mashup.setAnnotationsById(ids); |
|
477 |
} |
|
478 |
|
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
479 |
project.on("mouseover-annotation", function(annotation) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
480 |
var mediaid = annotation.getMedia().id; |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
481 |
$(".media").removeClass("active"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
482 |
$(".media[data-media-id='" + mediaid + "']").addClass("active"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
483 |
}); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
484 |
|
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
485 |
project.on("mouseout-annotation", function(annotation) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
486 |
$(".media").removeClass("active"); |
| 32 | 487 |
var mediaid = undefined; |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
488 |
if (currentMedia && currentMedia.elementType === "media") { |
| 32 | 489 |
mediaid = currentMedia.id; |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
490 |
if (currentSegment) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
491 |
$(".annotation").removeClass("active"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
492 |
$(".annotation[data-segment-id='" + currentSegment.id + "']").addClass("active"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
493 |
} |
| 32 | 494 |
} |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
495 |
if (currentMedia === mashup && mashup.currentMedia) { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
496 |
mediaid = mashup.currentMedia.id |
| 32 | 497 |
} |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
498 |
$(".media[data-media-id='" + mediaid + "']").addClass("active"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
499 |
}); |
| 32 | 500 |
|
501 |
$(".organize-segments") |
|
502 |
.sortable({ |
|
| 27 | 503 |
stop : reorganizeMashup |
| 32 | 504 |
}) |
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
505 |
.on("mouseover", ".item-video", function() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
506 |
project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id"))); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
507 |
}) |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
508 |
.on("mouseout", ".item-video", function() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
509 |
project.trigger("mouseout-annotation"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
510 |
}) |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
511 |
.on("click", ".item-video", function() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
512 |
project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id"))); |
| 32 | 513 |
}) |
514 |
.on("click", ".edit", function(e) { |
|
| 27 | 515 |
var currentItem = $(this).parents(".item-video"), |
516 |
media = project.getElement(currentItem.attr("data-media-id")), |
|
517 |
segment = project.getElement(currentItem.attr("data-segment-id")); |
|
518 |
currentSegment = segment; |
|
519 |
setMedia(media); |
|
520 |
return false; |
|
| 32 | 521 |
}) |
522 |
.on("click", ".top", function(e){ |
|
| 22 | 523 |
var currentItem = $(this).parents(".item-video"); |
524 |
currentItem.insertBefore(currentItem.prev()); |
|
| 27 | 525 |
reorganizeMashup(); |
526 |
return false; |
|
| 32 | 527 |
}) |
528 |
.on("click", ".bottom", function(e){ |
|
| 22 | 529 |
var currentItem = $(this).parents(".item-video"); |
530 |
currentItem.insertAfter(currentItem.next()); |
|
| 27 | 531 |
reorganizeMashup(); |
532 |
return false; |
|
| 32 | 533 |
}) |
534 |
.on("click", ".delete", function(e){ |
|
| 27 | 535 |
var id = $(this).parents(".item-video").attr("data-segment-id"); |
536 |
mashup.removeAnnotationById(id); |
|
| 32 | 537 |
if (!mashup.segments.length) { |
538 |
showEmpty(); |
|
539 |
} |
|
| 27 | 540 |
return false; |
| 22 | 541 |
}); |
542 |
|
|
| 25 | 543 |
/* Tangles */ |
544 |
var tangleMsPerPixel = 100, |
|
545 |
activeTangle, |
|
| 23 | 546 |
tangleStartX, |
| 25 | 547 |
tangleStartVal, |
548 |
tangleHasMoved; |
|
549 |
|
|
| 23 | 550 |
$(".time-tangle").mousedown(function(evt) { |
551 |
activeTangle = $(this); |
|
552 |
activeTangle.addClass("active"); |
|
553 |
tangleStartVal = +activeTangle.attr("data-milliseconds"); |
|
554 |
tangleStartX = evt.pageX; |
|
| 25 | 555 |
tangleHasMoved = false; |
556 |
$(this).siblings(".time-tangle").addClass("deactivate"); |
|
| 23 | 557 |
return false; |
558 |
}); |
|
559 |
$(document) |
|
560 |
.mousemove(function(evt) { |
|
561 |
if (activeTangle) { |
|
| 25 | 562 |
tangleHasMoved = true; |
563 |
var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal); |
|
| 23 | 564 |
activeTangle.trigger("valuechange", newval); |
565 |
return false; |
|
566 |
} |
|
567 |
}) |
|
568 |
.mouseup(function() { |
|
569 |
if (activeTangle) { |
|
| 27 | 570 |
activeTangle.text(activeTangle.text().replace(/\.\d+$/,'')); |
| 25 | 571 |
$(".time-tangle").removeClass("active deactivate"); |
| 23 | 572 |
activeTangle = undefined; |
573 |
} |
|
| 25 | 574 |
}); |
575 |
|
|
576 |
$(".tangle-start") |
|
577 |
.mouseup(function(evt) { |
|
| 27 | 578 |
if (!tangleHasMoved && currentMedia && currentSegment) { |
579 |
currentMedia.setCurrentTime(currentSegment.begin); |
|
| 25 | 580 |
} |
| 23 | 581 |
}) |
| 25 | 582 |
.on("valuechange", function(evt, val) { |
| 27 | 583 |
if (currentMedia && currentSegment) { |
584 |
currentSegment.setBegin(val); |
|
| 25 | 585 |
} |
586 |
}); |
|
587 |
$(".tangle-end") |
|
588 |
.mouseup(function(evt) { |
|
| 27 | 589 |
if (!tangleHasMoved && currentMedia && currentSegment) { |
590 |
currentMedia.setCurrentTime(currentSegment.end); |
|
| 25 | 591 |
} |
592 |
}) |
|
593 |
.on("valuechange", function(evt, val) { |
|
| 27 | 594 |
if (currentMedia && currentSegment) { |
595 |
currentSegment.setEnd(val); |
|
| 25 | 596 |
} |
597 |
}); |
|
598 |
$(".tangle-duration").on("valuechange", function(evt, val) { |
|
| 27 | 599 |
if (currentMedia && currentSegment) { |
600 |
currentSegment.setDuration(val); |
|
| 25 | 601 |
} |
602 |
}); |
|
| 27 | 603 |
|
| 29 | 604 |
/* Click on current segment in Preview */ |
605 |
|
|
| 27 | 606 |
$(".mashup-description .edit").click(function() { |
607 |
if (mashupCurrentAnnotation) { |
|
608 |
currentSegment = mashupCurrentAnnotation.annotation; |
|
609 |
setMedia(mashupCurrentAnnotation.getMedia()); |
|
610 |
} |
|
| 29 | 611 |
}); |
612 |
|
|
613 |
/* Handling related segments */ |
|
614 |
|
|
615 |
$(".media-segments-list").on("mouseover", ".media-segment", function() { |
|
616 |
$(this).find(".media-segment-popin").show(); |
|
617 |
}).on("mouseout", ".media-segment", function() { |
|
618 |
$(this).find(".media-segment-popin").hide(); |
|
619 |
}).on("click", ".reprendre-segment", function() { |
|
| 42 | 620 |
var sid = $(this).attr("data-segment-id"), |
621 |
s = directory.getElement(sid) || apidirectory.getElement(sid); |
|
| 29 | 622 |
currentSegment.title = s.title; |
623 |
currentSegment.description = s.description; |
|
624 |
$("#segment-title").val(s.title); |
|
625 |
$("#segment-description").val(s.description); |
|
626 |
currentSegment.setBegin(s.begin); |
|
627 |
currentSegment.setEnd(s.end); |
|
628 |
return false; |
|
629 |
}); |
|
630 |
|
|
| 32 | 631 |
/* Changing Hashcut Title and description */ |
| 39 | 632 |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
633 |
$("#hashcut-tags").tagit({ |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
634 |
onTagRemoved: updateSegmentTags, |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
635 |
onTagAdded: updateSegmentTags |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
636 |
}); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
637 |
|
| 39 | 638 |
mashup.title = IriSP.hc_messages.mashup_title_placeholder; |
639 |
$(".title-video-wrap a").text(mashup.title); |
|
640 |
$("#hashcut-title").val(mashup.title); |
|
641 |
|
|
| 32 | 642 |
$("#hashcut-title").on("keyup change input paste", function() { |
643 |
mashup.title = $(this).val(); |
|
644 |
$(".title-video-wrap a").text(mashup.title); |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
645 |
mashup.trigger("change"); |
| 32 | 646 |
}); |
647 |
|
|
| 39 | 648 |
$("#hashcut-description").on("keyup change input paste", function() { |
649 |
mashup.description = $(this).val(); |
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
650 |
mashup.trigger("change"); |
| 39 | 651 |
}); |
652 |
|
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
653 |
function updateMashupTags() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
654 |
window.setTimeout(function() { |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
655 |
mashup.keywords = $("#segment-tags").tagit("assignedTags"); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
656 |
}, 0); |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
657 |
} |
|
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
658 |
|
| 42 | 659 |
/* Publication */ |
660 |
|
|
661 |
$(".publier-button").click(function() { |
|
662 |
var postproject = directory.newLocalSource(), |
|
663 |
anntype = new IriSP.Model.AnnotationType(false, postproject), |
|
664 |
annotations = mashup.getOriginalAnnotations(); |
|
665 |
anntype.title = "hashcut-segments"; |
|
666 |
annotations.forEach(function(_a) { |
|
667 |
_a.setAnnotationType(anntype.id); |
|
668 |
}); |
|
669 |
postproject.addList("media",mashup.getMedias()); |
|
670 |
postproject.addList("annotationType",[anntype]); |
|
671 |
postproject.addList("annotation",annotations); |
|
672 |
postproject.addList("mashup",[mashup]); |
|
673 |
postproject.addList("tag"); |
|
674 |
postproject.creator = "IRI"; |
|
675 |
postproject.title = mashup.title; |
|
676 |
postproject.description = mashup.description; |
|
677 |
console.log(IriSP.serializers.ldt.serialize(postproject)); |
|
678 |
$.ajax({ |
|
679 |
type: "POST", |
|
680 |
url: options.project_api_endpoint, |
|
681 |
data: IriSP.serializers.ldt.serialize(postproject), |
|
682 |
contentType: "application/cinelab", |
|
683 |
// headers: {"X-CSRFToken": "{{csrf_token}}"}, |
|
684 |
success: function(data, status, request){ |
|
685 |
alert("api post success"); |
|
686 |
}, |
|
687 |
error: function(jqXHR, textStatus, errorThrown){ |
|
688 |
alert(errorThrown); |
|
689 |
} |
|
690 |
}); |
|
691 |
}); |
|
692 |
|
|
|
41
3ec2343f2b85
Refactoring to have common code between editor and player
veltr
parents:
39
diff
changeset
|
693 |
mashup.trigger("change"); |
| 13 | 694 |
} |