discovery-media-player 0.1.67 → 0.1.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +5 -4
  2. package/server/handler.js +19 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "discovery-media-player",
3
- "version": "0.1.67",
3
+ "version": "0.1.69",
4
4
  "description": "Self-hosted document viewer: per-recipient tracked links, reading analytics, live presentation. The core knows nothing about the application hosting it — everything it borrows arrives through an injected context.",
5
5
  "keywords": [
6
6
  "pdf-viewer",
@@ -56,20 +56,21 @@
56
56
  "prepare": "node tools/install-hooks.mjs",
57
57
  "start": "node bin/serve.js",
58
58
  "build": "node build/bundle.mjs && tsc -p tsconfig.build.json && node -e \"import('./build/bundle.mjs').then(m=>m.marquerDistEsm())\"",
59
- "test": "vitest run",
59
+ "test": "node -e \"require('fs').existsSync('server/__tests__')||(console.error('Ce banc ne vit pas dans le paquet publié - le champ scripts annonce plus que le tarball ne contient. Clonez le depot puis npm ci : https://github.com/Juli1artha/discovery-media-player'),process.exit(1))\" && vitest run",
60
60
  "test:watch": "vitest",
61
61
  "lint": "eslint bin context server src build",
62
62
  "lint:fix": "eslint bin context server src build --fix",
63
63
  "typecheck": "tsc --noEmit",
64
64
  "prepublishOnly": "npm run build && npm test",
65
- "test:e2e": "vitest run --config vitest.e2e.config.mjs",
66
- "test:base": "vitest run --config vitest.base.config.mjs"
65
+ "test:e2e": "node -e \"require('fs').existsSync('vitest.e2e.config.mjs')||(console.error('Ce banc ne vit pas dans le paquet publié - le champ scripts annonce plus que le tarball ne contient. Clonez le depot puis npm ci : https://github.com/Juli1artha/discovery-media-player'),process.exit(1))\" && vitest run --config vitest.e2e.config.mjs",
66
+ "test:base": "node -e \"require('fs').existsSync('vitest.base.config.mjs')||(console.error('Ce banc ne vit pas dans le paquet publié - le champ scripts annonce plus que le tarball ne contient. Clonez le depot puis npm ci : https://github.com/Juli1artha/discovery-media-player'),process.exit(1))\" && vitest run --config vitest.base.config.mjs"
67
67
  },
68
68
  "engines": {
69
69
  "node": ">=22"
70
70
  },
71
71
  "devDependencies": {
72
72
  "@eslint/js": "^10.0.1",
73
+ "axe-core": "^4.13.0",
73
74
  "esbuild": "^0.28.2",
74
75
  "eslint": "^10.8.1",
75
76
  "jsdom": "^30.0.1",
package/server/handler.js CHANGED
@@ -293,7 +293,7 @@ const LIVE_CSS = `
293
293
  .join{position:fixed;inset:0;background:rgba(20,18,15,.66);display:flex;align-items:center;justify-content:center;z-index:60}
294
294
  .join-card{background:#fff;color:#1c1c1c;border-radius:16px;padding:22px;width:330px;max-width:90vw;text-align:center}
295
295
  .join-card h4{margin:0 0 5px;font-size:16px}
296
- .join-card p{margin:0 0 15px;font-size:12.5px;color:#777}
296
+ .join-card p{margin:0 0 15px;font-size:12.5px;color:#666}
297
297
  .join-card input{width:100%;border:1px solid #e0dcd4;border-radius:10px;padding:10px 13px;font:inherit;font-size:14px;margin-bottom:9px}
298
298
  .join-card button{width:100%;border:0;background:#1a1a1a;color:#fff;border-radius:11px;padding:11px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
299
299
  /* Modale de confirmation maison (remplace window.confirm dans l'iframe présentation). */
@@ -315,7 +315,7 @@ const LIVE_CSS = `
315
315
  const LIVE_BAR = `<button class=pres id=presBtn><span class=dot></span><span id=presCount>1</span><span class=pres-avs id=presAvs></span></button><button class="ic chatBtn" id=chatBtn title="Discussion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.9-.9L3 21l1.9-5.6A8.5 8.5 0 1 1 21 11.5z"/></svg><span class=chat-badge id=chatBadge></span></button>`;
316
316
 
317
317
  // Panneau chat (à droite) + popover présence.
318
- const LIVE_PANEL = `<div class="chat hidden" id=chatPanel><div class=chat-grip id=chatGrip></div><div class=chat-h><span class=chat-h-t>Discussion</span><button class=cd id=chatMute title="Couper les notifications du chat"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></button><button class=cd id=chatLockBtn title="Verrouiller le chat (lecture seule)" style="display:none"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect x=5 y=11 width=14 height=10 rx=2 /><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></button><button class=cd id=chatDock title="Ancrer / détacher le chat"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect x=3 y=4 width=18 height=16 rx=2 /><line x1=15 y1=4 x2=15 y2=20 /></svg></button><button class=cx id=chatClose title=Fermer>×</button></div><div class=chat-msgs id=chatMsgs></div><div class=chat-typing id=chatTyping></div><div class=chat-locked id=chatLocked style="display:none">Chat en lecture seule</div><div class=chat-reply id=chatReply style="display:none"></div><div class=mentionpop id=mentionPop></div><div class=chat-in><button class=chat-attach id=chatAttach title="Joindre une image ou un PDF"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2.2 stroke-linecap=round><line x1=12 y1=6 x2=12 y2=18 /><line x1=6 y1=12 x2=18 y2=12 /></svg></button><input type=file id=chatFile accept="image/png,image/jpeg,image/webp,image/gif,application/pdf" style="display:none"><div class=chat-field><input id=chatText placeholder="Écrire un message…" maxlength=2000 autocomplete=off><button id=chatSend title=Envoyer><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2.4 stroke-linecap=round stroke-linejoin=round><line x1=12 y1=20 x2=12 y2=6 /><polyline points="6 12 12 6 18 12" /></svg></button></div></div></div><div class=pres-pop id=presList></div><div class=emojipick id=emojiPick></div><button class=chatfab id=chatFab title="Discussion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.9-.9L3 21l1.9-5.6A8.5 8.5 0 1 1 21 11.5z"/></svg><span class=chatfab-badge id=chatFabBadge></span></button><div class=chatpeek id=chatPeek></div><div class=lmodal id=lModal><div class=lmodal-box><div class=lmodal-t id=lModalT>Confirmer ?</div><div class=lmodal-d id=lModalD></div><div class=lmodal-a><button class=lmodal-cancel id=lModalNo>Annuler</button><button class=lmodal-ok id=lModalYes>Confirmer</button></div></div></div>`;
318
+ const LIVE_PANEL = `<div class="chat hidden" id=chatPanel><div class=chat-grip id=chatGrip></div><div class=chat-h><span class=chat-h-t>Discussion</span><button class=cd id=chatMute title="Couper les notifications du chat"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></button><button class=cd id=chatLockBtn title="Verrouiller le chat (lecture seule)" style="display:none"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect x=5 y=11 width=14 height=10 rx=2 /><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></button><button class=cd id=chatDock title="Ancrer / détacher le chat"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect x=3 y=4 width=18 height=16 rx=2 /><line x1=15 y1=4 x2=15 y2=20 /></svg></button><button class=cx id=chatClose title=Fermer>×</button></div><div class=chat-msgs id=chatMsgs role=log aria-label="Messages de la discussion"></div><div class=chat-typing id=chatTyping></div><div class=chat-locked id=chatLocked style="display:none">Chat en lecture seule</div><div class=chat-reply id=chatReply style="display:none"></div><div class=mentionpop id=mentionPop></div><div class=chat-in><button class=chat-attach id=chatAttach title="Joindre une image ou un PDF"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2.2 stroke-linecap=round><line x1=12 y1=6 x2=12 y2=18 /><line x1=6 y1=12 x2=18 y2=12 /></svg></button><input type=file id=chatFile accept="image/png,image/jpeg,image/webp,image/gif,application/pdf" style="display:none"><div class=chat-field><input id=chatText placeholder="Écrire un message…" aria-label="Écrire un message" maxlength=2000 autocomplete=off><button id=chatSend title=Envoyer aria-label="Envoyer le message"><svg viewBox="0 0 24 24" fill=none stroke=currentColor stroke-width=2.4 stroke-linecap=round stroke-linejoin=round><line x1=12 y1=20 x2=12 y2=6 /><polyline points="6 12 12 6 18 12" /></svg></button></div></div></div><div class=pres-pop id=presList></div><div class=emojipick id=emojiPick></div><button class=chatfab id=chatFab title="Discussion" aria-label="Ouvrir la discussion"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.9-.9L3 21l1.9-5.6A8.5 8.5 0 1 1 21 11.5z"/></svg><span class=chatfab-badge id=chatFabBadge></span></button><div class=chatpeek id=chatPeek></div><div class=lmodal id=lModal><div class=lmodal-box role=dialog aria-modal=true aria-labelledby=lModalT><div class=lmodal-t id=lModalT>Confirmer ?</div><div class=lmodal-d id=lModalD></div><div class=lmodal-a><button class=lmodal-cancel id=lModalNo>Annuler</button><button class=lmodal-ok id=lModalYes>Confirmer</button></div></div></div>`;
319
319
 
320
320
  // JS partagé : présence + chat via Supabase Realtime. Live.connect(slug, me) / Live.disconnect().
321
321
  const LIVE_JS = `
@@ -1739,11 +1739,11 @@ function legalFooter({ tracked, sansExpediteur }) {
1739
1739
  const LEGAL_CSS = `
1740
1740
  .lgl{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:4px 10px;
1741
1741
  align-items:center;justify-content:center;padding:5px 12px;font-size:10.5px;line-height:1.35;
1742
- color:rgba(255,255,255,.42);background:rgba(0,0,0,.28);backdrop-filter:blur(3px);pointer-events:none}
1742
+ color:rgba(255,255,255,.94);background:rgba(0,0,0,.66);backdrop-filter:blur(3px);pointer-events:none}
1743
1743
  .lgl a{color:inherit;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
1744
- .lgl a:hover{color:rgba(255,255,255,.8)}
1745
- .lgl-sep{margin:0 6px;opacity:.5}
1746
- .lgl-note{opacity:.9}
1744
+ .lgl a:hover{color:#fff}
1745
+ .lgl-sep{margin:0 6px;opacity:.8}
1746
+ .lgl-note{opacity:1}
1747
1747
  @media (max-width:640px){ .lgl{font-size:10px;padding:4px 10px} }
1748
1748
  `;
1749
1749
 
@@ -2120,7 +2120,7 @@ ${LEGAL_CSS}
2120
2120
  /* balayage « tech » tant qu'on ne connaît pas encore le total */
2121
2121
  .lbar.idle i{width:36%;animation:lsweep 1.1s ease-in-out infinite}
2122
2122
  @keyframes lsweep{0%{left:-36%}100%{left:100%}}
2123
- .lpct{font-size:11px;color:#8a857c;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
2123
+ .lpct{font-size:11px;color:#6e695f;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
2124
2124
  .lerr{color:#c0392b;font-size:13px}
2125
2125
  /* Filigrane discret (libère la barre du bas) — masqué sur mobile (chevauche le FAB/teaser, sans valeur). */
2126
2126
  .brand{position:fixed;right:13px;bottom:10px;font-size:10px;color:#fff;opacity:.42;pointer-events:none;letter-spacing:.02em;z-index:3}
@@ -2223,11 +2223,11 @@ ${LEGAL_CSS}
2223
2223
  </div>
2224
2224
  <div class=lrow>
2225
2225
  <div class=lmain>
2226
- <div class=scroll id=scroll>
2226
+ <div class=scroll id=scroll tabindex=0 role=region aria-label="Document">
2227
2227
  <div id=pages></div>
2228
2228
  <div id=load class="${brandDark ? "ldark" : ""}${brandLogo ? "" : " has-intro"}">${brandLogo || !PLAYER.branding.loaderName ? "" : `<div class=lintro id=lintro data-theme="${brandDark ? "dark" : "light"}"><div class=lword>${esc(PLAYER.branding.loaderName)}</div></div>`}<div class=lbox>${brandLogo ? `<img class=lbrand src="${brandLogo}" alt="${brandName}">${PLAYER.branding.poweredBy ? `<div class=lpowered>Powered by ${esc(PLAYER.branding.poweredBy)}</div>` : ""}` : ""}<div class="lbar idle" id=lbar><i id=lbarFill></i></div><div class=lpct id=lpct>Chargement…</div></div></div>
2229
2229
  </div>
2230
- ${share.bot_enabled ? `<button class="op-arrow op-prev" id=opPrev title="Page précédente" aria-label="Page précédente">${ICONS.prev}</button><button class="op-arrow op-next" id=opNext title="Page suivante" aria-label="Page suivante">${ICONS.next}</button><div class=dcap id=dcap><span class=dcap-av>${share.bot_avatar ? `<img src="${esc(share.bot_avatar)}" alt="">` : esc(String(share.bot_name || "◆").trim().charAt(0).toUpperCase())}</span><div class=dcap-body><div id=dcapT></div></div></div><div class=dkov id=dkov><div class=dkov-card><button class=dkov-big id=dkovBig aria-label="Reprendre la présentation">${ICONS.play}</button><div class=dkov-opts id=dkovOpts></div></div></div><div class=rateov id=rateov><div class=rate-card><button class=rate-x id=rateX aria-label=Fermer>${ICONS.close}</button><b>Votre avis compte</b><p>Comment avez-vous trouvé cette présentation ?</p><div class=rate-stars id=rateStars></div><span class=rate-thx>Merci pour votre retour \ud83d\ude4f</span></div></div><div class=qov id=qov><div class=qov-card id=qovCard></div></div><div class=byeov id=byeov><div class=bye-card><span class=bye-av>${share.bot_avatar ? `<img src="${esc(share.bot_avatar)}" alt="">` : esc(String(share.bot_name || "◆").trim().charAt(0).toUpperCase())}</span><b id=byeT>Merci !</b><p id=byeS>Et à très bientôt</p></div></div><div class=pgline id=pgline><i id=pglineF></i></div>` : ""}
2230
+ ${share.bot_enabled ? `<button class="op-arrow op-prev" id=opPrev title="Page précédente" aria-label="Page précédente">${ICONS.prev}</button><button class="op-arrow op-next" id=opNext title="Page suivante" aria-label="Page suivante">${ICONS.next}</button><div class=dcap id=dcap><span class=dcap-av>${share.bot_avatar ? `<img src="${esc(share.bot_avatar)}" alt="">` : esc(String(share.bot_name || "◆").trim().charAt(0).toUpperCase())}</span><div class=dcap-body><div id=dcapT></div></div></div><div class=dkov id=dkov><div class=dkov-card><button class=dkov-big id=dkovBig aria-label="Reprendre la présentation">${ICONS.play}</button><div class=dkov-opts id=dkovOpts></div></div></div><div class=rateov id=rateov><div class=rate-card role=dialog aria-modal=true aria-label="Votre avis sur la présentation"><button class=rate-x id=rateX aria-label=Fermer>${ICONS.close}</button><b>Votre avis compte</b><p>Comment avez-vous trouvé cette présentation ?</p><div class=rate-stars id=rateStars></div><span class=rate-thx>Merci pour votre retour \ud83d\ude4f</span></div></div><div class=qov id=qov><div class=qov-card id=qovCard></div></div><div class=byeov id=byeov><div class=bye-card><span class=bye-av>${share.bot_avatar ? `<img src="${esc(share.bot_avatar)}" alt="">` : esc(String(share.bot_name || "◆").trim().charAt(0).toUpperCase())}</span><b id=byeT>Merci !</b><p id=byeS>Et à très bientôt</p></div></div><div class=pgline id=pgline><i id=pglineF></i></div>` : ""}
2231
2231
  ${preview ? MAP_MARKUP : ""}
2232
2232
  </div>
2233
2233
  ${preview ? LIVE_PANEL : ""}
@@ -2697,6 +2697,7 @@ ${LEGAL_CSS}
2697
2697
  var scale=Math.min(5,targetWidth()/page.getViewport({scale:1}).width);
2698
2698
  var v=page.getViewport({scale:scale});
2699
2699
  var c=document.createElement('canvas');
2700
+ c.setAttribute('role','img'); c.setAttribute('aria-label','Page '+n);
2700
2701
  c.width=Math.floor(v.width*dpr); c.height=Math.floor(v.height*dpr); // backing store HD → net comme du natif
2701
2702
  c.style.width=v.width+'px'; c.style.height=v.height+'px';
2702
2703
  el.style.height=''; el.classList.remove('ph'); el.textContent=''; el.style.width=v.width+'px'; el.appendChild(c); // classList.remove (PAS className=) : ne pas écraser .cur — en mode une-page la page disparaissait une fois rendue (refit après réduction/réouverture du chat)
@@ -2835,7 +2836,8 @@ function presentHtml(pres, nonce, logoUrl, supaUrl, supaKey) {
2835
2836
  .lbox img{height:34px;opacity:.92;animation:lp 1.6s ease-in-out infinite}
2836
2837
  .lword{font-weight:800;font-size:20px;color:#fff;animation:lp 1.6s ease-in-out infinite}
2837
2838
  @keyframes lp{0%,100%{opacity:.5}50%{opacity:1}}
2838
- .lsub{font-size:11.5px;color:#8a857c;letter-spacing:.03em}
2839
+ .lsub{font-size:11.5px;color:#aaa69d;letter-spacing:.03em}
2840
+ .srol{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
2839
2841
  .ended{position:absolute;inset:0;background:rgba(20,18,15,.93);display:none;align-items:center;justify-content:center;z-index:6;text-align:center;padding:24px}
2840
2842
  .ended .ettl{font-size:20px;font-weight:800;margin-bottom:8px}
2841
2843
  .ended .esub{font-size:13.5px;color:#bbb}
@@ -2865,6 +2867,7 @@ function presentHtml(pres, nonce, logoUrl, supaUrl, supaKey) {
2865
2867
  <div class=lrow>
2866
2868
  <div class=lmain>
2867
2869
  <div class=stage id=stage>
2870
+ <div id=sr aria-live=polite class=srol></div>
2868
2871
  <div id=page></div>
2869
2872
  ${MAP_MARKUP}
2870
2873
  <div id=load><div class=lbox>${logo ? `<img src="${logo}" alt="${esc(PLAYER.branding.loaderName || "Chargement")}">` : (PLAYER.branding.loaderName ? `<div class=lword>${esc(PLAYER.branding.loaderName)}</div>` : "")}<div class=lsub>Connexion à la présentation…</div></div></div>
@@ -2883,11 +2886,13 @@ function presentHtml(pres, nonce, logoUrl, supaUrl, supaKey) {
2883
2886
  var PDF=null, total=0, cur=CFG.page||1, ready=false;
2884
2887
  var stage=document.getElementById('stage'), pageEl=document.getElementById('page');
2885
2888
  function hideLoader(){ var l=document.getElementById('load'); if(l){ l.classList.add('hide'); setTimeout(function(){ if(l.parentNode)l.parentNode.removeChild(l); },450);} }
2886
- function ended(){ document.getElementById('ended').style.display='flex'; }
2889
+ function ended(){ document.getElementById('ended').style.display='flex';
2890
+ var sr=document.getElementById('sr'); if(sr)sr.textContent='Présentation terminée.'; }
2887
2891
  function show(n){
2888
2892
  if(!PDF) return;
2889
2893
  n=Math.max(1,Math.min(total||1, n||1)); cur=n;
2890
2894
  var c=document.getElementById('cur'); if(c)c.textContent=n;
2895
+ var sr=document.getElementById('sr'); if(sr)sr.textContent='Page '+n+(total>1?' sur '+total:'');
2891
2896
  // Une image tient sur une page : on la pose, ajustée au cadre, et le reste de la vue —
2892
2897
  // synchronisation, présence, chat — continue de fonctionner à l identique.
2893
2898
  if(PDF.image){
@@ -2906,6 +2911,7 @@ function presentHtml(pres, nonce, logoUrl, supaUrl, supaKey) {
2906
2911
  var scale=Math.min(availW/v1.width, availH/v1.height); // fit entier → une page à l'écran
2907
2912
  var dpr=window.devicePixelRatio||1, vp=page.getViewport({scale:scale});
2908
2913
  var cv=document.createElement('canvas'); cv.width=Math.floor(vp.width*dpr); cv.height=Math.floor(vp.height*dpr);
2914
+ cv.setAttribute('role','img'); cv.setAttribute('aria-label','Page '+n+(total>1?' sur '+total:''));
2909
2915
  cv.style.width=vp.width+'px'; cv.style.height=vp.height+'px';
2910
2916
  page.render({canvasContext:cv.getContext('2d'),viewport:vp,transform:dpr!==1?[dpr,0,0,dpr,0,0]:null});
2911
2917
  pageEl.innerHTML=''; pageEl.appendChild(cv);
@@ -2956,6 +2962,7 @@ function presentHtml(pres, nonce, logoUrl, supaUrl, supaKey) {
2956
2962
  function estImage(){ return Player.viewer.isImageDocument(CFG.fileName, CFG.docUrl); }
2957
2963
  function chargerImage(){
2958
2964
  var im=new Image();
2965
+ im.alt='Document présenté';
2959
2966
  im.onload=function(){
2960
2967
  total=1; ready=true; PDF={image:im};
2961
2968
  var tot=document.getElementById('tot'); if(tot)tot.textContent=1;
@@ -3073,7 +3080,7 @@ function presentHtml(pres, nonce, logoUrl, supaUrl, supaKey) {
3073
3080
  if(saved&&saved.name){ Live.connect(slug, saved); return; }
3074
3081
  // Externe : on demande le nom pour participer.
3075
3082
  var o=document.createElement('div'); o.className='join';
3076
- o.innerHTML='<div class=join-card><h4>Rejoindre la présentation</h4><p>Votre nom pour participer à la discussion.</p><input id=jName placeholder="Votre nom" maxlength=60 autocomplete=name><input id=jMail placeholder="Email (facultatif)" maxlength=120 autocomplete=email><button id=jGo>Rejoindre</button></div>';
3083
+ o.innerHTML='<div class=join-card role=dialog aria-modal=true aria-label="Rejoindre la présentation"><h4>Rejoindre la présentation</h4><p>Votre nom pour participer à la discussion.</p><input id=jName placeholder="Votre nom" aria-label="Votre nom" maxlength=60 autocomplete=name><input id=jMail placeholder="Email (facultatif)" aria-label="Email, facultatif" maxlength=120 autocomplete=email><button id=jGo>Rejoindre</button></div>';
3077
3084
  document.body.appendChild(o);
3078
3085
  var n=o.querySelector('#jName'); try{ n.focus(); }catch(e){}
3079
3086
  function go(){ var name=(n.value||'').trim()||'Invité'; var email=(o.querySelector('#jMail').value||'').trim(); var me2={name:name,email:email,avatar:'',member:false,role:'viewer'}; try{ localStorage.setItem(LIVECFG.guestKey||'dmp-present-me',JSON.stringify(me2)); }catch(e){} o.parentNode&&o.parentNode.removeChild(o); Live.connect(slug, me2); }