Overlay flow rework: one list, copy a URL (v0.1.6)

.gitignore

@@ -23,5 +23,12 @@ Thumbs.db
 .DS_Store
 desktop.ini
 
+# Studio + seeded overlays are generated per-install at runtime (the
+# dashboard bakes the built-in presets on first run). Only the shipped
+# hand-write example is tracked; everything else here is local.
+overlays/*.html
+!overlays/custom-template.html
+overlays/*/
+
 # Misc
 *.log

CHANGELOG.md

@@ -8,6 +8,80 @@ All notable changes will land here. Format loosely follows
 
 Nothing yet.
 
+## [0.1.6] - Overlay flow: one list, copy a URL
+
+Reworks the Overlay tab around a single idea: **everything is just an
+overlay with a URL you copy into OBS.**
+
+**One list, presets pre-installed.** The old preset / editable / legacy
+split (and its type filter) is gone. On first run the built-in presets
+are baked to real overlay files, so they show up in the same list as
+anything you make - each with a working URL, no hidden "materialize on
+copy" step. A one-time `overlays_seeded` flag keeps deleted presets from
+reappearing.
+
+**Three real actions.** Per overlay: **Copy URL**, **Edit in Studio**,
+**Duplicate**, **Delete** (hand-written legacy files: Copy URL + Delete).
+The standalone "Open Studio" button is replaced by **+ New overlay**. In
+the Studio, save is now two clear buttons: **Save** (overwrite) and
+**Save as new**.
+
+**Auto-hide as a quick toggle.** A per-overlay **Auto-hide when live**
+switch; turning it off appends `?autohide=off` to the copied URL so the
+overlay stays up, no re-bake. The per-state control in the Studio remains
+the baked default.
+
+**Restore defaults.** A button (and the factory reset) wipes your Studio
+overlays and reinstalls the built-in set, with a confirmation that says
+so plainly. Legacy hand-written files are left untouched.
+
+**Legacy overlays retired.** The bundled `minimal` / `corner` / `strip`
+hand-written overlays are removed (superseded by the Studio presets); the
+startup no longer drops them. Serving still works - any `.html` you put in
+`overlays/` is served, and the older `/overlay?style=…` URLs still render.
+The `custom-template.html` hand-write example stays.
+
+**Calmer graph meter.** The line widget now smooths its signal (a
+**Smoothing** slider, on by default) and floors its vertical scale, so a
+steady stream reads as a calm line instead of amplifying tiny jitter into
+a full-height sawtooth - while a real drop still swings the whole graph.
+
+**One-click updates.** When the About tab finds a newer release, an
+**Update** button now does it for you: download the new build, verify it
+against the release's published SHA-256, swap it in, and relaunch - your
+settings, destinations, and overlays are kept. Updating stays optional,
+and the manual download link is still there for anyone who prefers it (or
+when antivirus blocks the swap). Saving settings also shows an in-flight
+state and reports network failures instead of silently doing nothing.
+
+**Effects you can tune.** Liquid fill gained real controls - **Fill level**
+(follow the buffer or a fixed %), **Wave**, **Speed**, and **Smoothness** -
+instead of a hardwired behavior. Heartbeat gained **Speed**; the buffer bar
+and ring gained **Smoothness**. Untuned widgets look exactly as before.
+
+**Studio preview stays in sync.** Editing a setting now re-arms all auto-hide
+timers together immediately (a brief "synced" tag confirms it), instead of
+drifting until the next preview cycle. The **theme colour picker** also no
+longer slams shut the moment you drag the hue.
+
+**Auto-hide exits actually animate.** When a widget hid after its delay, it
+used to just blink out regardless of the chosen exit (fade / slide / pop):
+the browser collapsed the animation-stop and the fade into one frame and
+skipped the transition. The exit now plays its full animation. The Studio
+preview also adapts its replay timing so a hide longer than 5 s plays its
+exit instead of looking like it never fires.
+
+**Unsaved overlay changes are guarded.** The Studio's Save button shows a dot
+when there are unsaved edits, and leaving (Back, switching tabs, or closing
+the page) now asks before discarding them.
+
+**Restart from the dashboard.** The "restart required" banner (and the
+About tab) now has a **Restart now** button that relaunches the app and
+reconnects the dashboard on its own, instead of asking you to find and
+relaunch the exe by hand. **Show in Explorer** buttons on the Buffer and
+Diagnostics sections open the buffer file, trace log, and overlays folder
+straight in Explorer for troubleshooting.
+
 ## [0.1.5] - Overlay Studio (experimental)
 
 A no-code visual editor for building OBS browser-source overlays that

CONTRIBUTING.md

@@ -20,7 +20,7 @@ Open a [Discussion](https://github.com/Soulhackzlol/InstantClone/discussions). I
 ## Stuff I'd love help with
 
 - Cross-platform support (macOS, Linux). The code is mostly portable; [tray.rs](src/tray.rs), [portcheck.rs](src/portcheck.rs), and [sysstat.rs](src/sysstat.rs) have Windows-specific paths that need parallel implementations.
-- New overlay styles. Drop new `.html` files into [overlays/](overlays/) and they're served automatically.
+- New overlay presets + Studio widgets. Built-in overlays are the `PRESETS` in [web/overlay-runtime.js](web/overlay-runtime.js) (the dashboard seeds them on first run); new widgets/animations live in the same file. A hand-written `.html` dropped into [overlays/](overlays/) is still served as-is.
 - Real-world bug reports from streaming with the proxy in the loop.
 
 ## Probably not

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "instantclone"
-version = "0.1.5"
+version = "0.1.6"
 edition = "2021"
 authors = ["s1moscs"]
 license = "GPL-3.0-only"

README.es.md

@@ -186,15 +186,13 @@ Un panel de 280×340 con el indicador, los controles de armar/activar/desarmar/c
 
 ### Overlays como browser-source
 
-Mete uno como browser-source para mostrar el delay en directo:
+La pestaña **Overlay** es un Studio sin código. Elige un overlay ya hecho, copia su URL y métela en OBS — o abre cualquiera en el Studio para rediseñarlo (colores por estado, widgets, animaciones) y darle a **Save** o **Save as new**.
 
-<pre><code>http://127.0.0.1:7799/overlay?style=corner&amp;lang=es</code></pre>
+<pre><code>http://127.0.0.1:7799/overlay/whisper.html</code></pre>
 
-<sub><b>Estilos</b></sub> &nbsp;`minimal` · `corner` · `strip` · `focus` · `broadcast` · `ticker`
+<sub><b>¿Sin configurar?</b></sub> &nbsp;Los estilos rápidos de siempre siguen funcionando desde la URL: <code>/overlay?style=corner&amp;lang=es</code> &nbsp;<sub>(`minimal · corner · strip · focus · broadcast · ticker`, idiomas `en · es · pt · fr · de`)</sub>
 
-<sub><b>Idiomas</b></sub> &nbsp;`en` · `es` · `pt` · `fr` · `de`
-
-Suelta cualquier `.html` en `./overlays/` y se sirve en `/overlay/tu-archivo.html`.
+O suelta cualquier `.html` en `./overlays/` y se sirve en `/overlay/tu-archivo.html`.
 
 </td>
 </tr>

README.md

@@ -186,15 +186,13 @@ A 280×340 panel with the readout, arm / activate / disarm / cut controls, and l
 
 ### Browser-source overlays
 
-Drop one in as a browser-source for an on-stream readout:
+The **Overlay** tab is a no-code Studio. Pick a ready-made overlay, copy its URL, and drop it into OBS — or open any in the Studio to redesign it (per-state colours, widgets, animations) and **Save** or **Save as new**.
 
-<pre><code>http://127.0.0.1:7799/overlay?style=corner&amp;lang=es</code></pre>
+<pre><code>http://127.0.0.1:7799/overlay/whisper.html</code></pre>
 
-<sub><b>Styles</b></sub> &nbsp;`minimal` · `corner` · `strip` · `focus` · `broadcast` · `ticker`
+<sub><b>No setup?</b></sub> &nbsp;The older quick styles still work straight from a URL: <code>/overlay?style=corner&amp;lang=es</code> &nbsp;<sub>(`minimal · corner · strip · focus · broadcast · ticker`, langs `en · es · pt · fr · de`)</sub>
 
-<sub><b>Languages</b></sub> &nbsp;`en` · `es` · `pt` · `fr` · `de`
-
-Drop any `.html` into `./overlays/` and it's served at `/overlay/your-file.html`.
+Or drop any `.html` into `./overlays/` and it's served at `/overlay/your-file.html`.
 
 </td>
 </tr>

overlays/README.md

@@ -1,14 +1,24 @@
-# InstantClone overlay plugins
+# InstantClone overlays
 
-Drop any `.html` file into this folder and it becomes an OBS browser-source
-overlay. The dashboard's *Overlay* tab lists everything in here next to the
-six built-in styles, and gives you the URL to paste into OBS:
+On-stream browser-source widgets that show your delay state.
 
-    http://127.0.0.1:7799/overlay/your-file.html?lang=en
+Most people never touch this folder. The dashboard's **Overlay** tab is a
+no-code **Studio**: it ships with ready-made overlays you copy a URL from
+and drop into OBS, and you can open any of them to redesign (per-state
+colours, widgets, animations) and **Save** or **Save as new**. The
+built-in overlays are baked to real files in this folder on first run, so
+everything you see in the tab is a plain `.html` with its own URL:
+
+    http://127.0.0.1:7799/overlay/your-file.html
+
+You can still hand-write one: any `.html` you drop in here shows up in the
+Overlay tab as a "legacy" (hand-written) overlay. The only contract is the
+URL above and the `/state` JSON below.
 
 ## What the proxy will tell you
 
-Every overlay can fetch live state from `GET /state`:
+Every overlay can fetch live state from `GET /state` (or subscribe to the
+`GET /events` SSE stream, which pushes the same JSON on every change):
 
     {
       "phase": "idle" | "preparing" | "ready" | "active",
@@ -20,8 +30,7 @@ Every overlay can fetch live state from `GET /state`:
       "egress_alive":     <bool>,  // at least one destination forwarding
       "destinations_alive": <u32>,
       "destinations_total": <u32>,
-      "bitrate_kbps":     <u32>,   // ingest bitrate
-      "stats": { "tags_sent", "bytes_sent", "cuts" }
+      "stats": { "tags_sent", "bytes_sent", "cuts", "bitrate_kbps" }
     }
 
 Typical poll loop:
@@ -37,15 +46,20 @@ Typical poll loop:
       tick(); setInterval(tick, 500);
     </script>
 
-## Starting points
+## Writing your own
 
-- **`custom-template.html`** - copy this. It's a small working overlay
+- **Easiest:** the Studio. Pick an overlay in the Overlay tab, **Edit in
+  Studio**, then **Save** (overwrite) or **Save as new**.
+- **By hand:** copy **`custom-template.html`** - a small working overlay
   with comments explaining every part of the contract above. Rename the
-  copy to whatever you want; it'll appear in the dashboard.
-- **The six built-in styles** (`minimal`, `corner`, `strip`, `focus`,
-  `broadcast`, `ticker`) are served from `/overlay?style=…` and live in
-  [`src/web.rs`](../src/web.rs)'s `overlay_html()`. Open one in DevTools
-  if you want to crib the auto-dim, number-tween, or phase-halo
-  behaviour into your own design.
-
-The only contract is the URL above and the `/state` JSON.
+  copy to whatever you want; it appears in the Overlay tab.
+- **No file at all:** the legacy quick styles still work straight from a
+  URL - `/overlay?style=minimal|corner|strip|focus|broadcast|ticker` with
+  an optional `?lang=en|es|pt|fr|de`. They live in
+  [`src/web.rs`](../src/web.rs)'s `overlay_html()`; open one in DevTools to
+  crib the auto-dim, number-tween, or phase-halo behaviour.
+
+> The Studio's built-in overlays are seeded once and then yours to edit or
+> delete; **Restore default overlays** (in the Overlay tab) reinstalls
+> them. Seeded/Studio overlays are local, per-install files and aren't
+> tracked in git - only the hand-written ones here are.