Created Tagger widget for FTV project new-model
authorveltr
Tue, 21 Aug 2012 18:54:36 +0200
branchnew-model
changeset 931 0fdce6e14748
parent 930 165f236e42f2
child 932 48dac21e086f
Created Tagger widget for FTV project
src/widgets/CreateAnnotation.js
src/widgets/Tagger.js
test/ext-trace.htm
test/jwplayer.htm
test/mashup/player-html.htm
test/post-test.php
--- a/src/widgets/CreateAnnotation.js	Fri Jul 27 19:22:54 2012 +0200
+++ b/src/widgets/CreateAnnotation.js	Tue Aug 21 18:54:36 2012 +0200
@@ -344,8 +344,8 @@
             _export.getAnnotations().removeElement(_annotation, true); /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
             _export.deSerialize(_data); /* On désérialise les données reçues pour les réinjecter */
             _this.source.merge(_export); /* On récupère les données réimportées dans l'espace global des données */
-            if (this.pause_on_write && this.player.popcorn.media.paused) {
-                this.player.popcorn.play();
+            if (_this.pause_on_write && _this.player.popcorn.media.paused) {
+                _this.player.popcorn.play();
             }
             _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); /* On force le rafraîchissement du widget AnnotationsList */
         },
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/Tagger.js	Tue Aug 21 18:54:36 2012 +0200
@@ -0,0 +1,145 @@
+IriSP.Widgets.Tagger = function(player, config) {
+    IriSP.Widgets.Widget.call(this, player, config);
+};
+
+IriSP.Widgets.Tagger.prototype = new IriSP.Widgets.Widget();
+
+IriSP.Widgets.Tagger.prototype.defaults = {
+    created_annotation_type: "Contributions",
+    creator_name: 'anonymous',
+    api_endpoint: "/metadataplayer/test/post-test.php",
+    api_method: "PUT",
+    pause_on_write : true,
+    api_serializer: "ldt_annotate",
+}
+
+IriSP.Widgets.Tagger.prototype.messages = {
+    en: {
+        add_a_tag: "Add a tag",
+        submit: "Submit"
+    },
+    fr: {
+        add_a_tag: "Ajouter un tag",
+        submit: "Envoyer"
+    }
+}
+
+IriSP.Widgets.Tagger.prototype.template =
+    '<form class="Ldt-Tagger"><input class="Ldt-Tagger-Input" placeholder="{{l10n.add_a_tag}}" />'
+    + '<input class="Ldt-Tagger-Submit" type="submit" value="{{l10n.submit}}" /></form>';
+
+IriSP.Widgets.Tagger.prototype.draw = function() {
+    this.renderTemplate();
+    var _tags = this.source.getTags().getTitles(),
+        _this = this,
+        _input = this.$.find(".Ldt-Tagger-Input");
+    _input.autocomplete({
+        source: _tags
+    });
+    if (this.pause_on_write) {
+        _input.keyup(function() {
+            _this.player.popcorn.pause();
+        });
+    }
+    this.$.find(".Ldt-Tagger").submit(function() {
+        var _tagvalue = _input.val();
+        if (_tagvalue) {
+            
+            /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
+            var _exportedAnnotations = new IriSP.Model.List(_this.player.sourceManager),
+                /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */
+                _export = _this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[_this.api_serializer]}),
+                /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
+                _annotation = new IriSP.Model.Annotation(false, _export),
+                /* Récupération du type d'annotation dans lequel l'annotation doit être ajoutée */
+                _annotationTypes = _this.source.getAnnotationTypes().searchByTitle(_this.created_annotation_type),
+                /* Si le Type d'Annotation n'existe pas, il est créé à la volée */
+                _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)),
+                /* L'objet Tag qui sera envoyé */
+                _tag = new IriSP.Model.Tag(false, _export);
+            /* L'objet Tag doit avoir pour titre le texte du tag envoyé */
+            _tag.title = _tagvalue;
+            /* Si nous avons dû générer un ID d'annotationType à la volée... */
+            if (!_annotationTypes.length) {
+                /* Il ne faudra pas envoyer l'ID généré au serveur */
+                _annotationType.dont_send_id = true;
+                /* Il faut inclure le titre dans le type d'annotation */
+                _annotationType.title = _this.created_annotation_type;
+            }
+            
+            /*
+             * Nous remplissons les données de l'annotation générée à la volée
+             * ATTENTION: Si nous sommes sur un MASHUP, ces éléments doivent se référer AU MEDIA D'ORIGINE
+             * */
+            var _now = 1000*_this.player.popcorn.currentTime(),
+                _pilotAnnotation = null;
+            if (_this.source.currentMedia.elementType == "mashup") {
+                /* Si c'est un mashup, on récupère l'annotation d'origine pour caler le temps */
+                var _pilotAnnotation = _this.source.currentMedia.getAnnotationAtTime(_now).annotation;
+            } else {
+                /* Sinon, on recherche une annotation correspondant au temps */
+                var _annotations = _this.getWidgetAnnotationsAtTime(_now);
+                if (_annotations.length) {
+                    _pilotAnnotation = _annotations[0];
+                }
+            }
+            if (_pilotAnnotation) {
+                console.log(_pilotAnnotation);
+                _annotation.setBegin(_pilotAnnotation.begin);
+                _annotation.setEnd(_pilotAnnotation.end);
+                /* Id du média annoté */
+                _annotation.setMedia(_pilotAnnotation.getMedia().id);
+            } else {
+                _annotation.setBegin(_now);
+                _annotation.setEnd(_now);
+                /* Id du média annoté */
+                _annotation.setMedia(_this.source.currentMedia.id);
+            }
+            
+            /* Id du type d'annotation */
+            _annotation.setAnnotationType(_annotationType.id); 
+            
+            _annotation.title = _tagvalue;
+            _annotation.created = new Date(); /* Date de création de l'annotation */
+            _annotation.description = _tagvalue;
+            
+            _annotation.setTags([_tag.id]); /*Liste des ids de tags */
+            
+            /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */
+            _export.creator = _this.creator_name;
+            _export.created = new Date();
+            /* Ajout de l'annotation à la liste à exporter */
+            _exportedAnnotations.push(_annotation);
+            /* Ajout de la liste à exporter à l'objet Source */
+            _export.addList("annotation",_exportedAnnotations);
+            
+            IriSP.jQuery.ajax({
+                url: _this.api_endpoint,
+                type: _this.api_method,
+                contentType: 'application/json',
+                data: _export.serialize(), /* L'objet Source est sérialisé */
+                success: function(_data) {
+                    console.log("success");
+                    /* Pour éviter les doublons, on supprime l'annotation qui a été envoyée */
+                    _export.getAnnotations().removeElement(_annotation, true);
+                    /* On désérialise les données reçues pour les réinjecter */
+                    _export.deSerialize(_data);
+                    /* On récupère les données réimportées dans l'espace global des données */
+                    _this.source.merge(_export);
+                    if (_this.pause_on_write && _this.player.popcorn.media.paused) {
+                        _this.player.popcorn.play();
+                    }
+                    /* On force le rafraîchissement du widget AnnotationsList */
+                    _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh");
+                },
+                error: function(_xhr, _error, _thrown) {
+                    console.log("Error when sending annotation", _thrown);
+                    _export.getAnnotations().removeElement(_annotation, true);
+                }
+            });
+            
+            _input.val("");
+        }
+        return false;
+    });
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/ext-trace.htm	Tue Aug 21 18:54:36 2012 +0200
@@ -0,0 +1,95 @@
+<!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="libs/jquery.min.js"></script>
+        <script type="text/javascript" src="libs/tracemanager.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.locations.jwPlayerSWF = "player.swf";
+    IriSP.libFiles.defaultDir = "libs/";
+    IriSP.language = 'fr';
+    IriSP.widgetsDir = "metadataplayer";
+    var _tracer = tracemanager.init_trace("test", {
+            url: "http://traces.advene.org:5000/",
+            requestmode: "GET",
+            syncmode: "sync",
+            default_subject: "tests-Metadataplayer"
+        });
+    _tracer.trace("CallFromOutside");
+    var _metadata = {
+        url: 'json/ldt-jwplayer.json',
+        format: 'ldt'
+    };
+    var _config = {            
+        gui: {
+            width : 550,
+            container : 'LdtPlayer',
+            default_options: {
+                metadata: _metadata
+            },
+            css : 'metadataplayer/LdtPlayer-core.css',
+            widgets: [
+                { type: "Slider" },
+                { type: "Controller" },
+                { type: "Polemic" },
+                { type: "Segments" },
+                { type: "Slice" },
+                {
+                    type: "Arrow",
+                    base_height: 4
+                },
+                { type: "Annotation" },
+                {
+                    type: "CreateAnnotation",
+                    api_endpoint_template: "http://192.168.56.101/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
+                    creator_name: "Metadataplayer",
+                    creator_avatar: "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",
+                    tag_titles: ["#amateur", "#digital-humanities"]
+                },
+                { type: "Tweet" },
+                {
+                    type: "Tagcloud"
+                },
+                {
+                    type: "AnnotationsList",
+                    container: "AnnotationsListContainer",
+                    default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png"
+                },
+                {
+                    type: "Trace",
+                    tracer: _tracer,
+                    js_console: true,
+                    extend: {
+                        test: 42
+                    }
+                }
+            ]
+        },
+        player:{
+            type:'auto',
+            live: true, 
+            height: 350, 
+            width: 550, 
+            provider: "rtmp",
+            autostart: true,
+            metadata: _metadata
+        }
+    };
+    
+    _myPlayer = new IriSP.Metadataplayer(_config);
+    
+        </script>
+    </body>
+</html>
--- a/test/jwplayer.htm	Fri Jul 27 19:22:54 2012 +0200
+++ b/test/jwplayer.htm	Tue Aug 21 18:54:36 2012 +0200
@@ -20,8 +20,8 @@
     IriSP.language = 'fr';
     IriSP.widgetsDir = "metadataplayer";
     var _metadata = {
-//        url: 'json/ldt-jwplayer.json',
-        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/5a893570-ca73-11e1-9443-00145ea4a2be?callback=?',
+        url: 'json/ldt-jwplayer.json',
+//        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/5a893570-ca73-11e1-9443-00145ea4a2be?callback=?',
         format: 'ldt'
     };
     var _config = {            
@@ -46,13 +46,15 @@
                 {
                     type: "CreateAnnotation",
                     api_endpoint_template: "post-test.php",
-                    api_method: "POST",
                     creator_name: "Metadataplayer",
                     creator_avatar: "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",
                     tag_titles: ["#amateur", "#digital-humanities"]
                 },
                 { type: "Tweet" },
                 {
+                    type: "Tagger"
+                },
+                {
                     type: "Tagcloud"
                 },
                 {
@@ -77,7 +79,7 @@
                     return _url;
                 }
             },
-            autostart: true,
+            //autostart: true,
             metadata: _metadata
         }
     };
--- a/test/mashup/player-html.htm	Fri Jul 27 19:22:54 2012 +0200
+++ b/test/mashup/player-html.htm	Tue Aug 21 18:54:36 2012 +0200
@@ -52,9 +52,9 @@
 IriSP.widgetsDir = "../metadataplayer";
 IriSP.language = 'fr';
 var _metadata = {
-    url: 'bab_files/mashup.json',
+//    url: 'bab_files/mashup.json',
 //    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/b2754186-a0c9-11e0-b8bd-00145ea49a02?callback=?',
-//    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/5afd8bbe-9b75-11e1-9e5d-00145ea4a2be?callback=?',
+    url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/5afd8bbe-9b75-11e1-9e5d-00145ea4a2be?callback=?',
     format: 'ldt'
 };
 var _canPlayMp4 = document.createElement('video').canPlayType('video/mp4');
@@ -79,15 +79,18 @@
                 annotation_type: false
             },
             {
+                type: "Tagger"
+            },
+            {
                 type: "MediaList",
                 container: "mediaList"
             },
             {
                 type: "AnnotationsList",
                 container: "annotationList",
-                ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
-                ajax_granularity: 30000,
-                limit_count: 3
+                //ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
+                //ajax_granularity: 30000,
+                //limit_count: 3
             },
             { type: "Mediafragment" }
         ]
--- a/test/post-test.php	Fri Jul 27 19:22:54 2012 +0200
+++ b/test/post-test.php	Tue Aug 21 18:54:36 2012 +0200
@@ -1,6 +1,6 @@
 <?php
 
-$data = json_decode($HTTP_RAW_POST_DATA);
+$data = json_decode(file_get_contents("php://input"));
 
 if (!isset($data->annotations[0]->id)) {
     $data->annotations[0]->id = uniqid("annotation_");