# HG changeset patch
# User veltr
# Date 1339165312 -7200
# Node ID f19428838d3bcec0f3866572f543d3bf96c2226d
# Parent  a434e6431d0b570574153c5e48f429d770f69c11
Added Annotation pushing

diff -r a434e6431d0b -r f19428838d3b .pydevproject
--- a/.pydevproject	Fri Jun 08 11:31:50 2012 +0200
+++ b/.pydevproject	Fri Jun 08 16:21:52 2012 +0200
@@ -1,7 +1,7 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<?eclipse-pydev version="1.0"?>
-
-<pydev_project>
-<pydev_property name="org.python.pydev.PYTHON_PROJECT_INTERPRETER">Default</pydev_property>
-<pydev_property name="org.python.pydev.PYTHON_PROJECT_VERSION">python 2.7</pydev_property>
-</pydev_project>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?eclipse-pydev version="1.0"?>
+
+<pydev_project>
+<pydev_property name="org.python.pydev.PYTHON_PROJECT_INTERPRETER">Default</pydev_property>
+<pydev_property name="org.python.pydev.PYTHON_PROJECT_VERSION">python 2.7</pydev_property>
+</pydev_project>
diff -r a434e6431d0b -r f19428838d3b crea/integration/data/return-data.json
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/data/return-data.json	Fri Jun 08 16:21:52 2012 +0200
@@ -0,0 +1,25 @@
+{
+    "meta": {
+        "creator": "admin",
+        "created": "Tue May 29 2012 18:05:31 GMT+0200 (Romance Daylight Time)"
+    },
+    "annotations": [
+        {
+            "begin": 63000,
+            "end": 63000,
+            "content": {
+                "data": "green laughing",
+                "audio": {
+                    "src": "mic",
+                    "mimetype": "audio/mp3",
+                    "href": "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/r_20120606191048270"
+                }
+            },
+            "tags": ["green", "laughing"],
+            "media": "au-clair-de-la-lune",
+            "type_title": "Musitag",
+            "type": "musitag",
+            "id": "just-added"
+        }
+    ]
+}
\ No newline at end of file
diff -r a434e6431d0b -r f19428838d3b crea/integration/generator.html
--- a/crea/integration/generator.html	Fri Jun 08 11:31:50 2012 +0200
+++ b/crea/integration/generator.html	Fri Jun 08 16:21:52 2012 +0200
@@ -17,7 +17,7 @@
     
     var _directory = new IriSP.Model.Directory(),
         _source = _directory.newLocalSource({
-            serializer: IriSP.serializers.ldt
+            serializer: IriSP.serializers.ldt_annotate
         }),
         _mediaList = new IriSP.Model.List(_directory),
         _annotationList = new IriSP.Model.List(_directory),
diff -r a434e6431d0b -r f19428838d3b crea/integration/metadataplayer/Controller.css
--- a/crea/integration/metadataplayer/Controller.css	Fri Jun 08 11:31:50 2012 +0200
+++ b/crea/integration/metadataplayer/Controller.css	Fri Jun 08 16:21:52 2012 +0200
@@ -1,7 +1,7 @@
 /* Player Widget */
 
 .Ldt-Ctrl {
-  width: 45px; height: 50px;
+  width: 45px; height: 50px; cursor: pointer;
 }
 
 .Ldt-Ctrl-Left {
diff -r a434e6431d0b -r f19428838d3b crea/integration/metadataplayer/LdtPlayer-core.js
--- a/crea/integration/metadataplayer/LdtPlayer-core.js	Fri Jun 08 11:31:50 2012 +0200
+++ b/crea/integration/metadataplayer/LdtPlayer-core.js	Fri Jun 08 16:21:52 2012 +0200
@@ -2282,7 +2282,8 @@
                     begin: _data.begin.milliseconds,
                     end: _data.end.milliseconds,
                     content: {
-                        data: _data.description
+                        data: _data.description,
+                        audio: _data.audio
                     },
                     tags: _data.getTagTexts(),
                     media: _source.unNamespace(_data.getMedia().id),
@@ -2348,6 +2349,9 @@
             _ann.setBegin(_anndata.begin);
             _ann.setEnd(_anndata.end);
             _ann.creator = _data.meta.creator;
+            if (typeof _anndata.content.audio !== "undefined" && _anndata.content.audio.href) {
+                _ann.audio = _anndata.content.audio;
+            }
             _source.getAnnotations().push(_ann);
         }
     }
diff -r a434e6431d0b -r f19428838d3b crea/integration/metadataplayer/MusitagAnnotations.js
--- a/crea/integration/metadataplayer/MusitagAnnotations.js	Fri Jun 08 11:31:50 2012 +0200
+++ b/crea/integration/metadataplayer/MusitagAnnotations.js	Fri Jun 08 16:21:52 2012 +0200
@@ -27,6 +27,7 @@
 
 IriSP.Widgets.MusitagAnnotations.prototype.draw = function() {
     this.renderTemplate();
+    this.bindPopcorn("IriSP.MusitagAnnotations.redraw","redraw");
     this.$main = this.$.find(".Musitag-Annotations-Main");
     var _this = this;
     this.jwplayer = jwplayer("Musitag-Annotations-Audioplayer");
diff -r a434e6431d0b -r f19428838d3b crea/integration/metadataplayer/MusitagAnnotator.css
--- a/crea/integration/metadataplayer/MusitagAnnotator.css	Fri Jun 08 11:31:50 2012 +0200
+++ b/crea/integration/metadataplayer/MusitagAnnotator.css	Fri Jun 08 16:21:52 2012 +0200
@@ -55,3 +55,6 @@
     background-position: 0 -56px;
 }
 
+.Musitag-Annotator-TextMessage {
+    text-align: center; margin: 20px 200px; font-size: 40px;
+}
diff -r a434e6431d0b -r f19428838d3b crea/integration/metadataplayer/MusitagAnnotator.js
--- a/crea/integration/metadataplayer/MusitagAnnotator.js	Fri Jun 08 11:31:50 2012 +0200
+++ b/crea/integration/metadataplayer/MusitagAnnotator.js	Fri Jun 08 16:21:52 2012 +0200
@@ -7,11 +7,20 @@
 IriSP.Widgets.MusitagAnnotator.prototype.defaults = {
     min_left: -90,
     max_right: 900,
-    width: 870
+    width: 870,
+    record_swf: "",
+    show_play_arrow: false,
+    api_serializer: "ldt_annotate",
+    api_endpoint_template: "",
+    api_method: "PUT",
+    close_widget_timeout: 5000,
+    annotation_type: "Musitag",
+    creator_name: "musitag"
 };
 
 IriSP.Widgets.MusitagAnnotator.prototype.template =
     '<div class="Musitag-Annotator-PositionBar"></div><div class="Musitag-Annotator-Main">'
+    + '<div class="Musitag-Annotator-MainScreen">'
     + '<div class="Musitag-Annotator-section"><h2>1</h2>'
     + '    <h3>Choisis<br />une couleur</h3>'
     + '    <div class="Musitag-Annotator-selector">'
@@ -70,8 +79,8 @@
     + '    <h3>Enregistre<br />ta voix</h3>'
     + '    <div class="Musitag-Annotator-record">'
     
-    + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="140" id="record_mic" align="middle">'
-    + '        <param name="movie" value="../../script/record_mic/record_mic.swf" />'
+    + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160" id="record_mic" align="middle">'
+    + '        <param name="movie" value="{{record_swf}}" />'
     + '        <param name="quality" value="high" />'
     + '        <param name="bgcolor" value="#ffffff" />'
     + '        <param name="play" value="true" />'
@@ -83,12 +92,12 @@
     + '        <param name="salign" value="" />'
     + '        <param name="allowScriptAccess" value="always" />'
     + '        <param name="allowFullScreen" value="true" />'
-    + '        <param name="flashvars" value="playVisible=true">'
-    + '        <embed src="../../script/record_mic/record_mic.swf" quality="high" bgcolor="#ffffff"'
-    + '             width="220" height="140" name="ExternalInterfaceExample" align="middle"'
+    + '        <param name="flashvars" value="playVisible={{show_play_arrow}}">'
+    + '        <embed src="{{record_swf}}"" quality="high" bgcolor="#ffffff"'
+    + '             width="220" height="160" name="ExternalInterfaceExample" align="middle"'
     + '             play="true" loop="false" quality="high" allowScriptAccess="always" '
     + '             type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
-    + '             flashvars="playVisible=true"'
+    + '             flashvars="playVisible={{show_play_arrow}}"'
     + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
     + '        </embed>'
     + '    </object>'
@@ -109,6 +118,9 @@
     + '    </div>'
     + '</div>'
     + '<div class="Musitag-Annotator-close"></div>'
+    + '</div><div class="Musitag-Annotator-EndScreen Musitag-Annotator-TextMessage">Ton Musitag a bien été enregistré :-)</div>'
+    + '<div class="Musitag-Annotator-ErrorScreen Musitag-Annotator-TextMessage">Nous n\'avons pas réussi à envoyer ton Musitag :-(</div>'
+    + '<div class="Musitag-Annotator-WaitScreen Musitag-Annotator-TextMessage">Nous sommes en train d\'envoyer ton Musitag</div>'
     + '</div></div>';
 
 IriSP.Widgets.MusitagAnnotator.prototype.draw = function() {
@@ -147,12 +159,14 @@
     });
     
     this.$.find('.Musitag-Annotator-Note').click(function() {
-       _this.recorder.stopRecord();
+        if (_this.checkAnnotation) {
+            _this.recorder.stopRecord();
+            _this.sendAnnotation();
+        }
     });
     
     window.setAudioUrl = function(_url) {
         _this.annotation.audio_url = _url;
-        console.log(_url);
     }
 }
 
@@ -168,12 +182,20 @@
     return _res;
 }
 
+IriSP.Widgets.MusitagAnnotator.prototype.showScreen = function(_screenName) {
+    this.$.find('.Musitag-Annotator-' + _screenName + 'Screen').show()
+        .siblings().hide();
+}
+
 IriSP.Widgets.MusitagAnnotator.prototype.show = function() {
+    this.player.popcorn.pause();
     this.$.show();
+    this.showScreen('Main');
     this.$.find('.Musitag-Annotator-tagInSelector').removeClass("down");
     this.$.find(".Musitag-Annotator-tagInSend .Musitag-color").attr("class","Musitag-color");
     this.$.find(".Musitag-Annotator-tagInSend .Musitag-emoticon").attr("class","Musitag-emoticon hidden");
     this.annotation = {
+        timecode: Math.floor(this.player.popcorn.currentTime() * 1000),
         audio_url: false,
         emoticon: false,
         color: false
@@ -188,3 +210,64 @@
         _this.$.hide();
     });
 }
+
+IriSP.Widgets.MusitagAnnotator.prototype.sendAnnotation = function() {
+    var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager);
+        _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}),
+        _annotation = new IriSP.Model.Annotation(false, _export),
+        _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type),
+        _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)),
+        _color = new IriSP.Model.Tag(false, _export),
+        _emoticon = new IriSP.Model.Tag(false, _export),
+        _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId});
+    
+    _color.title = this.annotation.color;
+    _emoticon.title = this.annotation.emoticon;
+
+    _annotationType.title = this.annotation_type;
+    _annotation.setBegin(this.annotation.timecode);
+    _annotation.setEnd(this.annotation.timecode);
+    _annotation.setMedia(this.source.currentMedia.id);
+    _annotation.setAnnotationType(_annotationType.id);
+    _annotation.created = new Date();
+    _annotation.description = this.annotation.color + " " + this.annotation.emoticon;
+    _annotation.setTags([_color.id, _emoticon.id]);
+    
+    if (this.annotation.audio_url) {
+        _annotation.audio = {
+            src: "mic",
+            mimetype: "audio/mp3",
+            href: this.annotation.audio_url
+        };
+    }
+    
+    _export.creator = this.creator_name;
+    _export.created = new Date();
+    _exportedAnnotations.push(_annotation);
+    _export.addList("annotation",_exportedAnnotations);
+    
+    var _this = this;
+    IriSP.jQuery.ajax({
+        url: _url,
+        type: this.api_method,
+        contentType: 'application/json',
+        data: _export.serialize(),
+        success: function(_data) {
+            _this.showScreen('End');
+            window.setTimeout(_this.functionWrapper("hide"),_this.close_widget_timeout);
+            _export.getAnnotations().removeElement(_annotation, true);
+            _export.deSerialize(_data);
+            _this.source.merge(_export);
+            _this.player.popcorn.trigger("IriSP.MusitagAnnotations.redraw");
+        },
+        error: function(_xhr, _error, _thrown) {
+            IriSP.log("Error when sending annotation", _thrown);
+            _this.showScreen('Error');
+            window.setTimeout(function(){
+                _this.showScreen("Main");
+            },
+            _this.close_widget_timeout);
+        }
+    });
+    this.showScreen('Wait');
+}
diff -r a434e6431d0b -r f19428838d3b crea/integration/player.html
--- a/crea/integration/player.html	Fri Jun 08 11:31:50 2012 +0200
+++ b/crea/integration/player.html	Fri Jun 08 16:21:52 2012 +0200
@@ -71,7 +71,10 @@
                 },
                 {
                     type: "MusitagAnnotator",
-                    container: "player-annotator"
+                    container: "player-annotator",
+                    record_swf: "../../script/record_mic/record_mic.swf",
+                    api_endpoint_template: "data/return-data.json",
+                    api_method: "POST"
                 }
             ]
         },
diff -r a434e6431d0b -r f19428838d3b web/tralalere/static/tralalere/metadataplayer/Controller.css
--- a/web/tralalere/static/tralalere/metadataplayer/Controller.css	Fri Jun 08 11:31:50 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/Controller.css	Fri Jun 08 16:21:52 2012 +0200
@@ -1,7 +1,7 @@
 /* Player Widget */
 
 .Ldt-Ctrl {
-  width: 45px; height: 50px;
+  width: 45px; height: 50px; cursor: pointer;
 }
 
 .Ldt-Ctrl-Left {
diff -r a434e6431d0b -r f19428838d3b web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js
--- a/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js	Fri Jun 08 11:31:50 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js	Fri Jun 08 16:21:52 2012 +0200
@@ -1902,26 +1902,28 @@
 
 /** jwplayer player wrapper */
 IriSP.PopcornReplacement.jwplayer = function(container, options) {
-  /* appel du parent pour initialiser les structures communes à tous les players */
-  IriSP.PopcornReplacement.player.call(this, container, options);
+    /* appel du parent pour initialiser les structures communes à tous les players */
+    IriSP.PopcornReplacement.player.call(this, container, options);
   
-  this.media.duration = options.duration; /* optional */
+    this.media.duration = options.duration; /* optional */
+ 
+    var _player = jwplayer(this.container);
   
   /* Définition des fonctions de l'API -  */
-  this.playerFns = {
-    play: function() { return jwplayer(this.container).play(); },
-    pause: function() { return jwplayer(this.container).pause(); },
-    getPosition: function() { return jwplayer(this.container).getPosition(); },
-    seek: function(pos) { return jwplayer(this.container).seek(pos); },
-    getMute: function() { return jwplayer(this.container).getMute() },
-    setMute: function(p) { return jwplayer(this.container).setMute(p); },
-    getVolume: function() { return jwplayer(this.container).getVolume() / 100; },
-    setVolume: function(p) { return jwplayer(this.container).setVolume(Math.floor(100*p)); }
-  }
+    this.playerFns = {
+        play: function() { return _player.play(); },
+        pause: function() { return _player.pause(); },
+        getPosition: function() { return _player.getPosition(); },
+        seek: function(pos) { return _player.seek(pos); },
+        getMute: function() { return _player.getMute() },
+        setMute: function(p) { return _player.setMute(p); },
+        getVolume: function() { return _player.getVolume() / 100; },
+        setVolume: function(p) { return _player.setVolume(Math.floor(100*p)); }
+    }
 
-  options.events = this.callbacks;
+    options.events = this.callbacks;
 
-  jwplayer(this.container).setup(options);
+    _player.setup(options);
 };
 
 IriSP.PopcornReplacement.jwplayer.prototype = new IriSP.PopcornReplacement.player("", {});
@@ -2167,8 +2169,8 @@
                 if (typeof _data.meta["dc:source"] !== "undefined" && typeof _data.meta["dc:source"].content !== "undefined") {
                     _res.source = JSON.parse(_data.meta["dc:source"].content);
                 }
-                if (typeof _data.audio !== "undefined" && _data.audio.href) {
-                    _res.audio = _data.audio;
+                if (typeof _data.content.audio !== "undefined" && _data.content.audio.href) {
+                    _res.audio = _data.content.audio;
                 }
                 return _res;
             },
@@ -2179,7 +2181,8 @@
                     end : _data.end.milliseconds,
                     content : {
                         title : _data.title,
-                        description : _data.description
+                        description : _data.description,
+                        audio : _data.audio
                     },
                     media : _source.unNamespace(_data.media.id),
                     meta : {
@@ -2192,8 +2195,7 @@
                        return {
                            "id-ref" : _source.unNamespace(_id)
                        } 
-                    }),
-                    audio : _data.audio
+                    })
                 }
             }
         },
@@ -2280,7 +2282,8 @@
                     begin: _data.begin.milliseconds,
                     end: _data.end.milliseconds,
                     content: {
-                        data: _data.description
+                        data: _data.description,
+                        audio: _data.audio
                     },
                     tags: _data.getTagTexts(),
                     media: _source.unNamespace(_data.getMedia().id),
@@ -2346,6 +2349,9 @@
             _ann.setBegin(_anndata.begin);
             _ann.setEnd(_anndata.end);
             _ann.creator = _data.meta.creator;
+            if (typeof _anndata.content.audio !== "undefined" && _anndata.content.audio.href) {
+                _ann.audio = _anndata.content.audio;
+            }
             _source.getAnnotations().push(_ann);
         }
     }
diff -r a434e6431d0b -r f19428838d3b web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.css
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.css	Fri Jun 08 11:31:50 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.css	Fri Jun 08 16:21:52 2012 +0200
@@ -17,6 +17,14 @@
     background-position: 0 -45px;
 }
 
+.Musitag-Annotations-Balloon.pause {
+    background-position: -66px 0;
+}
+
+.Musitag-Annotations-Balloon.pause:hover {
+    background-position: -66px -45px;
+}
+
 .Musitag-Annotations-tag:first-child .Musitag-container-50 {
     z-index: 20;
 }
@@ -79,4 +87,8 @@
 
 .Musitag-Annotations-tag:first-child:nth-last-child(10) ~ .Musitag-Annotations-tag {
     margin: -29px 0 0;
-}
\ No newline at end of file
+}
+
+.Musitag-Annotations-Audioplayer {
+    position: absolute; width: 1px; height: 1px;
+}
diff -r a434e6431d0b -r f19428838d3b web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Fri Jun 08 11:31:50 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Fri Jun 08 16:21:52 2012 +0200
@@ -4,15 +4,66 @@
 
 IriSP.Widgets.MusitagAnnotations.prototype = new IriSP.Widgets.Widget();
 
+IriSP.Widgets.MusitagAnnotations.prototype.template =
+    '<div class="Musitag-Annotations-Main"></div><div id="Musitag-Annotations-Audioplayer"></div>';
+    
+IriSP.Widgets.MusitagAnnotations.prototype.annotation_template =
+    '<div class="Musitag-Annotations-tag" begin-time="{{begin}}">'
+    + '<div class="Musitag-container-50">'
+    + '<div class="Musitag-shadow"></div>'
+    + '<div class="Musitag-color Musitag-{{color_tag}}"></div>'
+    + '<div class="Musitag-emoticon Musitag-{{emoticon_tag}}"></div>'
+    + '</div>{{#audio}}<div class="Musitag-Annotations-Balloon" audio-url="{{audio.href}}"></div>{{/audio}}'
+    + '</div>';
+
 IriSP.Widgets.MusitagAnnotations.prototype.defaults = {
     annotation_type: 'musitag',
     columns: 15,
     max_by_column: 10,
     emoticons: ['happy', 'unhappy', 'laughing', 'surprised'],
-    colors: ['red', 'yellow', 'green', 'blue']
+    colors: ['red', 'yellow', 'green', 'blue'],
+    rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"
 };
 
 IriSP.Widgets.MusitagAnnotations.prototype.draw = function() {
+    this.renderTemplate();
+    this.bindPopcorn("IriSP.MusitagAnnotations.redraw","redraw");
+    this.$main = this.$.find(".Musitag-Annotations-Main");
+    var _this = this;
+    this.jwplayer = jwplayer("Musitag-Annotations-Audioplayer");
+    this.jwplayer.setup({
+        flashplayer: IriSP.getLib("jwPlayerSWF"),
+        width: 1,
+        height: 1,
+        provider: "rtmp",
+        events: {
+            onPlay: function() {
+                _this.setPlayState(true);
+            },
+            onPause: function() {
+                _this.setPlayState(false);
+            },
+            onIdle: function() {
+                _this.setPlayState(false);
+            }
+        }
+    });
+    this.current_audio = false;
+    this.playing = false;
+    this.redraw();
+}
+
+IriSP.Widgets.MusitagAnnotations.prototype.setPlayState = function(_playState) {
+    this.playing = _playState;
+    if (_playState) {
+        this.$main.find(".Musitag-Annotations-Balloon").addClass("pause");
+    } else {
+        this.$main.find(".Musitag-Annotations-Balloon").removeClass("pause");
+    }
+}
+
+IriSP.Widgets.MusitagAnnotations.prototype.redraw = function() {
+    
     var _html = '',
         _annotations = this.getWidgetAnnotations(),
         _duration = this.source.getDuration().milliseconds,
@@ -47,25 +98,40 @@
         }
         _html += '<div class="Musitag-Annotations-column">';
         _html += _column.map(function(_annotation) {
-            return '<div class="Musitag-Annotations-tag" begin-time="' + _annotation.begin + '">'
-                + '<div class="Musitag-container-50">'
-                + '<div class="Musitag-shadow"></div>'
-                + '<div class="Musitag-color Musitag-' + _annotation.color_tag + '"></div>'
-                + '<div class="Musitag-emoticon Musitag-' + _annotation.emoticon_tag + '"></div>'
-                + '</div>'
-                + ( typeof _annotation.audio !== "undefined" && _annotation.audio.href ? '<div class="Musitag-Annotations-Balloon"></div>' : '' )
-                + '</div>';
+            return Mustache.to_html(_this.annotation_template, _annotation);
         }).join('');
         _html += '</div>';
     }
-    this.$.html(_html);
-    this.$.find('.Musitag-Annotations-tag .Musitag-container-50').click(function() {
+    this.$main.html(_html);
+    this.$main.find('.Musitag-Annotations-tag .Musitag-container-50').click(function() {
         var _el = IriSP.jQuery(this).parent();
         _this.player.popcorn.currentTime(_el.attr("begin-time") / 1000);
     });
-    this.$.find('.Musitag-Annotations-tag').mouseover(function() {
+    this.$main.find('.Musitag-Annotations-tag').mouseover(function() {
         var _el = IriSP.jQuery(this);
         _this.$.find('.Musitag-Annotations-Balloon').hide();
         _el.find('.Musitag-Annotations-Balloon').show();
     });
-}
\ No newline at end of file
+    this.$main.find('.Musitag-Annotations-Balloon').click(function() {
+        var _el = IriSP.jQuery(this),
+            _audiofile = _el.attr("audio-url").replace(_this.rtmp_streamer,"");
+        if (_this.playing) {
+            _this.jwplayer.pause();
+            _this.loadAudio(_audiofile);
+        } else {
+            _this.loadAudio(_audiofile);
+            _this.jwplayer.play();
+            _this.setPlayState(true);
+        }
+    });
+}
+
+IriSP.Widgets.MusitagAnnotations.prototype.loadAudio = function(_audiofile) {
+    if (this.current_audio !== _audiofile) {
+        this.jwplayer.load({
+            file: _audiofile,
+            streamer: this.rtmp_streamer
+        });
+        this.current_audio = _audiofile;
+    }
+}
diff -r a434e6431d0b -r f19428838d3b web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css	Fri Jun 08 11:31:50 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css	Fri Jun 08 16:21:52 2012 +0200
@@ -55,3 +55,6 @@
     background-position: 0 -56px;
 }
 
+.Musitag-Annotator-TextMessage {
+    text-align: center; margin: 20px 200px; font-size: 40px;
+}
diff -r a434e6431d0b -r f19428838d3b web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js	Fri Jun 08 11:31:50 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js	Fri Jun 08 16:21:52 2012 +0200
@@ -7,11 +7,20 @@
 IriSP.Widgets.MusitagAnnotator.prototype.defaults = {
     min_left: -90,
     max_right: 900,
-    width: 870
+    width: 870,
+    record_swf: "",
+    show_play_arrow: false,
+    api_serializer: "ldt_annotate",
+    api_endpoint_template: "",
+    api_method: "PUT",
+    close_widget_timeout: 5000,
+    annotation_type: "Musitag",
+    creator_name: "musitag"
 };
 
 IriSP.Widgets.MusitagAnnotator.prototype.template =
     '<div class="Musitag-Annotator-PositionBar"></div><div class="Musitag-Annotator-Main">'
+    + '<div class="Musitag-Annotator-MainScreen">'
     + '<div class="Musitag-Annotator-section"><h2>1</h2>'
     + '    <h3>Choisis<br />une couleur</h3>'
     + '    <div class="Musitag-Annotator-selector">'
@@ -70,8 +79,8 @@
     + '    <h3>Enregistre<br />ta voix</h3>'
     + '    <div class="Musitag-Annotator-record">'
     
-    + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="140" id="record_mic" align="middle">'
-    + '        <param name="movie" value="../../script/record_mic/record_mic.swf" />'
+    + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160" id="record_mic" align="middle">'
+    + '        <param name="movie" value="{{record_swf}}" />'
     + '        <param name="quality" value="high" />'
     + '        <param name="bgcolor" value="#ffffff" />'
     + '        <param name="play" value="true" />'
@@ -83,12 +92,12 @@
     + '        <param name="salign" value="" />'
     + '        <param name="allowScriptAccess" value="always" />'
     + '        <param name="allowFullScreen" value="true" />'
-    + '        <param name="flashvars" value="playVisible=true">'
-    + '        <embed src="../../script/record_mic/record_mic.swf" quality="high" bgcolor="#ffffff"'
-    + '             width="220" height="140" name="ExternalInterfaceExample" align="middle"'
+    + '        <param name="flashvars" value="playVisible={{show_play_arrow}}">'
+    + '        <embed src="{{record_swf}}"" quality="high" bgcolor="#ffffff"'
+    + '             width="220" height="160" name="ExternalInterfaceExample" align="middle"'
     + '             play="true" loop="false" quality="high" allowScriptAccess="always" '
     + '             type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
-    + '             flashvars="playVisible=true"'
+    + '             flashvars="playVisible={{show_play_arrow}}"'
     + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
     + '        </embed>'
     + '    </object>'
@@ -109,6 +118,9 @@
     + '    </div>'
     + '</div>'
     + '<div class="Musitag-Annotator-close"></div>'
+    + '</div><div class="Musitag-Annotator-EndScreen Musitag-Annotator-TextMessage">Ton Musitag a bien été enregistré :-)</div>'
+    + '<div class="Musitag-Annotator-ErrorScreen Musitag-Annotator-TextMessage">Nous n\'avons pas réussi à envoyer ton Musitag :-(</div>'
+    + '<div class="Musitag-Annotator-WaitScreen Musitag-Annotator-TextMessage">Nous sommes en train d\'envoyer ton Musitag</div>'
     + '</div></div>';
 
 IriSP.Widgets.MusitagAnnotator.prototype.draw = function() {
@@ -147,12 +159,14 @@
     });
     
     this.$.find('.Musitag-Annotator-Note').click(function() {
-       _this.recorder.stopRecord();
+        if (_this.checkAnnotation) {
+            _this.recorder.stopRecord();
+            _this.sendAnnotation();
+        }
     });
     
     window.setAudioUrl = function(_url) {
         _this.annotation.audio_url = _url;
-        console.log(_url);
     }
 }
 
@@ -168,12 +182,20 @@
     return _res;
 }
 
+IriSP.Widgets.MusitagAnnotator.prototype.showScreen = function(_screenName) {
+    this.$.find('.Musitag-Annotator-' + _screenName + 'Screen').show()
+        .siblings().hide();
+}
+
 IriSP.Widgets.MusitagAnnotator.prototype.show = function() {
+    this.player.popcorn.pause();
     this.$.show();
+    this.showScreen('Main');
     this.$.find('.Musitag-Annotator-tagInSelector').removeClass("down");
     this.$.find(".Musitag-Annotator-tagInSend .Musitag-color").attr("class","Musitag-color");
     this.$.find(".Musitag-Annotator-tagInSend .Musitag-emoticon").attr("class","Musitag-emoticon hidden");
     this.annotation = {
+        timecode: Math.floor(this.player.popcorn.currentTime() * 1000),
         audio_url: false,
         emoticon: false,
         color: false
@@ -188,3 +210,64 @@
         _this.$.hide();
     });
 }
+
+IriSP.Widgets.MusitagAnnotator.prototype.sendAnnotation = function() {
+    var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager);
+        _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}),
+        _annotation = new IriSP.Model.Annotation(false, _export),
+        _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type),
+        _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)),
+        _color = new IriSP.Model.Tag(false, _export),
+        _emoticon = new IriSP.Model.Tag(false, _export),
+        _url = Mustache.to_html(this.api_endpoint_template, {id: this.source.projectId});
+    
+    _color.title = this.annotation.color;
+    _emoticon.title = this.annotation.emoticon;
+
+    _annotationType.title = this.annotation_type;
+    _annotation.setBegin(this.annotation.timecode);
+    _annotation.setEnd(this.annotation.timecode);
+    _annotation.setMedia(this.source.currentMedia.id);
+    _annotation.setAnnotationType(_annotationType.id);
+    _annotation.created = new Date();
+    _annotation.description = this.annotation.color + " " + this.annotation.emoticon;
+    _annotation.setTags([_color.id, _emoticon.id]);
+    
+    if (this.annotation.audio_url) {
+        _annotation.audio = {
+            src: "mic",
+            mimetype: "audio/mp3",
+            href: this.annotation.audio_url
+        };
+    }
+    
+    _export.creator = this.creator_name;
+    _export.created = new Date();
+    _exportedAnnotations.push(_annotation);
+    _export.addList("annotation",_exportedAnnotations);
+    
+    var _this = this;
+    IriSP.jQuery.ajax({
+        url: _url,
+        type: this.api_method,
+        contentType: 'application/json',
+        data: _export.serialize(),
+        success: function(_data) {
+            _this.showScreen('End');
+            window.setTimeout(_this.functionWrapper("hide"),_this.close_widget_timeout);
+            _export.getAnnotations().removeElement(_annotation, true);
+            _export.deSerialize(_data);
+            _this.source.merge(_export);
+            _this.player.popcorn.trigger("IriSP.MusitagAnnotations.redraw");
+        },
+        error: function(_xhr, _error, _thrown) {
+            IriSP.log("Error when sending annotation", _thrown);
+            _this.showScreen('Error');
+            window.setTimeout(function(){
+                _this.showScreen("Main");
+            },
+            _this.close_widget_timeout);
+        }
+    });
+    this.showScreen('Wait');
+}
diff -r a434e6431d0b -r f19428838d3b web/tralalere/templates/player.html
--- a/web/tralalere/templates/player.html	Fri Jun 08 11:31:50 2012 +0200
+++ b/web/tralalere/templates/player.html	Fri Jun 08 16:21:52 2012 +0200
@@ -70,7 +70,9 @@
                 },
                 {
                     type: "MusitagAnnotator",
-                    container: "player-annotator"
+                    container: "player-annotator",
+                    record_swf: "{{STATIC_URL}}tralalere/swf/record_mic.swf",
+                    api_endpoint_template: "{% url annotation_api_empty %}{% templatetag openvariable %}id{% templatetag closevariable %}.json"
                 }
             ]
         },
@@ -78,7 +80,10 @@
             type: 'jwplayer',
             height: 1, 
             width: 1,
-            metadata: _metadata
+            metadata: _metadata,
+            provider: "rtmp",
+            live: true,
+            autostart: true
         }
     };
     var _myPlayer = new IriSP.Metadataplayer(_config);