diff -r bd904d592881 -r c9dc489913af integration/img/pinstripe-purple.png
Binary file integration/img/pinstripe-purple.png has changed
diff -r bd904d592881 -r c9dc489913af integration/img/slice-handles.png
Binary file integration/img/slice-handles.png has changed
diff -r bd904d592881 -r c9dc489913af integration/js/editor.js
--- 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 = $('
- 