--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/static/remie/metadataplayer/Markers.js Mon Aug 17 17:06:42 2015 +0200
@@ -0,0 +1,361 @@
+
+IriSP.Widgets.Markers = function(player, config) {
+ IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.Markers.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.Markers.prototype.defaults = {
+ annotation_type: "markers",
+ line_height: 8,
+ background: "#e0e0e0",
+ marker_color: "#ff80fc",
+ hover_color: "#e15581",
+ selected_color: "#74d600",
+ ball_radius: 4,
+ pause_on_write: true,
+ api_serializer: "ldt_annotate",
+ api_endpoint_template: "",
+ api_method_create: "POST",
+ api_method_editing: "PUT",
+ project_id: "",
+ creator_name: "",
+ after_send_timeout: 0,
+ close_after_send: false,
+};
+
+IriSP.Widgets.Markers.prototype.template =
+ '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">'
+ + '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>'
+ + '<div class="Ldt-Markers-Position"></div>'
+ + '</div>'
+ + '<div class="Ldt-Markers-Inputs">'
+ + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">'
+ + '<div class="Ldt-Markers-Create">+</div>'
+ + '<div class="Ldt-Markers-Info"></div>'
+ + '</div>'
+ + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">'
+ + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.wait_while_processing}}</div>'
+ + '</div>'
+ + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSuccess">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
+ + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>'
+ + '</div>'
+ + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
+ + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>'
+ + '</div>'
+ + '</div>';
+
+
+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>';
+
+IriSP.Widgets.Markers.prototype.infoTemplate =
+ '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' +
+ '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' +
+ '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' +
+ '<div class="Ldt-Markers-Buttons">' +
+ '<div class="Ldt-Markers-MarkerSend">{{send}}</div>' +
+ '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' +
+ '</div>' +
+ '</div>{{/edit}}'
+
+IriSP.Widgets.Markers.prototype.messages = {
+ en : {
+ send : "Send",
+ cancel : "Cancel",
+ wait_while_processing: "Please wait while your annotation is being processed...",
+ error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",
+ annotation_saved: "Thank you, your annotation has been saved.",
+ close_widget: "Close",
+ },
+ fr : {
+ send : "Envoyer",
+ cancel : "Annuler",
+ wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
+ error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
+ annotation_saved: "Merci, votre annotation a été enregistrée.",
+ close_widget: "Fermer",
+ }
+}
+
+IriSP.Widgets.Markers.prototype.draw = function(){
+ var _this = this;
+
+ this.renderTemplate();
+
+ this.markers = this.getWidgetAnnotations().filter(function(_ann) {
+ return ((_ann.getDuration() == 0) || (_ann.begin == _ann.end));
+ });
+ this.drawMarkers();
+
+ this.$.find(".Ldt-Markers-Create").click(function(){
+ _this.toggleCreateMarker();
+ })
+ this.showScreen("Main");
+ this.$.css({
+ margin: "1px 0",
+ height: this.line_height,
+ background: this.background
+ });
+
+ this.$.find(".Ldt-Markers-Close").click(function() {
+ _this.showScreen("Main");
+ });
+
+ this.onMediaEvent("timeupdate", "updatePosition");
+ this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));
+
+ this.editing = false;
+ this.selectedMarker = false;
+}
+
+
+IriSP.Widgets.Markers.prototype.updatePosition = function(_time) {
+ var _x = Math.floor( this.width * _time / this.media.duration);
+ this.$.find('.Ldt-Markers-Position').css({
+ left: _x + "px"
+ });
+};
+
+
+IriSP.Widgets.Markers.prototype.toggleCreateMarker = function(){
+ if(!this.editing){
+ this.editing = true
+ }
+ else {
+ this.editing = false
+ }
+ var _divHtml = "";
+ if (this.selectedMarker){
+ _divHtml = Mustache.to_html(this.infoTemplate, {
+ edit: this.editing,
+ marker_info: this.selectedMarker.description,
+ send: this.l10n.send,
+ cancel: this.l10n.cancel
+ })
+
+ this.$.find(".Ldt-Markers-Info").html(_divHtml);
+ this.$.find(".Ldt-Markers-MarkerCancel").click(function(){
+ _this.toggleCreateMarker();
+ })
+ }
+ else {
+ if (this.editing) {
+ _divHtml = Mustache.to_html(this.infoTemplate, {
+ edit: this.editing,
+ marker_info: "",
+ send: this.l10n.send,
+ cancel: this.l10n.cancel,
+ })
+ }
+ this.$.find(".Ldt-Markers-Info").html(_divHtml);
+ }
+
+ if(this.editing){
+ this.$.find(".Ldt-Markers-MarkerSend").click(this.functionWrapper("onSubmit"));
+ this.$.find(".Ldt-Markers-MarkerCancel").click(this.functionWrapper("toggleCreateMarker"));
+ this.$.find(".Ldt-Markers-MarkerTextArea").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
+ }
+};
+
+IriSP.Widgets.Markers.prototype.onDescriptionChange = function(){
+ var _field = this.$.find(".Ldt-Markers-MarkerTextArea"),
+ _contents = _field.val();
+ _field.css("border-color", !!_contents ? "#e87d9f" : "#ff0000");
+ if (!!_contents) {
+ _field.removeClass("empty");
+ } else {
+ _field.addClass("empty");
+ }
+ this.pauseOnWrite();
+ return !!_contents;
+};
+
+IriSP.Widgets.Markers.prototype.pauseOnWrite = function(){
+ if (this.pause_on_write && !this.media.getPaused()) {
+ this.media.pause();
+ }
+};
+
+IriSP.Widgets.Markers.prototype.showScreen = function(_screenName) {
+ this.$.find('.Ldt-Markers-Screen' + _screenName).show()
+ .siblings().hide();
+ if ((_screenName=="Main")&&(this.editing)){
+ this.toggleCreateMarker();
+ };
+}
+
+IriSP.Widgets.Markers.prototype.drawMarkers = function(){
+ this.$.remove("Ldt-Markers-Marker");
+ var _this = this,
+ _scale = this.width / this.source.getDuration(),
+ list_$ = this.$.find('.Ldt-Markers-List');
+
+ 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),
+ _el = IriSP.jQuery(_html);
+ _el.mouseover(function(){
+ if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
+ _el.children().css("background-color", _this.hover_color);
+ };
+ })
+ .mouseout(function(){
+ if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
+ _el.children().css("background-color", _this.marker_color);
+ };
+ })
+ .click(function(){
+ _this.showScreen("Main");
+ if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
+ list_$.find(".Ldt-Markers-MarkerBall").css("background-color", _this.marker_color)
+ _el.children().css("background-color", _this.selected_color)
+ _this.selectedMarker = _marker;
+ _divHtml = Mustache.to_html(_this.infoTemplate, {
+ edit: _this.editing,
+ marker_info: _marker.description,
+ send: _this.l10n.send,
+ cancel: _this.l10n.cancel
+ })
+
+ _this.$.find(".Ldt-Markers-Info").html(_divHtml);
+ if(_this.editing){
+ _this.$.find(".Ldt-Markers-MarkerSend").click(_this.functionWrapper("onSubmit"));
+ _this.$.find(".Ldt-Markers-MarkerCancel").click(_this.functionWrapper("toggleCreateMarker"));
+ }
+ }
+ else {
+ var _divHtml = ""
+ if (_this.editing){
+ _divHtml = Mustache.to_html(_this.infoTemplate, {
+ edit: _this.editing,
+ marker_info: "",
+ send: _this.l10n.send,
+ cancel: _this.l10n.cancel
+ });
+ }
+ _el.children().css("background-color", _this.hover_color);
+ _this.selectedMarker = false;
+ _this.$.find(".Ldt-Markers-Info").html(_divHtml);
+
+ if(_this.editing){
+ _this.$.find(".Ldt-Markers-MarkerSend").click(_this.functionWrapper("onSubmit"));
+ _this.$.find(".Ldt-Markers-MarkerCancel").click(_this.functionWrapper("toggleCreateMarker"));
+ }
+ }
+ })
+ .appendTo(list_$);
+ })
+}
+
+IriSP.Widgets.Markers.prototype.onSubmit = function(){
+
+ /* Si les champs obligatoires sont vides, on annule l'envoi */
+ if (!this.onDescriptionChange()) {
+ return false;
+ }
+
+ /* On pause la vidéo si elle est encore en train de tourner */
+ if (!this.media.getPaused()){
+ this.media.pause();
+ }
+
+ var _this = this,
+ _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
+ _url = Mustache.to_html(this.api_endpoint_template, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""});
+ if (this.selectedMarker){
+ var _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]})
+ _annotation = this.selectedMarker;
+ _annotation.source = _export
+ _annotation.description = this.$.find(".Ldt-Markers-MarkerTextArea").val(), /* Champ description */
+ _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
+ _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)); /* Si le Type d'Annotation n'existe pas, il est créé à la volée */
+ }
+ else {
+ var _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */
+ _annotation = new IriSP.Model.Annotation(false, _export); /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
+ _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
+ _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)); /* Si le Type d'Annotation n'existe pas, il est créé à la volée */
+ /* Si nous avons dû générer un ID d'annotationType à la volée... */
+ if (!_annotationTypes.length) {
+ /* Il ne faudra pas envoyer l'ID généré au serveur */
+ _annotationType.dont_send_id = true;
+ /* Il faut inclure le titre dans le type d'annotation */
+ _annotationType.title = this.annotation_type;
+ }
+
+ _annotation.setMedia(this.source.currentMedia.id); /* Id du média annoté */
+ _currentTime = this.media.getCurrentTime();
+ _annotation.setBegin(_currentTime); /* Timecode de la lecture de la video */
+ _annotation.setEnd(_currentTime); /* Timecode de fin du widget */
+ _annotation.setAnnotationType(_annotationType.id); /* Id du type d'annotation */
+ if (this.project_id != ""){
+ /* Champ id projet, seulement si on l'a renseigné dans la config */
+ _annotation.project_id = this.project_id;
+ }
+ _annotation.created = new Date(); /* Date de création de l'annotation */
+ _annotation.description = this.$.find(".Ldt-Markers-MarkerTextArea").val(); /* Champ description */
+ _annotation.creator = this.creator_name;
+ }
+ _annotation.project_id = this.project_id;
+
+ /*
+ * Nous remplissons les données de l'annotation générée à la volée
+ * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
+ * */
+
+ _exportedAnnotations.push(_annotation); /* Ajout de l'annotation à la liste à exporter */
+ _export.addList("annotation",_exportedAnnotations); /* Ajout de la liste à exporter à l'objet Source */
+
+ /* Envoi de l'annotation via AJAX au serveur ! */
+ IriSP.jQuery.ajax({
+ url: _url,
+ type: this.selectedMarker ? this.api_method_editing : this.api_method_create,
+ contentType: 'application/json',
+ data: _export.serialize(), /* L'objet Source est sérialisé */
+ success: function(_data) {
+ console.log(_data)
+ _this.showScreen('Success'); /* Si l'appel a fonctionné, on affiche l'écran "Annotation enregistrée" */
+ window.setTimeout(function(){
+ _this.showScreen("Main")
+ },
+ (_this.after_send_timeout || 5000));
+ _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
+ _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
+ _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
+ if (_this.pause_on_write && _this.media.getPaused()) {
+ _this.media.play();
+ }
+ _this.markers.push(_annotation);
+ _this.selectedMarker = _annotation;
+ _this.player.trigger("AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
+ _this.player.trigger("Markers.refresh");
+ _this.$.find(".Ldt-Markers-MarkerTextArea").val("")
+ },
+ error: function(_xhr, _error, _thrown) {
+ IriSP.log("Error when sending annotation", _thrown);
+ _export.getAnnotations().removeElement(_annotation, true);
+ _this.showScreen('Failure');
+ window.setTimeout(function(){
+ _this.showScreen("Main");
+ },
+ (_this.after_send_timeout || 5000));
+ }
+ });
+ this.showScreen('Sending');
+
+ return false;
+};
\ No newline at end of file
--- a/server/src/remie/templates/remie/iframe_markers.html Mon Aug 17 10:30:09 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_markers.html Mon Aug 17 17:06:42 2015 +0200
@@ -73,17 +73,12 @@
disable_search_btn: true,
disable_ctrl_f: true
},{
- type: "Segments",
- annotation_type: "découpage",
- line_height: 24,
- overlap: 1,
- no_tooltip: true,
- use_timerange: true,
-
- },{
type: "Markers",
annotation_type: "markers",
- line_height: 24
+ line_height: 24,
+ api_endpoint_template: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}",
+ creator_name : "{{current_user}}",
+ project_id: "{{project_id}}"
}
]
}