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.
Changes
@@@ -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"@@@ -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",@@@ -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; }++}}@@@ -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 withno 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>
@@ -27,7 +27,7 @@
@@ -27,7 +27,7 @@
"onnxruntime-node": "^1.20.0",
"onnxruntime-node": "^1.20.0",
"openvibe-contracts": "https://codeload.github.com/OpenVibers/OpenVibe.Contracts/tar.gz/refs/tags/v0.71.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-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",
"sanitize-html": "^2.17.7",
"sdp-transform": "^3.0.0",
"sdp-transform": "^3.0.0",
"sharp": "^0.33.0",
"sharp": "^0.33.0",
@@ -2859,9 +2859,9 @@
@@ -2859,9 +2859,9 @@
}
}
},
},
"node_modules/openvibe-shared": {
"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",
"license": "MIT",
"dependencies": {
"dependencies": {
"jsonwebtoken": "^9.0.0"
"jsonwebtoken": "^9.0.0"
@@ -46,7 +46,7 @@
@@ -46,7 +46,7 @@
"onnxruntime-node": "^1.20.0",
"onnxruntime-node": "^1.20.0",
"openvibe-contracts": "https://codeload.github.com/OpenVibers/OpenVibe.Contracts/tar.gz/refs/tags/v0.71.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-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",
"sanitize-html": "^2.17.7",
"sdp-transform": "^3.0.0",
"sdp-transform": "^3.0.0",
"sharp": "^0.33.0",
"sharp": "^0.33.0",
@@ -1036,10 +1036,10 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
@@ -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. */
/* 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 {
.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);
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); }
.cta-chip i { color: var(--accent-light); }
@@ -1175,19 +1175,23 @@ body.egg-rainbow { animation: eggRainbow 2.6s linear; }
@@ -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). */
/* 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; }
.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) {
@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; }
+}
}
}
@@ -371,18 +371,21 @@
@@ -371,18 +371,21 @@
</div>
</div>
<h2 class="cta-hero">Streaming the way it <span class="cta-hero-grad">should</span> be.</h2>
<h2 class="cta-hero">Streaming the way it <span class="cta-hero-grad">should</span> be.</h2>
<p class="cta-lede">
<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>
</p>
<!-- Always shown (not behind "See what makes it different"): going live from the browser with
<!-- 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. -->
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">
<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>
<span class="home-about-toggle-more"><i class="fa-solid fa-circle-plus"></i> See what makes it different</span>