Merge with b4b226944789aab5c07ccb3e476d03edae6d0e95
authorveltr
Mon, 11 Jun 2012 15:10:18 +0200
changeset 55 f2befea2c2d1
parent 54 402fad4d9495 (diff)
parent 53 b4b226944789 (current diff)
child 56 af969d762e03
Merge with b4b226944789aab5c07ccb3e476d03edae6d0e95
--- a/crea/integration/css/musitag.css	Mon Jun 11 13:26:29 2012 +0200
+++ b/crea/integration/css/musitag.css	Mon Jun 11 15:10:18 2012 +0200
@@ -49,6 +49,24 @@
     width: 980px; margin: 0 auto;
 }
 
+.footer {
+    float: right; clear: both;
+    width: 456px; height: 56px; padding: 17px; margin: 10px 0;
+    background: url(../img/logos-box.png);
+}
+
+.footer-idf {
+    float: left; width: 160px; height: 55px;
+}
+
+p.footer-soutenu {
+    height: 30px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; text-align: center; 
+}
+
+.footer-logo {
+    float: left; margin-left: 8px;
+}
+
 .home-header {
     background: url(../img/home-header.png);
     width: 960px; height: 150px; padding: 5px 10px;
@@ -212,7 +230,7 @@
 }
 
 .player-belowtl {
-    width: 870px; margin-left: 90px; position: relative;
+    width: 870px; margin-left: 90px; position: relative; height: 400px;
 }
 
 #player-annotations {
--- a/crea/integration/home.html	Mon Jun 11 13:26:29 2012 +0200
+++ b/crea/integration/home.html	Mon Jun 11 15:10:18 2012 +0200
@@ -83,6 +83,23 @@
                     <a href="#">Steve Waring</a>
                 </h4>
             </div>
+            <div class="footer">
+                <div class="footer-idf">
+                    <p class="footer-soutenu">Soutenu par le<br />Conseil Régional</p>
+                    <a href="http://www.iledefrance.fr/" title="Région Île-de-France">
+                        <img src="img/logo-idf.png" alt="Région Île-de-France" />
+                    </a>
+                </div>
+                <a href="http://www.futur-en-seine.fr/" title="Festival Futur En Seine 2012">
+                    <img src="img/logo-fens.png" class="footer-logo" alt="Festival Futur En Seine 2012" />
+                </a>
+                <a href="http://www.tralalere.com/" title="Tralalere">
+                    <img src="img/logo-tralalere.png" class="footer-logo" alt="Tralalere" />
+                </a>
+                <a href="http://www.iri.centrepompidou.fr/" title="Institut de Recherche et d'Innovation">
+                    <img src="img/logo-iri.png" class="footer-logo" alt="Institut de Recherche et d'Innovation" />
+                </a>
+            </div>
         </div>
         <script type="text/javascript">
         
Binary file crea/integration/img/logo-fens.png has changed
Binary file crea/integration/img/logo-idf.png has changed
Binary file crea/integration/img/logo-iri.png has changed
Binary file crea/integration/img/logo-tralalere.png has changed
Binary file crea/integration/img/logos-box.png has changed
--- a/crea/integration/metadataplayer/LdtPlayer-core.js	Mon Jun 11 13:26:29 2012 +0200
+++ b/crea/integration/metadataplayer/LdtPlayer-core.js	Mon Jun 11 15:10:18 2012 +0200
@@ -611,8 +611,26 @@
     _SOURCE_STATUS_WAITING : 1,
     _SOURCE_STATUS_READY : 2,
     _ID_AUTO_INCREMENT : 0,
+    _ID_BASE : (function(_d) {
+        function pad(n){return n<10 ? '0'+n : n}
+        function fillrand(n) {
+            var _res = ''
+            for (var i=0; i<n; i++) {
+                _res += Math.floor(16*Math.random()).toString(16);
+            }
+            return _res;
+        }
+        return _d.getUTCFullYear() + '-'  
+            + pad(_d.getUTCMonth()+1) + '-'  
+            + pad(_d.getUTCDate()) + '-'
+            + fillrand(16);
+    })(new Date()),
     getUID : function() {
-        return "autoid-" + (++this._ID_AUTO_INCREMENT);
+        var _n = (++this._ID_AUTO_INCREMENT).toString();
+        while (_n.length < 4) {
+            _n = '0' + _n
+        }
+        return "autoid-" + this._ID_BASE + '-' + _n;
     },
     regexpFromTextOrArray : function(_textOrArray) {
         function escapeText(_text) {
@@ -653,7 +671,7 @@
         _res.setTime(Number(time));
         return _res;
     },
-    dateToIso : function(d) {  
+    dateToIso : function(d) {
         function pad(n){return n<10 ? '0'+n : n}  
         return d.getUTCFullYear()+'-'  
             + pad(d.getUTCMonth()+1)+'-'  
@@ -924,14 +942,11 @@
 
 IriSP.Model.Reference = function(_source, _idRef) {
     this.source = _source;
+    this.id = _idRef;
     if (typeof _idRef === "object") {
         this.isList = true;
-        this.id = IriSP._(_idRef).map(function(_id) {
-            return _source.getNamespaced(_id).fullname;
-        });
     } else {
         this.isList = false;
-        this.id = _source.getNamespaced(_idRef).fullname;
     }
     this.refresh();
 }
@@ -972,8 +987,7 @@
         _id = IriSP.Model.getUID();
     }
     this.source = _source;
-    this.namespacedId = _source.getNamespaced(_id)
-    this.id = this.namespacedId.fullname;
+    this.id = _id;
     this.title = "";
     this.description = "";
     this.source.directory.addElement(this);
@@ -1113,7 +1127,7 @@
 /* */
 
 IriSP.Model.MashedAnnotation = function(_mashup, _annotation) {
-    IriSP.Model.Element.call(this, _mashup.namespacedId.name + "_" + _annotation.namespacedId.name, _annotation.source);
+    IriSP.Model.Element.call(this, _mashup.id + "_" + _annotation.id, _annotation.source);
     this.elementType = 'mashedAnnotation';
     this.annotation = _annotation;
     this.begin = new IriSP.Model.Time(_mashup.duration);
@@ -1217,54 +1231,10 @@
         })
         this.callbackQueue = [];
         this.contents = {};
-        if (typeof this.namespace === "undefined") {
-            this.namespace = "metadataplayer";
-        } else {
-            if (typeof this.namespaceUrl === "undefined" && typeof this.url !== "undefined") {
-                var _matches = this.url.match(/(^[^?&]+|[^?&][a-zA-Z0-9_%=?]+)/g),
-                    _url = _matches[0];
-                if (_matches.length > 1) {
-                    _matches = IriSP._(_matches.slice(1)).reject(function(_txt) {
-                        return /\?$/.test(_txt);
-                    });
-                }
-                if (_matches.length > 0) {
-                    _url += '?' + _matches.join('&');
-                }
-                this.namespaceUrl = _url;
-            }
-        }
-        if (typeof this.namespaceUrl === "undefined") {
-            this.namespaceUrl = "http://ldt.iri.centrepompidou.fr/";
-        }
-        this.directory.addNamespace(this.namespace, this.namespaceUrl);
         this.get();
     }
 }
 
-IriSP.Model.Source.prototype.getNamespaced = function(_id) {
-    var _tab = _id.split(':');
-    if (_tab.length > 1) {
-        return {
-            namespace : _tab[0],
-            name : _tab[1],
-            fullname : _id
-        }
-    } else {
-        return {
-            namespace : this.namespace,
-            name : _id,
-            fullname : this.namespace + ':' + _id
-        }
-    }
-}
-    
-IriSP.Model.Source.prototype.unNamespace = function(_id) {
-    if (typeof _id !== "undefined") {
-        return _id.replace(this.namespace + ':', '');
-    }
-}
-
 IriSP.Model.Source.prototype.addList = function(_listId, _contents) {
     if (typeof this.contents[_listId] === "undefined") {
         this.contents[_listId] = new IriSP.Model.List(this.directory);
@@ -1291,7 +1261,7 @@
 }
 
 IriSP.Model.Source.prototype.getElement = function(_elId) {
-    return this.directory.getElement(this.getNamespaced(_elId).fullname);
+    return this.directory.getElement(_elId);
 }
 
 IriSP.Model.Source.prototype.setCurrentMediaId = function(_idRef) {
@@ -1306,21 +1276,6 @@
     }
 }
 
-IriSP.Model.Source.prototype.listNamespaces = function(_excludeSelf) {
-    var _this = this,
-        _nsls = [],
-        _excludeSelf = (typeof _excludeSelf !== "undefined" && _excludeSelf);
-    this.forEach(function(_list) {
-        IriSP._(_list).forEach(function(_el) {
-            var _ns = _el.id.replace(/:.*$/,'');
-            if (IriSP._(_nsls).indexOf(_ns) === -1 && (!_excludeSelf || _ns !== _this.namespace)) {
-                _nsls.push(_ns);
-            }
-        })
-    });
-    return _nsls;
-}
-
 IriSP.Model.Source.prototype.get = function() {
     this.status = IriSP.Model._SOURCE_STATUS_WAITING;
     this.handleCallbacks();
@@ -1427,11 +1382,6 @@
 IriSP.Model.Directory = function() {
     this.remoteSources = {};
     this.elements = {};
-    this.namespaces = {};
-}
-
-IriSP.Model.Directory.prototype.addNamespace = function(_namespace, _url) {
-    this.namespaces[_namespace] = _url;
 }
 
 IriSP.Model.Directory.prototype.remoteSource = function(_properties) {
@@ -2099,7 +2049,7 @@
             },
             serializer : function(_data, _source) {
                 return {
-                    id : _source.unNamespace(_data.id),
+                    id : _data.id,
                     url : _data.video,
                     meta : {
                         "dc:title" : _data.title,
@@ -2119,7 +2069,7 @@
             },
             serializer : function(_data, _source) {
                 return {
-                    id : _source.unNamespace(_data.id),
+                    id : _data.id,
                     meta : {
                         "dc:title" : _data.title
                     }
@@ -2136,7 +2086,7 @@
             },
             serializer : function(_data, _source) {
                 return {
-                    id : _source.unNamespace(_data.id),
+                    id : _data.id,
                     "dc:title" : _data.title,
                     "dc:description" : _data.description
                 }
@@ -2176,7 +2126,7 @@
             },
             serializer : function(_data, _source) {
                 return {
-                    id : _source.unNamespace(_data.id),
+                    id : _data.id,
                     begin : _data.begin.milliseconds,
                     end : _data.end.milliseconds,
                     content : {
@@ -2184,16 +2134,16 @@
                         description : _data.description,
                         audio : _data.audio
                     },
-                    media : _source.unNamespace(_data.media.id),
+                    media : _data.media.id,
                     meta : {
-                        "id-ref" : _source.unNamespace(_data.annotationType.id),
+                        "id-ref" : _data.annotationType.id,
                         "dc:created" : IriSP.Model.dateToIso(_data.created),
                         "dc:creator" : _data.creator,
                         project : _source.projectId
                     },
                     tags : IriSP._(_data.tag.id).map(function(_id) {
                        return {
-                           "id-ref" : _source.unNamespace(_id)
+                           "id-ref" : _id
                        } 
                     })
                 }
@@ -2215,7 +2165,7 @@
                     "dc:title": _data.title,
                     "dc:description": _data.description,
                     segments: _data.segments.map(function(_annotation) {
-                        return _source.unNamespace(_id);
+                        return _id;
                     })
                 }
             }
@@ -2278,6 +2228,7 @@
         annotation : {
             serialized_name : "annotations",
             serializer : function(_data, _source) {
+                var _annType = _data.getAnnotationType();
                 return {
                     begin: _data.begin.milliseconds,
                     end: _data.end.milliseconds,
@@ -2286,10 +2237,10 @@
                         audio: _data.audio
                     },
                     tags: _data.getTagTexts(),
-                    media: _source.unNamespace(_data.getMedia().id),
+                    media: _data.getMedia().id,
                     title: _data.title,
-                    type_title: _data.getAnnotationType().title,
-                    type: ( typeof _data.getAnnotationType().dont_send_id !== "undefined" && _data.getAnnotationType().dont_send_id ? "" : _source.unNamespace(_data.getAnnotationType().id) )
+                    type_title: _annType.title,
+                    type: ( typeof _annType.dont_send_id !== "undefined" && _annType.dont_send_id ? "" : _annType.id )
                 }
             }
         }
--- a/crea/integration/metadataplayer/MusitagAnnotations.js	Mon Jun 11 13:26:29 2012 +0200
+++ b/crea/integration/metadataplayer/MusitagAnnotations.js	Mon Jun 11 15:10:18 2012 +0200
@@ -8,11 +8,11 @@
     '<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-Annotations-tag" begin-time="{{begin.milliseconds}}" title="{{color.name}}, {{emoticon.name}} à {{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 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>';
 
@@ -20,8 +20,18 @@
     annotation_type: false,
     columns: 15,
     max_by_column: 10,
-    emoticons: ['happy', 'unhappy', 'laughing', 'surprised'],
-    colors: ['red', 'yellow', 'green', 'blue'],
+    emoticons: [
+        { tag: "happy", name: "content"},
+        { tag: "unhappy", name: "mécontent"},
+        { tag: "laughing", name: "rigolard"},
+        { tag: "surprised", name: "étonné"}
+    ],
+    colors: [
+        { tag: "red", name: "rouge"},
+        { tag: "yellow", name: "jaune"},
+        { tag: "green", name: "vert"},
+        { tag: "blue", name: "bleu"}
+    ],
     rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"
 };
 
@@ -71,15 +81,15 @@
         _this = this;
     _annotations.forEach(function(_annotation) {
         var _tags = _annotation.getTagTexts();
-        _annotation.color_tag = false;
-        _annotation.emoticon_tag = false;
-        _tags.forEach(function(_tag) {
-            if (_this.emoticons.indexOf(_tag) != -1) {
-                _annotation.emoticon_tag = _tag;
-            }
-            if (_this.colors.indexOf(_tag) != -1) {
-                _annotation.color_tag = _tag;
-            }
+        _annotation.emoticon = IriSP._(_this.emoticons).find(function(_emoticon) {
+            return IriSP._(_tags).find(function(_tag) {
+                return _tag == _emoticon.tag;
+            });
+        });
+        _annotation.color = IriSP._(_this.colors).find(function(_color) {
+            return IriSP._(_tags).find(function(_tag) {
+                return _tag == _color.tag;
+            });
         });
     });
     for (var i = 0; i < this.columns; i++) {
@@ -88,8 +98,8 @@
             _column = _annotations.filter(function(_annotation) {
                 return _annotation.begin >= _sliceStart
                     && _annotation.begin < _sliceEnd
-                    && _annotation.emoticon_tag
-                    && _annotation.color_tag
+                    && _annotation.emoticon
+                    && _annotation.color
             }).sortBy(function(_annotation) {
                 return _annotation.created;
             });
--- a/crea/integration/metadataplayer/MusitagAnnotator.js	Mon Jun 11 13:26:29 2012 +0200
+++ b/crea/integration/metadataplayer/MusitagAnnotator.js	Mon Jun 11 15:10:18 2012 +0200
@@ -15,7 +15,19 @@
     api_method: "PUT",
     close_widget_timeout: 4000,
     annotation_type: "contributions",
-    creator_name: "musitag"
+    creator_name: "musitag",
+    emoticons: [
+        { tag: "happy", name: "content"},
+        { tag: "unhappy", name: "mécontent"},
+        { tag: "laughing", name: "rigolard"},
+        { tag: "surprised", name: "étonné"}
+    ],
+    colors: [
+        { tag: "red", name: "rouge"},
+        { tag: "yellow", name: "jaune"},
+        { tag: "green", name: "vert"},
+        { tag: "blue", name: "bleu"}
+    ],
 };
 
 IriSP.Widgets.MusitagAnnotator.prototype.template =
@@ -24,26 +36,13 @@
     + '<div class="Musitag-Annotator-section"><h2>1</h2>'
     + '    <h3>Choisis<br />une couleur</h3>'
     + '    <div class="Musitag-Annotator-selector">'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-red"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
+    + '{{#colors}}'
+    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector" title="{{name}}">'
     + '            <div class="Musitag-shadow"></div>'
     + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-yellow"></div>'
+    + '            <div class="Musitag-color Musitag-{{tag}}"></div>'
     + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-green"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-blue"></div>'
-    + '        </div>'
+    + '{{/colors}}'
     + '    </div>'
     + '</div>'
     + '<div class="Musitag-Annotator-separator"></div>'
@@ -51,26 +50,13 @@
     + '    <h2>2</h2>'
     + '    <h3>Choisis<br />une émotion</h3>'
     + '    <div class="Musitag-Annotator-selector">'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-happy"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
+    + '{{#emoticons}}'
+    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector" title="{{name}}">'
     + '            <div class="Musitag-shadow"></div>'
     + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-unhappy"></div>'
+    + '            <div class="Musitag-emoticon Musitag-{{tag}}"></div>'
     + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-laughing"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-surprised"></div>'
-    + '        </div>'
+    + '{{/emoticons}}'
     + '    </div>'
     + '</div>'
     + '<div class="Musitag-Annotator-separator"></div>'
--- a/crea/integration/player.html	Mon Jun 11 13:26:29 2012 +0200
+++ b/crea/integration/player.html	Mon Jun 11 15:10:18 2012 +0200
@@ -34,6 +34,23 @@
                 <div id="player-annotator"></div>
             </div>
             
+            <div class="footer">
+                <div class="footer-idf">
+                    <p class="footer-soutenu">Soutenu par le<br />Conseil Régional</p>
+                    <a href="http://www.iledefrance.fr/" title="Région Île-de-France">
+                        <img src="img/logo-idf.png" alt="Région Île-de-France" />
+                    </a>
+                </div>
+                <a href="http://www.futur-en-seine.fr/" title="Festival Futur En Seine 2012">
+                    <img src="img/logo-fens.png" class="footer-logo" alt="Festival Futur En Seine 2012" />
+                </a>
+                <a href="http://www.tralalere.com/" title="Tralalere">
+                    <img src="img/logo-tralalere.png" class="footer-logo" alt="Tralalere" />
+                </a>
+                <a href="http://www.iri.centrepompidou.fr/" title="Institut de Recherche et d'Innovation">
+                    <img src="img/logo-iri.png" class="footer-logo" alt="Institut de Recherche et d'Innovation" />
+                </a>
+            </div>
         </div>
     <script type="text/javascript">
     IriSP.libFiles.defaultDir = "libs/";
--- a/web/tralalere/static/tralalere/css/musitag.css	Mon Jun 11 13:26:29 2012 +0200
+++ b/web/tralalere/static/tralalere/css/musitag.css	Mon Jun 11 15:10:18 2012 +0200
@@ -49,6 +49,24 @@
     width: 980px; margin: 0 auto;
 }
 
+.footer {
+    float: right; clear: both;
+    width: 456px; height: 56px; padding: 17px; margin: 10px 0;
+    background: url(../img/logos-box.png);
+}
+
+.footer-idf {
+    float: left; width: 160px; height: 55px;
+}
+
+p.footer-soutenu {
+    height: 30px; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; text-align: center; 
+}
+
+.footer-logo {
+    float: left; margin-left: 8px;
+}
+
 .home-header {
     background: url(../img/home-header.png);
     width: 960px; height: 150px; padding: 5px 10px;
@@ -212,7 +230,7 @@
 }
 
 .player-belowtl {
-    width: 870px; margin-left: 90px; position: relative;
+    width: 870px; margin-left: 90px; position: relative; height: 400px;
 }
 
 #player-annotations {
Binary file web/tralalere/static/tralalere/img/logo-fens.png has changed
Binary file web/tralalere/static/tralalere/img/logo-idf.png has changed
Binary file web/tralalere/static/tralalere/img/logo-iri.png has changed
Binary file web/tralalere/static/tralalere/img/logo-tralalere.png has changed
Binary file web/tralalere/static/tralalere/img/logos-box.png has changed
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Mon Jun 11 13:26:29 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Mon Jun 11 15:10:18 2012 +0200
@@ -8,11 +8,11 @@
     '<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-Annotations-tag" begin-time="{{begin.milliseconds}}" title="{{color.name}}, {{emoticon.name}} à {{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 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>';
 
@@ -20,8 +20,18 @@
     annotation_type: false,
     columns: 15,
     max_by_column: 10,
-    emoticons: ['happy', 'unhappy', 'laughing', 'surprised'],
-    colors: ['red', 'yellow', 'green', 'blue'],
+    emoticons: [
+        { tag: "happy", name: "content"},
+        { tag: "unhappy", name: "mécontent"},
+        { tag: "laughing", name: "rigolard"},
+        { tag: "surprised", name: "étonné"}
+    ],
+    colors: [
+        { tag: "red", name: "rouge"},
+        { tag: "yellow", name: "jaune"},
+        { tag: "green", name: "vert"},
+        { tag: "blue", name: "bleu"}
+    ],
     rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"
 };
 
@@ -71,15 +81,15 @@
         _this = this;
     _annotations.forEach(function(_annotation) {
         var _tags = _annotation.getTagTexts();
-        _annotation.color_tag = false;
-        _annotation.emoticon_tag = false;
-        _tags.forEach(function(_tag) {
-            if (_this.emoticons.indexOf(_tag) != -1) {
-                _annotation.emoticon_tag = _tag;
-            }
-            if (_this.colors.indexOf(_tag) != -1) {
-                _annotation.color_tag = _tag;
-            }
+        _annotation.emoticon = IriSP._(_this.emoticons).find(function(_emoticon) {
+            return IriSP._(_tags).find(function(_tag) {
+                return _tag == _emoticon.tag;
+            });
+        });
+        _annotation.color = IriSP._(_this.colors).find(function(_color) {
+            return IriSP._(_tags).find(function(_tag) {
+                return _tag == _color.tag;
+            });
         });
     });
     for (var i = 0; i < this.columns; i++) {
@@ -88,8 +98,8 @@
             _column = _annotations.filter(function(_annotation) {
                 return _annotation.begin >= _sliceStart
                     && _annotation.begin < _sliceEnd
-                    && _annotation.emoticon_tag
-                    && _annotation.color_tag
+                    && _annotation.emoticon
+                    && _annotation.color
             }).sortBy(function(_annotation) {
                 return _annotation.created;
             });
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js	Mon Jun 11 13:26:29 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js	Mon Jun 11 15:10:18 2012 +0200
@@ -15,7 +15,19 @@
     api_method: "PUT",
     close_widget_timeout: 4000,
     annotation_type: "contributions",
-    creator_name: "musitag"
+    creator_name: "musitag",
+    emoticons: [
+        { tag: "happy", name: "content"},
+        { tag: "unhappy", name: "mécontent"},
+        { tag: "laughing", name: "rigolard"},
+        { tag: "surprised", name: "étonné"}
+    ],
+    colors: [
+        { tag: "red", name: "rouge"},
+        { tag: "yellow", name: "jaune"},
+        { tag: "green", name: "vert"},
+        { tag: "blue", name: "bleu"}
+    ],
 };
 
 IriSP.Widgets.MusitagAnnotator.prototype.template =
@@ -24,26 +36,13 @@
     + '<div class="Musitag-Annotator-section"><h2>1</h2>'
     + '    <h3>Choisis<br />une couleur</h3>'
     + '    <div class="Musitag-Annotator-selector">'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-red"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
+    + '{{#colors}}'
+    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector" title="{{name}}">'
     + '            <div class="Musitag-shadow"></div>'
     + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-yellow"></div>'
+    + '            <div class="Musitag-color Musitag-{{tag}}"></div>'
     + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-green"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-color Musitag-blue"></div>'
-    + '        </div>'
+    + '{{/colors}}'
     + '    </div>'
     + '</div>'
     + '<div class="Musitag-Annotator-separator"></div>'
@@ -51,26 +50,13 @@
     + '    <h2>2</h2>'
     + '    <h3>Choisis<br />une émotion</h3>'
     + '    <div class="Musitag-Annotator-selector">'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-happy"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
+    + '{{#emoticons}}'
+    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector" title="{{name}}">'
     + '            <div class="Musitag-shadow"></div>'
     + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-unhappy"></div>'
+    + '            <div class="Musitag-emoticon Musitag-{{tag}}"></div>'
     + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-laughing"></div>'
-    + '        </div>'
-    + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSelector">'
-    + '            <div class="Musitag-shadow"></div>'
-    + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon Musitag-surprised"></div>'
-    + '        </div>'
+    + '{{/emoticons}}'
     + '    </div>'
     + '</div>'
     + '<div class="Musitag-Annotator-separator"></div>'