# HG changeset patch
# User veltr
# Date 1348678536 -7200
# Node ID c1c762ad16974a81c9ea02d6a1dc3de8988ac162
# Parent  eadb7290c3251d24511f84b2a1fec399801d140c
Added Voice Annotation Support

diff -r eadb7290c325 -r c1c762ad1697 sbin/build/client.xml
--- a/sbin/build/client.xml	Mon Sep 24 18:32:22 2012 +0200
+++ b/sbin/build/client.xml	Wed Sep 26 18:55:36 2012 +0200
@@ -22,7 +22,7 @@
             <!-- required file before everything else -->
             <filelist dir="../../src/js/libs" files="LAB.min.js" />
             <!-- core files -->
-            <filelist dir="../../src/js" files="init.js utils.js pop.js model.js defaults.js widgets.js" />
+            <filelist dir="../../src/js" files="init.js utils.js model.js defaults.js widgets.js" />
             <!-- serializers -->
             <fileset dir="../../src/js/serializers" casesensitive="yes">
                 <include name="**/*.js"/>
diff -r eadb7290c325 -r c1c762ad1697 src/js/defaults.js
--- a/src/js/defaults.js	Mon Sep 24 18:32:22 2012 +0200
+++ b/src/js/defaults.js	Wed Sep 26 18:55:36 2012 +0200
@@ -22,7 +22,8 @@
         paper: "paper.js",
         jqueryMousewheel: "jquery.mousewheel.min.js",
         renkanPublish: "renkan-publish.js",
-        processing: "processing-1.3.6.min.js"
+        processing: "processing-1.3.6.min.js",
+        recordMicSwf: "record_mic.swf"
     },
     locations : {
         // use to define locations outside default_dir
@@ -61,6 +62,9 @@
     MashupPlayer: {
         noCss: true
     },
+    AnnotationsList: {
+        requires: [ "jwplayer" ]
+    },
     Sparkline: {
         noCss: true,
         requires: [ "raphael" ]
diff -r eadb7290c325 -r c1c762ad1697 src/js/libs/record_mic.swf
Binary file src/js/libs/record_mic.swf has changed
diff -r eadb7290c325 -r c1c762ad1697 src/widgets/AnnotationsList.css
--- a/src/widgets/AnnotationsList.css	Mon Sep 24 18:32:22 2012 +0200
+++ b/src/widgets/AnnotationsList.css	Wed Sep 26 18:55:36 2012 +0200
@@ -8,6 +8,11 @@
 .Ldt-AnnotationsListWidget a {
     text-decoration: none;
 }
+
+.Ldt-AnnotationsList-Audio {
+    width: 1px; height: 1px;
+}
+
 ul.Ldt-AnnotationsList-ul {
     list-style: none;
     padding: 2px;
@@ -84,4 +89,14 @@
 
 .Ldt-AnnotationsList-Tag-Li:hover span {
     background-position: right -23px;
+}
+
+.Ldt-AnnotationsList-Play {
+    width: 125px; height: 20px; margin: 2px 0 2px 82px; text-align: center;
+    padding: 3px 5px 0 20px; font-size: 12px; cursor: pointer;
+    background: url(img/voiceannotation.png); color: #333333;
+}
+
+.Ldt-AnnotationsList-Play:hover {
+    background-position: 0 bottom;
 }
\ No newline at end of file
diff -r eadb7290c325 -r c1c762ad1697 src/widgets/AnnotationsList.js
--- a/src/widgets/AnnotationsList.js	Mon Sep 24 18:32:22 2012 +0200
+++ b/src/widgets/AnnotationsList.js	Wed Sep 26 18:55:36 2012 +0200
@@ -25,8 +25,9 @@
     foreign_url : "",
     annotation_type : false,
     refresh_interval : 0,
-    limit_count : 10,
+    limit_count : 20,
     newest_first : false,
+    show_audio: true,
     polemics : [{
         keyword: "++",
         background_color: "#c9ecc6"
@@ -42,8 +43,20 @@
     }]
 };
 
+IriSP.Widgets.AnnotationsList.prototype.messages = {
+    en: {
+        voice_annotation: "Voice Annotation",
+        now_playing: "Now playing..."
+    },
+    fr: {
+        voice_annotation: "Annotation Vocale",
+        now_playing: "Lecture en cours..."
+    }
+}
+
 IriSP.Widgets.AnnotationsList.prototype.template =
     '<div class="Ldt-AnnotationsListWidget">'
+    + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
     + '<ul class="Ldt-AnnotationsList-ul">'
     + '</ul>'
     + '</div>';
@@ -71,6 +84,7 @@
     + '{{/tags}}'
     + '</ul>'
     + '{{/tags.length}}'
+    + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-audio={{audio}}>{{l10n.voice_annotation}}</div>{{/audio}}'
     + '</li>';
 
 IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) {
@@ -205,7 +219,9 @@
                 thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
                 url : _url,
                 tags : _annotation.getTagTexts(),
-                specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "")
+                specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
+                audio : (_this.show_audio && _annotation.audio ? _annotation.audio.href : undefined),
+                l10n: _this.l10n
             };
             var _html = Mustache.to_html(_this.annotationTemplate, _data);
             var _el = IriSP.jQuery(_html);
@@ -237,7 +253,20 @@
     
         this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
             _this.player.trigger("search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
-        })
+        });
+        
+        this.$.find(".Ldt-AnnotationsList-Play").click(function() {
+            var _el = IriSP.jQuery(this),
+                _audiofile = _el.attr("data-audio").replace(_this.rtmp_streamer,"");
+            _el.text(_this.l10n.now_playing);
+            _this.jwplayer.load({
+                file: _audiofile,
+                streamer: _this.rtmp_streamer
+            });
+            _this.jwplayer.play(true);
+            _this.media.pause();
+            _this.jw_paused_media = true;
+        });
         
         if(this.searchString) {
             var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString);
@@ -266,14 +295,46 @@
     
     this.renderTemplate();
     
+    var _this = this;
+    
+    if (this.show_audio) {
+        var _tmpId = "jwplayer-" + IriSP.Model.getUID();
+        this.$.find(".Ldt-AnnotationsList-Audio").attr("id", _tmpId);
+        this.jwplayer = jwplayer(_tmpId);
+        this.jwplayer.setup({
+            flashplayer: IriSP.getLib("jwPlayerSWF"),
+            width: 1,
+            height: 1,
+            provider: "rtmp",
+            events: {
+                onIdle: function() {
+                    if (_this.jw_paused_media) {
+                        _this.jw_paused_media = false;
+                        _this.media.play();
+                    }
+                    _this.$.find(".Ldt-AnnotationsList-Play").text(_this.l10n.voice_annotation)
+                }
+            }
+        });
+        this.jw_paused_media = false;
+    }
+    
     this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
     
+    
     this.onMdpEvent("search", "onSearch");
     this.onMdpEvent("search.closed", "onSearch");
     this.onMdpEvent("search.cleared", "onSearch");
-    this.onMdpEvent("AnnotationsList.refresh","refresh");
-    
-    var _this = this;
+    this.onMdpEvent("AnnotationsList.refresh", function() {
+        if (_this.ajax_url) {
+            if (_this.mashupMode) {
+                _this.ajaxMashup();
+            } else {
+                _this.ajaxSource();
+            }
+        }
+        _this.throttledRefresh();
+    });
     
     if (this.ajax_url) {
         if (this.mashupMode) {
diff -r eadb7290c325 -r c1c762ad1697 src/widgets/CreateAnnotation.css
--- a/src/widgets/CreateAnnotation.css	Mon Sep 24 18:32:22 2012 +0200
+++ b/src/widgets/CreateAnnotation.css	Wed Sep 26 18:55:36 2012 +0200
@@ -84,11 +84,11 @@
     border: 1px solid #bbbbbb;
 }
 
-.Ldt-CreateAnnotation-Tags, .Ldt-CreateAnnotation-Polemics {
-    width: 520px;
+.Ldt-CreateAnnotation-RecBlock {
+    width: 220px; float: left;
 }
 
-.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle {
+.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle, .Ldt-CreateAnnotation-RecLabel {
     display: block; margin: 5px 0 2px; font-size: 12px;
 }
 
diff -r eadb7290c325 -r c1c762ad1697 src/widgets/CreateAnnotation.js
--- a/src/widgets/CreateAnnotation.js	Mon Sep 24 18:32:22 2012 +0200
+++ b/src/widgets/CreateAnnotation.js	Wed Sep 26 18:55:36 2012 +0200
@@ -13,6 +13,8 @@
     always_visible : false,
     show_slice : true,
     show_arrow : true,
+    show_mic_record: false,
+    show_mic_play: false,
     minimize_annotation_widget : true,
     creator_name : "",
     creator_avatar : "",
@@ -99,11 +101,35 @@
     + '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
     + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}'
     + ' <span class="Ldt-CreateAnnotation-Times">{{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
-    + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/show_slice}}</span></span>'
+    + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
     + '{{#show_creator_field}}{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator" value="{{creator_name}}" /></h3>{{/show_creator_field}}'
     + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>'
     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
     + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
+    + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
+    + '    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
+    + '        <param name="movie" value="{{record_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={{show_mic_play}}">'
+    + '        <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={{show_mic_play}}"'
+    + '             pluginspage="http://www.macromedia.com/go/getflashplayer">'
+    + '        </embed>'
+    + '    </object>'
+    + '</div>{{/show_mic_record}}' 
     + '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">'
     + '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}'
     + '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">'
@@ -116,6 +142,10 @@
     
 IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
     var _this = this;
+    
+    this.begin = new IriSP.Model.Time();
+    this.end = this.source.getDuration();
+    
     if (this.tag_titles && !this.tags) {
         this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
             var _tag,
@@ -140,7 +170,15 @@
             });
         /* We have to use the map function because Mustache doesn't like our tags object */
     }
+    this.record_swf = IriSP.getLib("recordMicSwf");
     this.renderTemplate();
+    if (this.show_mic_record) {
+        this.recorder = this.$.find("embed")[0];
+        
+        window.setAudioUrl = function(_url) {
+            _this.audio_url = _url;
+        }
+    }
     if (this.show_slice) {
         this.insertSubwidget(
             this.$.find(".Ldt-CreateAnnotation-Slice"),
@@ -196,8 +234,6 @@
     }
     
     this.onMdpEvent("CreateAnnotation.toggle","toggle");
-    this.begin = new IriSP.Model.Time();
-    this.end = this.source.getDuration();
     this.$.find("form").submit(this.functionWrapper("onSubmit"));
 }
 
@@ -224,6 +260,9 @@
 }
 
 IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
+    if (this.recorder) {
+        this.recorder.stopRecord();
+    }
     if (!this.always_visible) {
         this.visible = false;
         this.$.slideUp();
@@ -301,6 +340,10 @@
         return;
     }
     
+    if (this.recorder) {
+        this.recorder.stopRecord();
+    }
+    
     var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
         _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */
         _annotation = new IriSP.Model.Annotation(false, _export), /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
@@ -334,6 +377,14 @@
     _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected")
         .map(function() { return IriSP.jQuery(this).attr("tag-id")})); /*Liste des ids de tags */
     
+    if (this.audio_url) {
+        _annotation.audio = {
+            src: "mic",
+            mimetype: "audio/mp3",
+            href: this.audio_url
+        };
+    }
+    
     /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */
     if (this.show_creator_field) {
         _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
diff -r eadb7290c325 -r c1c762ad1697 src/widgets/img/voiceannotation.png
Binary file src/widgets/img/voiceannotation.png has changed
diff -r eadb7290c325 -r c1c762ad1697 test/jwplayer-audio.htm
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/jwplayer-audio.htm	Wed Sep 26 18:55:36 2012 +0200
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <title>Metadataplayer test with JwPlayer</title>
+        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+        <link href='test.css' rel='stylesheet' type='text/css'>
+        <script type="text/javascript" src="metadataplayer/LdtPlayer-core.js" type="text/javascript"></script>
+        <script type="text/javascript" src="test-config.js" type="text/javascript"></script>
+    </head>
+
+    <body>
+        <h1>Metadataplayer test with JwPlayer</h1>
+        <div id="LdtPlayer"></div>
+        <div id="AnnotationsListContainer"></div>
+        <script type="text/javascript">
+    IriSP.libFiles.defaultDir = "libs/";
+    IriSP.language = 'fr';
+    IriSP.widgetsDir = "metadataplayer";
+    var _metadata = {
+        url: 'http://exp.iri.centrepompidou.fr/tralalere/tralalere/ldt/cljson/id/42a3fc0a-afee-11e1-82e8-58b035f6b93d?callback=?',
+        format: 'ldt'
+    };
+    var _config = {
+        width : 550,
+        container : 'LdtPlayer',
+        default_options: {
+            metadata: _metadata
+        },
+        css : 'metadataplayer/LdtPlayer-core.css',
+        widgets: [
+            {
+                type: "JwpPlayer",
+                live: true,
+                width: 1,
+                height: 1,
+                provider: "rtmp",
+                streamer: function(_url) {
+                    var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
+                    if (_matches) {
+                        return _matches[0];
+                    } else {
+                        return _url;
+                    }
+                }
+            },
+            { type: "Slider" },
+            { type: "Controller" },
+            { type: "Polemic" },
+            { type: "Segments" },
+            { type: "Annotation" },
+            {
+                type: "CreateAnnotation",
+                api_endpoint_template: "post-test.php",
+                creator_name: "Metadataplayer",
+                creator_avatar: "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",
+                show_mic_record: true
+            },
+            { type: "Tweet" },
+            {
+                type: "Tagger",
+                api_endpoint: "post-test.php"
+            },
+            {
+                type: "Tagcloud"
+            },
+            {
+                type: "AnnotationsList",
+                container: "AnnotationsListContainer",
+                default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+                show_audio: true,
+                rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"
+                //ajax_url: "/pf/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}",
+                //ajax_granularity : 300000
+            },
+            { type: "Mediafragment"}
+        ]
+    };
+    
+    var _myPlayer = new IriSP.Metadataplayer(_config);
+    
+        </script>
+    </body>
+</html>