mdeck 3.2.0 → 3.4.0

package/src/runtime/follow.js

@@ -0,0 +1,89 @@
+// The follow view (?view=follow): a phone or laptop in the room shows the
+// presenter's slide and ink, read from the stage room, and sends nothing.
+// A follower may page back on their own and return with "Back to live";
+// slides and steps the presenter has not shown yet stay hidden.
+
+/** Where a follower may be: no further than the furthest the presenter has shown. */
+export function clampToShown({ index, step }, furthest) {
+  if (!furthest) return { index: 0, step: -1 }
+  if (index > furthest.index) return { index: furthest.index, step: furthest.step }
+  if (index === furthest.index && step > furthest.step) return { index, step: furthest.step }
+  return { index, step }
+}
+
+// The furthest of two positions, slide first, then step.
+const further = (a, b) => !a ? b : (b.index > a.index || (b.index === a.index && b.step > a.step)) ? b : a
+
+/**
+ * The follower's state: the presenter's position, the furthest shown, and
+ * whether this device is with the presenter (`live`).
+ *   presenter(position)  the presenter moved: returns where to go, or null
+ *   moved(position)      the follower moved: returns where to go back to if
+ *                        they went past what was shown, else null
+ *   backToLive()         returns the presenter's position
+ */
+export function createFollower() {
+  const state = { presenter: null, furthest: null, live: true }
+  const same = (a, b) => !!a && !!b && a.index === b.index && a.step === b.step
+  return {
+    state,
+    presenter(position) {
+      state.presenter = position
+      state.furthest = further(state.furthest, position)
+      return state.live ? position : null
+    },
+    moved(position) {
+      const allowed = clampToShown(position, state.furthest)
+      state.live = state.presenter ? same(allowed, state.presenter) : true
+      return same(allowed, position) ? null : allowed
+    },
+    backToLive() {
+      state.live = true
+      return state.presenter
+    },
+  }
+}
+
+const BAR_CSS = `
+.follow-bar { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 2147483001;
+  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #3a3a3a; border-radius: 999px;
+  background: rgba(22, 22, 22, 0.92); color: #e6e6e6; font: 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; }
+button.follow-bar { cursor: pointer; }
+.follow-dot { width: 8px; height: 8px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25); }
+`
+
+/**
+ * Follow the presenter on `stage`. `onStagePosition` hears the positions the
+ * stage room carries; it must be called before the room is listened to.
+ * `words` are the labels: live, back, waiting.
+ */
+export function startFollowing(stage, { onStagePosition, words }) {
+  const follower = createFollower()
+  const style = document.createElement('style')
+  style.textContent = BAR_CSS
+  document.head.appendChild(style)
+  let bar = null
+
+  function update() {
+    const { presenter, live } = follower.state
+    const next = !presenter ? document.createElement('div') : live ? document.createElement('div') : document.createElement('button')
+    next.className = 'follow-bar'
+    if (!presenter) next.textContent = words.waiting
+    else if (live) { const dot = document.createElement('span'); dot.className = 'follow-dot'; next.append(dot, words.live) }
+    else { next.textContent = words.back; next.addEventListener('click', () => { go(follower.backToLive()); update() }) }
+    bar ? bar.replaceWith(next) : document.body.appendChild(next)
+    bar = next
+  }
+  // Positions set from here arrive back as 'sync' and are not the follower's own.
+  const go = position => { if (position) stage.setState({ index: position.index, step: position.step }) }
+
+  onStagePosition(position => { go(follower.presenter(position)); update() })
+  stage.addEventListener('statechange', event => {
+    if (['init', 'sync'].includes(event.detail.reason)) return
+    go(follower.moved({ index: event.detail.index, step: event.detail.step }))
+    update()
+  })
+  // Until the presenter's position arrives, the title slide.
+  go(follower.moved(stage.state))
+  update()
+}

package/src/runtime/ink/bus.js

@@ -12,7 +12,8 @@
 //       a hovering pen moves, at most every ~50 ms
 //   { type: 'zoom', key, slideId, scale, x, y }  the part of the slide this
 //       window shows (stage zoom), at most every ~50 ms
-//   { type: 'reveal', key, room, shown }  a poll's right answer shown or hidden
+//   { type: 'controls', key, room, controls }  an activity closed or opened,
+//       its right answer or results shown or hidden (components/activity.jsx)
 //   { type: 'op', op }                  a change of the saved ink (applyOp)
 // Keys start with the sending window's id, so strokes never mix.
 import { changeInk, renameSlide } from './store.js'
@@ -49,8 +50,8 @@ export function createInkBus(stage, transports) {
       if (message.from <= known.points.length) known.points = [...known.points.slice(0, message.from), ...message.points]
       incoming.set(message.key, known)
       stage.liveStroke(message.key, known)
-    } else if (message.type === 'reveal') {
-      stage.dispatchEvent(new CustomEvent('pollreveal', { detail: { room: message.room, shown: !!message.shown } }))
+    } else if (message.type === 'controls') {
+      stage.dispatchEvent(new CustomEvent('pollcontrols', { detail: { room: message.room, controls: message.controls } }))
     } else if (message.type === 'zoom') {
       if (message.slideId && message.slideId === stage._inkSlideId()) stage.setZoom(message.scale > 1 ? message : null, 'remote', { announce: false })
     } else if (message.type === 'dot') {
@@ -99,9 +100,9 @@ export function createInkBus(stage, transports) {
     dotTimer ??= setTimeout(sendDot, DOT_MS)
   })
 
-  // A poll's right answer, shown here: the others show it too.
-  stage.addEventListener('pollreveal', ({ detail }) => {
-    if (detail?.local) send({ type: 'reveal', key: `${me}:reveal`, room: detail.room, shown: !!detail.shown })
+  // An activity's controls changed here: the others follow.
+  stage.addEventListener('pollcontrols', ({ detail }) => {
+    if (detail?.local) send({ type: 'controls', key: `${me}:controls`, room: detail.room, controls: detail.controls })
   })
 
   // The zoom: the latest view, not every step of a pinch.

package/src/runtime/ink/room.js

@@ -77,6 +77,14 @@ export function followStageRoom(stage) {
   })
 }
 
+/** Hear the position other devices announce (the follow view decides what to do with it). */
+export function onStagePosition(listener) {
+  stateListeners.add(state => {
+    if (!state || state.screen === stageRoom().screen || !Number.isInteger(state.index)) return
+    listener({ index: state.index, step: state.step ?? -1, slideId: state.slideId })
+  })
+}
+
 /** Publish navigation made here; received positions never echo back. */
 export function announceStagePosition(stage) {
   const room = stageRoom()

package/src/runtime/ink/select.js

@@ -7,7 +7,7 @@
 // that the pen moves one at a time. Changes show at once in this window and
 // become one change (undo puts the strokes back) when the pen lifts.
 import { slideStrokes, changeInk, onInkChange } from './store.js'
-import { strokesInLasso, strokesBox, translateStroke, hitTest } from '../../core/ink.js'
+import { strokesInLasso, strokesBox, translateStroke, hitTest, snapAngle } from '../../core/ink.js'
 
 const PAD = 14        // design pixels around a selection
 const TAP = 10        // a lasso smaller than this is a tap
@@ -119,6 +119,8 @@ export function createInkSelection(stage, controller) {
 }
 
 // The stroke with one end point moved to `point` (its pressure kept).
-function moveEnd(stroke, index, [x, y]) {
+// The other end stays put, and the moved one snaps to steps of 15° around it.
+function moveEnd(stroke, index, point) {
+  const [x, y] = snapAngle(stroke.points[1 - index], point)
   return { ...stroke, points: stroke.points.map((p, i) => i === index ? [x, y, p[2]] : p) }
 }

package/src/runtime/main.jsx

@@ -2,6 +2,7 @@ import { validatePageUrl } from '../core/urls.js'
 import { h, render } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { marked } from 'marked'
+import { renderCitations, onBibliography } from './citations.js'
 import deckFileContent from 'virtual:slides'
 import { parseSlides } from '../core/parseSlides'
 import { validateDeck } from '../core/validateDeck'
@@ -12,16 +13,18 @@ import { S, PaletteSwatches } from './chrome.jsx'
 import { SlideErrorBoundary } from './SlideErrorBoundary.jsx'
 import { createEditorBridge } from './editorBridge.js'
 import { ReaderView } from './ReaderView.jsx'
-import { configureLive, announce, setLookSource, actAsPresenter, useSteering } from '../live/client.js'
+import { configureLive, announce, setLookSource, actAsPresenter, useSteering, setSavedResults } from '../live/client.js'
 import { registry } from './registry'
 import { followActiveRooms } from '../live/follow.js'
 import { createOrder } from './syncOrder.js'
 import { fitDeck } from './fit.js'
 import { attachInk, watchInk } from './ink/attach.js'
-import { roomTransport, followStageRoom, announceStagePosition } from './ink/room.js'
+import { roomTransport, followStageRoom, announceStagePosition, onStagePosition } from './ink/room.js'
+import { startFollowing } from './follow.js'
 import { claimPairing } from '../live/pairing.js'
 import { strokePath } from '../core/ink.js'
 import { inkFileName } from 'virtual:deck-ink'
+import savedResults from 'virtual:deck-results'
 import { roomsIn, roomsOnSlide, findRoomTag, slideTitleFor } from '../live/roomTag.js'
 import './reader.css'
 import { SlideRenderer, manifests } from '../layouts/renderSlide'
@@ -33,7 +36,7 @@ import './deck-stage.js'
 
 const PresenterIcon = ({ name, size = 18 }) => <Icon name={name} size={size} style={{ display: 'block' }} />
 
-// One address parameter selects the view: ?view=deck, reader, presenter or audience.
+// One address parameter selects the view: ?view=deck, reader, presenter, audience or follow.
 export function requestedView(url, fallback = 'deck') {
   return url.searchParams.get('view') ?? fallback
 }
@@ -486,7 +489,7 @@ function PresenterView({ deckConfig, slides }) {
           }}
             dangerouslySetInnerHTML={{
               __html: note
-                ? marked.parse(note)
+                ? marked.parse(renderCitations(note).markdown)
                 : '<p>No notes — add a <code>:::notes</code> block to the slide.</p>',
             }}
           />
@@ -691,14 +694,17 @@ async function init() {
   setDeckLanguage(deckConfig)
   document.documentElement.lang = deckLanguage()
   configureLive(deckConfig)
+  setSavedResults(savedResults)
   const { slides } = parsed
   const presenterMode = view === 'presenter'
   const audienceMode  = view === 'audience'
+  // A phone or laptop in the room following the talk: shows, never sends.
+  const followMode = view === 'follow'
   const embedded = url.searchParams.get('embedded') === '1'
   const readerMode = view === 'reader' && !editorMode && !embedded
   // The deck window and the presenter's main frame draw; the audience window
   // and the next-slide preview show what is drawn.
-  const drawHere = !audienceMode && (!embedded || url.searchParams.get('draw') === '1')
+  const drawHere = !audienceMode && !followMode && (!embedded || url.searchParams.get('draw') === '1')
   const inkStorageKey = `mdeck-ink:${inkFileName}:${location.pathname}`
 
   injectSpeakerNotes(slides)
@@ -748,6 +754,8 @@ async function init() {
       if (event.source !== window.parent || event.origin !== window.location.origin) return
       if (!bridge.handleMessage(event.data)) handleDeckControl(event.data?.deckControl)
     })
+    // Saving the deck or its reference file reformats the citations.
+    onBibliography(() => bridge.refresh())
     await bridge.render(slidesContent)
     post({ deckEditorReady: true })
     return
@@ -762,7 +770,7 @@ async function init() {
 
   await loadTheme(deckConfig)
   mountDeck({ deck: parsed, deckConfig })
-  if (!embedded && !audienceMode) {
+  if (!embedded && !audienceMode && !followMode) {
     // A quiet way into the reader view for anyone who opened the file directly.
     const entry = document.createElement('a')
     entry.className = 'reader-entry'
@@ -801,14 +809,20 @@ async function init() {
       }
       window.addEventListener('pointerdown', onPen, true)
     }
+  } else if (inkStage && followMode) {
+    // The presenter's slide and ink, read from the stage room; counted as a phone.
+    inkStage.setAttribute('data-follower', '')
+    startFollowing(inkStage, { onStagePosition, words: { live: t('follow.live'), back: t('follow.back'), waiting: t('follow.waiting') } })
+    watchInk(inkStage, { storageKey: inkStorageKey, transports: [roomTransport({ receive: true, view: 'phone' })] })
   } else if (inkStage && audienceMode) {
     // The audience window shows the presenter's zoom and a poll's answer, without their controls.
     inkStage.setAttribute('data-follower', '')
     watchInk(inkStage, { storageKey: inkStorageKey, transports: [roomTransport({ receive: true, view: 'audience' })] })
   } else if (inkStage) watchInk(inkStage, { storageKey: inkStorageKey })
 
-  // A full deck or audience window is a presenter's screen; previews are embedded.
-  if (!embedded) {
+  // A full deck or audience window is a presenter's screen; previews are
+  // embedded, and a follower only watches.
+  if (!embedded && !followMode) {
     const stage = document.querySelector('deck-stage')
     stage?.addEventListener('slidechange', event => announceSlide(parsed, event.detail.index, { initial: event.detail.reason === 'init' }))
     if (stage) announceSlide(parsed, stage.index, { initial: true })

package/src/runtime/registry.jsx

@@ -5,6 +5,8 @@ import Poll from '../components/Poll.jsx'
 import Question from '../components/Question.jsx'
 import WordCloud from '../components/WordCloud.jsx'
 import Scale from '../components/Scale.jsx'
+import Numeric from '../components/Numeric.jsx'
+import Bibliography from '../components/Bibliography.jsx'
 import deckComponents from 'virtual:deck-components'
 
 // Maps lowercase HTML tag names to Preact components.
@@ -22,5 +24,7 @@ export const registry = {
   question: Question,
   wordcloud: WordCloud,
   scale: Scale,
+  numeric: Numeric,
+  bibliography: Bibliography,
   ...deckComponents,
 }