hashcut: comparison integration/js/editor.js

Mercurial Mercurial > hashcut / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

integration/js/editor.js

changeset 25	eea45f9b124b
parent 23	c9dc489913af
child 26	7c394ea40f28

equal deleted inserted replaced

-:c9dc489913af
+:eea45f9b124b
 var directory = new IriSP.Model.Directory(),
 project = directory.remoteSource({
 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) {
 html += Mustache.to_html(mediatemplate, _m);
 });
 }
 }
 })
 });
+/* 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"),
 slidersRange = 920;
 timeSlider.slider({
 }
 /* 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();
 })
 .mouseout(function() {
 volBlock.hide();
 }).mouseout(function() {
 volBlock.hide();
 });
 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 + '%');
+if (currentMedia) {
-//_this.media.setVolume(ui.value / 100);
+currentMedia.setVolume(ui.value / 100);
-},
+}
-stop: function() {
-// IriSP.Widgets.Controller.prototype.volumeUpdater
 }
 });
 $(".Ldt-Ctrl-Play").click(function() {
 if (currentMedia) {
 currentMedia.pause();
 }
 }
 });
+$(".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);
+if (ui.value === ui.values[0]) {
-}
+currentMedia.currentSegment.setBegin(t);
-setTangles(ui.values);
+} else {
-},
+currentMedia.currentSegment.setEnd(t);
-stop: function() {
+}
-if (currentMedia && sliceStartTime) {
+}
-//                currentMedia.setCurrentTime(sliceStartTime);
+}
-}
+});
-}
-});
+sliceSlider.find(".ui-slider-handle:first")
+.addClass("Ldt-Slice-left-handle")
-sliceSlider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle");
+.click(function() {
-sliceSlider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle");
+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 */
 function onCurrentMediaPlay() {
 $(".Ldt-Ctrl-Play")
 $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString());
 timeSlider.slider("value",slidersRange * _time / currentMedia.duration);
 }
 /* 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();
 $("video").hide();
 if (!currentvideo.length) {
 addMediaPlayer(currentMedia);
 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();
 }
 function addMediaPlayer(media) {
 media.on("timeupdate", function(_time) {
 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() {
 setMedia($(this).attr("data-media-id"));
 });
 var currentItem = $(this).parents(".item-video");
 currentItem.insertAfter(currentItem.next());
 disableMoveItemVideo();
 });
-/* Tangle */
+/* Tangles */
-var activeTangle,
+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);
+tangleHasMoved = true;
-activeTangle.text(newval.toString());
+var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
-activeTangle.attr("data-milliseconds",newval.milliseconds);
 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() {
 var hashcut = new IriSP.Hashcut();
 });

hashcut