christianandClaude Opus 5.5
e1f541d366
Every key on the app's keyboard takes focus from the page for a moment and gives it back, so the site's focus ring (a 2px blue outline on the search box, and a brighter border) flashed with each letter. Outline rings are turned off with the page's clean-up CSS, and the guest preload strips outline, border and box-shadow from the site's own :focus / :focus-within / :focus-visible rules, keeping anything else those rules do. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
82 lines
5.3 KiB
Markdown
82 lines
5.3 KiB
Markdown
# Browser tab
|
||
|
||
One web page, full screen in the tab: no address bar, bookmarks, scrollbars or focus highlights — just the page, in the
|
||
same area the Graphics tab uses. It loads when the app starts and keeps running while other tabs are
|
||
showing, so it is ready the moment it is opened. Built for It Is Written
|
||
(`https://it-is-written-waters-church.vercel.app/`), but any web page works.
|
||
|
||
## On the stage
|
||
|
||
| Do this | What happens |
|
||
|---|---|
|
||
| Drag a finger | The page scrolls. |
|
||
| Tap a text box on the page | The app's own keyboard (the Prayer tab's) comes up right under the box (above it if the box is near the bottom of the screen — the stage TV is portrait) and types into it. Enter submits and puts the keyboard away; it also goes away when the page moves on. × closes it; tap the box again to bring it back. |
|
||
| Tap a scripture reference (e.g. "Isaiah 41:10") | It opens in a new Bible tab, at that verse, in the translation printed beside it (NIV, ESV…) when that translation is switched on. |
|
||
| Tap anything else | Works on the page as normal. |
|
||
| Leave the tab and come back | The page is exactly as it was: same search, same place, same typing. |
|
||
|
||
Pen, highlighter, laser and spotlight are off on this tab (the page takes every touch — that is how it
|
||
scrolls and is typed into), as on Graphics and Maps. Touches on the page keep the idle splash away, and
|
||
five fingers still blank the screen.
|
||
|
||
**If the page gets stuck or a tap wanders off the site:** the ⟳ refresh button puts it back on its start
|
||
page (along with the rest of the app), or use Companion / the admin console below.
|
||
|
||
## Settings › Browser Tab
|
||
|
||
- **Start page** — the page the tab opens. Blank = It Is Written. Changing it takes the tab there.
|
||
- **Page size** — Auto lays the page out like a tablet and scales it to fill the width (about 200% on the
|
||
portrait TV). Pick a percentage if a site looks too small or too big.
|
||
- **Tap a scripture reference…** — on by default.
|
||
- **Return to the start page** — the tab remembers where it was while the app runs (so a trip to Settings
|
||
does not lose a search); this clears that.
|
||
|
||
All three settings travel with **Service Profiles**, so each service type can have its own start page.
|
||
The tab can be hidden in **Tab Visibility** like any other, and more can be opened from the **+** menu.
|
||
|
||
## From Companion, the phone and the admin console
|
||
|
||
| | |
|
||
|---|---|
|
||
| OSC `/bibleapp/browser` | Show the Browser tab |
|
||
| OSC `/bibleapp/browser/reload` | Reload the page |
|
||
| OSC `/bibleapp/browser/home` | Back to the start page |
|
||
| Feedback `/bibleapp/feedback/state/tab_kind/browser` | `1` while it is showing |
|
||
| Information line | `4/10 Browser \| hope \| LIVE` — the page's search term (or title) |
|
||
|
||
The **phone remote** shows the page in its TV view: tap to press things on it, drag (one finger or two)
|
||
to scroll, and the page buttons move it a screen at a time. The **admin console** can show the tab,
|
||
reload it, send it home, and change the start page and page size.
|
||
|
||
The **follower screen** shows the same page, clean, and follows its scroll, typing and anything opened on
|
||
it. It is fed the stage's copy of the page rather than loading the site itself — loading it would re-run
|
||
the search and could put different results on the program feed.
|
||
|
||
## How it works
|
||
|
||
- **Stage:** each Browser tab is an Electron `<webview>` — Chrome's engine in its own sandboxed process
|
||
and its own session (`persist:browser-tab`, so a site's settings and sign-ins survive restarts).
|
||
`main.cjs` forces its settings: no Node, sandboxed, only http(s), no new windows (links that would open
|
||
one open in place), no permission prompts, no downloads, no pinch-zoom, no dialog boxes, and "Leave
|
||
site?" can never block Reload or Start page.
|
||
- **The pages live in their own layer** (`#browserTabHost`) inside `.tab-content`. Every tab switch
|
||
rebuilds `.tab-content`, and moving or recreating a webview reloads its page, so app.js clears around
|
||
that layer (`clearTabContentKeepingBrowser`) and switching tabs only shows or hides it.
|
||
- **`browser-guest-preload.cjs`** runs inside the page (invisible to the site) and reports what the app
|
||
cannot see from outside: a tapped text field, a tapped reference (found with the app's own
|
||
`scripture-scan.js` — the same rules ProPresenter Sync uses), scroll, activity, five fingers, and — only
|
||
while a follower is linked — a script-free copy of the page's DOM. It also takes the look (outline,
|
||
border, glow) out of the site's focus styles: every key on the app's keyboard takes focus from the page
|
||
for a moment, so a focus highlight would flash with each letter typed.
|
||
- **`browser-tab.js`** owns the tab: the pages, the keyboard (via `createPrayerKeyboard` with a "sink"),
|
||
scripture taps, scrolling for the phone / OSC / admin, and the follower's copy. On the follower it
|
||
shows that copy in sandboxed frames (no scripts); in a plain browser (admin offstage copy, `npm start`)
|
||
it shows the live page in an iframe — keyboard and scripture taps need the stage.
|
||
|
||
## Limits worth knowing
|
||
|
||
- The follower's copy is the page's DOM, not video: anything drawn by script into a `<canvas>`, and
|
||
script-driven animation, will not move there. Whatever computer shows the follower screen needs to reach the site's fonts
|
||
and images over the internet, as the stage does.
|
||
- In a plain browser (admin offstage copy) some sites refuse to be shown inside another page.
|