--- a/server/src/remie/static/remie/metadataplayer/Markers.js Thu Sep 10 16:20:36 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/Markers.js Wed Sep 09 17:48:05 2015 +0200
@@ -10,6 +10,7 @@
line_height: 8,
background: "#e0e0e0",
marker_color: "#ff80fc",
+ placeholder_color: "#ffffff",
hover_color: "#e15581",
selected_color: "#74d600",
ball_radius: 4,
@@ -24,7 +25,10 @@
project_id: "",
creator_name: "",
after_send_timeout: 0,
+ markers_gap: 2000,
close_after_send: false,
+ custom_send_button: false,
+ custom_cancel_button: false,
};
IriSP.Widgets.Markers.prototype.template =
@@ -34,6 +38,7 @@
+ '</div>'
+ '<div class="Ldt-Markers-Inputs">'
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">'
+ + '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{l10n.cannot_create}}">+</div>'
+ '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>'
+ '<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">-</div>'
+ '<div class="Ldt-Markers-Info"></div>'
@@ -67,7 +72,12 @@
IriSP.Widgets.Markers.prototype.markerTemplate =
'<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
'<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +
- '</div>';
+ '</div>';
+
+IriSP.Widgets.Markers.prototype.markerPlaceholderTemplate =
+ '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
+ '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +
+ '</div>';
IriSP.Widgets.Markers.prototype.infoTemplate =
'{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' +
@@ -90,6 +100,7 @@
annotation_saved: "Thank you, your annotation has been saved.",
delete_saved: "Thank you, your annotation has been deleted",
close_widget: "Close",
+ cannot_create: "Cannot create marker on this timecode"
},
fr : {
send : "Envoyer",
@@ -101,6 +112,7 @@
annotation_saved: "Merci, votre annotation a été enregistrée.",
delete_saved: "Merci, votre annotation a été supprimée",
close_widget: "Fermer",
+ cannot_create: "Impossible de créer un marqueur sur ce timecode"
}
}
@@ -115,8 +127,9 @@
this.drawMarkers();
this.$.find(".Ldt-Markers-Create").click(this.functionWrapper("onCreateClick"));
- this.$.find(".Ldt-Markers-Delete").hide();
this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick"));
+ this.$.find(".Ldt-Markers-RoundButton").hide()
+ this.updateCreateButtonState(this.media.getCurrentTime())
this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(this.functionWrapper("sendDelete"));
this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function(){
_this.showScreen("Main");
@@ -135,8 +148,10 @@
});
this.onMediaEvent("timeupdate", "updatePosition");
+ this.onMediaEvent("timeupdate", "updateCreateButtonState");
this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));
+ this.newMarkerTimeCode = 0;
this.selectedMarker = false;
}
@@ -146,11 +161,32 @@
this.$.find('.Ldt-Markers-Position').css({
left: _x + "px"
});
-};
+}
+
+IriSP.Widgets.Markers.prototype.updateCreateButtonState = function(_time){
+ _this = this
+ var can_create = this.markers.every(function(_marker){
+ return ((_time < (_marker.begin-_this.markers_gap))||(_time > (_marker.begin+_this.markers_gap)))
+ });
+ if (can_create){
+ if ((this.$.find(".Ldt-Markers-Create").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden"))){
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ this.$.find(".Ldt-Markers-Create").show();
+ }
+ }
+ else {
+ if ((this.$.find(".Ldt-Markers-CannotCreate").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden"))){
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ this.$.find(".Ldt-Markers-CannotCreate").show();
+ }
+ }
+}
IriSP.Widgets.Markers.prototype.onCreateClick = function(){
this.pauseOnWrite();
if (!this.selectedMarker){
+ this.newMarkerCurrentTime = this.media.getCurrentTime();
+ this.showPlaceholder(this.media.getCurrentTime());
this.startEdit();
}
}
@@ -167,40 +203,13 @@
}
}
-IriSP.Widgets.Markers.prototype.sendDelete = function(){
- _this = this;
- _url = Mustache.to_html(this.api_endpoint_template_delete, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""});
- IriSP.jQuery.ajax({
- url: _url,
- type: this.api_method_delete,
- contentType: 'application/json',
- success: function(_data) {
- _this.showScreen('DeleteSuccess'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
- window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
- if (_this.pause_on_write && _this.media.getPaused()) {
- _this.media.play();
- }
- _this.markers.removeElement(_this.selectedMarker);
- _this.selectedMarker = false
- _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
- _this.player.trigger("Markers.refresh");
- },
- error: function(_xhr, _error, _thrown) {
- IriSP.log("Error when sending annotation", _thrown);
- _this.showScreen('Failure');
- window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
- }
- });
- this.showScreen("Sending")
-}
-
IriSP.Widgets.Markers.prototype.startEdit = function(){
if (this.selectedMarker){
_divHtml = Mustache.to_html(this.infoTemplate, {
edit: true,
marker_info: this.selectedMarker.description,
- send: this.l10n.send,
- cancel: this.l10n.cancel
+ send: this.custom_send_button? this.custom_send_button : this.l10n.send,
+ cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel
})
}
else {
@@ -215,8 +224,8 @@
this.$.find(".Ldt-Markers-MarkerSend").click(this.functionWrapper("onSubmit"));
this.$.find(".Ldt-Markers-MarkerCancel").click(this.functionWrapper("cancelEdit"));
this.$.find(".Ldt-Markers-MarkerTextArea").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
+ this.$.find(".Ldt-Markers-RoundButton").hide();
this.$.find(".Ldt-Markers-Delete").show();
- this.$.find(".Ldt-Markers-Create").hide();
this.editing = true;
}
@@ -226,17 +235,17 @@
_divHtml = Mustache.to_html(this.infoTemplate, {
edit: false,
marker_info: this.selectedMarker.description,
- send: this.l10n.send,
- cancel: this.l10n.cancel,
})
this.$.find(".Ldt-Markers-Info").html(_divHtml);
this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit"));
}
else {
// Clic sur "cancel" pendant la création d'un marqueur = retour à l'état initial
+ this.hidePlaceholder();
this.$.find(".Ldt-Markers-Info").html("");
- this.$.find(".Ldt-Markers-Delete").hide();
- this.$.find(".Ldt-Markers-Create").show();
+ this.$.find(".Ldt-Markers-RoundButton").hide()
+ this.$.find(".Ldt-Markers-Create").show()
+ this.updateCreateButtonState(this.media.getCurrentTime())
}
this.editing = false;
}
@@ -272,25 +281,48 @@
}
}
+IriSP.Widgets.Markers.prototype.hidePlaceholder = function(){
+ this.$.find(".Ldt-Markers-PlaceholderMarker").remove();
+}
+
+IriSP.Widgets.Markers.prototype.showPlaceholder = function(_time){
+ var _scale = this.width / this.source.getDuration(),
+ _left = _time * _scale -1,
+ _data = {
+ left: _left,
+ height: this.line_height-1,
+ ball_top: (this.ball_radius*2 > this.line_height) ? 0 : ((this.line_height - this.ball_radius*2)/2)-1,
+ ball_radius: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius,
+ ball_diameter: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius*2,
+ ball_left: -this.ball_radius,
+ marker_color: this.placeholder_color
+ },
+ _html = Mustache.to_html(this.markerPlaceholderTemplate, _data),
+ _el = IriSP.jQuery(_html);
+
+ list_$ = this.$.find(".Ldt-Markers-List");
+ _el.appendTo(list_$);
+}
+
IriSP.Widgets.Markers.prototype.drawMarkers = function(){
- this.$.remove("Ldt-Markers-Marker");
- this.$.find(".Ldt-Markers-List").html("")
var _this = this,
_scale = this.width / this.source.getDuration(),
list_$ = this.$.find('.Ldt-Markers-List');
-
+
+ this.$.remove("Ldt-Markers-Marker");
+ list_$.html("");
this.markers.forEach(function(_marker){
- var _left = _marker.begin * _scale -1;
- _data = {
- left: _left,
- height: _this.line_height-1,
- ball_top: (_this.ball_radius*2 > _this.line_height) ? 0 : ((_this.line_height - _this.ball_radius*2)/2)-1,
- ball_radius: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius,
- ball_diameter: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius*2,
- ball_left: -_this.ball_radius,
- marker_color: ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))? _this.selected_color : _this.marker_color
- }
- var _html = Mustache.to_html(_this.markerTemplate, _data),
+ var _left = _marker.begin * _scale -1,
+ _data = {
+ left: _left,
+ height: _this.line_height-1,
+ ball_top: (_this.ball_radius*2 > _this.line_height) ? 0 : ((_this.line_height - _this.ball_radius*2)/2)-1,
+ ball_radius: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius,
+ ball_diameter: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius*2,
+ ball_left: -_this.ball_radius,
+ marker_color: ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))? _this.selected_color : _this.marker_color
+ },
+ _html = Mustache.to_html(_this.markerTemplate, _data),
_el = IriSP.jQuery(_html);
if ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id)){
@@ -310,6 +342,7 @@
.click(function(){
_this.showScreen("Main");
_this.cancelEdit();
+ _this.hidePlaceholder();
if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
// if there either is no marker selected or we click a different marker
list_$.find(".Ldt-Markers-MarkerBall").css("background-color", _this.marker_color)
@@ -321,14 +354,12 @@
_divHtml = Mustache.to_html(_this.infoTemplate, {
edit: false,
marker_info: _marker.description,
- send: _this.l10n.send,
- cancel: _this.l10n.cancel
})
_this.$.find(".Ldt-Markers-Info").html(_divHtml);
_this.$.find(".Ldt-Markers-MarkerDescription").click(_this.functionWrapper("startEdit"));
+ _this.$.find(".Ldt-Markers-RoundButton").hide();
_this.$.find(".Ldt-Markers-Delete").show();
- _this.$.find(".Ldt-Markers-Create").hide();
}
else {
@@ -338,9 +369,9 @@
_this.selectedMarker = false;
list_$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false);
_this.$.find(".Ldt-Markers-Info").html(_divHtml);
+ _this.$.find(".Ldt-Markers-RoundButton").hide();
_this.$.find(".Ldt-Markers-Create").show();
- _this.$.find(".Ldt-Markers-Delete").hide();
-
+ _this.updateCreateButtonState(_this.media.getCurrentTime())
}
if (_this.selectedMarker) {
@@ -393,9 +424,8 @@
_annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
if (!this.selectedMarker){
- _currentTime = this.media.getCurrentTime();
- _annotation.setBegin(_currentTime); /* Timecode de la lecture de la video */
- _annotation.setEnd(_currentTime); /* Timecode de fin du widget */
+ _annotation.setBegin(this.newMarkerCurrentTime);
+ _annotation.setEnd(this.newMarkerCurrentTime);
}
_annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
if (this.project_id != ""){
@@ -448,4 +478,31 @@
this.showScreen('Sending');
return false;
-};
\ No newline at end of file
+};
+
+IriSP.Widgets.Markers.prototype.sendDelete = function(){
+ _this = this;
+ _url = Mustache.to_html(this.api_endpoint_template_delete, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""});
+ IriSP.jQuery.ajax({
+ url: _url,
+ type: this.api_method_delete,
+ contentType: 'application/json',
+ success: function(_data) {
+ _this.showScreen('DeleteSuccess'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
+ window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
+ if (_this.pause_on_write && _this.media.getPaused()) {
+ _this.media.play();
+ }
+ _this.markers.removeElement(_this.selectedMarker);
+ _this.selectedMarker = false
+ _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+ _this.player.trigger("Markers.refresh");
+ },
+ error: function(_xhr, _error, _thrown) {
+ IriSP.log("Error when sending annotation", _thrown);
+ _this.showScreen('Failure');
+ window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
+ }
+ });
+ this.showScreen("Sending")
+}
\ No newline at end of file