diff --git a/README.md b/README.md index fae126d..71ef121 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,8 @@ View your teleprompter on **any device** — phone, tablet, or another computer - **Enable in Settings → Remote** — Starts a lightweight HTTP + WebSocket server on your Mac. - **QR code** — Scan the generated QR code from your phone or tablet to open the teleprompter instantly. - **Real-time sync** — Words highlight, waveform animates, and progress updates in real time over WebSocket. +- **Mirror toggle (per device)** — Tap **Mirror** in the remote view to flip horizontally for teleprompter glass. +- **Mirror URL override** — Append `?mirror=1` (mirrored) or `?mirror=0` (normal), for example `http://YOUR-IP:7373?mirror=1`. - **No app needed** — Works in any modern browser. No installation required on the remote device. - **Configurable port** — Default port 7373, adjustable in advanced settings. - **Fully local** — All traffic stays on your local network. Nothing leaves your Wi-Fi. diff --git a/Textream/Textream/BrowserServer.swift b/Textream/Textream/BrowserServer.swift index 9b211fe..e7d8de8 100644 --- a/Textream/Textream/BrowserServer.swift +++ b/Textream/Textream/BrowserServer.swift @@ -359,6 +359,16 @@ class BrowserServer { #mic-dot{width:10px;height:10px;border-radius:50%; background:#facc15;opacity:0;transition:opacity .2s} #mic-dot.on{opacity:1} + #mirror-btn{height:40px;min-width:40px;padding:0 12px;border-radius:20px; + border:0;background:rgba(255,255,255,.15);color:rgba(255,255,255,.75); + display:flex;align-items:center;justify-content:center;gap:6px; + font-size:13px;font-weight:600;line-height:1;cursor:pointer; + transition:background .2s,color .2s} + #mirror-btn .icon{font-size:14px} + #mirror-btn.on{background:rgba(250,204,21,.22);color:#facc15} + + body.mirrored #main,body.mirrored #done{ + transform:scaleX(-1);transform-origin:center} /* Done */ #done{display:none;flex-direction:column;align-items:center; @@ -378,6 +388,8 @@ class BrowserServer { #bar{padding:10px 5% 20px} #waveform{width:160px;height:28px} #text-container{font-size:clamp(28px,calc(100vw / 10),60px)} + #mirror-btn{padding:0 10px;min-width:36px} + #mirror-btn .label{display:none} } @@ -398,6 +410,10 @@ class BrowserServer {
+ @@ -408,7 +424,8 @@ class BrowserServer {