--- a/integration/js/editor.js Thu Oct 25 18:52:44 2012 +0200
+++ b/integration/js/editor.js Fri Oct 26 18:54:20 2012 +0200
@@ -49,15 +49,18 @@
/* Slider */
- var timeSlider = $(".Ldt-Slider");
+ var timeSlider = $(".Ldt-Slider"),
+ slidersRange = 920;
timeSlider.slider({
range: "min",
value: 0,
min: 0,
- max: 920,
+ max: slidersRange,
slide: function(event, ui) {
- console.log(ui.value);
- //TODO: Slide to correct Timecode
+ if (currentMedia) {
+ var t = currentMedia.duration * ui.value / slidersRange;
+ currentMedia.setCurrentTime(t);
+ }
}
});
@@ -106,7 +109,9 @@
.mouseout(timeSliderMouseOut)
.mousemove(function(_e) {
var _x = _e.pageX - timeSlider.offset().left,
- _t = new IriSP.Model.Time(); // _this.media.duration * _x / _this.width
+ _t = new IriSP.Model.Time(
+ currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
+ );
timeTooltip.text(_t.toString()).css("left",_x);
});
@@ -146,7 +151,7 @@
var volBlock = $(".Ldt-Ctrl-Volume-Control");
$('.Ldt-Ctrl-Sound')
- .click(function(){}) //TODO: Add Mute Handler
+ .click(function(){}) //TODO: Add Mute and Volume Handlers
.mouseover(function() {
volBlock.show();
})
@@ -170,19 +175,224 @@
}
});
+ $(".Ldt-Ctrl-Play").click(function() {
+ if (currentMedia) {
+ if (currentMedia.getPaused()) {
+ currentMedia.play();
+ } else {
+ currentMedia.pause();
+ }
+ }
+ });
+
+ /* 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) {
+ var t = currentMedia.duration * ui.value / slidersRange;
+ currentMedia.setCurrentTime(t);
+ }
+ setTangles(ui.values);
+ },
+ stop: function() {
+ if (currentMedia && sliceStartTime) {
+// currentMedia.setCurrentTime(sliceStartTime);
+ }
+ }
+ });
+
+ sliceSlider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
+ sliceSlider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
+
+ /* UI Events */
+
+ function onCurrentMediaPlay() {
+ $(".Ldt-Ctrl-Play")
+ .attr("title", "Pause")
+ .removeClass("Ldt-Ctrl-Play-PlayState")
+ .addClass("Ldt-Ctrl-Play-PauseState")
+ }
+
+ function onCurrentMediaPause() {
+ $(".Ldt-Ctrl-Play")
+ .attr("title", "Lecture")
+ .removeClass("Ldt-Ctrl-Play-PauseState")
+ .addClass("Ldt-Ctrl-Play-PlayState")
+ }
+
+ function onCurrentMediaTimeupdate(_time) {
+ $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString());
+ timeSlider.slider("value",slidersRange * _time / currentMedia.duration);
+ }
+
/* Set current Media */
var currentMedia;
function setMedia(mediaid) {
+ $(".col-left .item-video").removeClass("active");
+ $(".tutorial").hide();
+ $("video").hide();
+ if (currentMedia) {
+ currentMedia.pause();
+ }
currentMedia = project.getElement(mediaid);
if (currentMedia.elementType == "media") {
- $("video").hide();
- var currentvideo = $('video[data-media-id="' + mediaid + '"]');
- console.log(currentvideo);
+ $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active");
+ showSegmentation();
+ var currentvideo = $('#video_' + mediaid);
+ if (!currentvideo.length) {
+ addMediaPlayer(currentMedia);
+ currentvideo = $('#video_' + mediaid);
+ }
+ $(".tab-media-title").text(currentMedia.title);
+ sliceSlider.slider("values",[0, slidersRange]);
}
+ currentvideo.show();
+ $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());
+ onCurrentMediaTimeupdate(currentMedia.getCurrentTime());
+ onCurrentMediaPause();
}
function addMediaPlayer(media) {
+ var videoid = "video_" + media.id,
+ videoEl = $('<video>'),
+ width = $(".video").width(),
+ height = $(".video").height(),
+ mp4_file = media.video.replace(/\.webm$/i,'.mp4'),
+ webm_file = media.video.replace(/\.mp4$/i,'.webm'),
+ mp4_src = $('<source>'),
+ webm_src = $('<source>');
+ mp4_src.attr({
+ src: mp4_file,
+ type: "video/mp4"
+ });
+ webm_src.attr({
+ src: webm_file,
+ type: "video/webm"
+ });
+ videoEl.attr({
+ id : videoid,
+ width : width,
+ height : height
+ }).css({
+ position : "absolute",
+ left: 0,
+ top: 0,
+ width : width,
+ height : height
+ });
+ videoEl.append(mp4_src).append(webm_src);
+ $(".video").append(videoEl);
+
+ var popcorn = Popcorn("#" + videoid);
+
+ // Binding functions to Popcorn
+
+ media.on("setcurrenttime", function(_milliseconds) {
+ popcorn.currentTime(_milliseconds / 1000);
+ });
+
+ media.on("setvolume", function(_vol) {
+ popcorn.volume(_vol);
+ media.volume = _vol;
+ });
+
+ media.on("setmuted", function(_muted) {
+ popcorn.muted(_muted);
+ media.muted = _muted;
+ });
+
+ media.on("setplay", function() {
+ popcorn.play();
+ });
+
+ media.on("setpause", function() {
+ popcorn.pause();
+ });
+
+ // Binding Popcorn events to media
+
+ function getVolume() {
+ media.muted = popcorn.muted();
+ media.volume = popcorn.volume();
+ }
+
+ popcorn.on("loadedmetadata", function() {
+ getVolume();
+ media.trigger("loadedmetadata");
+ media.trigger("volumechange");
+ })
+
+ popcorn.on("timeupdate", function() {
+ media.trigger("timeupdate", new IriSP.Model.Time(1000*popcorn.currentTime()));
+ });
+
+ popcorn.on("volumechange", function() {
+ getVolume();
+ media.trigger("volumechange");
+ })
+
+ popcorn.on("play", function() {
+ media.trigger("play");
+ });
+
+ popcorn.on("pause", function() {
+ media.trigger("pause");
+ });
+
+ popcorn.on("seeked", function() {
+ media.trigger("seeked");
+ });
+
+ // Binding UI Events to Media
+
+ media.on("play", function() {
+ if (media === currentMedia) {
+ onCurrentMediaPlay();
+ }
+ });
+
+ media.on("pause", function() {
+ if (media === currentMedia) {
+ onCurrentMediaPause();
+ }
+ });
+
+ media.on("timeupdate", function(_time) {
+ if (media === currentMedia) {
+ onCurrentMediaTimeupdate(_time);
+ }
+ })
}
/* Click on media items */
@@ -202,7 +412,6 @@
return false;
}
- $(".tab-segment").click(showSegmentation);
$(".tab-pvw").click(showPreview);
function disableMoveItemVideo() {
@@ -228,6 +437,34 @@
disableMoveItemVideo();
});
+ /* Tangle */
+ var activeTangle,
+ tangleStartX,
+ tangleStartVal;
+ $(".time-tangle").mousedown(function(evt) {
+ activeTangle = $(this);
+ activeTangle.addClass("active");
+ tangleStartVal = +activeTangle.attr("data-milliseconds");
+ tangleStartX = evt.pageX;
+ 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);
+ activeTangle.trigger("valuechange", newval);
+ return false;
+ }
+ })
+ .mouseup(function() {
+ if (activeTangle) {
+ activeTangle.removeClass("active");
+ activeTangle = undefined;
+ }
+ })
+
}
$(function() {