openvibers/openvibe.live Commits
Restream editor: toggles as titled chip groups (Restream / PowerChat overlay), no mid-word wrapping
Changes
@@@ -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; }@@@ -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>@@@ -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>
@@ -4164,3 +4164,26 @@
@@ -4164,3 +4164,26 @@
/* PowerChat relay controls: hidden unless the streamer has a connected PowerChat account
/* PowerChat relay controls: hidden unless the streamer has a connected PowerChat account
(broadcast-workspace.js toggles body.ws-has-powerchat from /powerchat/status). */
(broadcast-workspace.js toggles body.ws-has-powerchat from /powerchat/status). */
body:not(.ws-has-powerchat) .bc-ws-pc-only { display: none !important; }
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; }
@@ -60,7 +60,7 @@
@@ -60,7 +60,7 @@
<!-- Stylesheets -->
<!-- Stylesheets -->
<link rel="stylesheet" href="/css/style.css?v=135">
<link rel="stylesheet" href="/css/style.css?v=135">
<link rel="stylesheet" href="/css/chat-shared.css?v=1">
<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/cosmetics.css?v=2">
<link rel="stylesheet" href="/css/messenger.css?v=1">
<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">
<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
@@ -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-media-setup.js?v=1" defer></script>
<script src="/js/broadcast-devices.js?v=2" 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-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/broadcast.js?v=26" defer></script>
<script src="/js/call.js?v=3" defer></script>
<script src="/js/call.js?v=3" defer></script>
<script src="/js/voice-channels.js?v=2" defer></script>
<script src="/js/voice-channels.js?v=2" defer></script>
@@ -2914,27 +2914,35 @@ function _wsShowRestreamForm(existing) {
@@ -2914,27 +2914,35 @@ function _wsShowRestreamForm(existing) {
<label>Quality Preset</label>
<label>Quality Preset</label>
<select id="ws-rs-quality" class="form-input">${qualityOpts}</select>
<select id="ws-rs-quality" class="form-input">${qualityOpts}</select>
</div>
</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>
</div>
<details style="margin-top:8px">
<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>
<summary style="font-size:0.82rem;color:var(--text-secondary);cursor:pointer"><i class="fa-solid fa-sliders"></i> Custom Encoding Overrides</summary>