# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1339062153 -7200
# Node ID a019732d97009259a019442401803d5d1bf37038
# Parent  ccdc27a0f2ea375e41e88add30d82fd517a89b06
update metadataplayer and add player view

diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js
--- a/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js	Thu Jun 07 11:42:33 2012 +0200
@@ -29,7 +29,7 @@
 
 /* The Metadataplayer Object, single point of entry, replaces IriSP.init_player */
 
-IriSP.Metadataplayer = function(config, video_metadata) {
+IriSP.Metadataplayer = function(config) {
     IriSP.log("IriSP.Metadataplayer constructor");
     for (var key in IriSP.guiDefaults) {
         if (IriSP.guiDefaults.hasOwnProperty(key) && !config.gui.hasOwnProperty(key)) {
@@ -38,7 +38,6 @@
     }
     var _container = document.getElementById(config.gui.container);
     _container.innerHTML = '<h3 class="Ldt-Loader">Loading... Chargement...</h3>';
-    this.video_metadata = video_metadata;
     this.sourceManager = new IriSP.Model.Directory();
     this.config = config;
     this.callbackQueue = [];
@@ -116,7 +115,7 @@
     IriSP.loadCss(IriSP.getLib("cssjQueryUI"));
     IriSP.loadCss(this.config.gui.css);
     
-    this.videoData = this.loadMetadata(this.video_metadata);
+    this.videoData = this.loadMetadata(this.config.player.metadata);
     this.$ = IriSP.jQuery('#' + this.config.gui.container);
     this.$.css({
         "width": this.config.gui.width,
@@ -240,7 +239,7 @@
             IriSP.jQuery("#" + containerDiv).append(_videoEl);
             pop = Popcorn("#" + _tmpId);
             break;
-            
+
         case "html5-audio":
             var _tmpId = Popcorn.guid("audio"),
                 _videoEl = IriSP.jQuery('<audio>');
@@ -268,7 +267,7 @@
             delete opts.video;
 
             if(!opts.hasOwnProperty("flashplayer")) {
-                opts.flashplayer = IriSP.jwplayer_swf_path;
+                opts.flashplayer = IriSP.getLib("jwPlayerSWF");
             }
 
             if(!opts.hasOwnProperty("controlbar.position")) {
@@ -1478,7 +1477,8 @@
         popcorn : "popcorn-complete.min.js",
         jwplayer : "jwplayer.js",
         raphael : "raphael-min.js",
-        tracemanager : "tracemanager.js"
+        tracemanager : "tracemanager.js",
+        jwPlayerSWF : "player.swf"
     },
     locations : {
         // use to define locations outside defautl_dir
@@ -2066,91 +2066,7 @@
             break;
     }
     
-};/* Used when Putting annotations on the platform */
-
-if (typeof IriSP.serializers === "undefined") {
-    IriSP.serializers = {}
-}
-
-IriSP.serializers.ldt_annotate = {
-    types :  {
-        annotation : {
-            serialized_name : "annotations",
-            serializer : function(_data, _source) {
-                return {
-                    begin: _data.begin.milliseconds,
-                    end: _data.end.milliseconds,
-                    content: {
-                        data: _data.description
-                    },
-                    tags: _data.getTagTexts(),
-                    media: _source.unNamespace(_data.getMedia().id),
-                    title: _data.title,
-                    type_title: _data.getAnnotationType().title,
-                    type: _source.unNamespace(_data.getAnnotationType().id)
-                }
-            }
-        }
-    },
-    serialize : function(_source) {
-        var _res = {},
-            _this = this;
-        _source.forEach(function(_list, _typename) {
-            if (typeof _this.types[_typename] !== "undefined") {
-                _res[_this.types[_typename].serialized_name] = _list.map(function(_el) {
-                    return _this.types[_typename].serializer(_el, _source);
-                });
-            }
-        });
-        _res.meta = {
-            creator: _source.creator,
-            created: _source.created
-        }
-        return JSON.stringify(_res);
-    },
-    deSerialize : function(_data, _source) {
-        if (typeof _data == "string") {
-            _data = JSON.parse(_data);
-        }
-        _source.addList('tag', new IriSP.Model.List(_source.directory));
-        _source.addList('annotationType', new IriSP.Model.List(_source.directory));
-        _source.addList('annotation', new IriSP.Model.List(_source.directory));
-        if (typeof _data.annotations == "object" && _data.annotations && _data.annotations.length) {
-            var _anndata = _data.annotations[0],
-                _ann = new IriSP.Model.Annotation(_anndata.id, _source);
-            _ann.title = _anndata.content.title || "";
-            _ann.description = _anndata.content.data || "";
-            _ann.created = new Date(_data.meta.created);
-            _ann.setMedia(_anndata.media, _source);
-            var _anntypes = _source.getAnnotationTypes(true).searchByTitle(_anndata.type_title);
-            if (_anntypes.length) {
-                var _anntype = _anntypes[0];
-            } else {
-                var _anntype = new IriSP.Model.AnnotationType(_anndata.type, _source);
-                _anntype.title = _anndata.type_title;
-                _source.getAnnotationTypes().push(_anntype);
-            }
-            _ann.setAnnotationType(_anntype.id);
-            var _tagIds = IriSP._(_anndata.tags).map(function(_title) {
-                var _tags = _source.getTags(true).searchByTitle(_title);
-                if (_tags.length) {
-                    var _tag = _tags[0];
-                }
-                else {
-                    _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'),_source);
-                    _tag.title = _title;
-                    _source.getTags().push(_tag);
-                }
-                return _tag.id;
-            });
-            _ann.setTags(_tagIds);
-            _ann.setBegin(_anndata.begin);
-            _ann.setEnd(_anndata.end);
-            _ann.creator = _data.meta.creator;
-            _source.getAnnotations().push(_ann);
-        }
-    }
-}/* LDT Platform Serializer */
+};/* LDT Platform Serializer */
 
 if (typeof IriSP.serializers === "undefined") {
     IriSP.serializers = {}
@@ -2251,6 +2167,9 @@
                 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;
+                }
                 return _res;
             },
             serializer : function(_data, _source) {
@@ -2273,7 +2192,8 @@
                        return {
                            "id-ref" : _source.unNamespace(_id)
                        } 
-                    })
+                    }),
+                    audio : _data.audio
                 }
             }
         },
@@ -2345,3 +2265,88 @@
     }
 }
 
+/* Used when Putting annotations on the platform */
+
+if (typeof IriSP.serializers === "undefined") {
+    IriSP.serializers = {}
+}
+
+IriSP.serializers.ldt_annotate = {
+    types :  {
+        annotation : {
+            serialized_name : "annotations",
+            serializer : function(_data, _source) {
+                return {
+                    begin: _data.begin.milliseconds,
+                    end: _data.end.milliseconds,
+                    content: {
+                        data: _data.description
+                    },
+                    tags: _data.getTagTexts(),
+                    media: _source.unNamespace(_data.getMedia().id),
+                    title: _data.title,
+                    type_title: _data.getAnnotationType().title,
+                    type: _source.unNamespace(_data.getAnnotationType().id)
+                }
+            }
+        }
+    },
+    serialize : function(_source) {
+        var _res = {},
+            _this = this;
+        _source.forEach(function(_list, _typename) {
+            if (typeof _this.types[_typename] !== "undefined") {
+                _res[_this.types[_typename].serialized_name] = _list.map(function(_el) {
+                    return _this.types[_typename].serializer(_el, _source);
+                });
+            }
+        });
+        _res.meta = {
+            creator: _source.creator,
+            created: _source.created
+        }
+        return JSON.stringify(_res);
+    },
+    deSerialize : function(_data, _source) {
+        if (typeof _data == "string") {
+            _data = JSON.parse(_data);
+        }
+        _source.addList('tag', new IriSP.Model.List(_source.directory));
+        _source.addList('annotationType', new IriSP.Model.List(_source.directory));
+        _source.addList('annotation', new IriSP.Model.List(_source.directory));
+        if (typeof _data.annotations == "object" && _data.annotations && _data.annotations.length) {
+            var _anndata = _data.annotations[0],
+                _ann = new IriSP.Model.Annotation(_anndata.id, _source);
+            _ann.title = _anndata.content.title || "";
+            _ann.description = _anndata.content.data || "";
+            _ann.created = new Date(_data.meta.created);
+            _ann.setMedia(_anndata.media, _source);
+            var _anntypes = _source.getAnnotationTypes(true).searchByTitle(_anndata.type_title);
+            if (_anntypes.length) {
+                var _anntype = _anntypes[0];
+            } else {
+                var _anntype = new IriSP.Model.AnnotationType(_anndata.type, _source);
+                _anntype.title = _anndata.type_title;
+                _source.getAnnotationTypes().push(_anntype);
+            }
+            _ann.setAnnotationType(_anntype.id);
+            var _tagIds = IriSP._(_anndata.tags).map(function(_title) {
+                var _tags = _source.getTags(true).searchByTitle(_title);
+                if (_tags.length) {
+                    var _tag = _tags[0];
+                }
+                else {
+                    _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'),_source);
+                    _tag.title = _title;
+                    _source.getTags().push(_tag);
+                }
+                return _tag.id;
+            });
+            _ann.setTags(_tagIds);
+            _ann.setBegin(_anndata.begin);
+            _ann.setEnd(_anndata.end);
+            _ann.creator = _data.meta.creator;
+            _source.getAnnotations().push(_ann);
+        }
+    }
+}
\ No newline at end of file
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js	Thu Jun 07 11:42:33 2012 +0200
@@ -52,7 +52,9 @@
                 + '<div class="Musitag-shadow"></div>'
                 + '<div class="Musitag-color Musitag-' + _annotation.color_tag + '"></div>'
                 + '<div class="Musitag-emoticon Musitag-' + _annotation.emoticon_tag + '"></div>'
-                + '</div><div class="Musitag-Annotations-Balloon"></div></div>';
+                + '</div>'
+                + ( typeof _annotation.audio !== "undefined" && _annotation.audio.href ? '<div class="Musitag-Annotations-Balloon"></div>' : '' )
+                + '</div>';
         }).join('');
         _html += '</div>';
     }
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css	Thu Jun 07 11:42:33 2012 +0200
@@ -8,7 +8,7 @@
 }
 
 .Musitag-Annotator-section {
-    float: left; width: 197px;
+    float: left;
 }
 
 .Musitag-Annotator-separator {
@@ -20,24 +20,21 @@
 }
 
 .Musitag-Annotator-section h3 {
-    font-size: 24px; text-align: center; margin: 0 10px;
+    font-size: 24px; text-align: center; margin: 0 10px; width: 160px;
 }
 
 .Musitag-Annotator-selector {
-    margin: 12px 8px;
+    width: 168px; margin: 12px 5px;
 }
 
 .Musitag-Annotator-tagInSelector {
-    float: left; margin: 5px;
+    float: left; margin: 2px;
 }
 
 .Musitag-Annotator-record {
-    width: 135px; height: 135px; background: url(../img/record.png);
-    margin: 35px 31px; cursor: pointer;
-}
-
-.Musitag-Annotator-record:hover {
-    background-position: 0 -135px;
+    width: 220px; height: 160px;
+    margin: 25px 0;
+    z-index: 20;
 }
 
 .Musitag-Annotator-Note {
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js	Thu Jun 07 11:42:33 2012 +0200
@@ -68,7 +68,33 @@
     + '<div class="Musitag-Annotator-section">'
     + '    <h2>3</h2>'
     + '    <h3>Enregistre<br />ta voix</h3>'
-    + '    <div class="Musitag-Annotator-record"></div>'
+    + '    <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" />'
+    + '        <param name="quality" value="high" />'
+    + '        <param name="bgcolor" value="#ffffff" />'
+    + '        <param name="play" value="true" />'
+    + '        <param name="loop" value="true" />'
+    + '        <param name="wmode" value="transparent" />'
+    + '        <param name="scale" value="showall" />'
+    + '        <param name="menu" value="true" />'
+    + '        <param name="devicefont" value="false" />'
+    + '        <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"'
+    + '             play="true" loop="false" quality="high" allowScriptAccess="always" '
+    + '             type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
+    + '             flashvars="playVisible=true"'
+    + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
+    + '        </embed>'
+    + '    </object>'
+    
+    
+    +'</div>'
     + '</div>'
     + '<div class="Musitag-Annotator-separator"></div>'
     + '<div class="Musitag-Annotator-section">'
@@ -78,7 +104,7 @@
     + '        <div class="Musitag-container-80 Musitag-Annotator-tagInSend">'
     + '            <div class="Musitag-shadow"></div>'
     + '            <div class="Musitag-color"></div>'
-    + '            <div class="Musitag-emoticon hidden"></div>'
+    + '            <div class="Musitag-emoticon"></div>'
     + '        </div>'
     + '    </div>'
     + '</div>'
@@ -96,20 +122,38 @@
     this.bindPopcorn("timeupdate","onTimeupdate");
     this.bindPopcorn("IriSP.MusitagAnnotator.hide","hide");
     this.bindPopcorn("IriSP.MusitagAnnotator.show","show");
+    this.recorder = this.$.find("embed")[0];
+    
+    var _this = this;
+    
     this.$.find('.Musitag-Annotator-tagInSelector').click(function() {
         var _class = IriSP.jQuery(this).children(':last-child').attr('class'),
-            _classes = _class.split(' ');
+            _classes = _class.split(' '),
+            _type = _classes[0].replace(/^\w+-/,""),
+            _value = _classes[1].replace(/^\w+-/,"");
+        _this.annotation[_type] = _value;
+        _this.checkAnnotation();
         IriSP.jQuery('.Musitag-Annotator-tagInSend .' + _classes[0]).attr('class',_class);
         IriSP.jQuery(this).siblings().removeClass('down')
             .children(':last-child').css('opacity',.35);
         IriSP.jQuery(this).addClass('down')
             .children(':last-child').css('opacity',1);
     });
-    var _this = this;
+    
     this.$.find('.Musitag-Annotator-close').click(function() {
+        _this.recorder.stopRecord();
         _this.hide();
         _this.player.popcorn.trigger("IriSP.MusitagAndYou.show");
-    })
+    });
+    
+    this.$.find('.Musitag-Annotator-Note').click(function() {
+       _this.recorder.stopRecord();
+    });
+    
+    window.setAudioUrl = function(_url) {
+        _this.annotation.audio_url = _url;
+        console.log(_url);
+    }
 }
 
 IriSP.Widgets.MusitagAnnotator.prototype.onTimeupdate = function() {
@@ -118,8 +162,23 @@
     this.main_div.css("margin-left",Math.max(this.min_left, Math.min(this.max_right - this.main_width, _x - this.main_width / 2))+"px");
 }
 
+IriSP.Widgets.MusitagAnnotator.prototype.checkAnnotation = function() {
+    var _res = this.annotation.emoticon && this.annotation.color;
+    this.$.find('.Musitag-Annotator-Note').css("opacity", _res ? 1 : .5);
+    return _res;
+}
+
 IriSP.Widgets.MusitagAnnotator.prototype.show = function() {
     this.$.show();
+    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 = {
+        audio_url: false,
+        emoticon: false,
+        color: false
+    };
+    this.checkAnnotation();
     this.position_bar.slideDown(200);
 }
 
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/templates/base.html
--- a/web/tralalere/templates/base.html	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/templates/base.html	Thu Jun 07 11:42:33 2012 +0200
@@ -15,6 +15,8 @@
 {% block main_content %}
 {% endblock %}
         </div>
+{% block end_body %}
+{% endblock %}
     </body>
 </html>
     
\ No newline at end of file
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/templates/home.html
--- a/web/tralalere/templates/home.html	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/templates/home.html	Thu Jun 07 11:42:33 2012 +0200
@@ -13,7 +13,7 @@
                     <img class="home-media-image" src="{{im.url}}" width="{{ im.width }}" height="{{ im.height }}" />
                 </a>
                 <h3>
-                    <a href="#">{{content.title}}</a>
+                    <a href="{% url player content.iri_id %}">{{content.title}}</a>
                 </h3>
                 <h4>
                     <a href="#">{{content.description}}</a>
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/templates/player.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/tralalere/templates/player.html	Thu Jun 07 11:42:33 2012 +0200
@@ -0,0 +1,85 @@
+{% extends "base.html" %}
+{% load thumbnail %}
+{% block js_import %} 
+        <script type="text/javascript" src="{{STATIC_URL}}tralalere/metadataplayer/LdtPlayer-core.js"></script>
+{% endblock %}
+{% block main_content %}
+{% thumbnail content.image "135x120" format="PNG" crop="center" as im %}
+            <div class="player-header">
+                <div class="player-topleft">
+                    <h1>Musitag</h1>
+                    <div class="back-home">
+                        <a href="{% url home %}">Liste des chansons</a>
+                    </div>
+                </div>
+                <div class="player-album">
+                    <img src="{{im.url}}" />
+                    <h2>{{content.title}}</h2>
+                    <h3>{{content.description}}</h3>
+                    <div id="player-elements"></div>
+                </div>
+            </div>
+            
+            <div class="player-timeline">
+                <div id="controller-widget"></div>
+                <div id="slider-widget"></div>
+            </div>
+            <div class="player-belowtl">
+                <div id="player-annotations"></div>
+                <div id="player-andyou"></div>
+                <div id="player-annotator"></div>
+            </div>
+{% endthumbnail %}
+{% endblock %}
+
+{% block end_body %}
+    <script type="text/javascript">
+    IriSP.libFiles.defaultDir = "{{STATIC_URL}}tralalere/js";
+    IriSP.widgetsDir = "metadataplayer";
+    var _metadata = {
+        url: '{% url projectjson_id content.front_project.ldt_id %}',
+        format: 'ldt'
+    };
+    var _config = {
+        gui: {
+            width : 1,
+            height : 1,
+            container : 'player-elements',
+            default_options: {
+                metadata: _metadata
+            },
+            css : '{{STATIC_URL}}tralalere/metadataplayer/LdtPlayer-core.css',
+            widgets: [
+                {
+                    type: "Controller",
+                    container: "controller-widget"
+                },
+                {
+                    type: "Slider",
+                    container: "slider-widget",
+                    minimize_timeout: false
+                },
+                {
+                    type: "MusitagAnnotations",
+                    container: "player-annotations"
+                },
+                {
+                    type: "MusitagAndYou",
+                    container: "player-andyou"
+                },
+                {
+                    type: "MusitagAnnotator",
+                    container: "player-annotator"
+                }
+            ]
+        },
+        player:{
+            type: 'jwplayer',
+            height: 1, 
+            width: 1,
+            metadata: _metadata
+        }
+    };
+    var _myPlayer = new IriSP.Metadataplayer(_config);
+    </script>
+{% endblock %}
\ No newline at end of file
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/urls.py
--- a/web/tralalere/urls.py	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/urls.py	Thu Jun 07 11:42:33 2012 +0200
@@ -35,7 +35,8 @@
     (r'^accounts/', include('social_auth.urls')),
     url(r'^accounts/login/$',pf_login,{'template_name': 'registration/login.html'},name='auth_login'),
     (r'^oauth/', include('oauth_provider.urls')),
-    url(r'^home$', 'tralalere.views.home', name='home'),       
+    url(r'^home$', 'tralalere.views.home', name='home'),
+    url(r'^player/(?P<contentid>[\w\d-]+)$', 'tralalere.views.player', name='player'),       
     (r'^/?$', 'django.views.generic.simple.redirect_to', {'url': 'home'}),
     #(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}),
     
diff -r ccdc27a0f2ea -r a019732d9700 web/tralalere/views.py
--- a/web/tralalere/views.py	Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/views.py	Thu Jun 07 11:42:33 2012 +0200
@@ -7,4 +7,10 @@
     
     contents = Content.objects.filter(front_project__state = 2)
     
-    return render_to_response('home.html', {'contents': contents}, context_instance=RequestContext(request))
\ No newline at end of file
+    return render_to_response('home.html', {'contents': contents}, context_instance=RequestContext(request))
+
+def player(request, contentid):
+    
+    content = Content.objects.get_by_natural_key(contentid)
+    
+    return render_to_response('player.html', {'content': content}, context_instance=RequestContext(request))
\ No newline at end of file