ajout d'une page jitsi

4 files changed, 116 insertions, 3 deletions

diff --git a/render.js b/render.js
index 352fe7f..72f0e1f 100644
--- a/render.js
+++ b/render.js
@@ -63,7 +63,7 @@ const elagate = tree => {
 }
 
 const tag_document = tree => {
-  if (tree.type == 'file' && is_document(tree.name)) {
+  if (tree.type == 'file' && is_document(tree.name) && tree.name[0] != '@') {
     tree.tags.push('document_leaf', 'document')
     log('[tag_document]', tree.path, 'document_leaf')
   } else if (tree.type == 'folder') {
diff --git a/src/@jitsi.pug b/src/@jitsi.pug
new file mode 100644
index 0000000..fe31f31
--- /dev/null
+++ b/src/@jitsi.pug
@@ -0,0 +1,90 @@
+extends _layout.pug
+
+prepend root
+  - title = "Visioconférence"
+
+
+block content
+  .spacing
+    h2 Rejoindre une réunion
+    .spacing
+      p Veuillez entrer le nom de la réunion que vous souhaitez rejoindre :
+      input#joinname(type="text", placeholder="Nom de la réunion")
+      a.button#joinbtn(href="#") rejoindre
+      p
+        | Le lien d'accès rapide à cette conférence est
+        |
+        a#joinlink
+
+
+
+  .spacing2 
+    h2 Guide de préparation d'une réunion
+
+    h3.spacing Étape 1 : Choisissez un nom de réunion (par exemple : "karaté-lyon")
+    h3 Étape 2 : Informez vos participants de la date de votre réunion et du nom de la réunion
+    h3 
+      | Étape 3 : Au moment voulu, pour rejoindre la conversation, les participants devront se rendre sur le site 
+      | 
+      a(href="https://deuxfleurs.fr") deuxfleurs.fr
+    h3 Étape 4 : Puis, une fois sur la page d'accueil, cliquer sur le bouton "📞 visioconférence" (pour arriver sur cette page)
+    h3 Étape 5 : Enfin, les participants doivent entrer le nom de la réunion (par exemple : "karaté-lyon") et cliquer sur "rejoindre"
+    h3 Étape 6 : La conférence commence (si vous êtes sur téléphone ou tablette, vous devrez télécharger une app)
+
+  .spacing2
+    h2 Conseils pour réussir votre réunion
+
+    h3.spacing Bien se préparer
+    p Vous pouvez rejoindre une réunion n'importe quand. Vous pouvez donc tester les étapes du "guide de préparation" en avance !
+
+    p Si vous prévoyez de rejoindre la réunion depuis un ordinateur, vous n'aurez besoin que d'un navigateur internet (ce que vous avez déjà si vous lisez cette page !). Si vous utilisez le navigateur <strong>Mozilla Firefox</strong>, ce dernier n'est pas encore compatible avec notre solution de visioconférence. Si vous l'utilisez, vous devrez en télécharger un autre pour la visioconférence. Nous recommandons le navigateur <a href="https://brave.com/">Brave</a> (<a href="https://www.google.com/intl/fr_fr/chrome/">Google Chrome</a> fonctionne également mais ne respecte pas totalement nos valeurs).
+  
+    p Si vous prévoyez de rejoindre la réunion depuis un téléphone ou une tablette, vous devrez télécharger l'application qui vous sera proposée au moment de rejoindre la conférence la première fois ("Download the app"). Les fois suivantes, au moment de rejoindre la conférence il suffira de cliquer sur "Continue to the app".
+
+    h3.spacing Bien s'entendre pendant la réunion
+
+    p "Tu m'entends ? Non pas très bien ! Qu'est ce que tu viens de dire ?" : quelques conseils pour bien s'entendre pour éviter ça et passer un bon moment.
+
+    p
+      strong Améliorez le son :
+      |
+      | l'idéal est d'avoir un casque avec microphone ou des écouteurs avec microphone pour capter le son au plus près de votre bouche et empêcher l'écho (que votre microphone capte ce qui sort sur les hauts parleurs). Si vous n'avez pas de casques ou d'écouteurs ou que vous êtes plusieurs, les ordinateurs portables récents captent mieux le son que les anciens, et généralement votre téléphone captera mieux le son que votre ordinateur. De plus, si vous êtes plusieurs, vous devez savoir que les microphones sont directifs : si vous êtes proches et bien en face de l'ordinateur, on vous entendra bien, sinon on ne vous entendra pas du tout ! En groupe, tournez l'ordinateur vers la personne qui parle ou mettez-vous bien en face pour parler !
+
+    p 
+      strong Améliorez votre connexion :
+      |
+      | la visioconférence est très sensible à la qualité de votre connexion internet. Si vous le pouvez, connectez votre ordinateur en filaire (cable ethernet) à votre <em>box</em> (routeur internet). Si vous souhaitez rester en sans-fil (wifi), essayez de vous rapprocher de votre <em>box</em>. Le type de connexion internet influencera également la qualité de votre visioconférence : la fibre est idéale, l'ADSL ou les réseaux mobiles (4G et 3G) sont plus incertains. 
+
+    p
+      strong Réduisez vos usages :
+      |
+      | Activer la vidéo peut causer des interruptions ou dégrader la qualité du son. Si vous n'avez pas besoin de la vidéo, désactivez là ou garder là seulement pour certains participants. Si vous ne parlez pas, vous pouvez également couper votre microphone. Il est possible de passer en mode "talkie walkie" sur ordinateur avec la touche espace. Vous maintenez la touche espace, votre micro est activé. Vous arrêtez d'appuyer sur la touche espace, votre micro est coupé.
+
+    p Si vous appliquez ces conseils, vous devriez arriver à communiquer sans peine. Bonnes communications !
+
+  script.
+    (_ => {
+      const base_url = 'https://jitsi.deuxfleurs.fr/'
+      const get_meeting_id = raw => raw.replace( /[^a-zA-Z0-9]/gi, '')
+      const get_meeting_url = raw => base_url + get_meeting_id(raw)
+      const joinbtn = document.getElementById('joinbtn')
+      const joinname = document.getElementById('joinname')
+      const joinlink = document.getElementById('joinlink')
+
+      window.addEventListener('pageshow', e => {
+        joinbtn.text = "rejoindre"
+      })
+      
+      joinbtn.onclick = _ => {
+        const meetingid = joinname.value
+        if (!meetingid) return // meetingid is empty
+        window.location.href = get_meeting_url(meetingid)
+        joinbtn.text = "chargement..."
+      }
+
+      joinname.addEventListener('input', v => {
+        const l = get_meeting_url(v.target.value)
+        joinlink.textContent = l
+        joinlink.href = l
+      })
+    })()
diff --git a/src/css/main.css b/src/css/main.css
index 3cee741..048075b 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -4,6 +4,7 @@
 }
 * {
   font-family: Heroes;
+  font-size: 1em;
   margin: 0;
   padding: 0;
 }
@@ -54,6 +55,9 @@ nav {
 .spacing {
   margin-top: 1em;
 }
+.spacing2 {
+  margin-top: 3em;
+}
 
 header > .container > h1 {
   margin: 10px 0px -27px 0px;
@@ -109,3 +113,22 @@ header > .container > .menu-item > a, header > .container > .menu-item > span {
 .center {
     text-align: center;
 }
+
+input {
+  border: 0.1em black solid;
+  width: 50%;
+  min-width: 300px;
+  font-size: 1.6em;
+  border: 0.1em black solid;
+  padding: 0.3em;
+}
+
+.button {
+  padding: 0.3em;
+  background-color: #519c60;
+  font-size: 1.6em;
+  border: 0.1em solid #519c60;
+  color: white;
+  margin: 0em 0em 0em 1em;
+  text-decoration: none;
+}
diff --git a/src/index.pug b/src/index.pug
index 7e7caa0..6ca38f0 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -16,9 +16,9 @@ block content
       a.service-box.spacing(href='https://riot.deuxfleurs.fr')
         div(style='font-size: 80px; height: 120px') 💬
         h3 discussions
-      a.service-box.spacing(href='https://jitsi.deuxfleurs.fr')
+      a.service-box.spacing(href='/@jitsi.html')
         div(style='font-size: 80px; height: 120px') 📞
-        h3 appels
+        h3 visioconférence
       a.service-box.spacing(href='https://cloud.deuxfleurs.fr')
         div(style='font-size: 80px; height: 120px') 🔒
         h3 sauvegarde de documents