Voir la source de Annotateur de conférences

<div style="margin-top:50px; transform:translateX(25vw)translateY(10%)skew(-0deg,5deg);width: 60vw; font-family: 'Times New Roman','Garamond','Garamont', Garamond, Garamont, Times, serif; background:#f8f8f8; color:#222; padding:20px; padding-top:10px;font-size:120%; box-shadow: black 0px 0px 0px 2px inset, rgb(248,248,248) 10px -10px 0px -3px, rgb(0,0,0) 10px -10px,rgb(248,248,248) 20px -20px 0px -3px, rgb(0,0,0) 20px -20px, rgb(248,248,248) 30px -30px 0px -3px, rgb(0,0,0) 30px -30px, rgb(248,248,248) 40px -40px 0px -3px, rgb(0,0,0) 40px -40px, rgb(0, 0, 255) 40px -40px 150px 40px,inset 0px 0px 30px 5px black;">

=== Publier la parole === 
Projet en cours, je crée un outils permettant une écoute interactive de conférences, tables rondes, et tout autre contenu parlé et intéressant, en permettant à l'utilisateurice d'annoter des passages, mais aussi d'avoir des médias et textes embedded dans le texte.<br>
==== Fonctionnement technique ==== 
Je me base sur l'API Fetch de javascript, qui est la solution ni trop simple ni trop complexe, mais qui utilise un protocole HTTP avec une requête GET, impossible de faire fonctionner le <code>import</code>, et l'API File a l'air bien complexe.<br>
Maintenant je vais devoir écrire un parser. J'utilise un fichier '''.srt''' qui est formaté ainsi :<br> <pre style="background:black;color:#FF0;box-shadow:inset 0px 0px 20px 5px white;width:fit-content">30
00:01:04,768 --> 00:01:06,048
The primary things we really want</pre>
<br>
Donc dans l'ordre : combientième ligne de sous-titre, timing du sous-titre, contenu textuel. <br>
<br>
A ça est ajouté un fichier [[JSON]] permettant de stocker des métadonnées relatives à des lignes spécifiques des sous-titres, pour pouvoir associer les deux plus tards.<br>
Ce fichier doit être importé, cela est fait encore avec '''fetch''' : <br>
<pre style="background:black;color:#FF0;box-shadow:inset 0px 0px 20px 5px white;width:fit-content"> 
export async function fetchJson() {
  try {
    const response = await fetch("../sources/sample.json");
    if (!response.ok) {
      throw new Error("Erreur de recuperation JSON");
    }
    return await response.json();
  } catch (error) {
    return null;
  }
}
</pre> <br>
Il se passe plusieurs trucs compliqués mais en gros ça fonctionne. Ca c'est son propre fichier, qui n'a pas besoin d'être appelé dans l'HTML. On va plutôt l'appeler dans d'autres fichiers JavaScript ainsi : <code> import { fetchJson } from "./fetchData.js"; </code> <br> Puis on peut en faire ce qu'on veut dans une fonction async en assignant une variable à notre document importé <code> const data = await fetchJson(); </code> <br>
Les éléments de ce JSON sont des commentaires censés venir ajouter des éléments de contexte aux sous-titres. On doit les faire apparaître dynamiquement au moment où les sous-titres concernés sont visualisés. <br> <br>
Pour comprendre comment cela fonctionne intéressons-nous déja au scroll (ça a un rapport, promis). <br>
=====Le scroll=====
Le scroll fonctionne de deux façons dans l'outil : 
* Scroll automatique d'avancement des sous-titres
* Scroll par l'utilisateur·ice

<br>
Le premier est assez simple, on va venir regarder le timing de la vidéo en cours, et on va regarder plusieurs fois par secondes quel sous-titre est censé être affiché. Cela est rendu pratique par la manière dont le fichier '''.srt''' est agencé. <br>
Le scroll manuel est un niveau un peu au dessus. <br>
Il est rendu possible grace au magnifique <code> window.addEventListener("wheel", foo);</code> Contrairement à son cousin '''"scroll"''', l'event listener '''"wheel"''' va écouter quand n'importe quelle opération est faite avec la roue de scroll de la souris. Ce qu'on va maintenant faire c'est identifier quel sous-titre se situe au milieu de la fenêtre, on va lui donner un <code> id="isactive"</code> pour pouvoir s'y réferer ensuite. Une fois que ce sous-titre est identifié, on va aller chercher son timing, celui-même utilisé pour savoir quand l'afficher lors de la lecture de la vidéo, et on va donner cette valeur à la vidéo, pour qu'elle avance automatiquement là où l'on en est.<br>
Ces deux manières de scroll ont des fonctionnements inverses, mais qui se complètent.<br>
Une limitation pour l'instant de ce scroll est qu'il va être interrompu au bout d'un moment, le code va prendre le sous-titre qui se trouve actuellement au milieu et l'assigner à la vidéo, cela peut se passer pendant le scroll et l'interrompre totalement.<br> <br>

Revenons en aux
=====Commentaires=====
Le fichier de données est constitué ainsi : 
<pre style="background:black;color:#FF0;box-shadow:inset 0px 0px 20px 5px white;width:fit-content">
    {
      "id": "10",
      "text": "Image de linux.",
      "comment": "Ceci est une image de Damn Small Linux. C'est un système d'exploitation.",
      "image_link": "http://www.damnsmalllinux.org/damnsmall.jpg",
      "show_duration": "5",
      "css_addition": "#subtitles{color: aqua;} "
    }
 </pre>
Il se passe un paquet de choses, voyons cela ligne par ligne : 
* "id" va permettre de retrouver à quel sous-titre ce commentaire est associé
* "text" est le titre du commentaire
* "comment" est le texte (eh oui c'est mal foutu) du commentaire
* "image_link" permets de pouvoir insérer une image dans le commentaire
* "show_duration" indique la durée pendant laquelle ce commentaire devra rester actif après que le sous-titre soit passé. Il se réfère là au nombre de sous-titres passés et non à une donnée temporelle.
* "css_addition" permets de modifier l'apparence entière de la page pendant que ce commentaire est actif. Ceci doit être écris en css pur.
<br>
C'est donc un bon nombre d'informations qu'on va venir récupérer pour chaque commentaire. Ce qu'on en fait pour le coup est assez simple, simplement l'insérer dans une section "commentaire", en séparant les différents éléments de titre, texte, etc. <br>
Pour l"id", on va écouter le data-id du sous-titre possédant la classe "isactive" et venir les comparer pour savoir s'il faut afficher le commentaire ou non, tout en prenant en compte le "show_duration". Le "css_addition" lui est inséré dans un élément "<style></style>" dans le '''head''' du document.
<br>
<br>

====L'apparence====
En ce qui concerne l'apparence de l'outils j'ai été très indécise sur à quel point agir, et potentiellement contraindre les utilisateur·ices. J'ai décidé d'un layout assez simple et relativement responsive, permettant surtout le bon fonctionnement des sous-titres (ceux-ci sont pour l'instant obligatoirement ligne par ligne, avec le sous-titre actif au milieu). Les utilisateur·ices ont le contrôle total sur les couleurs, fonds, caractéristiques typographiques, et tout autres attributs ne relevant pas de la disposition des éléments.
====Une platforme====
L'usage de cet outils est limité, il a été pensé pour la rediffusion de conférences, en permettant un ajout communautaire d'éléments contextuels. Il peut être utilisé aussi plus largement pour tous types de médias vidéos dans lequel une personne parle. <br>
L'idée originale était de pouvoir permettre à l'utilisateur·ice d'ajouter en temps réel d'ajouter, de modifier des commentaires au fil du visionnage. Cela s'est trouvé ête un poil ambitieux au vu du temps imparti. Mais ce serait un élément intéressant à développer plus tard. <br>
Mais il faut que ces contenus existent quelque part, c'est un format particulier, qui ne se prête qu'à une platforme qui a été construite pour. C'est donc ma proposition pour les temps qui viennent, de construire une platforme permettant le partage, le relayage entre pairs de ces contenus, que ces annotations deviennent un effort et un enrichissement collectif. C'est un dispositif qui peut être déployé lors d'un événement spécifique, puis exister sur un long terme, permettant la conservation et la mise à jour des informations transmises.
</div>