crea/integration/metadataplayer/MusitagAnnotator.js
changeset 38 f19428838d3b
parent 15 f1d070549d94
child 40 02960e91525d
--- 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');
+}