|
1 var myMedia = null, |
|
2 currentChapter = null, |
|
3 chapters = [], |
|
4 annotations = []; |
|
5 |
1 $(function(){ |
6 $(function(){ |
2 |
7 |
3 var global = { |
8 var global = { |
4 diaporama : null, |
9 diaporama : null, |
5 idAnnotation : null, |
10 idAnnotation : null, |
6 colors : ['#f39c12', '#2ecc71', '#3498db', '#9b59b6', |
11 colorsIndex : 0, |
7 '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', |
12 colors : |
8 '#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50', |
13 ['#f39c12', '#2ecc71', '#3498db', '#9b59b6', |
9 '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d'] |
14 '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', |
10 }, |
15 '#16a085', '#27ae60', '#2980b9', '#8e44ad', |
11 currentChapter = null, |
16 '#f39c12', '#d35400', '#c0392b', '#bdc3c7'] |
12 chapters = [], |
17 }; |
13 annotations = []; |
18 |
|
19 |
|
20 |
14 |
21 |
15 myProject.onLoad(function() { |
22 myProject.onLoad(function() { |
16 |
23 |
17 $(".project-title").text(myProject.title); |
24 $(".project-title").text(myProject.title); |
18 |
25 |
19 myMedia = myProject.getCurrentMedia(); |
26 myMedia = myProject.getCurrentMedia(); |
20 |
27 |
21 loadChapters(); |
28 loadInitChapters(); |
22 |
29 |
23 IriSP.htmlPlayer( |
30 IriSP.htmlPlayer( |
24 myMedia, |
31 myMedia, |
25 $(".main-video"), |
32 $(".main-video"), |
26 { |
33 { |
43 if(pos+wBtnCutChapter>wContainer){ |
50 if(pos+wBtnCutChapter>wContainer){ |
44 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
51 btnCutChapter.css("left",(pos - wBtnCutChapter)); |
45 }else{ |
52 }else{ |
46 btnCutChapter.css("left",pos); |
53 btnCutChapter.css("left",pos); |
47 } |
54 } |
48 |
|
49 /* |
|
50 //chapitre edit |
|
51 var formChapter = $('.form-chapter-edit'), |
|
52 inputBeginChapter = formChapter.find('input[name=begin]'), |
|
53 inputDurationChapter = formChapter.find('input[name=duration]'), |
|
54 inputEndChapter = formChapter.find('input[name=end]'), |
|
55 viewBeginChapter = formChapter.find('.begin'), |
|
56 viewDurationChapter = formChapter.find('.duration'), |
|
57 viewEndChapter = formChapter.find('.end'), |
|
58 timeBegin = 0, |
|
59 timeEnd = t.milliseconds, |
|
60 timeDuration = timeEnd - timeBegin; |
|
61 |
|
62 inputBeginChapter.val(timeBegin); |
|
63 inputEndChapter.val(timeEnd); |
|
64 inputDurationChapter.val(timeDuration); |
|
65 viewBeginChapter.html(millisecondsToString(timeBegin)); |
|
66 viewDurationChapter.html(millisecondsToString(timeDuration)); |
|
67 viewEndChapter.html(millisecondsToString(timeEnd)); |
|
68 */ |
|
69 });//timeupdate |
55 });//timeupdate |
70 |
56 |
71 });//myProject.onLoad |
57 });//myProject.onLoad |
72 |
58 |
73 |
59 |
164 //edit |
150 //edit |
165 $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){ |
151 $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){ |
166 e.preventDefault(); |
152 e.preventDefault(); |
167 var idChapter = $(this).attr('data-chapter-id'); |
153 var idChapter = $(this).attr('data-chapter-id'); |
168 loadFormChapter(idChapter); |
154 loadFormChapter(idChapter); |
169 currentChapter = _.find(chapters, function(c){ return c.id == idChapter; }); |
|
170 }); |
155 }); |
171 |
156 |
172 $('.chapter-segments').on('click', 'li', function(){ |
157 $('.chapter-segments').on('click', 'li', function(){ |
173 var idChapter = $(this).attr('id'); |
158 var idChapter = $(this).attr('id'); |
174 loadFormChapter(idChapter); |
159 loadFormChapter(idChapter); |
185 } |
170 } |
186 }); |
171 }); |
187 |
172 |
188 function onTagItChange(e, ui) { |
173 function onTagItChange(e, ui) { |
189 var idChapter = $(this).parents('form').attr('data-chapter-id'), |
174 var idChapter = $(this).parents('form').attr('data-chapter-id'), |
190 value = $('input[name=tags]').val(); |
175 value = $('input[name=keywords]').val(); |
191 currentChapter.tags = value; |
176 currentChapter.keywords = value; |
192 $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value); |
177 $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value); |
193 } |
178 } |
194 |
179 |
195 var tagitParam = { |
180 var tagitParam = { |
196 afterTagRemoved : onTagItChange, |
181 afterTagRemoved : onTagItChange, |
197 afterTagAdded : onTagItChange |
182 afterTagAdded : onTagItChange |
198 } |
183 } |
199 |
184 |
200 function loadFormChapter(idChapter){ |
185 function loadFormChapter(idChapter){ |
201 var chapterData = _.find(chapters, function(c){ return c.id == idChapter; }), |
186 currentChapter = _.find(chapters, function(c){ return c.id == idChapter; }); |
202 chapterWrap = $('.chapter-widget-info'); |
187 var chapterWrap = $('.chapter-widget-info'), |
203 |
188 indexChapter = _.indexOf(chapters, currentChapter), |
204 currentChapter = chapterData; |
189 beginTangle = (indexChapter>0) ? true : false, |
|
190 endTangle = (indexChapter<(chapters.length-1)) ? true : false; |
|
191 |
|
192 currentChapter.beginTangle = beginTangle; |
|
193 currentChapter.endTangle = endTangle; |
205 |
194 |
206 $.get('template.html', function(templates){ |
195 $.get('template.html', function(templates){ |
207 var tpl = $(templates).filter('#tpl-chapter-edit').html(); |
196 var tpl = $(templates).filter('#tpl-chapter-edit').html(); |
208 tpl = Mustache.render(tpl, chapterData); |
197 tpl = Mustache.render(tpl, currentChapter); |
209 chapterWrap.empty().append(tpl); |
198 chapterWrap.empty().append(tpl); |
210 chapterWrap.find('.tag-it').tagit(tagitParam); |
199 chapterWrap.find('.tag-it').tagit(tagitParam); |
211 }); |
200 }); |
212 } |
201 } |
213 |
202 |
215 //supprimer |
204 //supprimer |
216 $('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){ |
205 $('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){ |
217 e.preventDefault(); |
206 e.preventDefault(); |
218 |
207 |
219 if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;} |
208 if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;} |
|
209 |
220 var idChapter = $(this).attr('data-chapter-id'), |
210 var idChapter = $(this).attr('data-chapter-id'), |
221 chapter = _.find(chapters, function(c){ return c.id == idChapter; }), |
211 chapter = _.find(chapters, function(c){ return c.id == idChapter; }), |
222 indexChapter = _.indexOf(chapters, chapter), |
212 indexChapter = _.indexOf(chapters, chapter), |
223 chapterModify; |
213 chapterModify; |
224 if(indexChapter == 0){ |
214 if(indexChapter == 0){ |
225 chapterModify = chapters[1]; |
215 chapterModify = chapters[1]; |
226 chapterModify.begin = 0; |
216 chapterModify.setBegin(0); |
227 chapterModify.duration = chapterModify.end; |
|
228 }else{ |
217 }else{ |
229 chapterModify = chapters[indexChapter-1]; |
218 chapterModify = chapters[indexChapter-1]; |
230 chapterModify.end = chapter.end; |
219 //var newEnd = new IriSP.Model.Time(chapter.end) |
231 chapterModify.duration = chapterModify.end - chapterModify.begin; |
220 chapterModify.setEnd(chapter.end); |
232 } |
221 } |
233 chapters = _(chapters).reject(function(c) { return c.id == idChapter; }); |
222 chapters = _(chapters).reject(function(c) { return c.id == idChapter; }); |
234 renderChapter(); |
223 renderChapter(); |
235 //si le formulaire est visible |
224 //si le formulaire est visible |
236 if($('#form-chapter-edit-'+idChapter).length){ |
225 if($('#form-chapter-edit-'+idChapter).length){ |
237 $('#form-chapter-edit-'+idChapter).remove(); |
226 $('#form-chapter-edit-'+idChapter).remove(); |
238 } |
227 } |
239 }); |
228 }); |
240 |
229 |
241 //nouveau chapitre |
230 //nouveau chapitre |
|
231 function newChapter(dataChapter){ |
|
232 var chapter = new IriSP.Model.Annotation(false, myProject); |
|
233 chapter.setMedia(myMedia.id); |
|
234 chapter.setBegin(dataChapter.begin); |
|
235 chapter.setEnd(dataChapter.end); |
|
236 chapter.title = dataChapter.title; |
|
237 chapter.description = dataChapter.description; |
|
238 chapter.keywords = dataChapter.keywords; |
|
239 chapter.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)]; |
|
240 |
|
241 chapters.push(chapter); |
|
242 renderChapter(); |
|
243 loadFormChapter(chapter.id); |
|
244 } |
|
245 |
242 $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){ |
246 $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){ |
243 e.preventDefault(); |
247 e.preventDefault(); |
244 |
248 |
245 var uniqId = 'id' + (new Date()).getTime(); |
|
246 |
|
247 var title = 'New', |
|
248 tags = 'tag', |
|
249 begin = myMedia.currentTime.milliseconds, |
|
250 end = organizeNewChapter(begin), |
|
251 duration = end - begin, |
|
252 description = '', |
|
253 id = uniqId; |
|
254 |
|
255 var dataChapter = { |
249 var dataChapter = { |
256 title : title, |
250 title : 'New', |
257 tags : tags, |
251 begin : myMedia.currentTime, |
258 begin : begin, |
252 end : organizeNewChapter(myMedia.currentTime), |
259 duration : duration, |
253 description : 'description', |
260 end : end, |
254 keywords : 'tag1,tag2' |
261 description : description, |
255 }; |
262 color : global.colors[chapters.length], |
256 |
263 id : uniqId |
257 newChapter(dataChapter); |
264 }; |
258 |
265 |
|
266 chapters.push(dataChapter); |
|
267 renderChapter(); |
|
268 loadFormChapter(id); |
|
269 }); |
259 }); |
270 |
260 |
271 function organizeNewChapter(beginNew){ |
261 function organizeNewChapter(beginNew){ |
272 |
262 |
273 var returnEnd; |
263 var returnEnd; |
274 $.each(chapters, function(k, v){ |
264 $.each(chapters, function(k, v){ |
275 var begin = v.begin, |
265 var begin = v.begin, |
276 end = v.end; |
266 end = v.end; |
277 if(beginNew>=begin && beginNew<=end){ |
267 if(beginNew>=begin && beginNew<=end){ |
278 v.end = beginNew; |
268 returnEnd = new IriSP.Model.Time(end); |
279 v.duration = v.end - v.begin; |
269 v.setEnd(beginNew); |
280 returnEnd = end; |
|
281 } |
270 } |
282 }); |
271 }); |
|
272 |
283 return returnEnd; |
273 return returnEnd; |
284 } |
274 } |
285 |
275 |
286 function renderChapter(){ |
276 function renderChapter(){ |
287 var chapterSegmentWrap = $('.chapter-segments'), |
277 var chapterSegmentWrap = $('.chapter-segments'), |
294 |
284 |
295 chapterSegmentWrap.empty(); |
285 chapterSegmentWrap.empty(); |
296 chapterList.empty(); |
286 chapterList.empty(); |
297 |
287 |
298 $.each(chapters, function(k, v){ |
288 $.each(chapters, function(k, v){ |
299 |
289 //form |
|
290 if($('#form-chapter-edit-'+v.id).length){ |
|
291 loadFormChapter(v.id); |
|
292 } |
300 //segments |
293 //segments |
301 color = global.colors[k], |
294 var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration), |
302 width = Math.floor(v.duration * wChapterSegmentWrap / myMedia.duration.milliseconds), |
|
303 segment = $('<li>'+v.title+'</li>').css({ |
295 segment = $('<li>'+v.title+'</li>').css({ |
304 width : width, |
296 width : width, |
305 backgroundColor : v.color |
297 backgroundColor : v.color |
306 }).attr('id', v.id); |
298 }).attr('id', v.id); |
307 |
299 |
308 chapterSegmentWrap.append(segment); |
300 chapterSegmentWrap.append(segment); |
309 |
301 |
310 //liste |
302 //liste |
311 $.get('template.html', function(templates){ |
303 $.get('template.html', function(templates){ |
312 |
|
313 v.beginString = millisecondsToString(v.begin); |
|
314 v.durationString = millisecondsToString(v.duration); |
|
315 v.endString = millisecondsToString(v.end); |
|
316 |
|
317 var tplChapterRow = $(templates).filter('#tpl-chapter-row').html(); |
304 var tplChapterRow = $(templates).filter('#tpl-chapter-row').html(); |
318 tplChapterRow = Mustache.render(tplChapterRow, v); |
305 tplChapterRow = Mustache.render(tplChapterRow, v); |
319 chapterList.append(tplChapterRow); |
306 chapterList.append(tplChapterRow); |
320 |
307 |
321 }); |
308 }); |
322 }); |
309 }); |
323 } |
310 } |
324 |
311 |
325 //init |
312 //init |
326 function loadChapters(){//nouveau projet, 1 chapitre |
313 function loadInitChapters(){//nouveau projet, 1 chapitre |
327 |
|
328 var uniqId = 'id' + (new Date()).getTime(); |
|
329 |
|
330 var title = 'chapitre 1', |
|
331 tags = 'tag1,tag2', |
|
332 begin = 0, |
|
333 duration = myMedia.duration.milliseconds, |
|
334 end = myMedia.duration.milliseconds, |
|
335 description = 'description du chapitre 1', |
|
336 id = uniqId; |
|
337 |
|
338 var dataChapter = { |
314 var dataChapter = { |
339 title : title, |
315 title : 'New', |
340 tags : tags, |
316 begin : 0, |
341 begin : begin, |
317 end : myMedia.duration, |
342 duration : duration, |
318 description : 'description', |
343 end : end, |
319 keywords : 'tag1,tag2' |
344 description : description, |
320 }; |
345 color : global.colors[chapters.length], |
321 |
346 id : id |
322 newChapter(dataChapter); |
347 }; |
323 } |
348 |
|
349 chapters.push(dataChapter); |
|
350 renderChapter(); |
|
351 } |
|
352 |
|
353 |
324 |
354 |
325 |
355 |
326 |
356 |
327 |
357 //edit annotation |
328 //edit annotation |