mdeck 3.7.0 → 3.7.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.7.1 — 2026-10-09
+
+- A video file on a slide (`<videoplayer src="…" />`) follows the presenter view, on the laptop or a paired iPad: play, pause and a jump there do the same in the audience window, which plays the sound while the presenter view's copy stays silent. This works without a server too, in a built folder. An audience window that nobody has clicked yet plays silently and offers **Click for sound** (German: **Klicken für Ton**). Online videos from YouTube, Vimeo or SwitchTube still play only where they are started; the iPad guide says so.
+
 ## 3.7.0 — 2026-10-09
 
 - Palettes have a third accent, `--accent-3`, and the three accents mean something: `--accent` is emphasis, `--accent-2` its companion (gradients, a contrast to the accent), `--accent-3` attention, used sparingly. `--accent-3` marks things and need not be readable as text, so it may be a yellow; `mdeck check` asks only that it can be seen (1.5:1 against the background). A palette without `--accent-3` keeps working and gets an amber (`#d99a00`, at night `#f5c542`); `mdeck check` suggests giving it its own. All built-in palettes and those in the theme repository set it (the repository requires it); `mdeck palettes update` brings installed ones up to date.

package/README.md

@@ -96,7 +96,7 @@ layout: title
 # Rate depends on substrate
 
 - Michaelis–Menten describes saturation
-- *K*<sub>m</sub> is the half-saturation point
+- $K_m$ is the half-saturation point
 
 :::notes
 Ask who has seen the curve before.

package/docs/site/content/drawing.md

@@ -48,7 +48,11 @@ There are two ways.
 
 1. Start `mdeck run my-talk.md --network`, so the iPad in the same network can reach your laptop.
 2. On the launch page, under **Present from an iPad**, choose **Show pairing code** and scan it with the iPad's camera. The presenter view opens on the iPad, paired with your laptop, so it may save drawings and steer the phones of a poll. It is the same presenter view as on the laptop; pairing only gives it these rights. Once it is open, the launch page says so.
-3. On the laptop, open the **audience window** from the same place and move it to the projector. It follows the iPad: slides, revealed points, and drawings as you draw them. Navigation in the audience window also updates the iPad's slide, notes and next-slide preview.
+3. On the laptop, open the **audience window** from the same place and move it to the projector. It follows the iPad: slides, revealed points, drawings as you draw them, and videos. Navigation in the audience window also updates the iPad's slide, notes and next-slide preview.
+
+**Videos.** A video file on a slide (`<videoplayer src="…" />`) plays, pauses and jumps on the projector as you tap it on the iPad. The sound comes from the projector: while the audience window is open, the iPad's copy plays silently. Browsers start sound only on a page someone has clicked, so click the audience window once before the talk (going full screen counts); otherwise the video plays there without sound and shows **Click for sound**.
+
+Online videos (`<videoplayer url="…" />` from YouTube, Vimeo or SwitchTube) do not follow the iPad. They run inside the video service's own player, which mdeck cannot start or stop, so they play only on the screen where you start them. For a talk from the iPad, start them in the audience window on the laptop, or download the video and use a video file.
 
 A pairing code works once, for ten minutes. **Unpair** on the launch page ends every pairing; so does stopping `mdeck run`. Scan a new code afterwards.
 

package/docs/site/content/media.md

@@ -86,6 +86,8 @@ To start a video when its slide appears, add `play="auto"`:
 
 Automatic playback is muted. Leaving the slide stops the local video; automatic videos also return to the beginning.
 
+Presenting from an iPad paired with your laptop? Play, pause or jump in the video on the iPad, and the audience window on the projector does the same, with the sound; see [Present from an iPad](drawing.html#present-from-an-ipad).
+
 ## Show an online video
 
 Use `url` instead of `src` for a YouTube, Vimeo, or SwitchTube address:
@@ -94,7 +96,7 @@ Use `url` instead of `src` for a YouTube, Vimeo, or SwitchTube address:
 <videoplayer url="https://www.youtube.com/watch?v=YOUR_VIDEO_ID" />
 ```
 
-Replace the example address with your video's address. Online videos need an internet connection and permission from the video service to appear in another page. Test them before your talk.
+Replace the example address with your video's address. Online videos need an internet connection and permission from the video service to appear in another page. Test them before your talk. They play only where you start them: a paired iPad cannot start one on the projector, as it can a video file.
 
 ## If a picture does not appear
 

package/docs/site/content/presenting.md

@@ -40,6 +40,8 @@ Use its audience-window button to open a separate view of the slides. If you hav
 
 The two windows follow the same slide and reveal position: navigate in either window and the other follows. This works between windows in the same browser and between your laptop and a paired iPad. To connect the iPad, see [Draw on your slides](drawing.html#present-from-an-ipad).
 
+A video file you play, pause or move in the presenter view does the same in the audience window, which plays the sound; the presenter view's copy stays silent while the audience window is open. Click the audience window once before the talk, so the browser lets it play sound.
+
 Small icons next to **Speaker View** show what is connected to the deck: presenter views, audience windows and, for decks with polls, how many phones. Point at them to see on which devices, such as "Presenter view on an iPad". The launch page shows the same under **Present**, and marks each view that is open.
 
 For a single screen, switch the presenter view to its slide-only layout. **F** or the fullscreen button fills the screen in either the presenter view or the audience window; fullscreen does not select another view.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdeck",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "type": "module",
   "description": "Write slides as a plain text file, present them in the browser, share them as one HTML file or PDF.",
   "license": "MIT",

package/src/components/VideoPlayer.jsx

@@ -1,5 +1,6 @@
 import { h } from 'preact'
 import { useEffect, useRef, useState } from 'preact/hooks'
+import { t } from '../core/labels.js'
 import './video-player.css'
 
 function getEmbedUrl(rawUrl, autoplay = false) {
@@ -58,6 +59,66 @@ export default function VideoPlayer({ src, url, play = 'click', aspect, muted })
     return () => stage.removeEventListener('slidechange', onSlideChange)
   }, [play, src])
 
+  // Local video between the screens of a talk: play, pause or a jump on one
+  // (an iPad presenting) does the same on the others (the projector),
+  // through the stage event `mediacontrol`, which the ink bus carries
+  // (src/runtime/ink/bus.js). A video is known by its slide and its place on
+  // it. Only the slide on screen follows, and a phone following the talk
+  // does not. The presenter view's own copy goes silent while another
+  // screen shows the deck, so the sound comes from there. A screen that may
+  // not start sound yet (nobody clicked it) plays silently and offers sound.
+  const [offerSound, setOfferSound] = useState(false)
+  useEffect(() => {
+    const video = videoRef.current
+    const stage = containerRef.current?.closest('deck-stage')
+    if (!src || !video || !stage || new URLSearchParams(location.search).get('view') === 'follow') return
+    const slide = () => containerRef.current?.closest('deck-stage > *')
+    const key = () => {
+      const own = slide()
+      if (!own) return null
+      return `${[...stage.children].indexOf(own)}:${[...own.querySelectorAll('.video-player-container')].indexOf(containerRef.current)}`
+    }
+    // Changes made to follow another screen are not sent back.
+    let following = 0
+    const tell = action => {
+      if (Date.now() < following || !slide()?.hasAttribute('data-deck-active')) return
+      if (action === 'play' && stage.hasAttribute('data-others-watching')) video.muted = true
+      stage.dispatchEvent(new CustomEvent('mediacontrol', { detail: { video: key(), action, time: video.currentTime, local: true } }))
+    }
+    const onPlay = () => tell('play')
+    const onPause = () => tell('pause')
+    const onSeeked = () => tell(video.paused ? 'pause' : 'play')
+    const follow = ({ detail }) => {
+      if (!detail || detail.local || detail.video !== key() || !slide()?.hasAttribute('data-deck-active')) return
+      following = Date.now() + 600
+      if (Number.isFinite(detail.time) && Math.abs(video.currentTime - detail.time) > 0.4) video.currentTime = detail.time
+      if (detail.action === 'pause') { video.pause(); return }
+      // Only a refusal to start sound is retried silently; a pause that came
+      // in while it was starting cancels it (AbortError) and stays.
+      video.play().catch(error => {
+        if (error?.name !== 'NotAllowedError') return
+        following = Date.now() + 600
+        video.muted = true
+        setOfferSound(true)
+        return video.play()
+      }).catch(() => {})
+    }
+    video.addEventListener('play', onPlay)
+    video.addEventListener('pause', onPause)
+    video.addEventListener('seeked', onSeeked)
+    stage.addEventListener('mediacontrol', follow)
+    return () => {
+      video.removeEventListener('play', onPlay)
+      video.removeEventListener('pause', onPause)
+      video.removeEventListener('seeked', onSeeked)
+      stage.removeEventListener('mediacontrol', follow)
+    }
+  }, [src])
+  const turnSoundOn = () => {
+    if (videoRef.current) videoRef.current.muted = false
+    setOfferSound(false)
+  }
+
   // Web video auto mode: clear/restore src on slide change to stop/start playback
   useEffect(() => {
     if (play !== 'auto' || !url) return
@@ -112,12 +173,15 @@ export default function VideoPlayer({ src, url, play = 'click', aspect, muted })
               style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', aspectRatio: fixedAspect ? undefined : '16 / 9', border: '0', display: 'block' }} />
           : <div class="video-player-placeholder" />
       ) : (
-        <video
-          ref={videoRef}
-          src={src}
-          controls
-          style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', display: 'block' }}
-        />
+        <>
+          <video
+            ref={videoRef}
+            src={src}
+            controls
+            style={{ width: '100%', height: fixedAspect ? '100%' : 'auto', display: 'block' }}
+          />
+          {offerSound && <button type="button" class="video-player-sound" onClick={turnSoundOn}>{t('video.sound')}</button>}
+        </>
       )}
     </div>
   )

package/src/components/video-player.css

@@ -12,3 +12,18 @@
   height: 100%;
   background: #111;
 }
+
+/* A screen that followed another into playing, silently because nobody has
+   clicked it yet: one click turns the sound on. */
+.video-player-sound {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 8px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, .72);
+  color: #fff;
+  font: 600 15px/1.2 system-ui, sans-serif;
+  cursor: pointer;
+}

package/src/core/labels.js

@@ -33,6 +33,7 @@ export const LABELS = {
     'deck.reset': 'Reset',
     'deck.resetHint': 'Reset to first slide',
     'poll.scan': 'Scan to vote',
+    'video.sound': 'Click for sound',
     'poll.answer': '1 answer',
     'poll.answers': '{n} answers',
     'poll.reset': 'Reset',
@@ -105,6 +106,7 @@ export const LABELS = {
     'deck.reset': 'Neustart',
     'deck.resetHint': 'Zurück zur ersten Folie',
     'poll.scan': 'Scannen und abstimmen',
+    'video.sound': 'Klicken für Ton',
     'poll.answer': '1 Antwort',
     'poll.answers': '{n} Antworten',
     'poll.reset': 'Zurücksetzen',

package/src/runtime/ink/bus.js

@@ -14,6 +14,8 @@
 //       window shows (stage zoom), at most every ~50 ms
 //   { type: 'controls', key, room, controls }  an activity closed or opened,
 //       its right answer or results shown or hidden (components/activity.jsx)
+//   { 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)
 // Keys start with the sending window's id, so strokes never mix.
 import { changeInk, renameSlide } from './store.js'
@@ -52,6 +54,8 @@ export function createInkBus(stage, transports) {
       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 === 'media') {
+      stage.dispatchEvent(new CustomEvent('mediacontrol', { detail: { video: message.video, action: message.action, time: message.time } }))
     } 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') {
@@ -105,6 +109,11 @@ export function createInkBus(stage, transports) {
     if (detail?.local) send({ type: 'controls', key: `${me}:controls`, room: detail.room, controls: detail.controls })
   })
 
+  // A video played, paused or moved here: the others do the same.
+  stage.addEventListener('mediacontrol', ({ detail }) => {
+    if (detail?.local && detail.video) send({ type: 'media', key: `${me}:media`, video: detail.video, action: detail.action, time: detail.time })
+  })
+
   // The zoom: the latest view, not every step of a pinch.
   let zoom = null, zoomTimer = null
   const sendZoom = () => { zoomTimer = null; if (zoom) send({ type: 'zoom', key: `${me}:zoom`, ...zoom }) }

package/src/runtime/main.jsx

@@ -50,6 +50,10 @@ if (requestedView(controlUrl) === 'presenter' && !controlUrl.searchParams.has('s
   history.replaceState(null, '', controlUrl)
 }
 const DECK_CHANNEL = `deck-control:${controlUrl.pathname}:${controlUrl.searchParams.get('session') ?? 'default'}`
+// An audience window says it is there this often, and counts as gone when
+// it has not said so for this long (or says so as it closes).
+const SCREEN_SAY_MS = 3000
+const SCREEN_GONE_MS = 8000
 
 function withConfigOverrides(deckConfig) {
   const url = new URL(window.location.href)
@@ -788,11 +792,33 @@ async function init() {
     followStageRoom(inkStage)
     announceStagePosition(inkStage)
   }
+  // Whether another screen shows the deck, so that a video played in the
+  // presenter view is silent there and its sound comes from that screen
+  // (components/VideoPlayer.jsx). The server says who is connected; an
+  // audience window also says so to the windows of its own browser, for a
+  // deck opened without a server (a built folder).
+  const screens = typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel(`mdeck-screens:${inkStorageKey}`) : null
+  let watchedOnServer = false, audienceHere = 0
+  const markWatched = () => inkStage?.toggleAttribute('data-others-watching', watchedOnServer || Date.now() - audienceHere < SCREEN_GONE_MS)
+  if (screens && audienceMode) {
+    const say = message => screens.postMessage(message)
+    say('audience')
+    setInterval(() => say('audience'), SCREEN_SAY_MS)
+    window.addEventListener('pagehide', () => say('gone'))
+  } else if (screens && embedded && drawHere) {
+    screens.onmessage = ({ data }) => { audienceHere = data === 'audience' ? Date.now() : 0; markWatched() }
+    setInterval(markWatched, SCREEN_SAY_MS)
+  }
+
   if (inkStage && drawHere) {
     attachInk(inkStage, {
       storageKey: inkStorageKey,
       // The presenter's main frame tells the presenter view who is connected.
-      transports: [roomTransport({ receive: true, view: embedded ? 'presenter' : 'deck', onPresence: embedded ? presence => window.parent.postMessage({ presence }, window.location.origin) : null })],
+      transports: [roomTransport({ receive: true, view: embedded ? 'presenter' : 'deck', onPresence: embedded ? presence => {
+        watchedOnServer = (presence?.views ?? []).some(entry => entry.view === 'audience' || entry.view === 'deck')
+        markWatched()
+        window.parent.postMessage({ presence }, window.location.origin)
+      } : null })],
       onMode: inking => { if (embedded) window.parent.postMessage({ inkMode: inking }, window.location.origin) },
     })
     // Drawing turns itself on, with the laser and the toolbar folded into