Tour + VOD audio UX fixes (v0.1.7)

CHANGELOG.md

@@ -8,6 +8,27 @@ All notable changes will land here. Format loosely follows
 
 Nothing yet.
 
+## [0.1.7] - Tour + VOD audio UX fixes
+
+**App tour overlay step updated.** The tour bubble for the Overlay tab
+said "Picks one of 6 built-in overlay styles" - that was the old UI
+before Overlay Studio shipped. It now describes what's actually there:
+browse the gallery, preview overlays in any delay state (Idle / Arming /
+Ready / Active), copy the URL into OBS as a Browser Source, and hit
+**+ New overlay** to open Overlay Studio for a full visual editor.
+Hand-written `.html` files in the overlays folder still show up
+automatically.
+
+**VOD audio has a setup guide and a clearer warning.** Enabling VOD
+audio requires switching OBS to Custom RTMP mode first, but that step
+was easy to miss. A collapsible "How to set this up in OBS" guide now
+sits inside the toggle - five steps covering Service: Custom..., ingest
+URL from the OBS tab, Advanced output mode, the VOD Track checkbox under
+Streaming, and the apply-then-restart sequence. A separate warning line
+also flags that OBS must be closed before saving: the config file can't
+be updated while OBS holds it open, so the setting won't take effect
+until the next OBS launch.
+
 ## [0.1.6] - Overlay flow: one list, copy a URL
 
 Reworks the Overlay tab around a single idea: **everything is just an
@@ -881,5 +902,7 @@ See `0.1.0` below for the full feature list.
   port pre-flight, and process / RSS sampler have Windows-specific paths.
 - No automated release pipeline yet. Build from source per the README.
 
-[Unreleased]: https://github.com/Soulhackzlol/InstantClone/compare/v0.1.0...HEAD
+[Unreleased]: https://github.com/Soulhackzlol/InstantClone/compare/v0.1.7...HEAD
+[0.1.7]: https://github.com/Soulhackzlol/InstantClone/compare/v0.1.6...v0.1.7
+[0.1.6]: https://github.com/Soulhackzlol/InstantClone/compare/v0.1.0...v0.1.6
 [0.1.0]: https://github.com/Soulhackzlol/InstantClone/releases/tag/v0.1.0

Cargo.toml

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

web/index.html

@@ -1331,6 +1331,19 @@ <h4 id="dest-form-title">New destination</h4>
             <b style="color:var(--warn,#d6a23a)">Disables Enhanced Broadcasting</b> (the transcoded quality ladder) unless you use the experimental Launch button below.
             Requires switching OBS to <b>Custom RTMP</b> + enabling the VOD Track checkbox in OBS Output settings.
           </div>
+          <div style="margin-top:6px;font-size:11px;color:var(--warn,#d6a23a);display:flex;align-items:center;gap:5px">
+            <span>⚠</span> Close OBS before saving - the config file can't be updated while OBS is running. Changes take effect on the next OBS launch.
+          </div>
+          <details style="margin-top:8px">
+            <summary style="font-size:11px;color:var(--fg-3);cursor:pointer;user-select:none">How to set this up in OBS</summary>
+            <ol style="margin:7px 0 0;padding-left:16px;font-size:11px;line-height:1.7;color:var(--fg-2)">
+              <li><b>Settings → Stream</b> - set Service to <b>Custom...</b></li>
+              <li>Set Server to the ingest URL from the <b>OBS tab</b>, Stream Key to <code class="mono" style="font-size:10.5px">main</code></li>
+              <li><b>Settings → Output</b> - set Output Mode to <b>Advanced</b></li>
+              <li>Under the <b>Streaming</b> tab, enable the <b>VOD Track</b> checkbox</li>
+              <li>Hit <b>Apply</b>, close OBS, then save this destination and reopen OBS</li>
+            </ol>
+          </details>
         </div>
       </label>
       <div id="dest-form-vod-eb-wrap" hidden style="margin-top:10px;padding:10px;border:1px dashed color-mix(in oklch,var(--err) 32%,var(--line));border-radius:8px;background:color-mix(in oklch,var(--err) 3%,var(--bg-2))">
@@ -4110,7 +4123,7 @@ <h4 id="dest-form-title">New destination</h4>
     let level='Lightweight', cls='ok';
     if(fs>=2 || n>10 || anim>8){ level='Moderate'; cls='warn'; }
     if(fs>=3 || n>16){ level='Heavy'; cls='err'; }
-    el.textContent=level; el.className='st-perf '+cls; el.title=n+' widgets · '+fs+' full-screen · '+anim+' animated — runs in OBS browser source';
+    el.textContent=level; el.className='st-perf '+cls; el.title=n+' widgets · '+fs+' full-screen · '+anim+' animated - runs in OBS browser source';
   }
   function setStateOffset(axis,v){ const w=widget(sel); const sp=ensureState(); if(!sp.offset) sp.offset={x:w.offset.x,y:w.offset.y}; sp.offset[axis]=parseInt(v,10)||0; softRebake(); }
   function resetStateOffset(){ const sp=ensureState(); delete sp.offset; softRebake(); renderProps(); }
@@ -4366,10 +4379,10 @@ <h4 id="dest-form-title">New destination</h4>
   },
   {
     target: '.tab[data-tab="overlay"]', side: 'bottom', tab: 'overlay',
-    title: 'Overlay browser-source',
+    title: 'Overlay Studio',
     body: `
-      <p>Picks one of <b>6 built-in overlay styles</b> (Minimal, Corner, Strip, Focus, Broadcast, Ticker) for OBS to display the live delay on screen. All six share one design language - they differ in position and density, not aesthetic - and auto-dim when nothing's happening so they don't snag the viewer's eye.</p>
-      <p>Drop your own <code>.html</code> file into the overlays folder and it shows up here automatically - fully customisable.</p>
+      <p>Pick a built-in overlay from the gallery, preview it in any delay state (Idle / Arming / Ready / Active), and copy its URL straight into OBS as a Browser Source. Each overlay auto-dims when nothing's happening so it doesn't compete for attention.</p>
+      <p>Hit <b>+ New overlay</b> to open <b>Overlay Studio</b> - a visual editor where you can design your own overlay from scratch, tweak colours, layout, and widgets, then save it back to the gallery. Hand-written <code>.html</code> files dropped into the overlays folder still appear here automatically.</p>
     `,
   },
   {