--- a/integration/js/editor.js Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/js/editor.js Mon Oct 29 18:02:10 2012 +0100
@@ -7,12 +7,18 @@
url: "data/bpidata.json",
serializer: IriSP.serializers.medialist
}),
+ mashup = new IriSP.Model.Mashup(false, project),
mediatemplate = '<li class="item-video" data-media-id="{{id}}"><img src="{{thumbnail}}" alt="{{title}}" />'
+ '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>'
- + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>';
+ + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>',
+ segmenttemplate = '<li class="item-video" data-segment-id="{{id}}"><img src="{{annotation.thumbnail}}" alt="{{media_title}}" />'
+ + '<span class="video-info"><span class="title-video">{{media_title}}</span>'
+ + '<span class="subtitle">{{title}}</span><span class="duration">{{begin}} - {{end}} ({{duration}})</span>'
+ + '<ul class="tools"><li><a class="edit" href="#"></a></li><li><a class="bottom" href="#"></a></li>'
+ + '<li><a class="top" href="#"></a></li><li><a class="delete" href="#"></a></li></ul></span></li>';
/* Fill left column with Media List */
-
+
project.onLoad(function() {
var html = '';
project.getMedias().forEach(function(_m) {
@@ -47,6 +53,18 @@
})
});
+ /* Fill right column when mashup is updated */
+
+ function fillRightColumn() {
+ var html = '';
+ mashup.segments.forEach(function(_s) {
+ html += Mustache.to_html(segmenttemplate, _s);
+ });
+ $(".col-right .list-video").html(html);
+ }
+
+ mashup.on("add-segments",fillRightColumn);
+
/* Slider */
var timeSlider = $(".Ldt-Slider"),
@@ -150,8 +168,13 @@
/* Controller Widget */
var volBlock = $(".Ldt-Ctrl-Volume-Control");
+
$('.Ldt-Ctrl-Sound')
- .click(function(){}) //TODO: Add Mute and Volume Handlers
+ .click(function() {
+ if (currentMedia) {
+ currentMedia.setMuted(!currentMedia.getMuted());
+ }
+ })
.mouseover(function() {
volBlock.show();
})
@@ -165,13 +188,33 @@
});
var volBar = $(".Ldt-Ctrl-Volume-Bar");
+
+ function ctrlVolumeUpdater() {
+ if (currentMedia) {
+ var _muted = currentMedia.getMuted(),
+ _vol = currentMedia.getVolume();
+ if (_vol === false) {
+ _vol = .5;
+ }
+ var _soundCtl = $(".Ldt-Ctrl-Sound");
+ _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full");
+ if (_muted) {
+ _soundCtl.attr("title", "Activer le son")
+ .addClass("Ldt-Ctrl-Sound-Mute");
+ } else {
+ _soundCtl.attr("title", "Couper le son")
+ .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" )
+ }
+ volBar.slider("value", _muted ? 0 : 100 * _vol);
+ volBar.attr("title",'Volume : ' + Math.floor(100 * _vol) + '%');
+ }
+ }
+
volBar.slider({
slide: function(event, ui) {
- volBar.attr("title",'Volume : ' + ui.value + '%');
- //_this.media.setVolume(ui.value / 100);
- },
- stop: function() {
- // IriSP.Widgets.Controller.prototype.volumeUpdater
+ if (currentMedia) {
+ currentMedia.setVolume(ui.value / 100);
+ }
}
});
@@ -185,54 +228,60 @@
}
});
+ $(".Ldt-Ctrl-SetIn").click(function() {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.currentSegment.setBegin(currentMedia.getCurrentTime());
+ }
+ });
+ $(".Ldt-Ctrl-SetOut").click(function() {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.currentSegment.setEnd(currentMedia.getCurrentTime());
+ }
+ });
+
/* Slice Widget */
+
var sliceSlider = $(".Ldt-Slice"),
sliceStartTime;
-
- function setTangles(sliderValues) {
- //TODO: Move to Annotation.on("changebounds")
- if (currentMedia) {
- startTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[0] / slidersRange),
- endTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[1] / slidersRange),
- duration = new IriSP.Model.Time(endTime - startTime);
- $(".tangle-start").text(startTime.toString()).attr("data-milliseconds",startTime.milliseconds);
- $(".tangle-end").text(endTime.toString()).attr("data-milliseconds",endTime.milliseconds);
- $(".tangle-duration").text(duration.toString()).attr("data-milliseconds",duration.milliseconds);
- }
- }
sliceSlider.slider({
range: true,
values: [0, slidersRange],
min: 0,
max: slidersRange,
- change: function(event, ui) {
- setTangles(ui.values); // Not the right place to put it
- },
start: function() {
if (currentMedia) {
if (!currentMedia.getPaused()) {
currentMedia.pause();
}
-// sliceStartTime = currentMedia.getCurrentTime();
}
},
slide: function(event, ui) {
- if (currentMedia) {
+ if (currentMedia && currentMedia.currentSegment) {
var t = currentMedia.duration * ui.value / slidersRange;
- currentMedia.setCurrentTime(t);
- }
- setTangles(ui.values);
- },
- stop: function() {
- if (currentMedia && sliceStartTime) {
-// currentMedia.setCurrentTime(sliceStartTime);
+ if (ui.value === ui.values[0]) {
+ currentMedia.currentSegment.setBegin(t);
+ } else {
+ currentMedia.currentSegment.setEnd(t);
+ }
}
}
});
- sliceSlider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
- sliceSlider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
+ sliceSlider.find(".ui-slider-handle:first")
+ .addClass("Ldt-Slice-left-handle")
+ .click(function() {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.setCurrentTime(currentMedia.currentSegment.begin);
+ }
+ });
+ sliceSlider.find(".ui-slider-handle:last")
+ .addClass("Ldt-Slice-right-handle")
+ .click(function() {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.setCurrentTime(currentMedia.currentSegment.end);
+ }
+ });
/* UI Events */
@@ -256,8 +305,23 @@
}
/* Set current Media */
+
var currentMedia;
+ function updateSliderAndTangles() {
+ if (currentMedia && currentMedia.currentSegment) {
+ var start = currentMedia.currentSegment.begin,
+ end = currentMedia.currentSegment.end,
+ dur = currentMedia.currentSegment.getDuration(),
+ f = slidersRange / currentMedia.duration;
+ sliceSlider.slider( "values", [ f * start, f * end ] );
+ $(".tangle-start").text(start.toString()).attr("data-milliseconds",start.milliseconds);
+ $(".tangle-end").text(end.toString()).attr("data-milliseconds",end.milliseconds);
+ $(".tangle-duration").text(dur.toString()).attr("data-milliseconds",dur.milliseconds);
+ $(".segment-info .pointer").css("left",(parseFloat($(".Ldt-Slice-left-handle").css("left")) + parseFloat($(".Ldt-Slice-right-handle").css("left")))/2)
+ }
+ }
+
function setMedia(mediaid) {
$(".col-left .item-video").removeClass("active");
$(".tutorial").hide();
@@ -275,10 +339,34 @@
currentvideo = $('#video_' + mediaid);
}
$(".tab-media-title").text(currentMedia.title);
- sliceSlider.slider("values",[0, slidersRange]);
+ if (!currentMedia.currentSegment) {
+ currentMedia.currentSegment = new IriSP.Model.Annotation(false, project);
+ currentMedia.currentSegment.setMedia(currentMedia.id);
+ currentMedia.currentSegment.setBegin(0);
+ currentMedia.currentSegment.setEnd(currentMedia.duration);
+ currentMedia.currentSegment.thumbnail = currentMedia.thumbnail;
+ currentMedia.currentSegment.title = "Segment sans titre";
+ currentMedia.currentSegment.description = "Extrait de « " + currentMedia.title + " »";
+ currentMedia.currentSegment.on("change-begin", function() {
+ if (currentMedia && currentMedia.currentSegment === this) {
+ currentMedia.setCurrentTime(this.begin);
+ updateSliderAndTangles();
+ }
+ });
+ currentMedia.currentSegment.on("change-end", function() {
+ if (currentMedia && currentMedia.currentSegment === this) {
+ currentMedia.setCurrentTime(this.end);
+ updateSliderAndTangles();
+ }
+ });
+ }
+ updateSliderAndTangles();
}
currentvideo.show();
$(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());
+ $("#segment-title").val(currentMedia.currentSegment.title);
+ $("#segment-description").text(currentMedia.currentSegment.description);
+ // TODO: Do something with the tags !
onCurrentMediaTimeupdate(currentMedia.getCurrentTime());
onCurrentMediaPause();
}
@@ -392,9 +480,33 @@
if (media === currentMedia) {
onCurrentMediaTimeupdate(_time);
}
+ });
+
+ media.on("volumechange", function() {
+ if (media === currentMedia) {
+ ctrlVolumeUpdater();
+ }
})
}
+
+ /* Segment Form interaction */
+
+ $("#segment-title").on("keyup change input paste", function() {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.currentSegment.title = $(this).val();
+ }
+ });
+ $("#segment-description").on("keyup change input paste", function() {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.currentSegment.title = $(this).val();
+ }
+ });
+ $("#segment-form").submit(function() {
+ mashup.addSegment(currentMedia.currentSegment);
+ currentMedia.currentSegment = undefined;
+ })
+
/* Click on media items */
$(".col-left").on("click", ".item-video", function() {
@@ -437,34 +549,65 @@
disableMoveItemVideo();
});
- /* Tangle */
- var activeTangle,
+ /* Tangles */
+ var tangleMsPerPixel = 100,
+ activeTangle,
tangleStartX,
- tangleStartVal;
+ tangleStartVal,
+ tangleHasMoved;
+
$(".time-tangle").mousedown(function(evt) {
activeTangle = $(this);
activeTangle.addClass("active");
tangleStartVal = +activeTangle.attr("data-milliseconds");
tangleStartX = evt.pageX;
+ tangleHasMoved = false;
+ $(this).siblings(".time-tangle").addClass("deactivate");
return false;
});
$(document)
.mousemove(function(evt) {
if (activeTangle) {
- var newval = new IriSP.Model.Time(100 * (evt.pageX - tangleStartX) + tangleStartVal);
- activeTangle.text(newval.toString());
- activeTangle.attr("data-milliseconds",newval.milliseconds);
+ tangleHasMoved = true;
+ var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
activeTangle.trigger("valuechange", newval);
return false;
}
})
.mouseup(function() {
if (activeTangle) {
- activeTangle.removeClass("active");
+ $(".time-tangle").removeClass("active deactivate");
activeTangle = undefined;
}
+ });
+
+ $(".tangle-start")
+ .mouseup(function(evt) {
+ if (!tangleHasMoved && currentMedia && currentMedia.currentSegment) {
+ currentMedia.setCurrentTime(currentMedia.currentSegment.begin);
+ }
})
-
+ .on("valuechange", function(evt, val) {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.currentSegment.setBegin(val);
+ }
+ });
+ $(".tangle-end")
+ .mouseup(function(evt) {
+ if (!tangleHasMoved && currentMedia && currentMedia.currentSegment) {
+ currentMedia.setCurrentTime(currentMedia.currentSegment.end);
+ }
+ })
+ .on("valuechange", function(evt, val) {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.currentSegment.setEnd(val);
+ }
+ });
+ $(".tangle-duration").on("valuechange", function(evt, val) {
+ if (currentMedia && currentMedia.currentSegment) {
+ currentMedia.currentSegment.setDuration(val);
+ }
+ });
}
$(function() {