# HG changeset patch # User durandn # Date 1441813685 -7200 # Node ID 5b3afe8c559282a5f63911cdffa567f49371524d # Parent 5fe14e4bbac0d8338a09668896a0f73ead733a91 Adjustments on Markers: user can't post new marker if too close to another one + clicking the create button will create a "placeholder" marker to show where the marker will be posted diff -r 5fe14e4bbac0 -r 5b3afe8c5592 server/src/remie/static/remie/css/markers.css --- a/server/src/remie/static/remie/css/markers.css Thu Sep 10 16:20:36 2015 +0200 +++ b/server/src/remie/static/remie/css/markers.css Wed Sep 09 17:48:05 2015 +0200 @@ -109,6 +109,12 @@ width: 25px !important; z-index: 99999; } + +.Ldt-Markers-PlaceholderMarker .Ldt-Markers-MarkerBall{ + background-color: #ffffff !important; + border-color: #5a5a5a !important; +} + .Ldt-Markers-MarkerBall:hover, .Ldt-Markers-MarkerBall.selected { border-color: #5a5a5a !important; @@ -171,12 +177,19 @@ line-height: 5px; text-indent: -2px; } -.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton.Ldt-Markers-Create{ +.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton.Ldt-Markers-Create, +.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate { font-size: 45px; line-height: 20px; text-indent: -1px; } +.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate { + border-color: #999999; + background-color: #999999; + cursor: default; +} + .Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-RoundButton:hover { border-color: #5a5a5a; } diff -r 5fe14e4bbac0 -r 5b3afe8c5592 server/src/remie/static/remie/metadataplayer/Markers.css --- a/server/src/remie/static/remie/metadataplayer/Markers.css Thu Sep 10 16:20:36 2015 +0200 +++ b/server/src/remie/static/remie/metadataplayer/Markers.css Wed Sep 09 17:48:05 2015 +0200 @@ -56,6 +56,11 @@ line-height: 20px; } +.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate{ + background-color: #999999; + border-color: #797979 #444444 #222222 #696969; +} + .Ldt-Markers-Info{ height: 125px; width: 90%; @@ -162,4 +167,9 @@ .Ldt-Markers-RoundButton:hover, .Ldt-Markers-MarkerSend:hover, .Ldt-Markers-MarkerCancel:hover{ background-color: #e15581; border-color: #222222 #e87d9f #f0adc3 #68273c; +} + +.Ldt-Markers-RoundButton.Ldt-Markers-CannotCreate:hover{ + background-color: #999999; + border-color: #797979 #444444 #222222 #696969; } \ No newline at end of file diff -r 5fe14e4bbac0 -r 5b3afe8c5592 server/src/remie/static/remie/metadataplayer/Markers.js --- 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 @@ + '' + '
' + '
' + + '
+
' + '
+
' + '
-
' + '
' @@ -67,7 +72,12 @@ IriSP.Widgets.Markers.prototype.markerTemplate = '
' + '
' + - '
'; + '
'; + +IriSP.Widgets.Markers.prototype.markerPlaceholderTemplate = + '
' + + '
' + + '
'; IriSP.Widgets.Markers.prototype.infoTemplate = '{{^edit}}
{{marker_info}}
{{/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