);
}
// Modal showing the current office
function OfficeModal({ theme, onClose }) {
const cur = currentOffice();
const c = OFFICE_CONTENT[cur.id] || OFFICE_CONTENT.compline;
React.useEffect(() => { try { playSound('page-turn'); } catch(e){} }, []);
return (
℣ {c.versicle}
℟ {c.response}
{c.psalm}
{c.canticle}
The grace of our Lord Jesus Christ, and the love of God, and the fellowship of the Holy Spirit, be with us all evermore.
Amen.
);
}
// ─────────────────────────────────────────────────────────────
// LectionaryModal — full readings as a missal page
// ─────────────────────────────────────────────────────────────
function LectionaryModal({ theme, onClose, reading }) {
const r = LECTIONARY_FULL[reading] || LECTIONARY_FULL.gospel;
return (
{r.body.map((p, i) => (
{i === 0 && }
{i === 0 ? p.slice(1) : p}
))}
);
}
// ─────────────────────────────────────────────────────────────
// SaintRibbon — slim ribbon between season & hero
// ─────────────────────────────────────────────────────────────
function SaintRibbon({ theme }) {
const s = saintToday();
if (!s) return null;
// The saint name links out to a biographical page (Franciscan Media for
// most days, Wikipedia for the Wesleys and Epiphany). Underline only on
// hover so the ribbon stays calm visually; the cursor change makes the
// affordance obvious.
const nameNode = s.link ? (
{ e.currentTarget.style.borderBottomColor = theme.accent; }}
onMouseLeave={(e) => { e.currentTarget.style.borderBottomColor = `${theme.accent}55`; }}
>
{s.name}
) : (
{s.name}
);
return (
★
Today we remember
{nameNode}
);
}
// ─────────────────────────────────────────────────────────────
// softChime — a brief gentle tone played between prayer lines.
// Respects the global soundEnabled flag (so toggling Sounds off in the
// AA panel silences these too) and registers as a "meaningful" sound
// so that any near-simultaneous page-turn yields and stays quiet.
function softChime(freq = 880) {
try {
// Respect the global sound toggle.
let enabled = false;
try {
const s = JSON.parse(localStorage.getItem('mumc.a11y') || '{}');
enabled = !!s.soundEnabled;
} catch (e) {}
if (!enabled) return;
const Ctx = window.AudioContext || window.webkitAudioContext;
if (!Ctx) return;
if (!window.__chimeCtx) window.__chimeCtx = new Ctx();
const ctx = window.__chimeCtx;
if (ctx.state === 'suspended' && ctx.resume) { try { ctx.resume(); } catch (e) {} }
const t = ctx.currentTime;
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(freq, t);
gain.gain.setValueAtTime(0, t);
gain.gain.linearRampToValueAtTime(0.06, t + 0.02);
gain.gain.exponentialRampToValueAtTime(0.0001, t + 1.0);
osc.connect(gain).connect(ctx.destination);
osc.start(t);
osc.stop(t + 1.05);
// Mark a meaningful sound so the ambient page-turn yields.
try { _lastMeaningfulSoundAt = Date.now(); } catch (e) {}
} catch (e) { /* silent — audio is a nice-to-have */ }
}
// ─────────────────────────────────────────────────────────────
// PdfViewerModal — in-page PDF viewer for bulletins (and any other
// PDF the site links to). Uses PDF.js, loaded from a CDN on first
// open. Renders each page as a canvas at the container's width,
// so trifold landscape pages still fit and stay readable. Pinch-zoom
// and panning work natively over the scroll surface.
// ─────────────────────────────────────────────────────────────
// PDF.js 4.x+ handles macOS Quartz PDFs more reliably than 3.x, but only ships
// as ES modules (.mjs). We bypass that by using dynamic import() — wrapped in
// new Function so Babel-standalone (which compiles our JSX in the browser)
// doesn't try to transform the import syntax and break it.
const PDFJS_VERSION = '4.10.38';
const PDFJS_BASE = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS_VERSION}`;
function loadPdfJs() {
if (window.pdfjsLib) return Promise.resolve(window.pdfjsLib);
if (window.__pdfjsLoading) return window.__pdfjsLoading;
window.__pdfjsLoading = (async () => {
try {
const dynImport = new Function('u', 'return import(u)');
const mod = await dynImport(`${PDFJS_BASE}/pdf.min.mjs`);
const lib = mod && mod.getDocument ? mod : (mod && mod.default ? mod.default : mod);
if (lib && lib.GlobalWorkerOptions) {
lib.GlobalWorkerOptions.workerSrc = `${PDFJS_BASE}/pdf.worker.min.mjs`;
}
window.pdfjsLib = lib;
return lib;
} catch (err) {
window.__pdfjsLoading = null; // allow retry on next open
throw err;
}
})();
return window.__pdfjsLoading;
}
function PdfViewerModal({ theme, url, title, onClose }) {
const containerRef = React.useRef(null);
const [status, setStatus] = React.useState('loading'); // loading | ready | error
const [errMsg, setErrMsg] = React.useState('');
const [zoom, setZoom] = React.useState(1);
React.useEffect(() => {
if (!url) return;
let cancelled = false;
setStatus('loading');
setErrMsg('');
(async () => {
try {
const pdfjs = await loadPdfJs();
if (cancelled) return;
const loadingTask = pdfjs.getDocument({ url });
const doc = await loadingTask.promise;
if (cancelled) return;
const container = containerRef.current;
if (!container) return;
container.innerHTML = ''; // wipe any prior render
// Render each page at a width that fits the modal column,
// multiplied by the user-controlled zoom. devicePixelRatio
// keeps text crisp on retina displays without ballooning size.
const targetWidth = (container.clientWidth || 700) * zoom;
const dpr = Math.min(2, window.devicePixelRatio || 1);
for (let i = 1; i <= doc.numPages; i++) {
if (cancelled) return;
const page = await doc.getPage(i);
const baseViewport = page.getViewport({ scale: 1 });
const scale = (targetWidth / baseViewport.width) * dpr;
const viewport = page.getViewport({ scale });
const canvas = document.createElement('canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = (viewport.width / dpr) + 'px';
canvas.style.height = (viewport.height / dpr) + 'px';
canvas.style.maxWidth = '100%';
canvas.style.display = 'block';
canvas.style.margin = '0 auto 14px';
canvas.style.boxShadow = '0 2px 14px rgba(0,0,0,0.25)';
canvas.style.background = '#ffffff';
container.appendChild(canvas);
await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
}
if (!cancelled) setStatus('ready');
} catch (err) {
if (cancelled) return;
console.error('PDF render failed:', err);
setErrMsg(String(err.message || err));
setStatus('error');
}
})();
return () => { cancelled = true; };
}, [url, zoom]);
return (
);
}
// ─────────────────────────────────────────────────────────────
// PrayWithUs — Lord's Prayer at a meditative cadence, then this
// week's Prayer of the Day, then close.
// ─────────────────────────────────────────────────────────────
const LORDS_PRAYER = [
'Our Father, who art in heaven,',
'hallowed be thy Name.',
'Thy kingdom come,',
'thy will be done,',
'on earth as it is in heaven.',
'Give us this day our daily bread.',
'And forgive us our trespasses,',
'as we forgive those who trespass against us.',
'And lead us not into temptation,',
'but deliver us from evil.',
'For thine is the kingdom,',
'and the power, and the glory,',
'for ever and ever.',
'Amen.',
];
function PrayWithUsModal({ theme, onClose }) {
const [phase, setPhase] = React.useState('lords'); // 'lords' | 'collect'
const [idx, setIdx] = React.useState(0);
const [paused, setPaused] = React.useState(false);
// Note: softChime() on mount (below) already provides the audio cue
// when the modal opens — no page-turn needed here, that would stack.
// Pull this week's Collect (the Prayer of the Day) — auto-changes by Sunday.
const [collect] = React.useState(() => {
try { return (typeof getCollect === 'function') ? getCollect() : null; } catch (e) { return null; }
});
// Auto-advance through the Lord's Prayer; on the last line, transition
// to the Collect phase after a short pause.
React.useEffect(() => {
if (phase !== 'lords' || paused) return;
if (idx >= LORDS_PRAYER.length - 1) {
if (!collect || !collect.text) return;
const t = setTimeout(() => setPhase('collect'), 4200);
return () => clearTimeout(t);
}
const t = setTimeout(() => {
softChime(idx % 2 === 0 ? 880 : 660);
setIdx(i => i + 1);
}, 3800);
return () => clearTimeout(t);
}, [idx, paused, phase, collect]);
// Initial chime on mount (gracefully no-ops if AudioContext is blocked).
React.useEffect(() => { softChime(880); }, []);
// Soft chime on phase change to mark the transition.
React.useEffect(() => { if (phase === 'collect') softChime(550); }, [phase]);
const restart = () => { setPhase('lords'); setIdx(0); setPaused(false); };
if (phase === 'collect' && collect) {
return (
{collect.name && (
{collect.name}
)}
{collect.text} Amen.
);
}
return (
{LORDS_PRAYER.map((line, i) => {
const dist = Math.abs(i - idx);
if (dist > 2) return null;
// Progressive blur on non-current lines so they recede behind the
// line being prayed and stop competing visually. Current line is
// crisp; adjacent line is softly out of focus; two-away is mostly
// ghost. Combined with opacity dimming, the eye lands cleanly on
// the present moment of the prayer.
const blur = dist === 0 ? 0 : (dist === 1 ? 1.4 : 3.0);
const opacity = dist === 0 ? 1 : (dist === 1 ? 0.45 : 0.18);
return (
);
}
// ─────────────────────────────────────────────────────────────
// YearWheel — circular liturgical year
// ─────────────────────────────────────────────────────────────
// Brief explanations of each arc on the Year Wheel. These render in a
// small modal when a visitor taps a season — quietly catechetical, not
// a treatise. Each has a one-line subtitle and a short paragraph.
const YEAR_WHEEL_INFO = {
advent: {
name: 'Advent',
subtitle: 'Holy waiting · the four weeks before Christmas',
color: 'Violet (or royal blue)',
body: 'Advent — from the Latin adventus, "coming" — is the four-week season of expectation that begins the Christian year. It looks both backward to the prophets who longed for Messiah and forward to Christ\'s return at the end of all things. The mood is one of holy waiting, watchful prayer, and quiet preparation.',
},
christmas: {
name: 'Christmas',
subtitle: 'The Twelve Days of the Incarnation',
color: 'White and gold',
body: 'Christmas is the twelve-day feast of the Incarnation — God taking on human flesh in the child of Bethlehem. The season begins at sundown on Christmas Eve and runs through Epiphany Eve. The mood is one of joy, song, and wonder, the kind that settles into the bones of a household.',
},
epiphany: {
name: 'Epiphany',
subtitle: 'The light of Christ revealed to the world',
color: 'Green (Sundays after Epiphany), white for the feasts',
body: 'Epiphany — Greek for "manifestation" — celebrates the revelation of Christ to the world. The season opens with the visit of the Magi, includes Jesus\' baptism in the Jordan and the Transfiguration on the mountain, and runs until Lent. The mood is light dawning over a darkened earth.',
},
lent: {
name: 'Lent',
subtitle: 'Forty days of repentance and the Cross',
color: 'Violet (or sackcloth)',
body: 'Lent — from Old English lencten, "lengthening of days" — is the forty-day journey of repentance, prayer, and self-examination leading to Easter. Modeled on Christ\'s forty days in the wilderness, the season calls Christians to prayer, fasting, and almsgiving. The Sundays of Lent are not counted in the forty days; they remain little Easters in the midst of the fast.',
},
easter: {
name: 'Easter',
subtitle: 'The Great Fifty Days of resurrection joy',
color: 'White and gold',
body: 'Easter is not a single day but a Great Fifty Days — the most ancient and central feast of the Christian year. From the Vigil of Easter through Ascension Day to Pentecost, the Church celebrates Christ\'s victory over death. The mood is alleluia, recovered after the long silence of Lent.',
},
pentecost_day: {
name: 'Pentecost',
subtitle: 'The day the Spirit fell · birthday of the Church',
color: 'Red',
body: 'Pentecost — from Greek pentēkostḗ, "fiftieth" — is the great feast of the Holy Spirit, when the Spirit descended on the apostles in tongues of fire and the Church was born from the upper room. It is sometimes called "the birthday of the Church." After this day the long green season of growth begins.',
},
pentecost: {
name: 'Season after Pentecost',
subtitle: 'The long green season of growth',
color: 'Green',
body: 'The long season after Pentecost is the longest stretch of the Christian year — also known as Ordinary Time, though there is nothing ordinary about it. It is the season of growth: of living the resurrection life, of teaching, of building up the body of Christ, of doing the patient work of the gospel between the high feasts of redemption and the eschaton.',
},
reign: {
name: 'The Reign of Christ',
subtitle: 'Christ the King · the last Sunday before Advent',
color: 'White and gold',
body: 'The Reign of Christ — also called Christ the King Sunday — is the final Sunday of the Christian year. Established in 1925 and adopted across Western Christianity, it proclaims the sovereignty of Christ over all peoples and powers, and points forward to the consummation of all things in him. The next Sunday begins Advent, and the year turns again.',
},
};
function YearWheelSeasonModal({ theme, info, onClose }) {
return (
{info.body}
Liturgical color
{info.color}
);
}
function YearWheel({ theme, size = 280 }) {
const r = size / 2;
const cx = r, cy = r;
const [selected, setSelected] = React.useState(null);
// Compute actual liturgical season boundaries for the current year.
// Falls back to a static approximation if the helper isn't loaded.
let seasons = null;
let todayPct = 0;
let labelYears = '';
try {
if (typeof getLiturgicalSeasons === 'function') {
seasons = getLiturgicalSeasons();
todayPct = seasons.today;
labelYears = `${seasons.startYear} — ${seasons.endYear}`;
}
} catch (e) { /* fall through */ }
if (!seasons) {
// Approximate fallback when the helper isn't loaded
seasons = {
advent: { from: 0, to: 0.07 },
christmas: { from: 0.07, to: 0.10 },
epiphany: { from: 0.10, to: 0.22 },
lent: { from: 0.22, to: 0.35 },
easter: { from: 0.35, to: 0.50 },
pentecost: { from: 0.50, to: 0.97 },
reign: { from: 0.97, to: 1 },
};
labelYears = String(new Date().getFullYear());
}
// Arc order goes clockwise from the top: Advent at 12 o'clock,
// running through the year and ending with Christ the King.
// Pentecost Day gets a small red wedge between Easter and the long
// green Season-after-Pentecost arc — same visual width as Reign.
// Each arc carries an `info` key for the modal lookup. The thin red
// Pentecost-Day wedge has no label but is clickable.
const arcs = [
{ ...seasons.advent, name: 'Advent', col: '#3a2858', info: 'advent' },
{ ...seasons.christmas, name: 'Christmas', col: '#b8893d', info: 'christmas' },
{ ...seasons.epiphany, name: 'Epiphany', col: '#4a7042', info: 'epiphany' },
{ ...seasons.lent, name: 'Lent', col: '#4a3858', info: 'lent' },
{ ...seasons.easter, name: 'Easter', col: '#a87838', info: 'easter' },
seasons.pentecostDay && { ...seasons.pentecostDay, name: '', col: '#9a2828', info: 'pentecost_day' },
{ ...seasons.pentecost, name: 'Pentecost', col: '#3a5a3a', info: 'pentecost' },
{ ...seasons.reign, name: 'Reign', col: '#c8983d', info: 'reign' },
].filter(Boolean);
const polar = (pct, radius) => {
const a = pct * Math.PI * 2 - Math.PI / 2;
return [cx + Math.cos(a) * radius, cy + Math.sin(a) * radius];
};
const arcPath = (from, to, ri, ro) => {
const [x1, y1] = polar(from, ri);
const [x2, y2] = polar(to, ri);
const [x3, y3] = polar(to, ro);
const [x4, y4] = polar(from, ro);
const large = (to - from) > 0.5 ? 1 : 0;
return `M${x1} ${y1} A${ri} ${ri} 0 ${large} 1 ${x2} ${y2} L${x3} ${y3} A${ro} ${ro} 0 ${large} 0 ${x4} ${y4} Z`;
};
const ri = r - 56, ro = r - 14;
const [tx, ty] = polar(todayPct, (ri + ro) / 2);
// Render labels for nearly all arcs; very thin ones get a smaller font.
const minLabelArc = 0.012;
const tightLabelArc = 0.04;
return (
<>
{/* Tap hint — shown subtly below the wheel so visitors discover the affordance */}
↳ Tap a season to learn more
{selected && YEAR_WHEEL_INFO[selected] && (
setSelected(null)}
/>
)}
);
}
// ─────────────────────────────────────────────────────────────
// ModalShell — full-screen modal with paper texture and close
// ─────────────────────────────────────────────────────────────
function ModalShell({ theme, onClose, title, subtitle, children }) {
return (
{subtitle &&
{subtitle}
}
{title}
{children}
);
}
// ─────────────────────────────────────────────────────────────
// NotificationOptIn — request permission and subscribe to push.
//
// Flow:
// 1. Detect feature support (Notification, ServiceWorker, PushManager).
// If any are missing — fail quietly, render nothing. We don't want to
// tease users on browsers that don't support web push (looking at you,
// iOS Safari before 16.4 / non-PWA installs).
// 2. On mount, fetch /api/config to learn the VAPID public key. If push
// isn't configured server-side yet, render nothing.
// 3. Show a small card. If already subscribed, show "You're subscribed"
// and an unsubscribe link. Otherwise, show "Get reminders".
// 4. Click → request permission → subscribe via SW → POST to /api/subscribe.
// ─────────────────────────────────────────────────────────────
function NotificationOptIn({ theme }) {
const [supported, setSupported] = React.useState(false);
const [vapidKey, setVapidKey] = React.useState(null);
const [permission, setPermission] = React.useState(
typeof Notification !== 'undefined' ? Notification.permission : 'default'
);
const [subscribed, setSubscribed] = React.useState(false);
const [busy, setBusy] = React.useState(false);
const [error, setError] = React.useState('');
// Detect support + load VAPID key + check existing subscription
React.useEffect(() => {
let cancelled = false;
const ok = typeof window !== 'undefined'
&& 'serviceWorker' in navigator
&& 'PushManager' in window
&& 'Notification' in window;
if (!ok) return;
(async () => {
try {
const res = await fetch('/api/config');
if (!res.ok) return;
const cfg = await res.json();
if (cancelled) return;
if (!cfg.vapidPublicKey) return;
setVapidKey(cfg.vapidPublicKey);
setSupported(true);
const reg = await navigator.serviceWorker.ready;
const existing = await reg.pushManager.getSubscription();
if (!cancelled && existing) setSubscribed(true);
} catch (_) { /* render nothing */ }
})();
return () => { cancelled = true; };
}, []);
if (!supported || !vapidKey) return null;
const urlBase64ToUint8Array = (b64) => {
const padding = '='.repeat((4 - b64.length % 4) % 4);
const base64 = (b64 + padding).replace(/-/g, '+').replace(/_/g, '/');
const raw = atob(base64);
const out = new Uint8Array(raw.length);
for (let i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i);
return out;
};
const subscribe = async () => {
setBusy(true); setError('');
try {
const perm = await Notification.requestPermission();
setPermission(perm);
if (perm !== 'granted') {
setError(perm === 'denied'
? 'Notifications are blocked. You can enable them in your browser settings.'
: 'Notifications were not enabled.');
setBusy(false);
return;
}
const reg = await navigator.serviceWorker.ready;
let sub = await reg.pushManager.getSubscription();
if (!sub) {
sub = await reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(vapidKey),
});
}
const res = await fetch('/api/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub.toJSON()),
});
if (!res.ok) throw new Error(`Subscribe failed (${res.status})`);
setSubscribed(true);
softChime(880);
} catch (e) {
setError(String(e.message || e));
} finally {
setBusy(false);
}
};
const unsubscribe = async () => {
setBusy(true); setError('');
try {
const reg = await navigator.serviceWorker.ready;
const sub = await reg.pushManager.getSubscription();
if (sub) {
await fetch('/api/subscribe', {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ endpoint: sub.endpoint }),
}).catch(() => {});
await sub.unsubscribe();
}
setSubscribed(false);
} catch (e) {
setError(String(e.message || e));
} finally {
setBusy(false);
}
};
return (
<>
† Stay close
A gentle note on Sundays.
Allow notifications and we’ll send a quiet reminder before service, and the occasional word of welcome from the church on the corner. No spam, ever — only what matters.
{!subscribed && (
)}
{subscribed && (
You’re subscribed. Peace be with you.
)}
{error && (
{error}
)}
);
}
// ─────────────────────────────────────────────────────────────
// HymnOfTheWeek — small card on the home page; opens HymnModal
// when tapped. Hymn rotates weekly by liturgical season.
// ─────────────────────────────────────────────────────────────
function HymnOfTheWeekCard({ theme, onOpen }) {
const hymn = (typeof getHymnOfWeek === 'function') ? getHymnOfWeek() : null;
if (!hymn) return null;
// First line of first stanza, used as a teaser
const firstLine = (hymn.stanzas && hymn.stanzas[0] || '').split('\n')[0];
return (
);
}
// HymnModal — full text of the week's hymn, with audio link or embedded
// player. The audio field can be a hymnary.org URL (opens in new tab) or
// a local /assets/hymns/*.mp3 path (renders as an