openvibers/openvibe.live Commits

Restream editor: toggles as titled chip groups (Restream / PowerChat overlay), no mid-word wrapping

OP OpenVibers committed 26 Aug 2026 · cee6c68625 · 3 files, +54 −23


Changes

ddiff --git a/public/css/broadcast.css b/public/css/broadcast.css
iindex d287ef06..e67ce586 100644
---- a/public/css/broadcast.css
++++ b/public/css/broadcast.css
@@@ -4164,3 +4164,26 @@
/* PowerChat relay controls: hidden unless the streamer has a connected PowerChat account
(broadcast-workspace.js toggles body.ws-has-powerchat from /powerchat/status). */
body:not(.ws-has-powerchat) .bc-ws-pc-only { display: none !important; }
++
++/* Restream destination editor: toggles as non-wrapping chips in titled groups
++ (they used to be five flex:1 labels in one row, wrapping mid-word). */
++.bc-ws-toggle-group { margin-top: 10px; }
++.bc-ws-toggle-group-title {
++ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
++ color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
++}
++.bc-ws-toggle-group-title i { color: var(--accent); }
++.bc-ws-toggle-grid { display: flex; flex-wrap: wrap; gap: 8px; }
++.bc-ws-toggle-chip {
++ flex: 0 0 auto; white-space: nowrap; gap: 7px;
++ padding: 6px 12px 6px 9px; border-radius: 999px;
++ background: var(--bg-tertiary); border: 1px solid var(--border);
++ font-size: 0.84rem; line-height: 1; transition: border-color .15s ease, background .15s ease;
++}
++.bc-ws-toggle-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
++.bc-ws-toggle-chip:has(input:checked) {
++ background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary));
++ border-color: color-mix(in srgb, var(--accent) 40%, transparent);
++}
++.bc-ws-toggle-chip i { width: auto; font-size: 0.8rem; }
++.bc-ws-toggle-chip input[type="checkbox"] { margin: 0; }
ddiff --git a/public/index.html b/public/index.html
iindex a0447313..7cceaaa6 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -60,7 +60,7 @@
<!-- Stylesheets -->
<link rel="stylesheet" href="/css/style.css?v=135">
<link rel="stylesheet" href="/css/chat-shared.css?v=1">
-- <link rel="stylesheet" href="/css/broadcast.css?v=10">
++ <link rel="stylesheet" href="/css/broadcast.css?v=11">
<link rel="stylesheet" href="/css/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/messenger.css?v=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
@@@ -5034,7 +5034,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig
<script src="/js/broadcast-media-setup.js?v=1" defer></script>
<script src="/js/broadcast-devices.js?v=2" defer></script>
<script src="/js/broadcast-vods.js?v=2" defer></script>
--<script src="/js/broadcast-workspace.js?v=14" defer></script>
++<script src="/js/broadcast-workspace.js?v=15" defer></script>
<script src="/js/broadcast.js?v=26" defer></script>
<script src="/js/call.js?v=3" defer></script>
<script src="/js/voice-channels.js?v=2" defer></script>
ddiff --git a/public/js/broadcast-workspace.js b/public/js/broadcast-workspace.js
iindex fbf849ce..0416253e 100644
---- a/public/js/broadcast-workspace.js
++++ b/public/js/broadcast-workspace.js
@@@ -2914,27 +2914,35 @@ function _wsShowRestreamForm(existing) {
<label>Quality Preset</label>
<select id="ws-rs-quality" class="form-input">${qualityOpts}</select>
</div>
-- <div class="bc-ws-row" style="gap:16px">
-- <label class="bc-toggle-label" style="flex:1">
-- <input type="checkbox" id="ws-rs-enabled" ${existing ? (existing.enabled ? 'checked' : '') : 'checked'}>
-- Enabled
-- </label>
-- <label class="bc-toggle-label" style="flex:1">
-- <input type="checkbox" id="ws-rs-auto-start" ${existing?.auto_start ? 'checked' : ''}>
-- Auto-start
-- </label>
-- <label class="bc-toggle-label" style="flex:1">
-- <input type="checkbox" id="ws-rs-chat-relay" ${existing?.chat_relay ? 'checked' : ''}>
-- <i class="fa-solid fa-comments"></i> Chat Relay
-- </label>
-- <label class="bc-toggle-label bc-ws-pc-only" style="flex:1" title="Forward this platform's relayed chat to your PowerChat overlay (needs Chat Relay)">
-- <input type="checkbox" id="ws-rs-powerchat-relay" ${(!existing || existing.powerchat_relay !== false) ? 'checked' : ''}>
-- <i class="fa-solid fa-bolt"></i> → PowerChat chat
-- </label>
-- <label class="bc-toggle-label bc-ws-pc-only" style="flex:1" title="Include this platform's viewers in the total viewer count sent to PowerChat">
-- <input type="checkbox" id="ws-rs-powerchat-views" ${(!existing || existing.powerchat_count_views !== false) ? 'checked' : ''}>
-- <i class="fa-solid fa-eye"></i> → PowerChat viewers
-- </label>
++ <div class="bc-ws-toggle-group">
++ <div class="bc-ws-toggle-group-title"><i class="fa-solid fa-tower-broadcast"></i> Restream</div>
++ <div class="bc-ws-toggle-grid">
++ <label class="bc-toggle-label bc-ws-toggle-chip">
++ <input type="checkbox" id="ws-rs-enabled" ${existing ? (existing.enabled ? 'checked' : '') : 'checked'}>
++ <span>Enabled</span>
++ </label>
++ <label class="bc-toggle-label bc-ws-toggle-chip">
++ <input type="checkbox" id="ws-rs-auto-start" ${existing?.auto_start ? 'checked' : ''}>
++ <i class="fa-solid fa-bolt"></i><span>Auto-start</span>
++ </label>
++ <label class="bc-toggle-label bc-ws-toggle-chip" title="Mirror this platform's chat into your OpenVibe chat">
++ <input type="checkbox" id="ws-rs-chat-relay" ${existing?.chat_relay ? 'checked' : ''}>
++ <i class="fa-solid fa-comments"></i><span>Chat relay</span>
++ </label>
++ </div>
++ </div>
++ <div class="bc-ws-toggle-group bc-ws-pc-only">
++ <div class="bc-ws-toggle-group-title"><i class="fa-solid fa-wand-magic-sparkles"></i> PowerChat overlay</div>
++ <div class="bc-ws-toggle-grid">
++ <label class="bc-toggle-label bc-ws-toggle-chip" title="Forward this platform's relayed chat to your PowerChat overlay (needs Chat relay)">
++ <input type="checkbox" id="ws-rs-powerchat-relay" ${(!existing || existing.powerchat_relay !== false) ? 'checked' : ''}>
++ <i class="fa-solid fa-comment-dots"></i><span>Send chat</span>
++ </label>
++ <label class="bc-toggle-label bc-ws-toggle-chip" title="Include this platform's viewers in the total viewer count sent to PowerChat">
++ <input type="checkbox" id="ws-rs-powerchat-views" ${(!existing || existing.powerchat_count_views !== false) ? 'checked' : ''}>
++ <i class="fa-solid fa-eye"></i><span>Count viewers</span>
++ </label>
++ </div>
</div>
<details style="margin-top:8px">
<summary style="font-size:0.82rem;color:var(--text-secondary);cursor:pointer"><i class="fa-solid fa-sliders"></i> Custom Encoding Overrides</summary>