@lincyaw/addon-lecture 1.0.0-rc.5 → 1.0.0-rc.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/addon-lecture",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.7",
   "description": "Presmium plugin: lecture tracks: recording, playback, scripted lectures with speech, and video export (presmium-lecture)",
   "license": "Apache-2.0",
   "repository": {
@@ -41,9 +41,9 @@
     "playwright-chromium": "^1.40.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@lincyaw/compiler": "^1.0.0-rc.5",
-    "@lincyaw/host": "^1.0.0-rc.5",
-    "@lincyaw/kernel": "^1.0.0-rc.5"
+    "@lincyaw/compiler": "^1.0.0-rc.7",
+    "@lincyaw/host": "^1.0.0-rc.7",
+    "@lincyaw/kernel": "^1.0.0-rc.7"
   },
   "peerDependenciesMeta": {
     "playwright-chromium": {
@@ -57,11 +57,11 @@
     "@types/react": "18.3.28",
     "react-dom": "18.3.1",
     "@types/react-dom": "18.3.7",
-    "@lincyaw/cli": "1.0.0-rc.5",
-    "@lincyaw/host": "1.0.0-rc.5",
-    "@lincyaw/kernel": "1.0.0-rc.5",
-    "@lincyaw/viewer": "1.0.0-rc.5",
-    "@lincyaw/compiler": "1.0.0-rc.5"
+    "@lincyaw/cli": "1.0.0-rc.7",
+    "@lincyaw/host": "1.0.0-rc.7",
+    "@lincyaw/compiler": "1.0.0-rc.7",
+    "@lincyaw/kernel": "1.0.0-rc.7",
+    "@lincyaw/viewer": "1.0.0-rc.7"
   },
   "presmium": {
     "preview": {

package/src/client/PlayerPanel.css

@@ -118,3 +118,36 @@ html.pm-lecture-exporting .pm-slide-fit__canvas {
     display: none;
   }
 }
+
+/* A lecture the browser would not autoplay waits here, centred on the slide, for the reader's click. */
+.pm-lecture-start {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pm-z-lecture-player);
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.pm-lecture-start__button {
+  display: grid;
+  place-items: center;
+  width: var(--pm-size-start);
+  height: var(--pm-size-start);
+  border: 0;
+  border-radius: var(--pm-radius-pill);
+  background: color-mix(in srgb, var(--pm-color-ink) 78%, transparent);
+  color: var(--pm-color-bg);
+  box-shadow: var(--pm-shadow-float);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.pm-lecture-start__button:hover {
+  background: var(--pm-color-ink);
+}
+
+.pm-lecture-start__button .pm-ui-icon {
+  width: var(--pm-size-start-icon);
+  height: var(--pm-size-start-icon);
+}

package/src/client/PlayerPanel.tsx

@@ -1,4 +1,4 @@
-import { PmCaption, PmDrawer, PmIconButton, PmMenu, PmTabs, PRODUCTION_PLAYBACK, TIMED_CAPTIONS, useMessages, useServer, useService, useStore } from '@lincyaw/host'
+import { PmCaption, PmDrawer, PmIcon, PmIconButton, PmMenu, PmTabs, PRODUCTION_PLAYBACK, TIMED_CAPTIONS, useMessages, useServer, useService, useStore } from '@lincyaw/host'
 import type { MenuItem } from '@lincyaw/host'
 import { isPreviewEmbedded } from '@lincyaw/kernel'
 import { useEffect, useMemo, useState } from 'react'
@@ -58,6 +58,8 @@ export default function PlayerPanel(_props: { view?: string }) {
     }
     return () => { if (keyboardPlayer.getSnapshot() === player) keyboardPlayer.set(undefined) }
   }, [player, status, failure, controlled])
+  // The browser would not start the sound without the reader: a large Play waits for their click.
+  const blocked = useStore(player?.clock.blocked, false)
   const time = useStore(player?.time, 0),
     clockPlaying = useStore(player?.clock.playing, false),
     rate = useStore(player?.clock.rate, 1)
@@ -173,6 +175,7 @@ export default function PlayerPanel(_props: { view?: string }) {
     else if (option === 'close') play(undefined)
   }
   return <>
+    {blocked && <div className="pm-lecture-start"><button type="button" className="pm-lecture-start__button" aria-label={t.player.play} onClick={() => void player.play()}><PmIcon name="play" /></button></div>}
     {(captions || current?.unsaid) && (current || manual) && caption && <PmCaption overlay label={t.player.captions} lines={[caption]} lang={lang}
       data-stale={current && stale.has(current.id) ? 'true' : undefined} hint={current && stale.has(current.id) ? t.player.stale : undefined} />}
     {panel && <PmDrawer open label={panel === 'transcript' ? t.player.transcript : t.player.chapters} onClose={() => setPanel(undefined)}>

package/src/client/clock.ts

@@ -6,6 +6,8 @@ export interface TrackClock {
   readonly playing: Readonly<Store<boolean>>
   readonly rate: Readonly<Store<number>>
   readonly error: Readonly<Store<Error | undefined>>
+  /** The browser refused to start the sound before the reader acted on this page (autoplay): playback waits for them. */
+  readonly blocked: Readonly<Store<boolean>>
   play(): void
   pause(): void
   seek(t: number): void
@@ -18,6 +20,7 @@ export class SilentClock implements TrackClock {
   readonly playing = createStore(false)
   readonly rate = createStore(1)
   readonly error = createStore<Error | undefined>(undefined)
+  readonly blocked = createStore(false)
   protected at = 0
   protected since = performance.now()
   protected readonly duration: number
@@ -33,6 +36,7 @@ export class SilentClock implements TrackClock {
 
   play(): void {
     if (this.playing.getSnapshot()) return
+    this.blocked.set(false)
     if (this.at >= this.duration) this.at = 0
     this.since = performance.now()
     this.playing.set(true)
@@ -150,6 +154,12 @@ export class MediaClock extends SilentClock {
         if (!this.playing.getSnapshot() || at < m.start || at >= m.start + m.duration) m.el.pause()
       }).catch((error: unknown) => {
         if (error instanceof DOMException && error.name === 'AbortError') return
+        // Autoplay without the reader's gesture: not a failure, playback waits for their click.
+        if (error instanceof DOMException && error.name === 'NotAllowedError') {
+          this.pause()
+          this.blocked.set(true)
+          return
+        }
         this.fail(error instanceof Error ? error : new Error(String(error)))
       })
     }