# HG changeset patch # User veltr # Date 1338911724 -7200 # Node ID aa0e42229784c32af9d70170798e48ad25676ab3 # Parent f56199193fad5370c134f7c545c1cd3507c470e2 Started reworking on documentation diff -r f56199193fad -r aa0e42229784 .hgignore --- 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 diff -r f56199193fad -r aa0e42229784 .project --- a/.project Wed May 30 17:07:01 2012 +0200 +++ b/.project Tue Jun 05 17:55:24 2012 +0200 @@ -1,11 +1,17 @@ - - - metadataplayer - - - - - - - - + + + metadataplayer + + + + + + org.python.pydev.PyDevBuilder + + + + + + org.python.pydev.pythonNature + + diff -r f56199193fad -r aa0e42229784 doc/LdtPlayer-allocine.js --- 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 diff -r f56199193fad -r aa0e42229784 doc/code.txt --- 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". diff -r f56199193fad -r aa0e42229784 doc/general.fr.md --- /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 diff -r f56199193fad -r aa0e42229784 doc/implementer-un-player.txt --- 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 diff -r f56199193fad -r aa0e42229784 doc/signals.txt --- 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 diff -r f56199193fad -r aa0e42229784 doc/widget_tutorial/LdtPlayer-tutorial.js --- 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("

{{ name }}, {{ surname }}

", {name: param.name, surname: param.surname})); - return; -}; \ No newline at end of file diff -r f56199193fad -r aa0e42229784 doc/widget_tutorial/README.txt --- 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 diff -r f56199193fad -r aa0e42229784 doc/widget_tutorial/tutorial.htm --- 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 @@ - - - - -Metadataplayer - Widget tutorial - - - - -
-

MetaDataPlayer

-
- - 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. - - - - - -
- - - - - - diff -r f56199193fad -r aa0e42229784 sbin/doc/markdown2dokuwiki.py --- /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 diff -r f56199193fad -r aa0e42229784 src/js/init.js --- 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('