--- a/.hgignore Wed May 30 17:07:01 2012 +0200
+++ b/.hgignore Tue Jun 05 17:55:24 2012 +0200
@@ -18,4 +18,8 @@
syntax: regexp
^test/metadataplayer$
syntax: regexp
-\.mp4$
\ No newline at end of file
+\.mp4$
+syntax: regexp
+\.dokuwiki$
+syntax: regexp
+^\.pydevproject$
\ No newline at end of file
--- a/.project Wed May 30 17:07:01 2012 +0200
+++ b/.project Tue Jun 05 17:55:24 2012 +0200
@@ -1,11 +1,17 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
- <name>metadataplayer</name>
- <comment></comment>
- <projects>
- </projects>
- <buildSpec>
- </buildSpec>
- <natures>
- </natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>metadataplayer</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ <buildCommand>
+ <name>org.python.pydev.PyDevBuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ </buildSpec>
+ <natures>
+ <nature>org.python.pydev.pythonNature</nature>
+ </natures>
+</projectDescription>
--- a/doc/LdtPlayer-allocine.js Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,80 +0,0 @@
-/* exemple de code pour ajouter le support d'un autre player flash.
- Le code était fait à la base pour allociné, étendez le si vous en
- avez besoin.
- */
-
-/* Il faut étendre cette classe pour que le metadataplayer supporte le player
- allocine. Pour l'instant, le code présent est celui pour le jwplayer
- */
-IriSP.PopcornReplacement.allocine = function(container, options) {
- /**
- * Ce constructeur reçoit deux paramètres :
- * - container est une chaine de caractère indiquant l'id du div dans lequel il
- * doit s'initialiser
- * - options est un dictionnaire contenant les options de configuration du player
- * (correspond à la partie de configuration du player dans polemic.htm)
- */
-
- /**
- appel du parent pour initialiser les structures communes à tous les players -
- obligatoire.
- */
- IriSP.PopcornReplacement.player.call(this, container, options);
-
- this.media.duration = options.duration; /* optionnel */
-
- /* Préservation de this, au cas où */
- var _this = this;
-
- /** Déclaration au player des fonctions que l'api flash expose - brièvement:
- * - play et pause ne prennent pas de paramètres
- * - lorsque le metadataplayer appelle getPosition, le player flash doit retourner
- * la durée depuis le début en secondes,
- * - seek reçoit en paramètre la position en secondes depuis le début de la
- * vidéo vers laquelle on veut seeker.
- * - getMute retourne true si le player est muté et false sinon
- * - setMute prend un paramètre. Si celui-ci est true la vidéo doit etre mutée,
- * sinon le son doit être activé.
- *
- * NB: les valeurs de retour ne sont utilisés quand pour getPosition et getMute.
- */
- this.playerFns = {
- play: function() { return jwplayer(this.container).play(); },
- pause: function() { return jwplayer(this.container).pause(); },
- getPosition: function() { return jwplayer(this.container).getPosition(); },
- seek: function(pos) { return jwplayer(this.container).seek(pos); },
- getMute: function() { return jwplayer(this.container).getMute() },
- setMute: function(p) { return jwplayer(this.container).setMute(p); }
- }
-
- /* Déclaration des callbacks au jwplayer - ces callbacks sont appelés par le
- * player flash au moment où les évenements correspondants sont declenchés.
- * le dictionnaire this.callbacks
- * contient cinq entrées : onReady, onTime, onPlay, onPause, onSeek.
- *
- * - onReady est une fonction qui ne prend pas de paramètres et qui est appellée
- * quand le player flash a fini de s'initialiser.
- * - onTime est appelée périodiquement (par ex, toutes les demi-secondes). Elle
- * reçoit en paramètre un dictionnaire qui doit contenir un champ nommé position
- * qui contient le temps écoulé depuis le début de la vidéo.
- * - onPlay est appelé quand le player commence ou reprend la lecture. Le callback
- * ne prend pas de paramètres.
- * - onPause est appellé quand le player entre en état pausé. Le callback ne prend
- * pas de paramètres.
- * - onSeek est appelé quand le player flash seeke une vidéo. Il reçoit en
- * paramètre un object contenant deux entrées :
- * - position: la position en secondes depuis le début de la vidéo au moment où l'on seeke
- * - offset: la position cible en secondes depuis le début de la vidéo.
- *
- * Pour réference, voici la doc des évenements proposés par le jwplayer :
- * http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference#Events
- */
- options.events = this.callbacks;
-
- /* initialisation du player dans le div qui possède l'id this.container -
- a remplacer par un appel à swfobject par exemple */
- jwplayer(this.container).setup(options);
-};
-
-/* Obligatoire pour l'héritage - ne pas modifier */
-IriSP.PopcornReplacement.allocine.prototype = new IriSP.PopcornReplacement.player("", {});
\ No newline at end of file
--- a/doc/code.txt Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-Metadataplayer : Code et structure
-==================================
-
-Ce document présente briévement la conception du metadataplayer.
-
-Compilation
-===========
-
-Pour le moment, il est nécessaire d'executer un script pour génerer le fichier final. Ce script est un script ant, accessible dans
-sbin/build/client.xml. Des raccourcis existent comme compil.bat (win) et compil.sh (unix).
-
-L'étape de compilation est nécessaire pour l'instant car on a des templates qui sont integrées au fichier final à ce moment là.
-
-Objets
-======
-
-En gros, nous avons quatre objets:
-- le DataLoader, qui est l'objet chargé de récupérer les données extérieures et de les cacher
-- le sérializeur. C'est une classe derivée de IriSP.Serializer et qui implémente des méthodes pour sérializer/déserializer des données.
- Ils sont définis dans le répertoire serializers/
-- le layout manager, un objet qui gère un div et qui permet de créer/supprimer des sous-div.
-- les widgets. Un widget est associé à un div. Il possède également une réference sur l'objet popcorn pour pouvoir envoyer et recevoir des
- messages. Il doit possèder impérativement deux méthodes : un constructeur, qui appelle le constructeur de l'object Widget, et une méthode
- draw(), qui initialise l'objet. Il peut aussi optionnellement définir une méthod redraw(), au cas où le widget aurait besoin d'être redessiné.
-
-Templates
-=========
-
-Le player utilise des templates qui sont transformées en chaînes javascript puis inserées dans le fichier final.
-Un template nommé truc.html est accessible dans le code sous le nom : IriSP.truc_template.
-
-ATTENTION: Une template ne doit en aucun cas contenir de guillements ("), sous peine de faire planter la compilation et le fichier géneré.
-
-Initialisation
-==============
-
-Le code d'initialisation est défini dans init.js. En gros, il se contente de parser la structure IriSP.config qui définit les options génerales
-du player et les widgets à afficher. Chaque widget peut avoir des widgets de dépendances, qui seront instanciés avant lui et dont il aura accès
-(voir l'annexe idiomes)
-Pour plus d'informations, voir le code source des tests d'integration, notamment le fichier integration/polemic.htm.
-
-
-Annexe: Idiomes
-===============
-
-Le code utilise quelques idiomes. Les voici, sans classement particulier :
-- les membres de données privées d'un objet sont précedés d'un underscore. Ils ne sont pas censés être manipulés par des objets extérieurs, hormis
- par les tests unitaires.
-- tous les widgets et certains autres objets possèdent un attribut selector, qui est en fait une instance de jQuery appellée sur le div contenant
- l'objet en question.
-- certains widgets qui possèdent des dépendances ont accès à l'objet dépendant en tant qu'attribut portant le nom du widget en
- question. Ainsi, comme le PolemicWidget possède comme dépendance un TooltipWidget, il peut accèder à sa dépendance sous "this.TooltipWidget".
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/doc/general.fr.md Tue Jun 05 17:55:24 2012 +0200
@@ -0,0 +1,314 @@
+# Architecture générale du Metadataplayer #
+
+ATTENTION !
+Cette documentation se réfère à la v.3 du Metadataplayer, actuellement disponible dans la branche **new-model** du repository
+http://www.iri.centrepompidou.fr/dev/hg/metadataplayer
+
+## Bibliothèques extérieures ##
+
+Les bibliothèques utilisées par le Metadataplayer sont regroupées dans *src/libs*
+
+### LAB.js ###
+
+- **Fichier**: LAB.min.js
+- **Licence**: MIT.
+- **Rôle**: Charge les autres bibliothèques extérieures et les widgets.
+- **Utilisé par**: Code principal.
+- Du fait de ce mode de chargement, il s’agit de la seule bibliothèque nécessaire au moment de l’initialisation du code.
+- **Site**: http://labjs.com/
+
+### jQuery ###
+
+- **Fichier**: jquery.min.js
+- **Licence**: Double, MIT et GPL.
+- **Rôle**: Gère les actions du code sur la structure du document HTML (DOM)
+- **Utilisé par**: Code principal et tous les widgets.
+- **Site**: http://jquery.org/
+
+### jQuery UI ###
+
+- **Fichiers**: jquery-ui.min.js et jquery-ui.css
+- **Licence**: Double, MIT et GPL.
+- **Rôle**: Fournit des éléments d’interface utilisateurs, tels que *Sliders*
+- **Utilisé par**: Widgets, Controller (pour le volume) et Slider (pour le *Slider de progression*)
+- **Site**: http://jqueryui.com/
+
+### Underscore ###
+
+- **Fichier**: underscore-min.js
+- **Licence**: MIT.
+- **Rôle**: Fournit des fonctionnalités orientées programmation fonctionnelle pour manipuler tableaux, objets et fonctions.
+- **Utilisé par**: Code principal et widgets.
+- **Site**: http://documentcloud.github.com/underscore/
+
+### Popcorn ###
+
+- **Fichier**: popcorn-complete.min.js
+- **Licence**: MIT.
+- **Rôle**: Fournit une gestion de la lecture de vidéos HTML5.
+- **Utilisé par**: Players HTML5 et Youtube, ainsi que pour la communication avec le reste du Metadataplayer lorsque l’un de ces players est utilisé.
+- **Site**: http://popcornjs.org/
+
+### Mustache ###
+
+- **Fichier**: mustache.js
+- **Licence**: MIT.
+- **Rôle**: Permet de remplir des gabarits (*templates*) HTML.
+- **Utilisé par**: widgets.
+- **Site**: http://mustache.github.com/
+
+### Raphael ###
+
+- **Fichier**: raphael-min.js
+- **Licence**: MIT.
+- **Rôle**: Fournit une interface de dessin vectoriel (utilise SVG ou VML selon les navigateurs)
+- **Utilisé par**: Widgets et Sparkline
+- **Site**: http://raphaeljs.com/
+
+### ktbs4js Tracemanager ###
+
+- **Fichier**: tracemanager.js
+- **Licence**: LGPL.
+- **Rôle**: Permet de s’interfacer avec le système de gestion de traces KTBS, créé par Olivier Aubert (Liris)
+- **Utilisé par**: TraceWidget
+- **Site**: http://github.com/oaubert/ktbs4js
+
+## Code principal (core) du Metadataplayer ##
+
+Dans la version *release* du metadataplayer, les fichiers Javascript et CSS sont répartis entre le *core* et les *widgets*.
+
+*LdtPlayer-core.js* est compilé à partir de plusieurs fichiers Javascript situés (sauf LAB.min.js) dans *src/js*:
+
+### header.js ###
+
+Contient les crédits du Metadataplayer, ainsi que les informations sur la licence (*CeCILL-C*)
+
+### LAB.js ###
+
+cf. Bibliothèques extérieures.
+
+### init.js ###
+
+Définit l’objet *IriSP*, qui sert d’espace de nommage pour tout le Metadataplayer.
+Contient la classe *IriSP.Metadataplayer*, dont l’instanciation est la porte d’entrée principale du code.
+
+### pop.js ###
+
+Contient *IriSP.PopcornReplacement*, c’est à dire une version simplifiée de Popcorn pour communiquer avec des lecteurs vidéos non-supportés par Popcorn.
+Au moment de la création de cette partie, l’interfaçage Popcorn-jwplayer n’était pas satisfaisant, à remplacer éventuellement par de vrais players/plugins pour Popcorn.
+
+### utils.js ###
+
+Contient quelques fonctions utilitaires, telles que *IriSP.loadCss*, qui est l’équivalent pour les fichiers CSS de LAB.js.
+
+### model.js ###
+
+Contient les classes de gestion du modèle de données Cinelab, regroupées sous l’espace de nommage *IriSP.Model*.
+
+### widgets.js ###
+
+Contient la classe de base *IriSP.Widgets.Widget*, qui fournit les fonctionnalités de base pour les widgets.
+
+### players ###
+
+Les fichiers de ce répertoire permettent d’interfacer le *Popcorn Replacement* (cf. *pop.js*) avec des lecteurs vidéo tiers.
+
+Existent actuellement:
+
+1. **player.jwplayer**, pour communiquer avec JwPlayer, utilisé pour lire des flux RTMP sur la plateforme *Ligne de temps*
+2. **player.dailymotion**, pour lire des vidéos du *Youtube à la française*
+3. **player.allocine**, pour le player de allocine.net
+4. **player.mashup**, pour le player de bout à bout Flash créé par Thibaut Cavalié.
+
+### serializers ###
+
+Les Sérialiseurs servent d’interface entre les formats de données utilisés pour les échanges avec les serveurs.
+
+Deux sérialiseurs existent à l’heure actuelle:
+
+1. **PlatformSerializer**, pour lire les flux JSON fournis par la plateforme *Lignes de Temps*.
+2. **PlatformAnnotateSerializer**, pour communiquer avec l’API d’ajout d’annotations de la plateforme, dont le format est légèrement différent.
+
+## Widgets ##
+
+Les Widgets sont des modules, visibles ou non, permettant de rajouter des fonctionnalités au Metadataplayer.
+
+Situés dans le répertoire *src/widgets*, ils contiennent nécessairement un fichier de code *NomDuWidget.js* et, optionnellement un fichier de style *NomDuWidget.css*
+
+#### Options courantes ####
+
+- Les widgets affichant des annotations possèdent l’option *annotation\_type*, qui peut prendre les valeurs suivantes:
+ - Chaîne de caractères: prend en compte les types d’annotations dont le titre contient la chaîne. Exemple: "chap" permet notamment d’afficher les annotations dans le type d’annotation "Chapitrage"
+ - Tableau de chaînes: pour prendre en compte plusieurs types d’annotations
+ - false: pour prendre en compte toutes les annotations du projet
+- *requires*, qui permet d’encapsuler un widget dans un autre.
+
+Voici la liste des widgets actuellement disponibles, avec leurs options:
+
+### HelloWorld ###
+
+- **Rôle**: Widget d’exemple démontrant l’API de création de widgets
+- **Options**:
+ - **text**: (défaut: "world"), texte à afficher après "Hello, "
+- Utilise un fichier CSS: oui
+
+### Slider ###
+
+- **Rôle**: Barre de progression et *Slider* indiquant la position de la tête de lecture vidéo et permettant de la déplacer.
+- **Options**:
+ - **minimized\_height**: (défaut: 4), hauteur en pixels du *Slider* en mode minimisé
+ - **maximized\_height**: (défaut: 10), hauteur en pixels du *Slider* en mode maximisé (lorsque la souris passe dessus)
+ - **minimize\_timeout**: (défaut: 1500), durée en millisecondes avant que le *Slider* ne se minimise. À une valeur de 0, le *Slider* ne se minimise plus.
+- Utilise la bibliothèque: jQuery UI
+- Utilise un fichier CSS: oui
+
+### Controller ###
+
+- **Rôle**: Boutons Lecture/Pause, Rechercher, Ouvrir l’annotateur et contrôle du volume
+- **Options**:
+ - **disable\_annotate\_btn**: (défaut: false), permet de désactiver le bouton d’ouverture de l’annotateur s’il est à *true*
+ - **disable\_search\_btn**: (défaut: true), permet de désactiver le bouton de recherche d’annotations
+- Utilise la bibliothèque: jQuery UI
+- Utilise un fichier CSS: oui
+
+### Arrow ###
+
+- **Rôle**: Dessine la flèche indiquant la position de l’annotation
+- **Options**:
+ - **arrow\_height**: (défaut: 16), hauteur en pixels de la flèche
+ - **arrow\_width**: (défaut: 24), largeur en pixels de la flèche
+ - **base\_height**: (défaut: 0), hauteur entre le bas de la flèche et le bas du widget. Nécessaire si l’on souhaite faire un widget aux bords arrondis.
+ - **base\_curve**: (défaut: 0), rayon de courbure des bords arrondis du widget.
+ - **fill\_url**: URL d’une image de remplissage pour le widget
+ - **fill\_color**: (défaut: "#ffffff" = blanc), couleur de remplissage du widget. Peut-être remplacé par un dégradé sous la forme angle en degrés-couleur de début-couleur de fin, ex: "90-#000-#fff"
+ - **stroke\_color**: (défaut: "#b7b7b7" = gris), couleur de la bordure du widget.
+ - **stroke\_width**: (défaut: 1.5), épaisseur en pixels de la bordure du widget.
+ - **animation\_speed**: (défaut: 20), vitesse de déplacement de la flèche.
+ - **pilot\_widget**: (défaut: "Annotation"), widget commandant la position de la flèche.
+- Utilise la bibliothèque: Raphael
+- Utilise un fichier CSS: non
+
+### Annotation ###
+
+- **Rôle**: Affiche les informations relatives à une annotation au moment où celle-ci est jouée
+- **Options**:
+ - **annotation\_type**: (défaut: "chapitrage"), cf. *Options courantes*, plus haut.
+ - **show\_top\_border**: (défaut: false), afficher ou non la bordure en haut du widget (au cas où il est utilisé sans/avec le widget *Arrow*)
+ - **site\_name**: "Lignes de Temps", nom du site à afficher lorsque l’on clique sur les boutons de partage pour réseaux sociaux.
+- Utilise un fichier CSS: oui
+
+### CreateAnnotation ###
+
+- **Rôle**: Permet de créer une annotation en affichant un formulaire
+- **Options**:
+ - **show\_title\_field**: (défaut: true), affiche un champ permettant de saisir le titre de l’annotation.
+ - **creator\_name**: nom d’utilisateur du créateur de l’annotation.
+ - **creator\_avatar**: URL de l’image de profil du créateur de l’annotation.
+ - **tags**: (défaut: false), liste des tags à afficher, sous la forme d’un tableau d’objets type [ { id: "tag-001", title: "" } ]. Si la valeur est false, affiche les tags les plus utilisés du projet.
+ - **max\_tags**: (défaut: 8), nombre de tags à afficher.
+ - **polemics**: boutons polémiques à afficher, sous la forme d’un tableau d’objets indiquant mot-clé à ajouter, couleur du fond du bouton, couleur du bouton, ex: [ { keyword: "++", background\_color: "#00a000", text\_color: "#ffffff" } ]
+ - **annotation\_type**: (défaut: "Contributions"), cf. *Options courantes*, plus haut.
+ - **api\_serializer**: (défaut: "ldt\_annotate"), sérialiseur à utiliser pour l’envoi des annotations.
+ - **api\_endpoint\_template**: URL de l’API, où {{id\}\} est remplacé par l’ID du projet, ex: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/annotations/{{id}}.json".
+ - **api\_method**: (défaut: "PUT"), méthode HTTP utilisée pour envoyer les annotations. La plateforme *Lignes de temps* utilise PUT, mais cette méthode devrait être réservée pour la création d’une ressource dont l’URL est connue à l’avance.
+ - **close\_widget\_timeout**: (défaut: 0), durée en millisecondes avant que le widget ne soit refermé après l’envoi d’une annotation. Si la valeur est 0, le widget ne se referme pas.
+- Utilise un fichier CSS: oui
+
+### Polemic ###
+
+- **Rôle**: Affiche la *timeline polémique*, c’est à dire les tweets colorés en fonction de la syntaxe polémique. Selon le volume de tweets, deux modes de représentation existent:
+ - Avec un faible volume, les tweets sont des carrés dessinés individuellement.
+ - Avec un volume élevé, les colonnes présentent les volumes agrégés de tweets par couleur.
+- **Options**:
+ - **element\_width**: (défaut: 5), largeur en pixels d’une tranche de tweets.
+ - **element\_height**: (défaut: 5), hauteur en pixels d’un tweet, en mode faible volume.
+ - **max\_elements**: (défaut: 15), nombre de tweets dans une colonne à partir duquel le mode de représentation change.
+ - **annotation\_type**: (défaut: "tweet"), cf. *Options courantes*, plus haut.
+ - **defaultcolor**: (défaut: "#585858" = gris), couleur des tweets qui n’ont pas d’annotation polémique.
+ - **foundcolor**: (défaut: "#fc00ff" = mauve), couleur d’affichage des tweets correspondant à un résultat de recherche.
+ - **polemics**: couleurs polémiques à afficher, en fonction d’une recherche de termes, type [ { keywords: [ "++" ], color: "#1D973D" } ]
+- Utilise un fichier CSS: oui
+
+### Tweet ###
+
+- **Rôle**: Affiche furtivement le contenu d’un tweet
+- **Options**:
+ - **hide_timeout**: (défaut: 5000), durée en millisecondes, avant que l’affichage du Tweet ne se referme
+ - **polemics**: identique au paramètre *polemics* du widget *Polemic*
+
+### Sparkline ###
+
+- **Rôle**: Affiche une courbe indiquant l’évolution du volume d’annotations au cours du temps.
+- **Options**:
+ - **annotation\_type**: cf. *Options courantes*, plus haut.
+ - **lineColor**: (défaut: "#7492b4" = gris-bleu), couleur de la courbe
+ - **fillColor**: (défaut: "#aeaeb8" = gris), couleur de la surface sous la courbe
+ - **lineWidth**: (défaut: 2), épaisseur en pixels de la courbe
+ - **slice\_count**: (défaut: 20), nombre des tranches horaires dans lesquelles les annotations sont réparties pour calculer la courbe
+ - **height**: (défaut: 50), hauteur en pixels de la courbe
+ - **margin**: (défaut: 5), marge en pixels au-dessus de la courbe
+- Utilise la bibliothèque: Raphael
+- Utilise un fichier CSS: non
+
+### Tagcloud ###
+
+- **Rôle**: Affiche un nuage de mots-clés
+- **Options**:
+ - **include\_titles**: (défaut: true), utiliser le contenu du champ titre des annotations pour calculer le nuage de mots-clés.
+ - **include\_descriptions**: (défaut: true), utiliser le contenu du champ description des annotations pour calculer le nuage.
+ - **include\_tag\_texts**: (défaut: true), utiliser les textes des tags liés aux annotations pour calculer le nuage de mots-clés.
+ - **tag\_count**: (défaut: 30), nombre maximum de mots-clés à afficher.
+ - **stopword\_language**: (défaut: "fr"), code de langue correspondant à une liste de mots vides à exclure du nuage.
+ - **custom\_stopwords**: (défaut: []), liste de mots-vides à exclure du nuage.
+ - **exclude\_pattern**: (défaut: false), expression régulière à exclure du nuage.
+ - **annotation\_type**: (défaut: false), cf. *Options courantes*, plus haut. Concerne les annotations dont les contenus sont utilisés pour calculer le nuage.
+ - **segment\_annotation\_type**: (défaut: false), permet de définir la segmentation du nuage de mots-clés et de calculer un nuage pour chaque segment du type d’annotation choisi. Lorsque ce paramètre est à *false*, un seul nuage est calculé pour toute la durée de la vidéo.
+ - **min\_font\_size**: (défaut: 10), taille de caractères (en pixels) pour le mot le moins fréquent.
+ - **max\_font\_size**: (défaut: 26), taille de caractères (en pixels) pour le mot le plus fréquent.
+- Utilise un fichier CSS: oui
+
+### AnnotationsList ###
+
+- **Rôle**: Affiche une liste d’annotations
+- **Options**:
+ - **ajax\_url**: (défaut: false), spécifie un gabarit d’URL lorsque les annotations doivent être chargées par une API spécifique (API de segment). Dans l’URL, {{media}} sera remplacé par l’ID du média, {{begin}} par le *timecode* de début en millisecondes, {{end}} par le *timecode* de fin en millisecondes. Si le réglage est à *false*, les annotations affichées seront celles chargées à l’initialisation du Widget. Sur la plateforme *Lignes de Temps*, cette URL est http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?
+ - **ajax\_granularity**: (défaut: 300000 ms = 5 minutes), spécifie la durée qui doit être chargée par l’API de segment, de part et d’autre du timecode courant (cf. ci-dessus)
+ - **default\_thumbnail**: imagette à afficher par défaut à côté d’une annotation lorsque l’annotation n’a pas d’imagette.
+ - **foreign\_url**: spécifie un gabarit d’URL lorsque l’annotation n’a pas d’information d’URL et que l’annotation est dans un autre projet. Dans l’URL, {{media}} sera remplacé par l’ID du média, {{project}} par l’ID du projet, {{annotationType}} par l’ID du type d’annotation, {{annotation}} par l’ID de l’annotation. Sur la plateforme *Lignes de temps*, cette URL est http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}
+ - **annotation\_type**: (défaut: false), cf. *Options courantes*, plus haut.
+ - **refresh\_interval**: (défaut: 0), intervalle auquel le widget recharge en Ajax la liste des annotations (que l’on utilise l’API de segment ou non)
+ - **limit\_count**: (défaut: 10), nombre maximum d’annotations à afficher simultanément.
+ - **newest\_first**: (défaut: false), *true*: classe les annotations par ordre antéchronologique de création, *false*: classe les annotations par ordre chronologique de leur timecode vidéo.
+- Utilise un fichier CSS: oui
+
+### Media ###
+
+- **Rôle**: Affiche le média en cours, ainsi que la liste des autres médias du projet. Utilisé principalement pour les mashups
+- **Options**:
+ - **default\_thumbnail**: imagette à afficher par défaut à côté d’un média lorsque le média n’a pas d’imagette.
+ - **media\_url\_template**: spécifie un gabarit d’URL lorsque le média n’a pas d’information d’URL, par exemple: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/"
+- Utilise un fichier CSS: oui
+
+### Tooltip ###
+
+- **Rôle**: Affiche une infobulle, utilisé uniquement comme *widget inclus* dans d’autres widgets.
+- Pas d’options
+- Utilise un fichier CSS: oui
+
+### Trace ###
+
+- **Rôle**: Envoi des traces au serveur KTBS
+- **Options**:
+ - **js\_console**: (défaut: false), écriture ou non des traces dans la console du navigateur.
+ - **url**: (défaut: "http://traces.advene.org:5000/"), URL du serveur de traces
+ - **requestmode**: (défaut: "GET"), méthode HTTP utilisée pour l’envoi des traces (seul *"GET"* permet le *cross-domain*).
+ - **syncmode**: (défaut: "sync"), envois groupés (mode *"delayed"*) ou non (*"sync"*) des traces
+- Utilise la bibliothèque: ktbs4js tracemanager
+- Utilise un fichier CSS: non
+
+### Mediafragment ###
+
+- **Rôle**: Gère les URLs à la norme *Mediafragment*: change la position de la tête de lecture en fonction de l’URL et inversement.
+- Une URL finissant par #id=*id de l’annotation* pointe sur une annotation, par #t=*temps en secondes* vers un timecode de la vidéo.
+- Pas d’options
+- Utilise un fichier CSS: non
--- a/doc/implementer-un-player.txt Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,21 +0,0 @@
-API qu'un player doit implémenter pour espérer être supporté facilement par le
-metadataplayer :
-
-En gros, il faut une api similaire à celle du jwplayer
-(cf : http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference).
-
-Cependant on n'a besoin que des fonctions suivantes :
-- play() - sans argument. Met le player en lecture, s'il était en pause, et ne fait rien autrement
-- pause - sans arguments. Pause le player s'il était en train de lire
-- seek(duree_secondes) - Met la vidéo à duree_secondes depuis le début
-- getMute - sans arguments. Retourne true si le player est muté, false sinon
-- setMute - prend un booléen comme argument, coupe le son s'il est à true, et l'active s'il est à false
-- getPosition - sans arguments. Retourne le nombre de seconds ecoulées depuis le début del
- la vidéo
-
-On a également besoin que le player ait des callbacks pour les évenements suivants :
-- quand le lecteur a fini d'être initialisé (onReady pour jwplayer)
-- declenché à chaque fois que le player change d'image (onTime)
-- declenché quand la lecture de la vidéo commence (onPlay)
-- declenché quand la vidéo est mise sur pause (onPause)
-- declenché quand l'utilisateur seek (onSeek)
\ No newline at end of file
--- a/doc/signals.txt Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,83 +0,0 @@
-This is the list of the signals sent by the different widgets :
-
-Mediafragments
-==============
- IriSP.Mediafragment.hashchange(hashvalue): This message is used by the iframe embed code to relay data
- outside of the iframe. This message sends as a parameter the
- new anchor value of the url.
-
- IriSP.Mediafragment.showAnnotation(annotationId): This message is sent when the mediafragment code
- has fast-forwarded to the beginning of an annotation
- specified in the url. The subscribing widgets receive
- the id of the annotation and can highlight it if they
- want.
-
-PlayerWidget
-============
- IriSP.PlayerWidget.AnnotateButton.clicked: sent whenever the "Annotate" button is clicked on the player widget.
- IriSP.PlayerWidget.MouseOver: sent when the mouse is hovering the widget. Used to maximize the sliderWidget to
- get a behaviour similar to youtube.
- IriSP.PlayerWidget.MouseOut: sent when the mouse has left the widget.
-
- IriSP.search.open: sent when the searchbox has been opened
- IriSP.search.closed: sent when the searchbox has been closed
- IriSP.search(searchQuery): sent whenever the user presses a key in the searchfield. Param searchQuery
- holds the contents of the search field.
-
- IriSP.search.triggeredSearch(searchText): triggered by other widgets when they want to launch a new search. searchText is the search term.
- IriSP.search.noMatchFound: triggered by other widgets to indicate that they've not found content matching the search terms.
- IriSP.search.matchFound: triggered by other widgets to indicate that they've found content matching the search terms.
- Note: the PlayerWidget changes the highlighting of the search box depending on if it has received these messages.
-
-ArrowWidget
-===========
- IriSP.ArrowWidget.blockArrow: prevent the ArrowWidget from moving automatically
- IriSP.ArrowWidget.releaseArrow: restore the ArrowWidget to its non-blocked state
-
-SliceWidget
-===========
-
- IriSP.SliceWidget.hide: sent to the SliceWidget. hides the widget.
- IriSP.SliceWidget.show: sent to the SliceWidget. shows the widget.
- IriSP.SliceWidget.position, [left, width]: sent to the SliceWidget. Param is an array with the
- left position and the width of the zone, in percents.
- IriSP.SliceWidget.zoneChange [left, width]: sent by the widget whenever the user moves the widget. The parameter
- is an array with the left position of the zone its width. Both values
- are in percents.
-
-AnnotationWidget
-================
-
- IriSP.AnnotationsWidget.show: received by the AnnotationsWidget. hides the widget.
- IriSP.AnnotationsWidget.hide: received by the AnnotationsWidget. shows the widget.
-
-
-CreateAnnotationWidget
-======================
-
- IriSP.createAnnotationWidget.addedAnnotation(annotation): sent by the widget when an annotation has been created.
- passes the annotation dict as parameter.
-
-PolemicWidget
-=============
-
- IriSP.PolemicTweet.click(elementId): sent by the widget when the user clicks on it. Passes the annotation id as a param.
- the mediafragment modules listens to this message to update the url accordingly.
-
-SegmentsWidget
-==============
-
- IriSP.SegmentsWidget.click(annotationId): sent by the widget when the user clicks on it. Passes the annotation id as a param.
- the mediafragment modules listens to this message to update the url accordingly.
-
-SparklineWidget
-===============
-
- IriSP.SparklineWidget.clicked(newTime): sent whenever the sparkline widget is clicked. Param newTime is the new time the video
- is seeking too. The mediafragment module listens to this.
-
-StackGraphWidget
-=================
-
- IriSP.StackGraphWidget.clicked(newTime): sent whenever the stackgraph widget is clicked. Param newTime is the new time the video
- is seeking too. The mediafragment module listens to this.
\ No newline at end of file
--- a/doc/widget_tutorial/LdtPlayer-tutorial.js Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,61 +0,0 @@
-/* This is the constructor of the widget. It's called by the
- initialization routine.
-*/
-IriSP.TutorialWidget = function(Popcorn, config, Serializer) {
- IriSP.Widget.call(this, Popcorn, config, Serializer);
- /* After having called the parent constructor, a couple objects are defined for us
- this._config contains all the configuration options passed in the config.
- this._id holds the id of the div where the widget has to draw himself
- this._serializer is an object containing the metadata that was request in the configuration
- options.
- */
-
-}
-
-/* We need to create assign new prototype to TutorialWidget.prototype
- because we're going to declare methods in it */
-IriSP.TutorialWidget.prototype = new IriSP.Widget();
-
-/* This method draws the widget - it's called automatically by
- the initialization script.
- */
-IriSP.TutorialWidget.prototype.draw = function() {
- /* this.selector is a shortcut to jQuery(widget.container) - it's used everywhere in the code */
- this.selector.html('Hello');
- this.selector.css({
- "text-align" : "center",
- "padding": "10px 0",
- "font-size" : "14px"
- });
-
- /* The following is a list of idioms found throughout the code */
- var templ = IriSP.player_template; /* get the compiled template code for the player.html template -
- templates are located in the src/templates directory and are automatically
- compiled and made available in the compiled file as IriSP.templatename_template (without the .html)
- */
- var res = IriSP.templToHTML(IriSP.player_template, {var: 1}); /* format the template with the variable 'var' */
-
- /* this._Popcorn is a handle on the Popcorn object. It exposes the API which is documented
- here : http://popcornjs.org/api
- currentTime is a Popcorn method that either returns or changes the currentTime.
- */
- var time = this._Popcorn.currentTime();
-
- /* Listen to the IriSP.TutorialWidget.foo message. By convention, the name of
- a message is IriSP.widgetName.messageName */
- this._Popcorn.listen("IriSP.TutorialWidget.foo",
- /* IriSP.wrap preserves this in the callback */
- IriSP.wrap(this, this.fooMessageHandler));
- /* send a message, passing an object allong */
- this._Popcorn.trigger("IriSP.TutorialWidget.foo", {name: "Dave", surname: "Grohl"});
-};
-
-/* Handler for the IriSP.foo message */
-IriSP.TutorialWidget.prototype.fooMessageHandler = function(param) {
-
- // show that this is preserved correctly.
- console.log(this !== window, this);
-
- this.selector.append(IriSP.templToHTML("<h2>{{ name }}, {{ surname }}</h2>", {name: param.name, surname: param.surname}));
- return;
-};
\ No newline at end of file
--- a/doc/widget_tutorial/README.txt Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,7 +0,0 @@
-How to make your own widget for the metadataplayer
-==================================================
-
-This is a short tutorial that will show you how to make
-a widget for the metadataplayer. It details how to configure
-the metadataplayer in a HTML page and how to use your own widget
-along with the player.
\ No newline at end of file
--- a/doc/widget_tutorial/tutorial.htm Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,94 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
-
-<head>
-<title>Metadataplayer - Widget tutorial</title>
-</head>
-
-<body>
-
- <div style="width:650px;font-family: 'Trebuchet MS', 'Helvetica', 'Arial', 'Verdana', 'sans-serif';">
- <h1>MetaDataPlayer</h1>
- </div>
-
- If you're seeing nothing, it's because you've probably forgotten to run the build script.
- Run sbin/build/compil.sh to compile the files together.
- <!-- load the player file, and then our tutorial widget -->
- <script type="text/javascript" src="../../build/LdtPlayer-release.js" type="text/javascript"></script>
- <script type="text/javascript" src="LdtPlayer-tutorial.js" type="text/javascript"></script>
-
- <!-- this is the div the player will instantiate itself-->
- <div id="LdtPlayer"></div>
-
- <script type="text/javascript">
- var file = "../../test/integration/polemic_fr.json";
-
- /* This is the player configuration */
- var config = {
- /* The first part of the config, config.gui, describes the gui options and the widgets. */
- gui:{
- width:650,
- container:'LdtPlayer', /* container div where the player will instantiate itself */
- css:'../../src/css/LdtPlayer.css', /* where to get the css from */
-
- /* default options for the widgets, to keep things DRY.
- We put the metadata config there because the widgets often get their data from the same sources,
- Also not that re-defining a field that was defined in default_options overrides its value.
- */
- default_options : {
- metadata:{
- src:file,
- type:'json' /* determines how the data will be loaded */
- }
- },
- /* this is the list of the widget that are going to be instantiated
- We're going for a minimal player here, so we're only going to instantiate
- a basic gui, a seekbar and our tutorial widget.
- */
- widgets: [
- /* the type of the widget corresponds to the name of its constructor.
- For instance, type: "SliderWidget" means to instantiate IriSP.SliderWidget
- */
- {type: "SliderWidget"},
- {type: "PlayerWidget"},
- {type: "TutorialWidget"},
- ]
- },
- /* second part of the config - player options */
- player:{
- /* type of the player to instantiate - available values are
- jwplayer, html5, youtube, etc.
- */
- type:'jwplayer',
- /* the rest are options for the jwplayer */
- live: true,
- height: 300,
- width: 640,
- provider: "rtmp",
- file: "video/ldtplatform/museologie_inaugurale_20111018_flat.f4v",
- streamer: "rtmp://media.iri.centrepompidou.fr/ddc_player/"
- },
- /* modules - modules are things similar to widgets, except that they
- don't live in a div.
- */
- modules: [
- /* the mediafragment module updates the url of the video to allow
- sharing a specific moment in a video
- */
- { type: "MediaFragment",
- metadata:{
- format:'cinelab',
- src:file,
- type:'json'}
- }]
-
- };
-
- // init the player, specifying the config and a basic config file
- // for media autoconfig.
- IriSP.initPlayer(config, file);
- </script>
-
-
- </body>
- </html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/sbin/doc/markdown2dokuwiki.py Tue Jun 05 17:55:24 2012 +0200
@@ -0,0 +1,40 @@
+import re, sys
+
+inputname = sys.argv[1]
+outputname = sys.argv[2]
+
+inputfile = open(inputname,'r')
+
+markdowntext = inputfile.read()
+
+# Replacing title levels: #italic# -> ======italic======
+
+wikitext = re.sub("(?m)(^#+|#+$)", lambda matches: "=" * (7 - len(matches.group(1))), markdowntext)
+
+# Replacing italics: *italic* -> //italic//
+
+wikitext = re.sub("(?m)([^*])\*([^*]+)\*($|[^*])", lambda matches: matches.group(1) + "//" + matches.group(2) + "//" + matches.group(3), wikitext)
+
+# Replacing lists: - -> *
+
+wikitext = re.sub("(?m)^(\s*)(-)\s", lambda matches: " " * ( 2 + len(matches.group(1)) / 2) + "* ", wikitext)
+
+# Replacing lists: 1. -> -
+
+wikitext = re.sub("(?m)^(\s*)(\d+\.)\s", lambda matches: " " * ( 2 + len(matches.group(1)) / 2) + "- ", wikitext)
+
+# Replacing escaped underscores \_ -> _
+
+wikitext = re.sub("(?m)(\\\_)", "_", wikitext)
+
+# Escaping URL templates {{ -> %%{%%{
+
+wikitext = re.sub("(?m)({{)", "%%{%%{", wikitext)
+
+outputfile = open(outputname,'w')
+
+outputfile.write(wikitext)
+
+outputfile.close()
+
+inputfile.close()
\ No newline at end of file
--- a/src/js/init.js Wed May 30 17:07:01 2012 +0200
+++ b/src/js/init.js Tue Jun 05 17:55:24 2012 +0200
@@ -219,6 +219,25 @@
pop = Popcorn("#" + _tmpId);
break;
+ case "html5-audio":
+ var _tmpId = Popcorn.guid("audio"),
+ _videoEl = IriSP.jQuery('<audio>');
+
+ _videoEl.attr({
+ "src" : this.config.player.video,
+ "id" : _tmpId
+ })
+
+ if(this.config.player.hasOwnProperty("width")) {
+ _videoEl.attr("width", this.config.player.width);
+ }
+ if(this.config.player.hasOwnProperty("height")) {
+ _videoEl.attr("height", this.config.player.height);
+ }
+ IriSP.jQuery("#" + containerDiv).append(_videoEl);
+ pop = Popcorn("#" + _tmpId);
+ break;
+
case "jwplayer":
var opts = IriSP.jQuery.extend({}, this.config.player);
delete opts.container;
--- a/src/templates/createAnnotationWidget.html Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,75 +0,0 @@
-{{! template for the annotation creation widget }}
-<div class='Ldt-createAnnotationWidget'>
- <!-- ugly div because we want to have a double border -->
- <div class='Ldt-createAnnotation-DoubleBorder'>
- <div class='Ldt-createAnnotation-screen Ldt-createAnnotation-startScreen'>
- <div style='margin-bottom: 7px; overflow: auto;'>
- <div class='Ldt-createAnnotation-Title'></div>
- <div class='Ldt-createAnnotation-TimeFrame'></div>
- {{^cinecast_version}} <div class='Ldt-createAnnotation-Minimize Ldt-TraceMe' title='Cancel'></div>
- {{/cinecast_version}}
- </div>
- <div class='Ldt-createAnnotation-Container'>
- {{#show_from_field}}
- <label>{{l10n.your_name}} : </label><input class='Ldt-createAnnotation-userName Ldt-TraceMe' value='{{user_name}}' />
- {{/show_from_field}}
- <textarea class='Ldt-createAnnotation-Description Ldt-TraceMe'></textarea>
- <div class='Ldt-createAnnotation-userAvatar Ldt-TraceMe'>
- {{^user_avatar}} <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img>
- {{/user_avatar}}
- {{#user_avatar}} <img src='{{ user_avatar }}'></img>
- {{/user_avatar}}
- </div>
- <div class='Ldt-createAnnotation-profileArrow'></div>
- </div>
- <button class='Ldt-createAnnotation-submitButton Ldt-TraceMe'>{{l10n.submit}}</button>
- {{#tags.length}}
- <div class='Ldt-createAnnotation-btnblock Ldt-createAnnotation-keywords'>
- <label>{{l10n.add_keywords}} :</label>
- <ul class='Ldt-floatList'>
- {{#tags}}
- <li><button class='Ldt-createAnnotation-keyword-button Ldt-TraceMe' tag-id='{{id}}'>{{meta.description}}</button></li>
- {{/tags}}
- </ul>
- </div>
- {{#random_tags}}
- <button class='Ldt-createAnnotation-moar-keywordz'>{{l10n.more_tags}}</button>
- {{/random_tags}}
- {{/tags.length}}
- {{#polemic_mode}}
- {{#polemics.length}}
- <div class='Ldt-createAnnotation-btnblock Ldt-createAnnotation-polemics'>
- <label>{{l10n.add_polemic_keywords}} :</label>
- <ul class='Ldt-floatList'>
- {{#polemics}}
- <li><button class='Ldt-createAnnotation-polemic-{{className}} Ldt-createAnnotation-polemic-button Ldt-TraceMe'>{{keyword}}</button></li>
- {{/polemics}}
- </ul>
- </div>
- {{/polemics.length}}
- {{/polemic_mode}}
- </div>
- <div class='Ldt-createAnnotation-screen Ldt-createAnnotation-waitScreen' style='display: none; text-align: center'>
- <div class='Ldt-createAnnotation-spinner'></div>
- {{l10n.wait_while_processed}}
- </div>
- <div class='Ldt-createAnnotation-screen Ldt-createAnnotation-errorScreen' style='display: none; text-align: center'>
- <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>
- {{l10n.error_while_contacting}}
- </div>
- <div class='Ldt-createAnnotation-screen Ldt-createAnnotation-endScreen' style='display: none'>
- <div class='Ldt-createAnnotation-Minimize' title='Hide'></div>
- {{l10n.annotation_saved}}
- <br>
- {{^disable_share}}
- {{l10n.share_annotation}}
- <div style='margin-top: 12px; text-align: center;'>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink Ldt-TraceMe'></a>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink Ldt-TraceMe'></a>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink Ldt-TraceMe'></a>
- </div>
- {{/disable_share}}
- </div>
- <div class='Ldt-floatClear'></div>
- </div>
-</div>
--- a/src/templates/createAnnotation_errorMessage.html Wed May 30 17:07:01 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,3 +0,0 @@
-<p class='Ldt-createAnnotation-errorMessage'>
- {{l10n.empty_annotation}}
-</p>
\ No newline at end of file
--- a/src/widgets/AnnotationsList.js Wed May 30 17:07:01 2012 +0200
+++ b/src/widgets/AnnotationsList.js Tue Jun 05 17:55:24 2012 +0200
@@ -16,7 +16,7 @@
* e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?
*/
ajax_url : false,
- /* how much ms should we look before and after the current timecode in the segment API
+ /* number of milliseconds before/after the current timecode when calling the segment API
*/
ajax_granularity : 300000,
default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
--- a/src/widgets/CreateAnnotation.js Wed May 30 17:07:01 2012 +0200
+++ b/src/widgets/CreateAnnotation.js Tue Jun 05 17:55:24 2012 +0200
@@ -8,7 +8,7 @@
IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget();
IriSP.Widgets.CreateAnnotation.prototype.defaults = {
- show_title_field : false,
+ show_title_field : true,
creator_name : "",
creator_avatar : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png",
tags : false,
--- a/src/widgets/MediaList.js Wed May 30 17:07:01 2012 +0200
+++ b/src/widgets/MediaList.js Tue Jun 05 17:55:24 2012 +0200
@@ -19,7 +19,6 @@
}
IriSP.Widgets.MediaList.prototype.defaults = {
- annotation_type: false,
default_thumbnail : "http://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
media_url_template : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/"
};
--- a/src/widgets/Polemic.js Wed May 30 17:07:01 2012 +0200
+++ b/src/widgets/Polemic.js Tue Jun 05 17:55:24 2012 +0200
@@ -26,22 +26,18 @@
polemics : [
{
"keywords" : [ "++" ],
- "description" : "positif",
"color" : "#1D973D"
},
{
"keywords" : [ "--" ],
- "description" : "negatif",
"color" : "#CE0A15"
},
{
- "keywords" : [ "==" ],
- "description" : "reference",
+ "keywords" : [ "==", "http://" ],
"color" : "#C5A62D"
},
{
- "keywords" : [ "??" ],
- "description" : "question",
+ "keywords" : [ "?" ],
"color" : "#036AAE"
}
],
--- a/src/widgets/Slider.js Wed May 30 17:07:01 2012 +0200
+++ b/src/widgets/Slider.js Tue Jun 05 17:55:24 2012 +0200
@@ -4,9 +4,6 @@
IriSP.Widgets.Slider = function(player, config) {
IriSP.Widgets.Widget.call(this, player, config);
- this.bindPopcorn("timeupdate","onTimeupdate");
- this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");
- this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");
};
IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget();
@@ -14,14 +11,14 @@
IriSP.Widgets.Slider.prototype.defaults = {
minimized_height : 4,
maximized_height : 10,
- minimize_timeout : 1500 // time before minimizing slider after mouseout
+ minimize_timeout : 1500 /* time before minimizing slider after mouseout,
+ set to zero for fixed slider */
};
IriSP.Widgets.Slider.prototype.draw = function() {
this.$slider = IriSP.jQuery('<div>')
- .addClass("Ldt-Slider")
- .css(this.calculateSliderCss(this.minimized_height));
+ .addClass("Ldt-Slider");
this.$.append(this.$slider);
@@ -40,14 +37,21 @@
this.$handle = this.$slider.find('.ui-slider-handle');
- this.$handle.css(this.calculateHandleCss(this.minimized_height));
+ this.bindPopcorn("timeupdate","onTimeupdate");
+ this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");
+ this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");
- this.$
- .mouseover(this.functionWrapper("onMouseover"))
- .mouseout(this.functionWrapper("onMouseout"));
-
- this.maximized = false;
- this.timeoutId = false;
+ if (this.minimize_timeout) {
+ this.$slider.css(this.calculateSliderCss(this.minimized_height));
+ this.$handle.css(this.calculateHandleCss(this.minimized_height));
+
+ this.$
+ .mouseover(this.functionWrapper("onMouseover"))
+ .mouseout(this.functionWrapper("onMouseout"));
+
+ this.maximized = false;
+ this.timeoutId = false;
+ }
};
IriSP.Widgets.Slider.prototype.onTimeupdate = function() {
@@ -57,30 +61,33 @@
}
IriSP.Widgets.Slider.prototype.onMouseover = function() {
- if (this.timeoutId) {
- window.clearTimeout(this.timeoutId);
- this.timeoutId = false;
- }
- if (!this.maximized) {
- this.animateToHeight(this.maximized_height);
- this.maximized = true;
+ if (this.minimize_timeout) {
+ if (this.timeoutId) {
+ window.clearTimeout(this.timeoutId);
+ this.timeoutId = false;
+ }
+ if (!this.maximized) {
+ this.animateToHeight(this.maximized_height);
+ this.maximized = true;
+ }
}
}
IriSP.Widgets.Slider.prototype.onMouseout = function() {
- if (this.timeoutId) {
- window.clearTimeout(this.timeoutId);
- this.timeoutId = false;
+ if (this.minimize_timeout) {
+ if (this.timeoutId) {
+ window.clearTimeout(this.timeoutId);
+ this.timeoutId = false;
+ }
+ var _this = this;
+ this.timeoutId = window.setTimeout(function() {
+ if (_this.maximized) {
+ _this.animateToHeight(_this.minimized_height);
+ _this.maximized = false;
+ }
+ _this.timeoutId = false;
+ }, this.minimize_timeout);
}
- var _this = this;
- this.timeoutId = window.setTimeout(function() {
- if (_this.maximized) {
- _this.animateToHeight(_this.minimized_height);
- _this.maximized = false;
- }
- _this.timeoutId = false;
- }, this.minimize_timeout);
-
}
IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {
--- a/src/widgets/Tweet.js Wed May 30 17:07:01 2012 +0200
+++ b/src/widgets/Tweet.js Tue Jun 05 17:55:24 2012 +0200
@@ -10,22 +10,18 @@
polemics : [
{
"keywords" : [ "++" ],
- "description" : "positif",
"color" : "#30d765"
},
{
"keywords" : [ "--" ],
- "description" : "negatif",
"color" : "#f51123"
},
{
"keywords" : [ "==" ],
- "description" : "reference",
"color" : "#f1e24a"
},
{
"keywords" : [ "??" ],
- "description" : "question",
"color" : "#05aae6"
}
]
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/test/audiomp3.htm Tue Jun 05 17:55:24 2012 +0200
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Metadataplayer test with HTML5 / MP3 Audio</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 HTML5 / MP3 Audio (NOT SUPPORTED BY CHROME & FIREFOX)</h1>
+ <div id="LdtPlayer"></div>
+ <div id="AnnotationsListContainer"></div>
+ <script type="text/javascript">
+ IriSP.jwplayer_swf_path = "player.swf";
+ IriSP.libFiles.defaultDir = "libs/";
+ IriSP.widgetsDir = "metadataplayer";
+ var _metadata = {
+ url: 'json/ldt-ogv.json',
+ format: 'ldt'
+ };
+ var _config = {
+ gui: {
+ width : 620,
+ container : 'LdtPlayer',
+ default_options: {
+ metadata: _metadata
+ },
+ css : 'metadataplayer/LdtPlayer-core.css',
+ widgets: [
+ { type: "Sparkline" },
+ { type: "Slider" },
+ { type: "Controller" },
+ { type: "Polemic" },
+ { type: "Segments" },
+ { type: "Slice" },
+ { type: "Arrow" },
+ { type: "Annotation" },
+ { type: "Tweet" },
+ {
+ type: "Tagcloud",
+ segment_annotation_type: "chap"
+ },
+ {
+ type: "AnnotationsList",
+ container: "AnnotationsListContainer"
+ }
+ ]
+ },
+ player:{
+ type:'html5-audio',
+ video: 'wari_0710.mp3',
+ live: true,
+ height: 1,
+ width: 1,
+ }
+ };
+ _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
+ </script>
+ </body>
+</html>
--- a/test/dailymotion.htm Wed May 30 17:07:01 2012 +0200
+++ b/test/dailymotion.htm Tue Jun 05 17:55:24 2012 +0200
@@ -2,6 +2,7 @@
<html>
<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Metadataplayer test with Dailymotion</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'>
--- a/test/index.htm Wed May 30 17:07:01 2012 +0200
+++ b/test/index.htm Tue Jun 05 17:55:24 2012 +0200
@@ -2,11 +2,10 @@
<html>
<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Metadataplayer test configurations</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>
--- a/test/jwplayer.htm Wed May 30 17:07:01 2012 +0200
+++ b/test/jwplayer.htm Tue Jun 05 17:55:24 2012 +0200
@@ -2,6 +2,7 @@
<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'>
@@ -40,7 +41,7 @@
{ type: "Annotation" },
/* {
type: "CreateAnnotation",
- api_endpoint_template: "http://192.168.56.101/pf/ldtplatform/api/ldt/annotations/{{id}}}.json",
+ api_endpoint_template: "http://192.168.56.101/pf/ldtplatform/api/ldt/annotations/{{id}}.json",
creator_name: "Metadataplayer"
}, */
{ type: "Tweet" },
--- a/test/oggvideo.htm Wed May 30 17:07:01 2012 +0200
+++ b/test/oggvideo.htm Tue Jun 05 17:55:24 2012 +0200
@@ -2,6 +2,7 @@
<html>
<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Metadataplayer test with HTML5 / OGG Video</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'>
--- a/test/youtube.htm Wed May 30 17:07:01 2012 +0200
+++ b/test/youtube.htm Tue Jun 05 17:55:24 2012 +0200
@@ -2,6 +2,7 @@
<html>
<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Metadataplayer test with Youtube</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'>