nmemmertandClaude Sonnet 5.5
7ba5ed41b5
- Speaker notes are hidden on the presenting screen by default (N / "Show notes" turns them on for one-screen use), so a mirrored display never shows them. - "Audience window" opens a second window for a projector (?audience=1, no sign-in) that shows only the point, its passage and quoted verse. Notes, minutes, the script and the timer are never sent to it. - With it connected this screen becomes a presenter view: what the audience sees, your notes, the next point, plus Blank audience (B) and audience text size. - Script mode sends the audience only the title. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
229 lines
15 KiB
React
229 lines
15 KiB
React
// Present mode: the script or the outline full-screen in large type, with a timer. The script scrolls by
|
||
// itself at a speed you set (a teleprompter), and the outline moves one point at a time with the minutes you
|
||
// planned beside the clock. The screen is kept awake while it is open. Esc, or Close, leaves.
|
||
//
|
||
// With a projector or second screen: "Audience window" opens a second window to drag over. It shows only the point,
|
||
// its passage and quoted verse; your speaker notes, the script, the timer and the plan stay on this screen. This
|
||
// screen then becomes a presenter view (what the audience sees, your notes, the next point). On one screen, notes are
|
||
// hidden unless you turn them on, so a mirrored display never shows them by accident. B blacks out the audience screen.
|
||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||
import { formatClock, outlineSteps, paceText, pacing } from '../utils/present.js';
|
||
import { audienceState, audienceUrl, openChannel } from '../utils/presentSync.js';
|
||
import StepFace from './StepFace.jsx';
|
||
|
||
const SIZES = [20, 24, 28, 34, 40, 48, 60, 72];
|
||
const btn = 'rounded-lg border border-current/30 px-3 py-1.5 text-sm hover:bg-white/10 disabled:opacity-40';
|
||
|
||
export default function PresentMode({ title, subtitle = '', mode, script = '', tree = [], onClose }) {
|
||
const [dark, setDark] = useState(true);
|
||
const [size, setSize] = useState(() => { try { return Math.max(0, SIZES.indexOf(Number(localStorage.getItem('present-size')) || 34)); } catch { return 3; } });
|
||
const [elapsed, setElapsed] = useState(0);
|
||
const [running, setRunning] = useState(false);
|
||
const [scrolling, setScrolling] = useState(false);
|
||
const [speed, setSpeed] = useState(30); // pixels per second
|
||
const [index, setIndex] = useState(0);
|
||
const scroller = useRef(null);
|
||
const [showNotes, setShowNotes] = useState(() => { try { return localStorage.getItem('present-notes-here') === 'on'; } catch { return false; } });
|
||
const [audienceOpen, setAudienceOpen] = useState(false); // an audience window is connected: this screen is the presenter's
|
||
const [blank, setBlank] = useState(false); // the audience screen is blacked out
|
||
const [audSize, setAudSize] = useState(() => { try { return Math.max(0, SIZES.indexOf(Number(localStorage.getItem('present-aud-size')) || 48)); } catch { return 5; } });
|
||
const [popupBlocked, setPopupBlocked] = useState(false);
|
||
const audienceWin = useRef(null);
|
||
const channel = useRef(null);
|
||
const latest = useRef(null);
|
||
const steps = mode === 'outline' ? outlineSteps(tree) : [];
|
||
const step = steps[index];
|
||
const pace = mode === 'outline' ? pacing(steps, index, elapsed) : null;
|
||
|
||
// Two screens: keep the audience window in step with this one, answering a window that has just opened.
|
||
const audience = audienceState({ title, subtitle, mode, step, index, total: steps.length, dark, fontPx: SIZES[audSize], blank });
|
||
latest.current = audience;
|
||
useEffect(() => {
|
||
const ch = openChannel();
|
||
channel.current = ch;
|
||
if (!ch) return undefined;
|
||
ch.onmessage = (e) => { if (e.data?.type === 'hello') { setAudienceOpen(true); ch.postMessage(latest.current); } };
|
||
return () => { ch.postMessage({ type: 'end' }); ch.close(); channel.current = null; };
|
||
}, []);
|
||
useEffect(() => { channel.current?.postMessage(audience); }); // every change: the point, the colours, blank
|
||
useEffect(() => {
|
||
if (!audienceOpen) return undefined;
|
||
const t = window.setInterval(() => { if (audienceWin.current?.closed) { audienceWin.current = null; setAudienceOpen(false); setBlank(false); } }, 1000);
|
||
return () => window.clearInterval(t);
|
||
}, [audienceOpen]);
|
||
const openAudience = () => {
|
||
if (!channel.current) return;
|
||
const win = window.open(audienceUrl(), 'bible-study-audience', 'popup,width=1280,height=720');
|
||
setPopupBlocked(!win);
|
||
if (win) { audienceWin.current = win; setAudienceOpen(true); }
|
||
};
|
||
const toggleNotes = () => setShowNotes((on) => { const next = !on; try { localStorage.setItem('present-notes-here', next ? 'on' : 'off'); } catch { /* storage unavailable */ } return next; });
|
||
const audBigger = (d) => setAudSize((i) => { const next = Math.min(SIZES.length - 1, Math.max(0, i + d)); try { localStorage.setItem('present-aud-size', String(SIZES[next])); } catch { /* storage unavailable */ } return next; });
|
||
|
||
// the clock
|
||
useEffect(() => {
|
||
if (!running) return undefined;
|
||
const t = window.setInterval(() => setElapsed((e) => e + 1), 1000);
|
||
return () => window.clearInterval(t);
|
||
}, [running]);
|
||
|
||
// the teleprompter
|
||
useEffect(() => {
|
||
if (!scrolling || mode !== 'script') return undefined;
|
||
let last = performance.now();
|
||
let frame;
|
||
let carry = 0;
|
||
const tick = (now) => {
|
||
const el = scroller.current;
|
||
carry += ((now - last) / 1000) * speed;
|
||
last = now;
|
||
if (el && carry >= 1) { el.scrollTop += Math.floor(carry); carry -= Math.floor(carry); }
|
||
if (el && el.scrollTop + el.clientHeight >= el.scrollHeight - 2) { setScrolling(false); return; }
|
||
frame = requestAnimationFrame(tick);
|
||
};
|
||
frame = requestAnimationFrame(tick);
|
||
return () => cancelAnimationFrame(frame);
|
||
}, [scrolling, speed, mode]);
|
||
|
||
// keep the screen on
|
||
useEffect(() => {
|
||
let lock;
|
||
let gone = false;
|
||
navigator.wakeLock?.request?.('screen').then((l) => { if (gone) l.release?.(); else lock = l; }).catch(() => {});
|
||
return () => { gone = true; lock?.release?.().catch?.(() => {}); };
|
||
}, []);
|
||
|
||
const bigger = (d) => setSize((s) => {
|
||
const next = Math.min(SIZES.length - 1, Math.max(0, s + d));
|
||
try { localStorage.setItem('present-size', String(SIZES[next])); } catch { /* storage unavailable */ }
|
||
return next;
|
||
});
|
||
const go = useCallback((d) => setIndex((i) => Math.min(steps.length - 1, Math.max(0, i + d))), [steps.length]);
|
||
|
||
useEffect(() => {
|
||
const onKey = (e) => {
|
||
if (e.key === 'Escape') { onClose(); return; }
|
||
if (e.target?.tagName === 'INPUT') return;
|
||
if (mode === 'outline') {
|
||
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(1); }
|
||
else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') { e.preventDefault(); go(-1); }
|
||
} else if (e.key === ' ') { e.preventDefault(); setScrolling((s) => !s); }
|
||
if ((e.key === 'b' || e.key === 'B') && audienceOpen) setBlank((b) => !b);
|
||
if ((e.key === 'n' || e.key === 'N') && !audienceOpen && mode === 'outline') toggleNotes();
|
||
if (e.key === '+' || e.key === '=') bigger(1);
|
||
if (e.key === '-') bigger(-1);
|
||
};
|
||
window.addEventListener('keydown', onKey);
|
||
return () => window.removeEventListener('keydown', onKey);
|
||
}, [mode, go, onClose, audienceOpen]);
|
||
|
||
const banner = audienceOpen && (
|
||
<p role="status" className={`shrink-0 px-4 py-1.5 text-center text-xs ${blank ? 'bg-red-500/25' : 'bg-emerald-500/15'}`}>
|
||
{blank ? 'The audience screen is blank. Press B to bring it back.' : mode === 'script' ? 'The audience window is connected. It shows only the title; your script stays on this screen.' : 'The audience window is connected. It shows the points and verses, never your notes.'}
|
||
</p>
|
||
);
|
||
const colors = dark ? 'bg-[#111] text-[#f2efe8]' : 'bg-[#faf7f0] text-[#2b2620]';
|
||
const fontSize = `${SIZES[size]}px`;
|
||
const total = steps.length ? steps[steps.length - 1].plannedEnd : 0;
|
||
|
||
return (
|
||
<div role="dialog" aria-modal="true" aria-label={`Presenting ${title}`} className={`fixed inset-0 z-[80] flex flex-col ${colors}`}>
|
||
<div className="flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2 border-b border-current/15 px-4 py-2.5">
|
||
<div className="min-w-0 flex-1"><p className="truncate text-sm font-medium">{title}</p>{subtitle && <p className="truncate text-xs opacity-60">{subtitle}</p>}</div>
|
||
<div className="flex items-center gap-2" role="group" aria-label="Timer">
|
||
<span className="min-w-[4.5rem] text-center font-mono text-xl tabular-nums" aria-live="off">{formatClock(elapsed)}</span>
|
||
<button type="button" onClick={() => setRunning((r) => !r)} className={btn}>{running ? 'Pause' : elapsed ? 'Resume' : 'Start'}</button>
|
||
<button type="button" onClick={() => { setElapsed(0); setRunning(false); }} disabled={!elapsed} className={btn}>Reset</button>
|
||
</div>
|
||
{pace && <span className={`text-sm ${pace.diffSeconds < -20 ? 'text-amber-400' : 'opacity-80'}`} role="status">{paceText(pace)} · plan {formatClock(pace.totalSeconds)}</span>}
|
||
<div className="flex items-center gap-1.5" role="group" aria-label="Text size">
|
||
<button type="button" onClick={() => bigger(-1)} disabled={size === 0} aria-label="Smaller text" className={btn}>A−</button>
|
||
<button type="button" onClick={() => bigger(1)} disabled={size === SIZES.length - 1} aria-label="Larger text" className={btn}>A+</button>
|
||
<button type="button" onClick={() => setDark((d) => !d)} aria-pressed={dark} className={btn}>{dark ? 'Light' : 'Dark'}</button>
|
||
</div>
|
||
{mode === 'script' && (
|
||
<div className="flex items-center gap-2" role="group" aria-label="Auto-scroll">
|
||
<button type="button" onClick={() => setScrolling((s) => !s)} aria-pressed={scrolling} className={btn}>{scrolling ? 'Stop scrolling' : 'Auto-scroll'}</button>
|
||
<label className="flex items-center gap-1.5 text-xs opacity-80">Speed
|
||
<input type="range" min="8" max="120" value={speed} onChange={(e) => setSpeed(Number(e.target.value))} aria-label="Scroll speed" />
|
||
</label>
|
||
</div>
|
||
)}
|
||
{typeof BroadcastChannel !== 'undefined' ? (
|
||
<div className="flex items-center gap-2" role="group" aria-label="Second screen">
|
||
{audienceOpen ? (
|
||
<>
|
||
<button type="button" onClick={() => setBlank((b) => !b)} aria-pressed={blank} className={btn} title="Black out the audience screen (B)">{blank ? 'Show audience' : 'Blank audience'}</button>
|
||
{mode === 'outline' && (
|
||
<span className="flex items-center gap-1" role="group" aria-label="Audience text size">
|
||
<button type="button" onClick={() => audBigger(-1)} disabled={audSize === 0} aria-label="Smaller audience text" className={btn}>Screen A−</button>
|
||
<button type="button" onClick={() => audBigger(1)} disabled={audSize === SIZES.length - 1} aria-label="Larger audience text" className={btn}>A+</button>
|
||
</span>
|
||
)}
|
||
</>
|
||
) : (
|
||
<>
|
||
<button type="button" onClick={openAudience} className={btn} title="Opens a second window for a projector or other screen. It shows the points, never your notes.">Audience window</button>
|
||
{mode === 'outline' && <button type="button" onClick={toggleNotes} aria-pressed={showNotes} className={btn} title="Speaker notes stay hidden on this screen unless you turn them on (N)">{showNotes ? 'Hide notes' : 'Show notes'}</button>}
|
||
</>
|
||
)}
|
||
</div>
|
||
) : null}
|
||
<button type="button" onClick={onClose} className={`${btn} font-medium`}>Close</button>
|
||
</div>
|
||
|
||
{mode === 'script' ? (
|
||
<>
|
||
{banner}
|
||
<div ref={scroller} className="min-h-0 flex-1 overflow-y-auto px-[6vw] py-[8dvh]" style={{ scrollBehavior: 'auto' }}>
|
||
{script.trim()
|
||
? <div className="mx-auto max-w-[46em] whitespace-pre-wrap font-serif" style={{ fontSize, lineHeight: 1.5 }}>{script}<div style={{ height: '50dvh' }} aria-hidden="true" /></div>
|
||
: <p className="mt-20 text-center text-lg opacity-70">There’s no script to present yet. Write one on the Script page.</p>}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="flex min-h-0 flex-1 flex-col">
|
||
{popupBlocked && <p role="alert" className="shrink-0 bg-amber-500/20 px-4 py-1.5 text-center text-xs">Your browser blocked the audience window. Allow pop-ups for this site, then try again.</p>}
|
||
{banner}
|
||
{audienceOpen && step ? (
|
||
// Presenter view: what the audience sees, your private notes, and what comes next
|
||
<div className="grid min-h-0 flex-1 gap-0 md:grid-cols-[3fr_2fr]">
|
||
<div className="min-h-0 overflow-y-auto border-current/15 px-[3vw] py-[4dvh] md:border-r">
|
||
<p className="mb-3 font-sans text-[11px] uppercase tracking-[0.16em] opacity-50">The audience sees</p>
|
||
<StepFace step={step} index={index} total={steps.length} fontSize={`${SIZES[Math.max(0, size - 3)]}px`} minutes={step.minutes} />
|
||
</div>
|
||
<div className="min-h-0 overflow-y-auto px-[3vw] py-[4dvh]">
|
||
<p className="mb-3 font-sans text-[11px] uppercase tracking-[0.16em] text-amber-500">Only you see this</p>
|
||
{step.note.trim()
|
||
? <p className="whitespace-pre-wrap font-serif" style={{ fontSize, lineHeight: 1.45 }}>{step.note}</p>
|
||
: <p className="font-sans text-sm opacity-50">No speaker notes for this point. Add them under the point’s “⋯” details on the Outline page.</p>}
|
||
{steps[index + 1] && (
|
||
<div className="mt-8 border-t border-current/15 pt-4">
|
||
<p className="font-sans text-[11px] uppercase tracking-[0.16em] opacity-50">Next</p>
|
||
<p className="mt-1 font-serif text-xl"><span className="mr-2 opacity-60">{steps[index + 1].label}</span>{steps[index + 1].text || '(untitled)'}</p>
|
||
{steps[index + 1].minutes > 0 && <p className="font-sans text-xs opacity-60">{steps[index + 1].minutes} min</p>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="min-h-0 flex-1 overflow-y-auto px-[6vw] py-[6dvh]">
|
||
{step ? (
|
||
<>
|
||
<StepFace step={step} index={index} total={steps.length} fontSize={fontSize} minutes={step.minutes} note={showNotes ? step.note : ''} />
|
||
{showNotes && step.note && <p className="mx-auto mt-2 max-w-[46em] font-sans text-[11px] uppercase tracking-[0.16em] text-amber-500">Speaker notes are showing on this screen (N to hide)</p>}
|
||
</>
|
||
) : <p className="mt-20 text-center text-lg opacity-70">There’s no outline to present yet. Build one on the Outline page.</p>}
|
||
</div>
|
||
)}
|
||
<div className="flex shrink-0 items-center justify-between gap-3 border-t border-current/15 px-4 py-3">
|
||
<button type="button" onClick={() => go(-1)} disabled={index === 0} className={btn}>← Back</button>
|
||
<span className="text-xs opacity-60">{total ? `${total} min planned` : 'Set minutes on points to see your pace'} · arrows or space to move</span>
|
||
<button type="button" onClick={() => go(1)} disabled={index >= steps.length - 1} className={btn}>Next →</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|