--- a/integration/js/editor.js Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/js/editor.js Tue Nov 06 11:01:27 2012 +0100
@@ -1,5 +1,15 @@
+
+IriSP.hc_messages = {
+ duration_ : "Durée :",
+ edit_segment: "Éditer le segment",
+ segment_down: "Descendre le segment",
+ segment_up: "Remonter le segment",
+ delete_segment: "Supprimer le segment"
+}
+
IriSP.Hashcut = function(options) {
+
/* Load Media List */
var directory = new IriSP.Model.Directory(),
@@ -10,14 +20,14 @@
mashup = new IriSP.Model.Mashup(false, project),
mediatemplate = _.template('<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.toString() %></span></span></span></li>'),
+ + '<span class="time-length"><%= IriSP.hc_messages.duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
segmenttemplate = _.template('<li class="item-video" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
+ '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
+ '<span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>'
+ '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
- + '<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>'
- + '<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>'),
- viztemplate = _.template('<div class="frise-segment" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
+ + '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>'
+ + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></span></li>'),
+ viztemplate = _.template('<div class="frise-segment" data-segment-id="<%= segmentid %>" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'),
mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">'
+ '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= annotation.getMedia().color %>"></div>'
@@ -79,7 +89,8 @@
var vizdata = {
left: k * t,
width: k * _s.duration,
- color: _s.getMedia().color
+ color: _s.getMedia().color,
+ segmentid: _s.annotation.id
}
vizhtml += viztemplate(vizdata);
t += _s.duration.milliseconds;
@@ -182,7 +193,6 @@
timeSlider.mousemove(function(_e) {
var _x = _e.pageX - timeSlider.offset().left,
_t = new IriSP.Model.Time(
- currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
);
timeTooltip.text(_t.toString()).css("left",_x);
});
@@ -366,9 +376,15 @@
mashupSegmentEnd,
mashupTimecode = 0,
mashupSeeking = false,
- mashupSeekdiv,
+ seekdiv = $(".video-wait"),
mashupTimedelta;
-
+
+ function showSeek() {
+ if (mashupSeeking) {
+ seekdiv.show();
+ }
+ }
+
function changeCurrentAnnotation() {
if (mashupTimecode >= mashup.duration) {
if (!mashup.paused) {
@@ -409,7 +425,7 @@
if (!mashup.paused) {
mashupCurrentMedia.play();
mashupSeeking = true;
-//TODO: _seekdiv.show();
+ setTimeout(showSeek,200);
}
mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
@@ -445,17 +461,16 @@
var addMode;
function setMedia(media) {
- $(".col-left .item-video").removeClass("active");
- $(".tutorial").hide();
- //TODO: Show Tutorial when Hashcut is empty
if (currentMedia) {
currentMedia.pause();
}
currentMedia = media;
if (currentMedia.elementType == "media") {
$("video").hide();
- $(".col-left .item-video[data-media-id='" + currentMedia.id + "']").addClass("active");
showSegmentation();
+ if (!currentMedia.loaded) {
+ seekdiv.show();
+ }
var currentvideo = $('#video_' + currentMedia.id);
if (!currentvideo.length) {
addMediaPlayer(currentMedia);
@@ -491,6 +506,7 @@
$(".annotation-media-title").text(this.getMedia().title);
$(".annotation-description").text(this.description);
setPointerToCurrentAnnotation();
+ highlightCurrentSegment();
}
});
}
@@ -655,6 +671,9 @@
// Binding UI Events and Mashup Playing to Media
media.on("loadedmetadata", function() {
+ if (media === currentMedia) {
+ seekdiv.hide();
+ }
mashup.checkLoaded();
});
@@ -701,7 +720,7 @@
media.seeking = false;
if (mashup === currentMedia && media === mashupCurrentMedia && mashupSeeking) {
mashupSeeking = false;
-//TODO: _seekdiv.hide();
+ seekdiv.hide();
}
});
@@ -821,6 +840,11 @@
$(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode");
return false;
}
+ function showEmpty() {
+ $("video").hide();
+ $(".col-middle").removeClass("pvw-mode segment-mode").addClass("empty-mode");
+ return false;
+ }
$(".tab-pvw").click(function() {
if (mashup.segments.length) {
@@ -836,17 +860,42 @@
}
function highlightCurrentSegment() {
- $(".organize-segments .item-video").removeClass("active");
+ $(".organize-segments .item-video, .col-left .item-video, .frise-segment").removeClass("active");
+ var segmentid = undefined;
if (currentMedia && currentSegment) {
- $(".item-video[data-segment-id='" + currentSegment.id + "']").addClass("active");
+ segmentid = currentSegment.id;
+ }
+ if (currentMedia === mashup && mashupCurrentAnnotation) {
+ segmentid = mashupCurrentAnnotation.annotation.id;
}
+ $(".item-video[data-segment-id='" + segmentid + "']").addClass("active");
+ var mediaid = undefined;
+ if (currentMedia) {
+ mediaid = currentMedia.id;
+ }
+ if (currentMedia === mashup && mashupCurrentMedia) {
+ mediaid = mashupCurrentMedia.id
+ }
+ $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active");
}
- $(".organize-segments").sortable({
+ function hoverSegment() {
+ var segmentid = $(this).attr("data-segment-id");
+ $(".organize-segments .item-video, .frise-segment").removeClass("active");
+ $(".item-video[data-segment-id='" + segmentid + "'], .frise-segment[data-segment-id='" + segmentid + "']").addClass("active");
+ }
+
+ $(".frise")
+ .on("mouseover", ".frise-segment", hoverSegment)
+ .on("mouseout", ".frise-segment", highlightCurrentSegment)
+
+ $(".organize-segments")
+ .sortable({
stop : reorganizeMashup
- });
-
- $(".organize-segments").on("click", ".item-video", function(e) {
+ })
+ .on("mouseover", ".item-video", hoverSegment)
+ .on("mouseout", ".item-video", highlightCurrentSegment)
+ .on("click", ".item-video", function(e) {
var el = $(this),
segment = mashup.getAnnotationById(el.attr("data-segment-id"));
setMedia(mashup);
@@ -854,34 +903,33 @@
mashup.setCurrentTime(segment.begin);
}
return false;
- });
-
- $(".organize-segments").on("click", ".edit", function(e) {
+ })
+ .on("click", ".edit", function(e) {
var currentItem = $(this).parents(".item-video"),
media = project.getElement(currentItem.attr("data-media-id")),
segment = project.getElement(currentItem.attr("data-segment-id"));
currentSegment = segment;
setMedia(media);
return false;
- });
-
- $(".organize-segments").on("click", ".top", function(e){
+ })
+ .on("click", ".top", function(e){
var currentItem = $(this).parents(".item-video");
currentItem.insertBefore(currentItem.prev());
reorganizeMashup();
return false;
- });
-
- $(".organize-segments").on("click", ".bottom", function(e){
+ })
+ .on("click", ".bottom", function(e){
var currentItem = $(this).parents(".item-video");
currentItem.insertAfter(currentItem.next());
reorganizeMashup();
return false;
- });
-
- $(".organize-segments").on("click", ".delete", function(e){
+ })
+ .on("click", ".delete", function(e){
var id = $(this).parents(".item-video").attr("data-segment-id");
mashup.removeAnnotationById(id);
+ if (!mashup.segments.length) {
+ showEmpty();
+ }
return false;
});
@@ -972,4 +1020,11 @@
return false;
});
+ /* Changing Hashcut Title and description */
+
+ $("#hashcut-title").on("keyup change input paste", function() {
+ mashup.title = $(this).val();
+ $(".title-video-wrap a").text(mashup.title);
+ });
+
}