1 IriSP.Hashcut = function() { |
1 IriSP.Hashcut = function(options) { |
2 |
2 |
3 /* Load Media List */ |
3 /* Load Media List */ |
4 |
4 |
5 var directory = new IriSP.Model.Directory(), |
5 var directory = new IriSP.Model.Directory(), |
6 project = directory.remoteSource({ |
6 project = directory.remoteSource({ |
7 url: "data/bpidata.json", |
7 url: options.url, |
8 serializer: IriSP.serializers.medialist |
8 serializer: IriSP.serializers.medialist |
9 }), |
9 }), |
10 mashup = new IriSP.Model.Mashup(false, project), |
10 mashup = new IriSP.Model.Mashup(false, project), |
11 mediatemplate = '<li class="item-video" data-media-id="{{id}}"><img src="{{thumbnail}}" alt="{{title}}" />' |
11 mediatemplate = _.template('<li class="item-video" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />' |
12 + '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>' |
12 + '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>' |
13 + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>', |
13 + '<span class="time-length">Durée : <span><%= duration.toString() %></span></span></span></li>'), |
14 segmenttemplate = '<li class="item-video" data-segment-id="{{id}}"><img src="{{annotation.thumbnail}}" alt="{{media_title}}" />' |
14 segmenttemplate = _.template('<li class="item-video" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">' |
15 + '<span class="video-info"><span class="title-video">{{media_title}}</span>' |
15 + '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />' |
16 + '<span class="subtitle">{{title}}</span><span class="duration">{{begin}} - {{end}} ({{duration}})</span>' |
16 + '<span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>' |
17 + '<ul class="tools"><li><a class="edit" href="#"></a></li><li><a class="bottom" href="#"></a></li>' |
17 + '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>' |
18 + '<li><a class="top" href="#"></a></li><li><a class="delete" href="#"></a></li></ul></span></li>'; |
18 + '<ul class="tools"><li><a class="edit" href="#" title="Éditer le segment"></a></li><li><a class="bottom" href="#" title="Descendre le segment"></a></li>' |
|
19 + '<li><a class="top" href="#" title="Remonter le segment"></a></li><li><a class="delete" href="#" title="Supprimer le segment"></a></li></ul></span></li>'), |
|
20 viztemplate = _.template('<div class="frise-segment" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'), |
|
21 intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'); |
19 |
22 |
20 /* Fill left column with Media List */ |
23 /* Fill left column with Media List */ |
21 |
24 |
22 project.onLoad(function() { |
25 project.onLoad(function() { |
23 var html = ''; |
26 var html = ''; |
24 project.getMedias().forEach(function(_m) { |
27 project.getMedias().forEach(function(_m) { |
25 html += Mustache.to_html(mediatemplate, _m); |
28 html += mediatemplate(_m); |
26 }); |
29 }); |
27 $(".col-left .list-video").html(html); |
30 $(".col-left .list-video").html(html); |
28 }); |
31 }); |
29 |
32 |
30 /* Search Media with left column form */ |
33 /* Search Media with left column form */ |
53 }) |
56 }) |
54 }); |
57 }); |
55 |
58 |
56 /* Fill right column when mashup is updated */ |
59 /* Fill right column when mashup is updated */ |
57 |
60 |
58 function fillRightColumn() { |
61 function setPointerToCurrentAnnotation() { |
59 var html = ''; |
62 if (mashupCurrentAnnotation) { |
|
63 var p = (mashupCurrentAnnotation.begin + mashupCurrentAnnotation.end) / (2 * mashup.duration); |
|
64 $(".mashup-description .pointer").css("left", (100 * p) + "%"); |
|
65 } |
|
66 } |
|
67 |
|
68 function updateMashupUI() { |
|
69 var listhtml = '', vizhtml = '', t = 0, k = mashup.duration ? (100 / mashup.duration) : 0; |
60 mashup.segments.forEach(function(_s) { |
70 mashup.segments.forEach(function(_s) { |
61 html += Mustache.to_html(segmenttemplate, _s); |
71 listhtml += segmenttemplate(_s); |
62 }); |
72 var vizdata = { |
63 $(".col-right .list-video").html(html); |
73 left: k * t, |
64 } |
74 width: k * _s.duration, |
65 |
75 color: _s.getMedia().color |
66 mashup.on("add-segments",fillRightColumn); |
76 } |
|
77 vizhtml += viztemplate(vizdata); |
|
78 t += _s.duration.milliseconds; |
|
79 }); |
|
80 |
|
81 var intervals = [ 1000, 2000, 5000, 10000, 30000, 60000, 120000, 300000, 600000, 900000, 1800000, 3600000, 7200000 ]; |
|
82 |
|
83 function createIntervals(maxn) { |
|
84 for (var i = 0; i < intervals.length; i++) { |
|
85 if (mashup.duration / intervals[i] <= maxn) { |
|
86 var html = ''; |
|
87 for (var j = intervals[i]; j < mashup.duration; j += intervals[i]) { |
|
88 html += intervaltemplate({ left: k * j, time: new IriSP.Model.Time(j) }); |
|
89 } |
|
90 return html; |
|
91 } |
|
92 } |
|
93 return ""; |
|
94 } |
|
95 |
|
96 $(".col-right .list-video").html(listhtml).find(".item-video:last-child .bottom, .item-video:first-child .top").addClass("disable"); |
|
97 $(".mashup-total-duration").text(mashup.duration.toString()); |
|
98 $(".frise-segments").html(vizhtml); |
|
99 $(".col-right .frise-indications").html(createIntervals(4)); |
|
100 $(".bloc-pvw .frise-indications").html(createIntervals(8)); |
|
101 highlightCurrentSegment(); |
|
102 if (currentMedia === mashup) { |
|
103 $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString()); |
|
104 if (mashupTimecode > mashup.duration) { |
|
105 mashup.setCurrentTime(mashup.duration); |
|
106 } |
|
107 changeCurrentAnnotation(); |
|
108 setPointerToCurrentAnnotation(); |
|
109 } |
|
110 } |
|
111 |
|
112 mashup.on("change",updateMashupUI); |
67 |
113 |
68 /* Slider */ |
114 /* Slider */ |
69 |
115 |
70 var timeSlider = $(".Ldt-Slider"), |
116 var timeSlider = $(".Ldt-Slider"), |
71 slidersRange = 920; |
117 slidersRange = 920; |
302 function onCurrentMediaTimeupdate(_time) { |
348 function onCurrentMediaTimeupdate(_time) { |
303 $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString()); |
349 $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString()); |
304 timeSlider.slider("value",slidersRange * _time / currentMedia.duration); |
350 timeSlider.slider("value",slidersRange * _time / currentMedia.duration); |
305 } |
351 } |
306 |
352 |
|
353 /* Mashup Player */ |
|
354 |
|
355 var mashupCurrentMedia = null, |
|
356 mashupCurrentAnnotation = null, |
|
357 mashupSegmentBegin, |
|
358 mashupSegmentEnd, |
|
359 mashupTimecode = 0, |
|
360 mashupSeeking = false, |
|
361 mashupSeekdiv, |
|
362 mashupTimedelta; |
|
363 |
|
364 function changeCurrentAnnotation() { |
|
365 if (mashupTimecode >= mashup.duration) { |
|
366 if (!mashup.paused) { |
|
367 mashup.paused = true; |
|
368 mashup.trigger("pause"); |
|
369 } |
|
370 mashupTimecode = 0; |
|
371 } |
|
372 var _annotation = mashup.getAnnotationAtTime( mashupTimecode ); |
|
373 if (typeof _annotation === "undefined") { |
|
374 if (mashupCurrentMedia) { |
|
375 mashupCurrentMedia.pause(); |
|
376 if (!mashup.paused) { |
|
377 mashup.paused = true; |
|
378 mashup.trigger("pause"); |
|
379 } |
|
380 } |
|
381 return; |
|
382 } |
|
383 mashupCurrentAnnotation = _annotation; |
|
384 mashupSegmentBegin = mashupCurrentAnnotation.annotation.begin.milliseconds; |
|
385 mashupSegmentEnd = mashupCurrentAnnotation.annotation.end.milliseconds; |
|
386 mashupTimedelta = mashupSegmentBegin - mashupCurrentAnnotation.begin.milliseconds; |
|
387 mashupCurrentMedia = mashupCurrentAnnotation.getMedia(); |
|
388 |
|
389 project.getMedias().forEach(function(_media) { |
|
390 if (_media !== mashupCurrentMedia) { |
|
391 _media.hide(); |
|
392 _media.pause(); |
|
393 } else { |
|
394 _media.show(); |
|
395 } |
|
396 }); |
|
397 |
|
398 mashupCurrentMedia.setCurrentTime( mashupTimecode + mashupTimedelta); |
|
399 mashupCurrentMedia.seeking = true; |
|
400 |
|
401 if (!mashup.paused) { |
|
402 mashupCurrentMedia.play(); |
|
403 mashupSeeking = true; |
|
404 //TODO: _seekdiv.show(); |
|
405 } |
|
406 mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode)); |
|
407 |
|
408 } |
|
409 |
307 /* Set current Media */ |
410 /* Set current Media */ |
308 |
411 |
309 var currentMedia; |
412 var currentMedia, currentSegment; |
310 |
413 |
311 function updateSliderAndTangles() { |
414 function updateSliderAndTangles() { |
312 if (currentMedia && currentMedia.currentSegment) { |
415 if (currentMedia && currentSegment) { |
313 var start = currentMedia.currentSegment.begin, |
416 var start = currentSegment.begin, |
314 end = currentMedia.currentSegment.end, |
417 end = currentSegment.end, |
315 dur = currentMedia.currentSegment.getDuration(), |
418 dur = currentSegment.getDuration(), |
316 f = slidersRange / currentMedia.duration; |
419 f = slidersRange / currentMedia.duration, |
|
420 tangleStart = $(".tangle-start"), |
|
421 tangleEnd = $(".tangle-end"), |
|
422 tangleDuration = $(".tangle-duration"); |
317 sliceSlider.slider( "values", [ f * start, f * end ] ); |
423 sliceSlider.slider( "values", [ f * start, f * end ] ); |
318 $(".tangle-start").text(start.toString()).attr("data-milliseconds",start.milliseconds); |
424 tangleStart.text(start.toString(tangleStart.hasClass("active"))).attr("data-milliseconds",start.milliseconds); |
319 $(".tangle-end").text(end.toString()).attr("data-milliseconds",end.milliseconds); |
425 tangleEnd.text(end.toString(tangleEnd.hasClass("active"))).attr("data-milliseconds",end.milliseconds); |
320 $(".tangle-duration").text(dur.toString()).attr("data-milliseconds",dur.milliseconds); |
426 tangleDuration.text(dur.toString(tangleDuration.hasClass("active"))).attr("data-milliseconds",dur.milliseconds); |
321 $(".segment-info .pointer").css("left",(parseFloat($(".Ldt-Slice-left-handle").css("left")) + parseFloat($(".Ldt-Slice-right-handle").css("left")))/2) |
427 $(".segment-info .pointer").css("left",(parseFloat($(".Ldt-Slice-left-handle").css("left")) + parseFloat($(".Ldt-Slice-right-handle").css("left")))/2) |
322 } |
428 } |
323 } |
429 } |
324 |
430 |
325 function setMedia(mediaid) { |
431 var addMode; |
|
432 |
|
433 function setMedia(media) { |
326 $(".col-left .item-video").removeClass("active"); |
434 $(".col-left .item-video").removeClass("active"); |
327 $(".tutorial").hide(); |
435 $(".tutorial").hide(); |
328 $("video").hide(); |
|
329 if (currentMedia) { |
436 if (currentMedia) { |
330 currentMedia.pause(); |
437 currentMedia.pause(); |
331 } |
438 } |
332 currentMedia = project.getElement(mediaid); |
439 currentMedia = media; |
333 if (currentMedia.elementType == "media") { |
440 if (currentMedia.elementType == "media") { |
334 $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active"); |
441 $("video").hide(); |
|
442 $(".col-left .item-video[data-media-id='" + currentMedia.id + "']").addClass("active"); |
335 showSegmentation(); |
443 showSegmentation(); |
336 var currentvideo = $('#video_' + mediaid); |
444 var currentvideo = $('#video_' + currentMedia.id); |
337 if (!currentvideo.length) { |
445 if (!currentvideo.length) { |
338 addMediaPlayer(currentMedia); |
446 addMediaPlayer(currentMedia); |
339 currentvideo = $('#video_' + mediaid); |
|
340 } |
447 } |
341 $(".tab-media-title").text(currentMedia.title); |
448 $(".tab-media-title").text(currentMedia.title); |
342 if (!currentMedia.currentSegment) { |
449 |
343 currentMedia.currentSegment = new IriSP.Model.Annotation(false, project); |
450 addMode = !(currentSegment && mashup.hasAnnotation(currentSegment)); |
344 currentMedia.currentSegment.setMedia(currentMedia.id); |
451 |
345 currentMedia.currentSegment.setBegin(0); |
452 if (!currentSegment) { |
346 currentMedia.currentSegment.setEnd(currentMedia.duration); |
453 currentSegment = new IriSP.Model.Annotation(false, project); |
347 currentMedia.currentSegment.thumbnail = currentMedia.thumbnail; |
454 currentSegment.setMedia(currentMedia.id); |
348 currentMedia.currentSegment.title = "Segment sans titre"; |
455 currentSegment.setBegin(0); |
349 currentMedia.currentSegment.description = "Extrait de « " + currentMedia.title + " »"; |
456 currentSegment.setEnd(currentMedia.duration); |
350 currentMedia.currentSegment.on("change-begin", function() { |
457 currentSegment.title = "Segment sans titre"; |
351 if (currentMedia && currentMedia.currentSegment === this) { |
458 currentSegment.description = "Extrait de « " + currentMedia.title + " »"; |
|
459 currentSegment.on("change-begin", function() { |
|
460 if (currentMedia && currentSegment === this) { |
352 currentMedia.setCurrentTime(this.begin); |
461 currentMedia.setCurrentTime(this.begin); |
353 updateSliderAndTangles(); |
462 updateSliderAndTangles(); |
354 } |
463 } |
355 }); |
464 }); |
356 currentMedia.currentSegment.on("change-end", function() { |
465 currentSegment.on("change-end", function() { |
357 if (currentMedia && currentMedia.currentSegment === this) { |
466 if (currentMedia && currentSegment === this) { |
358 currentMedia.setCurrentTime(this.end); |
467 currentMedia.setCurrentTime(this.end); |
359 updateSliderAndTangles(); |
468 updateSliderAndTangles(); |
360 } |
469 } |
361 }); |
470 }); |
362 } |
471 currentSegment.on("enter", function() { |
|
472 if (currentMedia === mashup) { |
|
473 $(".annotation-title").text(this.title); |
|
474 $(".annotation-begin").text(this.begin.toString()); |
|
475 $(".annotation-end").text(this.end.toString()); |
|
476 $(".annotation-media-title").text(this.getMedia().title); |
|
477 $(".annotation-description").text(this.description); |
|
478 setPointerToCurrentAnnotation(); |
|
479 } |
|
480 }) |
|
481 } |
|
482 if (currentMedia.loaded) { |
|
483 currentMedia.setCurrentTime(currentSegment.begin); |
|
484 } |
|
485 $(".add-segment").val(addMode ? "Ajouter au Hashcut" : "Sauvegarder"); |
|
486 $(".create-or-edit").text(addMode ? "Créer un nouveau segment" : "Modifier le segment"); |
363 updateSliderAndTangles(); |
487 updateSliderAndTangles(); |
364 } |
488 media.show(); |
365 currentvideo.show(); |
489 $("#segment-title").val(currentSegment.title); |
|
490 $("#segment-description").val(currentSegment.description); |
|
491 $("#segment-tags").val(""); |
|
492 } |
|
493 if (currentMedia.elementType === "mashup") { |
|
494 showPreview(); |
|
495 mashup.checkLoaded(); |
|
496 } |
366 $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString()); |
497 $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString()); |
367 $("#segment-title").val(currentMedia.currentSegment.title); |
|
368 $("#segment-description").text(currentMedia.currentSegment.description); |
|
369 // TODO: Do something with the tags ! |
498 // TODO: Do something with the tags ! |
370 onCurrentMediaTimeupdate(currentMedia.getCurrentTime()); |
499 onCurrentMediaTimeupdate(currentMedia.getCurrentTime()); |
371 onCurrentMediaPause(); |
500 onCurrentMediaPause(); |
|
501 highlightCurrentSegment(); |
372 } |
502 } |
373 |
503 |
374 function addMediaPlayer(media) { |
504 function addMediaPlayer(media) { |
375 var videoid = "video_" + media.id, |
505 var videoid = "video_" + media.id, |
376 videoEl = $('<video>'), |
506 videoEl = $('<video>'), |
460 |
608 |
461 popcorn.on("seeked", function() { |
609 popcorn.on("seeked", function() { |
462 media.trigger("seeked"); |
610 media.trigger("seeked"); |
463 }); |
611 }); |
464 |
612 |
465 // Binding UI Events to Media |
613 // Binding UI Events and Mashup Playing to Media |
|
614 |
|
615 media.on("loadedmetadata", function() { |
|
616 mashup.checkLoaded(); |
|
617 }); |
466 |
618 |
467 media.on("play", function() { |
619 media.on("play", function() { |
468 if (media === currentMedia) { |
620 if (media === currentMedia) { |
469 onCurrentMediaPlay(); |
621 onCurrentMediaPlay(); |
470 } |
622 } |
|
623 if (mashup === currentMedia && media === mashupCurrentMedia) { |
|
624 mashup.trigger("play"); |
|
625 } |
471 }); |
626 }); |
472 |
627 |
473 media.on("pause", function() { |
628 media.on("pause", function() { |
474 if (media === currentMedia) { |
629 if (media === currentMedia) { |
475 onCurrentMediaPause(); |
630 onCurrentMediaPause(); |
476 } |
631 } |
|
632 if (mashup === currentMedia && media === mashupCurrentMedia) { |
|
633 mashup.trigger("pause"); |
|
634 } |
477 }); |
635 }); |
478 |
636 |
479 media.on("timeupdate", function(_time) { |
637 media.on("timeupdate", function(_time) { |
480 if (media === currentMedia) { |
638 if (media === currentMedia) { |
481 onCurrentMediaTimeupdate(_time); |
639 onCurrentMediaTimeupdate(_time); |
482 } |
640 } |
|
641 if (mashup === currentMedia && !mashup.paused && media === mashupCurrentMedia && !media.seeking) { |
|
642 if ( _time < mashupSegmentEnd ) { |
|
643 if ( _time >= mashupSegmentBegin ) { |
|
644 mashupTimecode = _time - mashupTimedelta; |
|
645 } else { |
|
646 mashupTimecode = mashupSegmentBegin - mashupTimedelta; |
|
647 media.setCurrentTime(mashupSegmentBegin); |
|
648 } |
|
649 } else { |
|
650 mashupTimecode = mashupSegmentEnd - mashupTimedelta; |
|
651 media.pause(); |
|
652 changeCurrentAnnotation(); |
|
653 } |
|
654 mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode)); |
|
655 } |
|
656 }); |
|
657 |
|
658 media.on("seeked", function() { |
|
659 media.seeking = false; |
|
660 if (mashup === currentMedia && media === mashupCurrentMedia && mashupSeeking) { |
|
661 mashupSeeking = false; |
|
662 //TODO: _seekdiv.hide(); |
|
663 } |
483 }); |
664 }); |
484 |
665 |
485 media.on("volumechange", function() { |
666 media.on("volumechange", function() { |
486 if (media === currentMedia) { |
667 if (media === currentMedia) { |
487 ctrlVolumeUpdater(); |
668 ctrlVolumeUpdater(); |
488 } |
669 } |
|
670 mashup.muted = media.muted; |
|
671 mashup.volume = media.volume; |
|
672 mashup.trigger("volumechange"); |
489 }) |
673 }) |
490 |
674 |
491 } |
675 } |
492 |
676 |
|
677 // Mashup Events |
|
678 |
|
679 mashup.on("setcurrenttime", function(_milliseconds) { |
|
680 mashupTimecode = _milliseconds; |
|
681 changeCurrentAnnotation(); |
|
682 }); |
|
683 |
|
684 mashup.on("setvolume", function(_vol) { |
|
685 mashup.getMedias().forEach(function(_media) { |
|
686 _media.setVolume(_vol); |
|
687 }); |
|
688 mashup.volume = _vol; |
|
689 }); |
|
690 |
|
691 mashup.on("setmuted", function(_muted) { |
|
692 mashup.getMedias().forEach(function(_media) { |
|
693 _media.setMuted(_muted); |
|
694 }); |
|
695 mashup.muted = _muted; |
|
696 }); |
|
697 |
|
698 mashup.on("setplay", function() { |
|
699 mashup.paused = false; |
|
700 changeCurrentAnnotation(); |
|
701 }); |
|
702 |
|
703 mashup.on("setpause", function() { |
|
704 mashup.paused = true; |
|
705 if (mashupCurrentMedia) { |
|
706 mashupCurrentMedia.pause(); |
|
707 } |
|
708 }); |
|
709 |
|
710 mashup.on("loadedmetadata", function() { |
|
711 if (mashup === currentMedia) { |
|
712 changeCurrentAnnotation(); |
|
713 } |
|
714 }); |
|
715 |
|
716 /* Mashup Events to UI */ |
|
717 |
|
718 mashup.on("play", function() { |
|
719 if (mashup === currentMedia) { |
|
720 onCurrentMediaPlay(); |
|
721 } |
|
722 }); |
|
723 |
|
724 mashup.on("pause", function() { |
|
725 if (mashup === currentMedia) { |
|
726 onCurrentMediaPause(); |
|
727 } |
|
728 }); |
|
729 |
|
730 mashup.on("timeupdate", function(_time) { |
|
731 if (mashup === currentMedia) { |
|
732 $(".frise-position").css("left",(100*_time/mashup.duration)+"%"); |
|
733 onCurrentMediaTimeupdate(_time); |
|
734 } |
|
735 }); |
|
736 |
493 /* Segment Form interaction */ |
737 /* Segment Form interaction */ |
494 |
738 |
495 $("#segment-title").on("keyup change input paste", function() { |
739 $("#segment-title").on("keyup change input paste", function() { |
496 if (currentMedia && currentMedia.currentSegment) { |
740 if (currentMedia && currentSegment) { |
497 currentMedia.currentSegment.title = $(this).val(); |
741 currentSegment.title = $(this).val(); |
|
742 updateMashupUI(); |
498 } |
743 } |
499 }); |
744 }); |
500 $("#segment-description").on("keyup change input paste", function() { |
745 $("#segment-description").on("keyup change input paste", function() { |
501 if (currentMedia && currentMedia.currentSegment) { |
746 if (currentMedia && currentSegment) { |
502 currentMedia.currentSegment.title = $(this).val(); |
747 currentSegment.description = $(this).val(); |
503 } |
748 } |
504 }); |
749 }); |
505 $("#segment-form").submit(function() { |
750 $("#segment-form").submit(function() { |
506 mashup.addSegment(currentMedia.currentSegment); |
751 if (addMode) { |
507 currentMedia.currentSegment = undefined; |
752 mashup.addAnnotation(currentSegment); |
|
753 } else { |
|
754 updateMashupUI(); |
|
755 } |
|
756 var segment = mashup.getAnnotation(currentSegment); |
|
757 currentSegment = undefined; |
|
758 setMedia(mashup); |
|
759 if (segment) { |
|
760 mashup.setCurrentTime(segment.begin); |
|
761 } |
508 }) |
762 }) |
509 |
763 |
510 /* Click on media items */ |
764 /* Click on media items */ |
511 |
765 |
512 $(".col-left").on("click", ".item-video", function() { |
766 $(".col-left").on("click", ".item-video", function() { |
513 setMedia($(this).attr("data-media-id")); |
767 currentSegment = undefined; |
|
768 setMedia(project.getElement($(this).attr("data-media-id"))); |
514 }); |
769 }); |
515 |
770 |
516 /* Click on Tabs */ |
771 /* Click on Tabs */ |
517 |
772 |
518 function showSegmentation() { |
773 function showSegmentation() { |
522 function showPreview() { |
777 function showPreview() { |
523 $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode"); |
778 $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode"); |
524 return false; |
779 return false; |
525 } |
780 } |
526 |
781 |
527 $(".tab-pvw").click(showPreview); |
782 $(".tab-pvw").click(function() { |
528 |
783 if (mashup.segments.length) { |
529 function disableMoveItemVideo() { |
784 setMedia(mashup); |
530 $(".organize-segments .top, .organize-segments .bottom").removeClass("disable"); |
785 } |
531 $(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable"); |
786 }); |
532 } |
787 |
533 disableMoveItemVideo(); |
788 /* Click on segments */ |
|
789 |
|
790 function reorganizeMashup() { |
|
791 var ids = $(".organize-segments .item-video").map(function(){return $(this).attr("data-segment-id")}); |
|
792 mashup.setAnnotationsById(ids); |
|
793 } |
|
794 |
|
795 function highlightCurrentSegment() { |
|
796 $(".organize-segments .item-video").removeClass("active"); |
|
797 if (currentMedia && currentSegment) { |
|
798 $(".item-video[data-segment-id='" + currentSegment.id + "']").addClass("active"); |
|
799 } |
|
800 } |
534 |
801 |
535 $(".organize-segments").sortable({ |
802 $(".organize-segments").sortable({ |
536 stop : function(){ |
803 stop : reorganizeMashup |
537 disableMoveItemVideo(); |
804 }); |
538 } |
805 |
539 }); |
806 $(".organize-segments").on("click", ".item-video", function(e) { |
540 |
807 var el = $(this), |
541 $(".organize-segments .top").click(function(e){ |
808 segment = mashup.getAnnotationById(el.attr("data-segment-id")); |
|
809 setMedia(mashup); |
|
810 if (segment) { |
|
811 mashup.setCurrentTime(segment.begin); |
|
812 } |
|
813 return false; |
|
814 }); |
|
815 |
|
816 $(".organize-segments").on("click", ".edit", function(e) { |
|
817 var currentItem = $(this).parents(".item-video"), |
|
818 media = project.getElement(currentItem.attr("data-media-id")), |
|
819 segment = project.getElement(currentItem.attr("data-segment-id")); |
|
820 currentSegment = segment; |
|
821 setMedia(media); |
|
822 return false; |
|
823 }); |
|
824 |
|
825 $(".organize-segments").on("click", ".top", function(e){ |
542 var currentItem = $(this).parents(".item-video"); |
826 var currentItem = $(this).parents(".item-video"); |
543 currentItem.insertBefore(currentItem.prev()); |
827 currentItem.insertBefore(currentItem.prev()); |
544 disableMoveItemVideo(); |
828 reorganizeMashup(); |
545 }); |
829 return false; |
546 |
830 }); |
547 $(".organize-segments .bottom").click(function(e){ |
831 |
|
832 $(".organize-segments").on("click", ".bottom", function(e){ |
548 var currentItem = $(this).parents(".item-video"); |
833 var currentItem = $(this).parents(".item-video"); |
549 currentItem.insertAfter(currentItem.next()); |
834 currentItem.insertAfter(currentItem.next()); |
550 disableMoveItemVideo(); |
835 reorganizeMashup(); |
|
836 return false; |
|
837 }); |
|
838 |
|
839 $(".organize-segments").on("click", ".delete", function(e){ |
|
840 var id = $(this).parents(".item-video").attr("data-segment-id"); |
|
841 mashup.removeAnnotationById(id); |
|
842 return false; |
551 }); |
843 }); |
552 |
844 |
553 /* Tangles */ |
845 /* Tangles */ |
554 var tangleMsPerPixel = 100, |
846 var tangleMsPerPixel = 100, |
555 activeTangle, |
847 activeTangle, |
575 return false; |
867 return false; |
576 } |
868 } |
577 }) |
869 }) |
578 .mouseup(function() { |
870 .mouseup(function() { |
579 if (activeTangle) { |
871 if (activeTangle) { |
|
872 activeTangle.text(activeTangle.text().replace(/\.\d+$/,'')); |
580 $(".time-tangle").removeClass("active deactivate"); |
873 $(".time-tangle").removeClass("active deactivate"); |
581 activeTangle = undefined; |
874 activeTangle = undefined; |
582 } |
875 } |
583 }); |
876 }); |
584 |
877 |
585 $(".tangle-start") |
878 $(".tangle-start") |
586 .mouseup(function(evt) { |
879 .mouseup(function(evt) { |
587 if (!tangleHasMoved && currentMedia && currentMedia.currentSegment) { |
880 if (!tangleHasMoved && currentMedia && currentSegment) { |
588 currentMedia.setCurrentTime(currentMedia.currentSegment.begin); |
881 currentMedia.setCurrentTime(currentSegment.begin); |
589 } |
882 } |
590 }) |
883 }) |
591 .on("valuechange", function(evt, val) { |
884 .on("valuechange", function(evt, val) { |
592 if (currentMedia && currentMedia.currentSegment) { |
885 if (currentMedia && currentSegment) { |
593 currentMedia.currentSegment.setBegin(val); |
886 currentSegment.setBegin(val); |
594 } |
887 } |
595 }); |
888 }); |
596 $(".tangle-end") |
889 $(".tangle-end") |
597 .mouseup(function(evt) { |
890 .mouseup(function(evt) { |
598 if (!tangleHasMoved && currentMedia && currentMedia.currentSegment) { |
891 if (!tangleHasMoved && currentMedia && currentSegment) { |
599 currentMedia.setCurrentTime(currentMedia.currentSegment.end); |
892 currentMedia.setCurrentTime(currentSegment.end); |
600 } |
893 } |
601 }) |
894 }) |
602 .on("valuechange", function(evt, val) { |
895 .on("valuechange", function(evt, val) { |
603 if (currentMedia && currentMedia.currentSegment) { |
896 if (currentMedia && currentSegment) { |
604 currentMedia.currentSegment.setEnd(val); |
897 currentSegment.setEnd(val); |
605 } |
898 } |
606 }); |
899 }); |
607 $(".tangle-duration").on("valuechange", function(evt, val) { |
900 $(".tangle-duration").on("valuechange", function(evt, val) { |
608 if (currentMedia && currentMedia.currentSegment) { |
901 if (currentMedia && currentSegment) { |
609 currentMedia.currentSegment.setDuration(val); |
902 currentSegment.setDuration(val); |
610 } |
903 } |
611 }); |
904 }); |
|
905 |
|
906 $(".mashup-description .edit").click(function() { |
|
907 if (mashupCurrentAnnotation) { |
|
908 currentSegment = mashupCurrentAnnotation.annotation; |
|
909 setMedia(mashupCurrentAnnotation.getMedia()); |
|
910 } |
|
911 }) |
612 } |
912 } |
613 |
|
614 $(function() { |
|
615 var hashcut = new IriSP.Hashcut(); |
|
616 }); |
|