Update ThothII presentation tour, annotated screenshots and speaker notes

presentation/presenter/README.md

@@ -1,5 +1,8 @@
 # Presenter console
 
+For the published AritmoLab site and routine Git updates, see
+[Presentation publishing](../../docs/operations/presentation-publishing.md).
+
 Serve `presentation/` using the same local server as the deck:
 
 ```sh

presentation/presenter/index.html

@@ -5,8 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>AritmoLab | Presenter console</title>
   <link rel="stylesheet" href="../deck/fonts.css">
-  <link rel="stylesheet" href="presenter.css?v=5">
-  <script src="presenter.js?v=5" defer></script>
+  <link rel="stylesheet" href="presenter.css?v=6">
+  <script src="presenter.js?v=22" defer></script>
 </head>
 <body>
   <header class="toolbar">

presentation/presenter/presenter.css

@@ -37,6 +37,7 @@ h2 { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; } #count
 .popup-group-lens .popup-buttons:has(> button:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .popup-group-screenshot { grid-column: 1 / -1; }
 .popup-group-screenshot .popup-buttons { grid-template-columns: repeat(7, minmax(0, 1fr)); }
+.popup-group-screenshot .popup-buttons:has(> button:nth-child(12):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 #popup-controls .popup-group-screenshot button { justify-content: center; }
 .popup-group-screenshot button > span { display: none; }
 #popup-controls .popup-group-lens button { flex-direction: column; justify-content: center; text-align: center; }

presentation/presenter/presenter.js

@@ -13,12 +13,13 @@
   let nextPreviewReady = false;
   let slides = [];
   let current = null;
+  let currentNoteKey = null;
   let audience = null;
   let lastAudienceSeen = 0;
   let lastPreviewSeen = 0;
   let notesSize = 25;
   let blocked = false;
-  const urlFor = role => `../deck/index.html?view=${role}&session=${encodeURIComponent(session)}`;
+  const urlFor = role => `../deck/index.html?v=18&view=${role}&session=${encodeURIComponent(session)}`;
   const pad = value => String(value).padStart(2, '0');
   function showNoteLens(event) {
     const cue = event.target.closest('[data-note-lens]');
@@ -101,7 +102,8 @@
       $('notes-number').textContent = `SLIDE ${pad(state.index + 1)}`;
       $('notes-title').textContent = slide.title;
       // Trusted, same-origin authored notes, never channel-provided HTML.
-      renderNotes(slide.notes);
+      if (!slide.popupNotes?.length) renderNotes(slide.notes);
+      currentNoteKey = null;
       $('reading').scrollTop = 0;
       $('next-title').textContent = slides[state.index + 1]?.title || 'End of presentation';
       updateNextPreview();
@@ -148,6 +150,18 @@
         }
       }
     }
+    if (slide.popupNotes?.length) {
+      // Keep the last selected notes readable when its screenshot is closed.
+      const note = slide.popupNotes.find(note => state.popup?.kind === 'screenshot' && note.key === state.popup.key)
+        || slide.popupNotes.find(note => note.key === currentNoteKey)
+        || slide.popupNotes[0];
+      if (note.key !== currentNoteKey) {
+        currentNoteKey = note.key;
+        $('notes-title').textContent = note.title;
+        renderNotes(note.html);
+        $('reading').scrollTop = 0;
+      }
+    }
     $('popup-controls').querySelectorAll('button').forEach(button => {
       button.setAttribute('aria-pressed', String(state.popup?.kind === button.dataset.kind && state.popup?.key === button.dataset.key));
     });
@@ -194,7 +208,7 @@
     updateNextPreview();
   });
   // No session token: the thumbnail must never navigate or publish to the audience.
-  nextPreview.src = '../deck/index.html?view=thumbnail#/1';
+  nextPreview.src = '../deck/index.html?v=18&view=thumbnail#/1';
   const stage = document.querySelector('.stage');
   function sizeCurrentPreview() {
     const style = getComputedStyle(stage);