mdeck 3.10.1 → 3.12.0

package/src/runtime/helpKeys.js

@@ -0,0 +1,75 @@
+// The keys that do something right now, for the help that ? shows over the
+// presenter view and the deck window. Each window has its own keys
+// (main.jsx for the presenter view, deck-stage.js and ink/attach.js for the
+// deck window); what is listed depends on the moment: the number keys only
+// while the slide shown has hotspots (without them they do nothing), the
+// drawing keys while drawing, L only with several
+// languages, F only where the browser can go full screen.
+//
+// `view` is 'presenter' or 'deck'; `hotspots` whether the number keys zoom on
+// the slide shown; `hotspotSwitch` whether the presenter view's switch (H) is
+// on, which a slide's own setting can overrule; `inking` whether drawing is
+// on; `canDraw` whether D works in this window; `fullscreen` whether F does;
+// `drawer` whether N does (the presenter view's slide-only layout);
+// `languages` whether L does; `blank` whether the screen is black (B);
+// `overview` whether the grid of all slides (O) is open; `join` whether J
+// works (a deck phones join) and `joinShown` whether
+// the join code is over the slide;
+// `mac` names the command key ⌘ instead of Ctrl.
+// Returns groups: [{ title, keys: [{ keys: ['→', 'Space'], label }] }].
+
+export const HELP_KEY = '?'
+
+export function keyHelp({ view = 'deck', blank = false, join = false, joinShown = false, overview = false, hotspots = false, hotspotSwitch = hotspots, inking = false, canDraw = true, fullscreen = false, drawer = false, languages = false, mac = false } = {}) {
+  const presenter = view === 'presenter'
+  const command = mac ? '⌘' : 'Ctrl'
+  const entry = (keys, label) => ({ keys, label })
+  const groups = []
+
+  groups.push({ title: 'Slides', keys: [
+    entry(['→', 'Space', 'PgDn'], 'Next step or slide'),
+    entry(['←', 'PgUp'], 'Previous step or slide'),
+    ...(presenter
+      ? [entry(['Home', 'R'], 'Back to the first slide')]
+      : [entry(['Home'], 'First slide'), entry(['End'], 'Last slide'), entry(['R'], 'Back to the first slide, steps hidden again')]),
+  ] })
+
+  groups.push({ title: 'Presenting', keys: [
+    ...(presenter ? [entry(['T'], 'Start or pause the timer')] : []),
+    entry(['O'], overview ? 'Close the overview' : 'All slides, to pick one'),
+    entry(['B', '.'], blank ? 'Show the slide again' : 'Black screen for the audience'),
+    ...(join ? [entry(['J'], joinShown ? 'Hide the join code' : 'Show the join code over the slide')] : []),
+    ...(presenter && drawer ? [entry(['N'], 'Show or hide the notes')] : []),
+    ...(presenter ? [entry(['H'], hotspotSwitch ? 'Turn hotspots off' : 'Turn hotspots on')] : []),
+    ...(presenter && languages ? [entry(['L'], 'Next language')] : []),
+    ...(canDraw ? [entry(['D'], inking ? 'Stop drawing' : 'Draw on the slide')] : []),
+    ...(!presenter ? [entry(['I'], 'Show or hide the drawings')] : []),
+    ...(fullscreen ? [entry(['F'], 'Full screen')] : []),
+  ] })
+
+  if (overview) groups.push({ title: 'All slides', keys: [
+    entry(['←', '→', '↑', '↓'], 'Move between the slides'),
+    entry(['Enter'], 'Go to that slide'),
+    entry(['O', 'Esc'], 'Back to the slide shown'),
+  ] })
+
+  if (hotspots && !overview) groups.push({ title: 'Hotspots', keys: [
+    entry(['1–9'], 'Zoom to a part of the slide'),
+    entry(['0', 'Esc'], 'Show the whole slide'),
+  ] })
+
+  // The drawing keys are those of the deck window's own frame; the presenter
+  // view passes on only D.
+  if (inking && !presenter) groups.push({ title: 'Drawing', keys: [
+    entry(['Esc'], 'Stop drawing'),
+    entry([`${command} Z`], 'Undo'),
+    entry([`Shift ${command} Z`], 'Redo'),
+    entry(['Delete'], 'Remove the selected drawing'),
+  ] })
+
+  groups.push({ title: 'Help', keys: [entry([HELP_KEY], 'Show or hide these keys'), entry(['Esc'], 'Close')] })
+  return groups.filter(group => group.keys.length)
+}
+
+/** Whether a key event is the one that shows the help: ? without Ctrl, ⌘ or Alt. */
+export const isHelpKey = event => event.key === HELP_KEY && !event.metaKey && !event.ctrlKey && !event.altKey

package/src/runtime/ink/bus.js

@@ -5,7 +5,7 @@
 //
 // Messages, the same on every transport:
 //   { type: 'segment', key, slideId, tool, color, size, from, points }
-//       points `from` index on, every ~60 ms while drawing
+//       points `from` index on, every ~25 ms while drawing
 //   { type: 'end', key, fade, stroke? }  the stroke is finished; a laser
 //       trail (tool 'laser', never saved) retracts on its own
 //   { type: 'dot', key, slideId, point } the laser's dot (null: hidden), as
@@ -17,10 +17,15 @@
 //   { type: 'media', key, video, action, time }  a video in the deck played,
 //       paused or moved to `time` (components/VideoPlayer.jsx)
 //   { type: 'op', op }                  a change of the saved ink (applyOp)
+//   { type: 'shared', key, name, value, replay? }  a deck component's shared
+//       state (../shared.js); `replay` answers a window that opened later
+//   { type: 'shared-ask', key }         a window that opened asks for it
 // Keys start with the sending window's id, so strokes never mix.
 import { changeInk, renameSlide } from './store.js'
+import { joinSegment } from './segments.js'
+import { connectShared, receiveShared } from '../shared.js'
 
-const SEGMENT_MS = 60
+const SEGMENT_MS = 25
 const DOT_MS = 50
 
 export function broadcastTransport(name) {
@@ -47,13 +52,14 @@ export function createInkBus(stage, transports) {
       else changeInk(message.op)
     }
     else if (message.type === 'segment') {
-      const known = incoming.get(message.key) ?? { ...message, points: [] }
-      // A lost segment leaves a gap until the end message repairs it.
-      if (message.from <= known.points.length) known.points = [...known.points.slice(0, message.from), ...message.points]
+      // Out of order, a segment waits for the one before it (segments.js).
+      const known = joinSegment(incoming.get(message.key) ?? { ...message, points: [] }, message)
       incoming.set(message.key, known)
       stage.liveStroke(message.key, known)
     } else if (message.type === 'controls') {
       stage.dispatchEvent(new CustomEvent('pollcontrols', { detail: { room: message.room, controls: message.controls } }))
+    } else if (message.type === 'shared' || message.type === 'shared-ask') {
+      receiveShared(message)
     } else if (message.type === 'media') {
       stage.dispatchEvent(new CustomEvent('mediacontrol', { detail: { video: message.video, action: message.action, time: message.time } }))
     } else if (message.type === 'zoom') {
@@ -71,6 +77,8 @@ export function createInkBus(stage, transports) {
     }
   }
   for (const transport of transports) transport.listen(receive)
+  // Deck components' shared state rides along; this window asks for it now.
+  connectShared(message => send({ ...message, key: `${me}:shared` }))
 
   // Own strokes in progress, sent in small pieces.
   const outgoing = new Map()

package/src/runtime/ink/outbox.js

@@ -0,0 +1,27 @@
+// What live ink does while the network is gone (room.js): it waits longer
+// after each failed attempt, and the messages it holds stay few. Segments
+// and finished strokes must all arrive, or the others keep a gap; the
+// laser's dot and the zoom only say where they are now, so the last of each
+// is enough.
+
+const RETRY_MIN_MS = 250
+const RETRY_MAX_MS = 5000
+// Past this many held messages the oldest strokes in progress go first: a
+// stroke drawn long ago in a dead WLAN is not worth a flood when it returns.
+export const OUTBOX_LIMIT = 2000
+
+// The wait before the next attempt after `failures` failed ones in a row.
+export function retryDelay(failures) {
+  return failures ? Math.min(RETRY_MAX_MS, RETRY_MIN_MS * 2 ** (failures - 1)) : 0
+}
+
+// The messages worth sending, in their order: only the last dot and zoom of
+// each sender, and no more than `limit`, dropping the oldest segments first.
+export function compactOutbox(messages, limit = OUTBOX_LIMIT) {
+  const last = new Map()
+  messages.forEach((message, i) => { if (message.type === 'dot' || message.type === 'zoom') last.set(`${message.type}:${message.key}`, i) })
+  let kept = messages.filter((message, i) => !(message.type === 'dot' || message.type === 'zoom') || last.get(`${message.type}:${message.key}`) === i)
+  let over = kept.length - limit
+  if (over > 0) kept = kept.filter(message => !(message.type === 'segment' && over-- > 0))
+  return kept
+}

package/src/runtime/ink/room.js

@@ -8,8 +8,11 @@
 // connections per server.
 import { stageRoom } from '../../live/client.js'
 import { presenceQuery } from '../../live/presence.js'
+import { retryDelay, compactOutbox } from './outbox.js'
 
-const BATCH_MS = 80
+// Live ink waits this long to gather a batch; with one request at a time the
+// network sets the pace, so a short wait adds little load and little lag.
+const BATCH_MS = 25
 
 /**
  * An ink bus transport through the stage room; `listen` only when `receive`.
@@ -17,23 +20,45 @@ const BATCH_MS = 80
  */
 export function roomTransport({ receive = false, view = null, onPresence = null } = {}) {
   const room = stageRoom()
-  let queue = [], timer = null, allowed = null, listeners = 1, source = null
+  let queue = [], timer = null, allowed = null, listeners = 1, source = null, sending = false, failures = 0
 
+  // One request at a time: two in flight could arrive in the other order.
   async function flush() {
     timer = null
-    if (!queue.length) return
+    if (!queue.length || sending) return
+    sending = true
+    try { await deliver() } finally { sending = false }
+    // What came in meanwhile has waited already: send it right away, unless
+    // the last attempt failed; then wait longer each time.
+    if (queue.length) timer ??= setTimeout(flush, retryDelay(failures))
+  }
+
+  // The batch goes back to the front, to be sent again after a wait.
+  function retry(messages) {
+    failures++
+    queue = compactOutbox([...messages, ...queue])
+  }
+
+  async function deliver() {
     const messages = queue.splice(0, 100)
     if (allowed === null) {
-      const info = await room.info()
+      let info
+      try { info = await room.info() } catch { return retry(messages) }
       allowed = info.reachable ? !!info.canReset : null
       if (!allowed) { queue = []; return }
     }
     try {
       const response = await fetch(`${room.url}/ink`, { method: 'POST', headers: room.headers({ 'Content-Type': 'application/json' }), body: JSON.stringify({ messages }) })
       if (response.status === 403) { allowed = false; queue = []; return }
+      // A server that is busy or restarting gets them again, as a lost network does.
+      if (response.status >= 500 || response.status === 429) return retry(messages)
+      failures = 0
       if (response.ok) listeners = (await response.json()).listeners ?? 1
-    } catch {}
-    if (queue.length) timer = setTimeout(flush, BATCH_MS)
+    } catch {
+      // The network failed (an iPad's WLAN): send them again, or the others
+      // keep a gap. A repeated segment only writes the same points again.
+      retry(messages)
+    }
   }
 
   return {
@@ -75,10 +100,10 @@ const stateListeners = new Set()
 export function followStageRoom(stage, { onLanguage } = {}) {
   stateListeners.add(state => {
     if (!state || state.screen === stageRoom().screen || !Number.isInteger(state.index)) return
-    const position = { index: state.index, step: state.step ?? -1, slideId: state.slideId }
+    const position = { index: state.index, step: state.step ?? -1, slideId: state.slideId, ...(typeof state.blank === 'boolean' ? { blank: state.blank } : {}) }
     if (state.lang && onLanguage?.(state.lang, position)) return
     const current = stage.state
-    if (current?.index === state.index && current?.step === state.step) return
+    if (current?.index === state.index && current?.step === state.step && (position.blank === undefined || current?.blank === position.blank)) return
     stage.setState(position)
   })
 }
@@ -87,7 +112,7 @@ export function followStageRoom(stage, { onLanguage } = {}) {
 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, lang: state.lang })
+    listener({ index: state.index, step: state.step ?? -1, slideId: state.slideId, lang: state.lang, blank: state.blank })
   })
 }
 
@@ -100,9 +125,9 @@ export function announceStagePosition(stage, { language = () => null } = {}) {
   const room = stageRoom()
   let allowed = null, last = null
   async function post(event) {
-    const { index, step, slideId } = stage.state
+    const { index, step, slideId, blank } = stage.state
     const lang = language() ?? undefined
-    const key = `${slideId}:${index}:${step}:${lang}`
+    const key = `${slideId}:${index}:${step}:${lang}:${blank}`
     if (event?.detail.reason === 'sync') { last = key; return }
     if (key === last || allowed === false) return
     // Opening a window must not move the projector; only changes count.
@@ -113,7 +138,7 @@ export function announceStagePosition(stage, { language = () => null } = {}) {
       allowed = info.reachable && !!info.canReset
       if (!allowed) return
     }
-    fetch(`${room.url}/state`, { method: 'POST', headers: room.headers({ 'Content-Type': 'application/json' }), body: JSON.stringify({ state: { index, step, slideId, lang, at, screen: room.screen } }) }).catch(() => {})
+    fetch(`${room.url}/state`, { method: 'POST', headers: room.headers({ 'Content-Type': 'application/json' }), body: JSON.stringify({ state: { index, step, slideId, lang, blank, at, screen: room.screen } }) }).catch(() => {})
   }
   stage.addEventListener('statechange', post)
   post()

package/src/runtime/ink/segments.js

@@ -0,0 +1,21 @@
+// A stroke drawn in another window arrives in segments: { from, points },
+// the points from index `from` on. Segments can arrive out of order, and one
+// can be lost: one that starts past the points known waits in `early` until
+// the gap is filled, rather than being dropped with all that follow it. A
+// lost one leaves the gap until the stroke's end message repairs it.
+
+/** Adds a segment to `known` ({ points, early }) and returns it. */
+export function joinSegment(known, { from, points }) {
+  known.early ??= new Map()
+  known.early.set(from, points)
+  for (let joined = true; joined;) {
+    joined = false
+    for (const [at, more] of known.early) {
+      if (at > known.points.length) continue
+      known.points = [...known.points.slice(0, at), ...more]
+      known.early.delete(at)
+      joined = true
+    }
+  }
+  return known
+}