mdeck 3.11.0 → 3.12.1

package/src/runtime/KeyHelp.jsx

@@ -0,0 +1,115 @@
+// The keys that work right now (helpKeys.js), over the slide in a
+// semi-transparent layer: ? shows and hides it, Escape or a click closes it.
+// The presenter view renders it itself; a deck window gets it from
+// attachKeyHelp. While it is open the other keys keep working, and the list
+// follows them (H, D, a slide with hotspots).
+import { h, render } from 'preact'
+import { useState, useEffect, useRef } from 'preact/hooks'
+import { keyHelp, isHelpKey } from './helpKeys.js'
+
+const typing = target => target?.closest?.('input, textarea, select, [contenteditable=""], [contenteditable="true"]')
+export const isMac = () => /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || '')
+
+/** Open state for the help: ? toggles it, Escape closes it before anything else sees Escape. */
+export function useKeyHelp() {
+  const [open, setOpen] = useState(false)
+  const openRef = useRef(false)
+  openRef.current = open
+  useEffect(() => {
+    const onKey = event => {
+      if (typing(event.target)) return
+      if (isHelpKey(event)) {
+        event.preventDefault()
+        event.stopPropagation()
+        setOpen(shown => !shown)
+      } else if (event.key === 'Escape' && openRef.current) {
+        event.preventDefault()
+        event.stopPropagation()
+        setOpen(false)
+      }
+    }
+    // Capturing, so that Escape closes the help instead of zooming out or ending a drawing.
+    window.addEventListener('keydown', onKey, true)
+    return () => window.removeEventListener('keydown', onKey, true)
+  }, [])
+  return [open, setOpen]
+}
+
+const S = {
+  layer: { position: 'fixed', inset: 0, zIndex: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px', boxSizing: 'border-box', background: 'rgba(8,8,8,0.45)', fontFamily: 'ui-sans-serif, system-ui, sans-serif', direction: 'ltr' },
+  panel: { width: 'min(100%, 980px)', maxHeight: '100%', overflow: 'auto', boxSizing: 'border-box', padding: '22px 26px 24px', borderRadius: '14px', background: 'rgba(20,20,20,0.82)', border: '1px solid rgba(255,255,255,0.1)', boxShadow: '0 20px 60px rgba(0,0,0,0.45)', color: '#e8e8e8' },
+  head: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: '16px', marginBottom: '16px' },
+  heading: { margin: 0, fontSize: '16px', fontWeight: 600 },
+  hint: { fontSize: '12px', color: '#8a8a8a' },
+  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(270px, 1fr))', gap: '20px 36px' },
+  title: { margin: '0 0 8px', fontSize: '11px', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#8a8a8a' },
+  // One grid per group, so its keys share a column as wide as the widest.
+  list: { margin: 0, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: 'auto 1fr', alignItems: 'baseline', gap: '8px 14px', fontSize: '13.5px', lineHeight: 1.35 },
+  row: { display: 'contents' },
+  keys: { display: 'flex', flexWrap: 'wrap', gap: '4px' },
+  kbd: { display: 'inline-block', minWidth: '14px', padding: '1px 6px', borderRadius: '5px', background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.16)', borderBottomWidth: '2px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '12px', color: '#f4f4f4', textAlign: 'center', whiteSpace: 'nowrap' },
+}
+
+/** The layer itself: `context` is what keyHelp() takes. */
+export function KeyHelp({ context, onClose }) {
+  const groups = keyHelp({ mac: isMac(), ...context })
+  return (
+    <div class="key-help" role="dialog" aria-label="Keyboard shortcuts" style={S.layer} onClick={onClose}>
+      <div style={S.panel} onClick={event => event.stopPropagation()}>
+        <div style={S.head}>
+          <h2 style={S.heading}>Keys</h2>
+          <span style={S.hint}>The keys that work now · ? or Esc closes</span>
+        </div>
+        <div style={S.grid}>
+          {groups.map(group => (
+            <section key={group.title} class="key-help-group">
+              <h3 style={S.title}>{group.title}</h3>
+              <ul style={S.list}>
+                {group.keys.map(({ keys, label }) => (
+                  <li key={label} style={S.row}>
+                    <span style={S.keys}>{keys.map(key => <kbd key={key} style={S.kbd}>{key}</kbd>)}</span>
+                    <span>{label}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// A deck window's help: what it lists follows the stage (the slide's
+// hotspots, drawing on or off).
+function DeckKeyHelp({ stage, canDraw }) {
+  const [open, setOpen] = useKeyHelp()
+  const [, refresh] = useState(0)
+  useEffect(() => {
+    const update = () => refresh(n => n + 1)
+    const events = ['slidechange', 'statechange', 'inkmode', 'overviewchange']
+    for (const name of events) stage.addEventListener(name, update)
+    return () => { for (const name of events) stage.removeEventListener(name, update) }
+  }, [stage])
+  if (!open) return null
+  const context = {
+    view: 'deck',
+    blank: stage.blank,
+    join: stage.hasAttribute('data-joinable'),
+    joinShown: stage.join,
+    overview: stage.overview,
+    hotspots: stage.hotspotMode !== 'off',
+    inking: stage.inking,
+    canDraw,
+    fullscreen: window.top === window && !!window.mdeckFullscreen?.available(),
+  }
+  return <KeyHelp context={context} onClose={() => setOpen(false)} />
+}
+
+/** Gives a deck window the help that ? shows. */
+export function attachKeyHelp(stage, { canDraw = true } = {}) {
+  const host = document.createElement('div')
+  host.className = 'key-help-host'
+  document.body.appendChild(host)
+  render(h(DeckKeyHelp, { stage, canDraw }), host)
+}

package/src/runtime/PresenterChrome.jsx

@@ -0,0 +1,168 @@
+// The presenter view's controls, shared by its three layouts (main.jsx): the
+// speaker layout on a computer, the slide alone on an iPad, and the phone
+// clicker. What is used during the talk is an icon button, its key in the
+// tooltip; what is set once lives in two popovers: who is connected (with
+// the codes that pair an iPad or a phone) and the settings.
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { S } from './chrome.jsx'
+import { Icon } from '../components/Icon.jsx'
+import QrCode from '../components/QrCode.jsx'
+import { ConnectedViews } from '../components/ConnectedViews.jsx'
+import { devicesText, phonesText } from '../live/presence.js'
+import { devPath } from '../core/devPath.js'
+
+export const tool = { ...S.btn, minWidth: '40px', height: '40px', padding: '0 10px', borderRadius: '10px', fontSize: '15px' }
+export const toolOn = { background: '#f0f0f0', borderColor: '#f0f0f0', color: '#111' }
+const muted = { color: '#888', fontSize: '12px' }
+
+/** An icon button; `label` is its tooltip and name, with the key in brackets. */
+export function ToolButton({ icon, label, pressed, onClick, class: className, style, size = 18, disabled, children }) {
+  return <button type="button" class={className} title={label} aria-label={label} aria-pressed={pressed} disabled={disabled} onClick={onClick}
+    style={{ ...tool, ...(pressed ? toolOn : {}), ...(disabled ? { opacity: 0.4, cursor: 'default' } : {}), ...style }}>
+    {icon && <Icon name={icon} size={size} style={{ display: 'block' }} />}{children}
+  </button>
+}
+
+/**
+ * A button that opens a panel below (or above) it. The panel stays in the
+ * page while closed, hidden, so its controls keep their state.
+ */
+export function Popover({ class: className, label, trigger, alert = false, above = false, align = 'end', children }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+  useEffect(() => {
+    if (!open) return
+    const outside = event => { if (!ref.current?.contains(event.target)) setOpen(false) }
+    const escape = event => { if (event.key === 'Escape') setOpen(false) }
+    document.addEventListener('pointerdown', outside)
+    window.addEventListener('keydown', escape)
+    return () => { document.removeEventListener('pointerdown', outside); window.removeEventListener('keydown', escape) }
+  }, [open])
+  return <span ref={ref} class={className} style={{ position: 'relative', display: 'inline-flex' }}>
+    <button type="button" class={`${className}-toggle`} title={label} aria-label={label} aria-expanded={open} onClick={() => setOpen(now => !now)}
+      style={{ ...tool, position: 'relative', gap: '8px', ...(open ? { background: '#2a2a2a', color: '#fff' } : {}) }}>
+      {trigger}
+      {alert && <span aria-hidden="true" style={{ position: 'absolute', top: '5px', right: '5px', width: '8px', height: '8px', borderRadius: '50%', background: '#f28b82' }} />}
+    </button>
+    <div class={`${className}-panel`} role="dialog" aria-label={label} style={{
+      display: open ? 'flex' : 'none', flexDirection: 'column', gap: '14px', position: 'absolute', zIndex: 300,
+      [above ? 'bottom' : 'top']: 'calc(100% + 6px)', [align === 'end' ? 'right' : 'left']: 0,
+      width: 'min(340px, calc(100vw - 24px))', maxHeight: 'min(80dvh, 640px)', overflow: 'auto', boxSizing: 'border-box',
+      padding: '14px', background: '#161616', border: '1px solid #2e2e2e', borderRadius: '12px', boxShadow: '0 12px 40px rgba(0,0,0,0.6)',
+      color: '#ccc', fontSize: '13px', textAlign: 'start', whiteSpace: 'normal', fontVariantNumeric: 'normal',
+    }}>{children}</div>
+  </span>
+}
+
+export function PanelSection({ title, children, class: className }) {
+  return <section class={className} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+    {title && <span style={{ ...S.label, marginBottom: 0 }}>{title}</span>}
+    {children}
+  </section>
+}
+
+/**
+ * The slide's own controls, as the presenter's slide frame reports them
+ * (slideControls.js): a poll's lock, eye, tick and Reset, a video's play,
+ * the hotspots' numbers. `press(i)` and `zoom(key)` act on the slide.
+ */
+export function SlideControls({ controls, press, zoom, big = false }) {
+  if (!controls.items.length && !controls.hotspots) return null
+  const size = big ? { minWidth: '52px', height: '52px', borderRadius: '14px' } : {}
+  return <span class="presenter-slide-controls" role="group" aria-label="This slide" style={{ display: 'inline-flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
+    {controls.items.map((control, i) => <ToolButton key={`c${i}`} class="presenter-slide-control" icon={control.icon ?? 'check'} label={control.label} pressed={control.pressed} disabled={control.disabled} size={big ? 22 : 18} style={size} onClick={() => press(i)} />)}
+    {controls.hotspots > 0 && <>
+      {Array.from({ length: controls.hotspots }, (_, i) => <ToolButton key={`h${i}`} class="presenter-slide-hotspot" label={`Zoom in on part ${i + 1} (${i + 1})`} pressed={controls.hotspot === i + 1} style={{ ...size, fontVariantNumeric: 'tabular-nums' }} onClick={() => zoom(String(i + 1))}>{i + 1}</ToolButton>)}
+      {controls.hotspot != null && <ToolButton class="presenter-slide-whole" icon="fullscreen-exit" label="The whole slide (0)" size={big ? 22 : 18} style={size} onClick={() => zoom('0')} />}
+    </>}
+  </span>
+}
+
+// The launch page's view of this talk: whether devices can pair, from this
+// computer under `mdeck run` only.
+function useHomeInfo() {
+  const [info, setInfo] = useState(null)
+  const load = () => fetch(devPath('__mdeck/home/info'), { cache: 'no-store' }).then(response => response.ok ? response.json() : null).then(setInfo, () => setInfo(null))
+  useEffect(() => { if (import.meta.env.DEV) load() }, [])
+  return [info, load]
+}
+
+const PAIR = {
+  slide: { icon: 'tablet', label: 'iPad', scan: "Scan with the iPad's camera: the presenter view opens there, to draw on and go through the slides." },
+  remote: { icon: 'phone', label: 'Phone clicker', scan: "Scan with the phone's camera: a clicker opens there, with your notes, the time and big buttons." },
+}
+
+// Where the phones answer: the join link, a dot that is green while all is
+// well, and words only for what needs the presenter (from the launch page's
+// check of the server).
+function Polls({ live, recheck }) {
+  const [copied, setCopied] = useState(false)
+  const copy = () => navigator.clipboard?.writeText(live.joinUrl).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500) }, () => {})
+  const problem = live.server && !live.reachable ? 'Poll server not answering.'
+    : !live.joinUrl ? <>Phones can’t reach this computer: use <code>--network</code>.</>
+    : live.server && live.key && !live.keyAccepted ? 'Poll server refuses the key.'
+    : null
+  // A server on an older mdeck answers, but lacks what is new (reactions came with 3.12).
+  const outdated = !problem && live.server && live.serverOutdated
+  return <PanelSection title="Polls" class="presenter-polls">
+    {live.joinUrl && <span style={{ display: 'flex', gap: '8px', alignItems: 'center', minWidth: 0 }}>
+      <span aria-hidden="true" style={{ flexShrink: 0, width: '8px', height: '8px', borderRadius: '50%', background: problem ? '#f28b82' : outdated ? '#f5a524' : '#81c995' }} />
+      <a href={live.joinUrl} target="_blank" rel="noopener" title="The join link for phones" style={{ color: '#ccc', textDecoration: 'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{live.joinUrl.replace(/^https?:\/\//, '')}</a>
+      <ToolButton class="presenter-copy-join" icon={copied ? 'check' : 'copy'} label={copied ? 'Copied' : 'Copy the join link'} size={15} style={{ minWidth: '30px', height: '30px', padding: 0, flexShrink: 0 }} onClick={copy} />
+    </span>}
+    {outdated && <span class="presenter-server-outdated" style={{ color: '#f5a524' }} title={`Server ${live.serverVersion ?? 'older'}, here ${live.version}: npm install -g mdeck there, then restart mdeck server`}>
+      Poll server needs an update to {live.version}.
+    </span>}
+    {problem && <span style={{ display: 'flex', gap: '8px', alignItems: 'center', color: '#f28b82' }}>
+      <span style={{ flex: 1 }}>{problem}</span>
+      <ToolButton class="presenter-recheck" icon="reset" label="Check again" size={15} style={{ minWidth: '30px', height: '30px', padding: 0, flexShrink: 0 }} onClick={recheck} />
+    </span>}
+  </PanelSection>
+}
+
+const VIEW_NAME = { presenter: 'Presenter view', audience: 'Audience window', deck: 'Deck window' }
+
+/**
+ * Who is connected, behind the icons that show it: the views and devices,
+ * the audience window, and the codes that pair an iPad or a phone.
+ */
+export function Connections({ presence, phones, problem }) {
+  const [info, reload] = useHomeInfo()
+  const [code, setCode] = useState(null)
+  const [error, setError] = useState(null)
+  const action = body => fetch(devPath('__mdeck/home/action'), { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+    .then(async response => { const result = await response.json().catch(() => ({})); if (!response.ok) throw new Error(result.error ?? response.status); return result })
+  const pair = layout => action({ action: 'pair', layout }).then(result => { setCode({ url: result.url, layout }); setError(null); reload() }, failure => setError(failure.message))
+  const unpair = () => action({ action: 'unpair' }).then(() => { setCode(null); reload() }, failure => setError(failure.message))
+  const views = presence?.views ?? []
+  const kinds = Object.keys(VIEW_NAME).filter(view => views.some(entry => entry.view === view))
+  const trigger = kinds.length || phones
+    ? <ConnectedViews presence={presence ?? { views: [], phones: 0 }} phones={phones} style={{ color: 'inherit' }} />
+    : <Icon name="people" size={18} style={{ display: 'block' }} />
+  return <Popover class="presenter-connections" label="Connected screens and devices" trigger={trigger} alert={!!problem}>
+    {problem && <p role="status" style={{ margin: 0, color: '#f28b82' }}>{problem}</p>}
+    <PanelSection title="Connected">
+      {kinds.length === 0 && !(presence?.phones > 0) && <span style={muted}>Only this view.</span>}
+      {kinds.map(view => <span key={view}>{VIEW_NAME[view]} on {devicesText(views.filter(entry => entry.view === view))}</span>)}
+      {phones && presence?.phones > 0 && <span>{phonesText(presence.phones)}</span>}
+    </PanelSection>
+    {info?.live && phones && <Polls live={info.live} recheck={reload} />}
+    {info?.pairing && <PanelSection title="Pair a device" class="presenter-pairing">
+      {!info.pairing.available
+        ? <span style={muted}>Start <code>mdeck run</code> with <code>--network</code> so an iPad or a phone in the same network can reach it, or with <code>--server</code>.</span>
+        : <>
+          <span style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+            {Object.entries(PAIR).map(([layout, { icon, label }]) => <button key={layout} type="button" class={`presenter-pair presenter-pair--${layout}`} aria-pressed={code?.layout === layout} style={{ ...S.btn, ...(code?.layout === layout ? { background: '#2a2a2a', color: '#fff' } : {}) }} onClick={() => pair(layout)}><Icon name={icon} size={16} />{label}</button>)}
+            {info.pairing.devices > 0 && <button type="button" class="presenter-unpair" style={{ ...S.btn, color: '#888' }} onClick={unpair}>Unpair {info.pairing.devices === 1 ? 'the device' : `${info.pairing.devices} devices`}</button>}
+          </span>
+          {code && <span style={{ display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'flex-start', '--qr-ink': '#000', '--qr-bg': '#fff' }}>
+            <span style={{ background: '#fff', padding: '8px', borderRadius: '8px', lineHeight: 0 }}><QrCode url={code.url} size="168" /></span>
+            <span>{PAIR[code.layout].scan}</span>
+            <span style={muted}>The code works once, for ten minutes.</span>
+          </span>}
+          {error && <span style={{ color: '#f28b82' }}>{error}</span>}
+        </>}
+    </PanelSection>}
+  </Popover>
+}

package/src/runtime/Reactions.jsx

@@ -0,0 +1,56 @@
+import { h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
+import { listenToReactions } from '../live/client.js'
+
+// The reactions phones send (src/core/reactions.js), on the presenter's
+// screen only: each one floats up for a moment, and a tally keeps what came
+// in the last minute, so that four 🐢 still say "slower" after they faded.
+
+const FLOAT_MS = 2600
+const TALLY_MS = 60000
+
+const CSS = `
+.reactions { position: fixed; z-index: 17; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; font-family: ui-sans-serif, system-ui, sans-serif; }
+.reactions-float { position: relative; width: 160px; height: 220px; }
+.reaction-bubble { position: absolute; bottom: 0; font-size: 34px; line-height: 1; animation: reaction-up ${FLOAT_MS}ms ease-out forwards; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
+.reaction-bubble.is-word { font-size: 15px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.9); color: #f0f0f0; border: 1px solid #3a3a3a; }
+@keyframes reaction-up { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { transform: translate(var(--drift), -20px) scale(1.1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(calc(var(--drift) * -1), -200px) scale(1); opacity: 0; } }
+.reactions-tally { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px; border-radius: 999px; background: rgba(17,17,17,.88); border: 1px solid #2a2a2a; color: #ccc; font-size: 13px; font-variant-numeric: tabular-nums; }
+.reactions-tally span { padding: 0 4px; }
+@media (prefers-reduced-motion: reduce) { .reaction-bubble { animation: none; opacity: .9; } }
+`
+
+const isEmoji = value => /\p{Extended_Pictographic}/u.test(value) && [...value].length <= 4
+
+/** The reactions overlay; `style` places it (fixed by default, at the slide's lower left). */
+export function Reactions({ style }) {
+  const [bubbles, setBubbles] = useState([])
+  const [recent, setRecent] = useState([])
+  useEffect(() => {
+    const css = document.createElement('style')
+    css.textContent = CSS
+    document.head.appendChild(css)
+    const stop = listenToReactions(({ value, n }) => {
+      const now = Date.now()
+      const bubble = { key: `${n}:${now}`, value, x: 10 + Math.random() * 100, drift: `${Math.round(Math.random() * 24 - 12)}px` }
+      // At most a screenful at once: a room that taps all together is still one cloud.
+      setBubbles(list => [...list.slice(-24), bubble])
+      setTimeout(() => setBubbles(list => list.filter(item => item !== bubble)), FLOAT_MS)
+      setRecent(list => [...list.filter(item => now - item.at < TALLY_MS), { value, at: now }])
+    })
+    // The tally forgets what is older than a minute.
+    const timer = setInterval(() => setRecent(list => { const now = Date.now(); const kept = list.filter(item => now - item.at < TALLY_MS); return kept.length === list.length ? list : kept }), 5000)
+    return () => { stop(); clearInterval(timer); css.remove() }
+  }, [])
+  const tally = new Map()
+  for (const { value } of recent) tally.set(value, (tally.get(value) ?? 0) + 1)
+  if (!bubbles.length && !tally.size) return null
+  return <div class="reactions" aria-hidden="true" style={{ left: '16px', bottom: '16px', ...style }}>
+    <div class="reactions-float">
+      {bubbles.map(bubble => <span key={bubble.key} class={`reaction-bubble${isEmoji(bubble.value) ? '' : ' is-word'}`} style={{ left: `${bubble.x}px`, '--drift': bubble.drift }}>{bubble.value}</span>)}
+    </div>
+    {tally.size > 0 && <div class="reactions-tally" title="Reactions in the last minute">
+      {[...tally].sort((a, b) => b[1] - a[1]).map(([value, count]) => <span key={value}>{value} {count}</span>)}
+    </div>}
+  </div>
+}