openvibers/openvibe.live Commits

The home banner's go-live area, redesigned: a primary "Go live from your browser" button and a "How it works" button side by side (stacked full width on phones), with what you don't need as one checklist line (no OBS, no downloads, no follower minimum, Chromebook, laptop or phone). The card inside the banner is gone: on phones it wrapped its bolt icon onto a row of its own, leaving a block of empty space, and read as a box inside a box; the loose "How browser streaming works" link is now the second button. The lede is shorter and the chips smaller. openvibe-shared v1.28.1 (from v1.25.0): the account panel keeps its sections' height on phones, no empty space under the footer on phones, async Express handlers' errors reach the error handler (1.27). npm test 149/150, 1 skipped.

OP OpenVibers committed 28 Sept 2026 · a825d8069f · 4 files, +37 −30


Changes

ddiff --git a/package-lock.json b/package-lock.json
iindex 1fd12b13..a401f046 100644
---- a/package-lock.json
++++ b/package-lock.json
@@@ -27,7 +27,7 @@
"onnxruntime-node": "^1.20.0",
"openvibe-contracts": "https://codeload.github.com/OpenVibers/OpenVibe.Contracts/tar.gz/refs/tags/v0.71.0",
"openvibe-sdk": "https://codeload.github.com/OpenVibers/OpenVibe.SDK/tar.gz/refs/tags/v0.16.0",
-- "openvibe-shared": "https://codeload.github.com/OpenVibers/OpenVibe.Shared/tar.gz/refs/tags/v1.25.0",
++ "openvibe-shared": "https://codeload.github.com/OpenVibers/OpenVibe.Shared/tar.gz/refs/tags/v1.28.1",
"sanitize-html": "^2.17.7",
"sdp-transform": "^3.0.0",
"sharp": "^0.33.0",
@@@ -2859,9 +2859,9 @@
}
},
"node_modules/openvibe-shared": {
-- "version": "1.25.0",
-- "resolved": "https://codeload.github.com/OpenVibers/OpenVibe.Shared/tar.gz/refs/tags/v1.25.0",
-- "integrity": "sha512-oqZ+PvljrWi8IEbtg6bDYai17ZV2sALFx/ezMptniELSr10TgFUiGUQt+b1IWwiHv0T2Y1U2iSrkirJxMNgjSw==",
++ "version": "1.28.1",
++ "resolved": "https://codeload.github.com/OpenVibers/OpenVibe.Shared/tar.gz/refs/tags/v1.28.1",
++ "integrity": "sha512-AV39sRi9hm8QETRLM1c6q7nrU8XWPUZzCxZP+h7Cho+LsJ47szHtMk3YdCQHT8+aSC5Hpu68EU8sCvbagR+a0g==",
"license": "MIT",
"dependencies": {
"jsonwebtoken": "^9.0.0"
ddiff --git a/package.json b/package.json
iindex 5158b0f7..1542b447 100644
---- a/package.json
++++ b/package.json
@@@ -46,7 +46,7 @@
"onnxruntime-node": "^1.20.0",
"openvibe-contracts": "https://codeload.github.com/OpenVibers/OpenVibe.Contracts/tar.gz/refs/tags/v0.71.0",
"openvibe-sdk": "https://codeload.github.com/OpenVibers/OpenVibe.SDK/tar.gz/refs/tags/v0.16.0",
-- "openvibe-shared": "https://codeload.github.com/OpenVibers/OpenVibe.Shared/tar.gz/refs/tags/v1.25.0",
++ "openvibe-shared": "https://codeload.github.com/OpenVibers/OpenVibe.Shared/tar.gz/refs/tags/v1.28.1",
"sanitize-html": "^2.17.7",
"sdp-transform": "^3.0.0",
"sharp": "^0.33.0",
ddiff --git a/public/css/features/home.css b/public/css/features/home.css
iindex da68ac62..93e13b0f 100644
---- a/public/css/features/home.css
++++ b/public/css/features/home.css
@@@ -1036,10 +1036,10 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
}
/* The pitch banner: what kind of place this is, before the headline says it. */
--.cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
++.cta-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; }
.cta-chip {
-- display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
-- font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-secondary);
++ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
++ font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-secondary);
background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.cta-chip i { color: var(--accent-light); }
@@@ -1175,19 +1175,23 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
/* Terms · Privacy · DMCA wrap as one group ("DMCA" was stranded alone at 360px). */
.hero-legal { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
--/* The always-visible "Go live from your browser" strip in the home CTA (index.html). */
--.cta-golive { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; padding: 14px 16px; border-radius: 14px;
-- border: 1px solid color-mix(in srgb, var(--accent, #60a5fa) 45%, transparent);
-- background: color-mix(in srgb, var(--accent, #60a5fa) 12%, transparent); color: inherit; text-decoration: none; }
--.cta-golive:hover { background: color-mix(in srgb, var(--accent, #60a5fa) 18%, transparent); }
--.cta-golive > .fa-bolt { font-size: 1.4rem; color: var(--accent, #60a5fa); flex: none; }
--.cta-golive-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
--.cta-golive-text strong { font-size: 1.05rem; }
--.cta-golive-text span { font-size: 0.9rem; opacity: 0.85; }
--.cta-golive-btn { margin-left: auto; flex: none; padding: 8px 16px; border-radius: 999px; font-weight: 700;
-- background: var(--accent, #60a5fa); color: var(--on-accent, #fff); }
--.cta-golive-how { display: inline-block; margin: 0 0 12px; font-size: 0.85rem; opacity: 0.8; }
++/* The always-visible go-live actions in the home CTA (index.html): one primary action, one way to learn more, and
++ what you do not need, on one line each. No card inside the banner (it read as a box in a box on phones). */
++.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 12px; }
++.cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px;
++ border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; transition: filter .15s, background .15s, transform .1s; }
++.cta-btn:active { transform: translateY(1px); }
++.cta-btn-primary { background: var(--accent, #3b82f6); color: var(--on-accent, #fff);
++ box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent); }
++.cta-btn-primary:hover { filter: brightness(1.1); }
++.cta-btn-ghost { color: #e8e6e3; background: rgba(255,255,255,0.04); border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 40%, transparent); }
++.cta-btn-ghost:hover { background: color-mix(in srgb, var(--accent, #3b82f6) 14%, transparent); }
++.cta-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; list-style: none; margin: 0 0 18px; padding: 0;
++ font-size: 0.86rem; color: #bcbab6; }
++.cta-checks i { color: var(--accent-light, #60a5fa); margin-right: 5px; font-size: 0.8em; }
@media (max-width: 520px) {
-- .cta-golive { flex-wrap: wrap; }
-- .cta-golive-btn { margin-left: 0; width: 100%; text-align: center; }
++ .cta-actions { flex-direction: column; align-items: stretch; }
++ .cta-btn { width: 100%; }
++ .cta-checks { gap: 4px 12px; font-size: 0.8rem; }
++}
}
ddiff --git a/public/index.html b/public/index.html
iindex f235254f..59bbacd3 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -371,18 +371,21 @@
</div>
<h2 class="cta-hero">Streaming the way it <span class="cta-hero-grad">should</span> be.</h2>
<p class="cta-lede">
-- OpenVibe.Live is an <strong>open, community-run</strong> streaming platform. It's built here, in public, by people who actually stream and hang out in chat — and the ideas that come up in chat are the ones that get shipped. Say what you think: <strong>free speech, light-touch moderation, no mystery bans</strong>. Underneath it all is a streaming stack with things the big sites just don't have.
++ An <strong>open, community-run</strong> streaming platform, built in public by people who stream and hang out in chat. The ideas from chat are the ones that ship. <strong>Free speech, light-touch moderation, no mystery bans.</strong>
</p>
<!-- Always shown (not behind "See what makes it different"): going live from the browser with
no OBS and no follower minimum is what people search and ask AI assistants for. -->
-- <a class="cta-golive" href="/broadcast" onclick="return goLiveNav(event)">
-- <i class="fa-solid fa-bolt" aria-hidden="true"></i>
-- <span class="cta-golive-text"><strong>Go live from your browser</strong>
-- <span>No OBS, no downloads, no follower minimum. Allow your camera and mic and you're live — on a Chromebook, laptop or phone.</span></span>
-- <span class="cta-golive-btn">Go Live</span>
-- </a>
-- <a class="cta-golive-how" href="/docs/go-live-in-your-browser">How browser streaming works</a>
++ <div class="cta-actions">
++ <a class="cta-btn cta-btn-primary" href="/broadcast" onclick="return goLiveNav(event)"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Go live from your browser</a>
++ <a class="cta-btn cta-btn-ghost" href="/docs/go-live-in-your-browser">How it works</a>
++ </div>
++ <ul class="cta-checks" aria-label="What going live needs">
++ <li><i class="fa-solid fa-check" aria-hidden="true"></i> No OBS</li>
++ <li><i class="fa-solid fa-check" aria-hidden="true"></i> No downloads</li>
++ <li><i class="fa-solid fa-check" aria-hidden="true"></i> No follower minimum</li>
++ <li><i class="fa-solid fa-check" aria-hidden="true"></i> Chromebook, laptop or phone</li>
++ </ul>
<button class="home-about-toggle" type="button" onclick="toggleHomeAbout()" aria-expanded="false" aria-controls="home-about-body">
<span class="home-about-toggle-more"><i class="fa-solid fa-circle-plus"></i> See what makes it different</span>